@verdocs/web-sdk 5.0.17 → 5.0.19

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 const Icons = require('./Icons-9a6f2f7c.js');
-const Datastore = require('./Datastore-4448f6ef.js');
+const Datastore = require('./Datastore-931fd77e.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;

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

@@ -6,7 +6,7 @@ const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 const utils = require('./utils-746daf30.js');
 const errors = require('./errors-017fb835.js');
-const Datastore = require('./Datastore-4448f6ef.js');
+const Datastore = require('./Datastore-931fd77e.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
 require('./format-dc0f3757.js');

package/dist/cjs/verdocs-menu-panel_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 const errors = require('./errors-017fb835.js');
-const Datastore = require('./Datastore-4448f6ef.js');
+const Datastore = require('./Datastore-931fd77e.js');
 
 const verdocsMenuPanelCss = "@-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-menu-panel-overlay{top:0;left:0;width:100%;height:100%;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.4980392157)}#verdocs-menu-panel{opacity:0;z-index:10001;position:fixed;overflow-y:scroll;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-animation:showVerdocsMenuPanel 0.35s;-webkit-animation-fill-mode:forwards}@-webkit-keyframes showVerdocsMenuPanel{0%{opacity:0;right:-300px}100%{right:0;opacity:1}}";
 const VerdocsMenuPanelStyle0 = verdocsMenuPanelCss;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 const errors = require('./errors-017fb835.js');
-const Datastore = require('./Datastore-4448f6ef.js');
+const Datastore = require('./Datastore-931fd77e.js');
 const Toast = require('./Toast-d84d7bd3.js');
 const Icons = require('./Icons-9a6f2f7c.js');
 const format = require('./format-dc0f3757.js');
@@ -3585,7 +3585,7 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const verdocsTemplateRolesCss = "@-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-roles{display:block;max-width:600px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles .roles{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;margin-top:10px}verdocs-template-roles .roles .sequence{gap:10px;height:34px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;font-weight:500;padding:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;border-bottom:1px dotted #e3e3e3}verdocs-template-roles .roles .sequence.add-sequence{color:#777777;line-height:34px}verdocs-template-roles .roles .sequence-label{font-size:18px;line-height:32px}verdocs-template-roles .roles .sequence-roles{gap:10px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-wrap:wrap;flex-wrap:wrap;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .roles .role{height:32px;cursor:move;display:-ms-flexbox;display:flex;max-width:200px;position:relative;border-radius:32px;background-color:#eff7fb;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 14px 0 34px;border:1px solid #ccc;-ms-flex-direction:column;flex-direction:column}verdocs-template-roles .roles .role .role-name{font-size:14px;overflow:hidden;font-weight:400;line-height:30px;white-space:nowrap;text-overflow:ellipsis}verdocs-template-roles .roles .role .icons{position:absolute;left:1px;top:-3px;cursor:pointer;padding:5px;z-index:10}verdocs-template-roles .roles .role .icons .gear-button{display:none;-webkit-transform:scale(1.1);transform:scale(1.1);margin:4px 0 0 1px}verdocs-template-roles .roles .role .icons .type-icon{opacity:0.6;display:block;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-roles .roles .role .icons:hover .gear-button{display:block}verdocs-template-roles .roles .role .icons:hover .type-icon{display:none}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.3;cursor:pointer;background:none;-webkit-transform:scale(0.75);transform:scale(0.75)}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:16px;height:16px;stroke:#666666;margin-bottom:2px;display:inline-block}verdocs-template-roles .sequence-roles{display:-ms-flexbox;display:flex}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
+const verdocsTemplateRolesCss = "@-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-roles{display:block;max-width:600px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles .roles{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;margin-top:10px}verdocs-template-roles .roles .sequence{gap:10px;height:34px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;font-weight:500;padding:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;border-bottom:1px dotted #e3e3e3}verdocs-template-roles .roles .sequence.add-sequence{color:#777777;line-height:34px}verdocs-template-roles .roles .sequence-label{font-size:18px;line-height:32px}verdocs-template-roles .roles .sequence-roles{gap:10px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-wrap:wrap;flex-wrap:wrap;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .roles .role{height:32px;cursor:move;display:-ms-flexbox;display:flex;max-width:200px;position:relative;border-radius:32px;background-color:#eff7fb;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 14px 0 34px;border:1px solid #ccc;-ms-flex-direction:column;flex-direction:column}verdocs-template-roles .roles .role .role-name{font-size:14px;overflow:hidden;font-weight:400;line-height:30px;white-space:nowrap;text-overflow:ellipsis}verdocs-template-roles .roles .role .icons{position:absolute;left:1px;top:-3px;cursor:pointer;padding:5px;z-index:10}verdocs-template-roles .roles .role .icons .gear-button{display:none;-webkit-transform:scale(1.1);transform:scale(1.1);margin:4px 0 0 1px}verdocs-template-roles .roles .role .icons .type-icon{opacity:0.6;display:block;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-roles .roles .role .icons:hover .gear-button{display:block}verdocs-template-roles .roles .role .icons:hover .type-icon{display:none}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0 0 0 -8px;padding:0;border:none;opacity:0.3;cursor:pointer;background:none;-webkit-transform:scale(0.75);transform:scale(0.75)}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:16px;height:16px;stroke:#666666;margin-bottom:2px;display:inline-block}verdocs-template-roles .sequence-roles{display:-ms-flexbox;display:flex}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
 const VerdocsTemplateRolesStyle0 = verdocsTemplateRolesCss;
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="#00000089"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
@@ -3601,6 +3601,7 @@ const VerdocsTemplateRoles = class {
         this.sdkError = index$1.createEvent(this, "sdkError", 7);
         this.rolesUpdated = index$1.createEvent(this, "rolesUpdated", 7);
         this.templateListenerId = null;
+        this.sortableRefs = [];
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = '';
         this.showingRoleDialog = null;
@@ -3611,6 +3612,7 @@ const VerdocsTemplateRoles = class {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
+        this.cleanupSortables();
     }
     async listenToTemplate() {
         console.log('[ROLES] Loading template', this.templateId);
@@ -3630,7 +3632,6 @@ const VerdocsTemplateRoles = class {
     async componentWillLoad() {
         var _a, _b, _c;
         try {
-            jsSdk.VerdocsEndpoint.getDefault().setBaseURL('https://api.verdocs.com');
             this.endpoint.loadSession();
             if (!this.templateId) {
                 console.log(`[ROLES] Missing required template ID ${this.templateId}`);
@@ -3647,13 +3648,18 @@ const VerdocsTemplateRoles = class {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
+    cleanupSortables() {
+        this.sortableRefs.forEach(sr => sr.destroy());
+        this.sortableRefs.length = 0;
+    }
     componentDidRender() {
+        this.cleanupSortables();
         // Existing sequence numbers
         const sequenceNumbers = this.getSequenceNumbers();
         (sequenceNumbers || []).forEach(sequence => {
             const el = document.getElementById(`verdocs-roles-sequence-${sequence}`);
             if (el) {
-                new Sortable(el, {
+                const sortable = new Sortable(el, {
                     group: 'roles',
                     animation: 150,
                     dragoverBubble: true,
@@ -3662,11 +3668,13 @@ const VerdocsTemplateRoles = class {
                     onChoose: () => (this.dragging = true),
                     onUnchoose: () => (this.dragging = false),
                 });
+                this.sortableRefs.push(sortable);
             }
         });
         const el = document.getElementById(`verdocs-roles-sequence-add-target`);
         if (el) {
-            new Sortable(el, {
+            console.log('[ROLES] Applying sortable to add-sequence slot');
+            const sortable = new Sortable(el, {
                 group: 'roles',
                 animation: 150,
                 dragoverBubble: true,
@@ -3675,6 +3683,7 @@ const VerdocsTemplateRoles = class {
                 onChoose: () => (this.dragging = true),
                 onUnchoose: () => (this.dragging = false),
             });
+            this.sortableRefs.push(sortable);
         }
     }
     handleMoveEnd(evt) {
@@ -3711,15 +3720,9 @@ const VerdocsTemplateRoles = class {
                 }
             });
         });
-        // When renumbering, we don't try to update the store for every individual item
-        // changing. We just do it once at the end.
-        console.log(`[ROLES] Awaiting ${renumberRequests.length} renumber requests`, renumberRequests);
-        return Promise.all(renumberRequests).then(async () => {
-            const newTemplate = JSON.parse(JSON.stringify(this.template));
-            newTemplate.roles = Object.keys(sortableRoles).reduce((acc, seq) => acc.concat(sortableRoles[seq]), []);
-            await Datastore.Store.getTemplate(this.endpoint, this.templateId, true);
-            // Store.updateTemplate(this.templateId, newTemplate);
-        });
+        return Promise.all(renumberRequests)
+            .then(async () => console.log('[ROLES] Done renumbering'))
+            .catch(e => console.log('[ROLES] Error updating roles', e));
     }
     handleCancel() {
         var _a;
@@ -3857,7 +3860,7 @@ const VerdocsTemplateRoles = class {
         const sequences = this.getSequenceNumbers();
         const nextSequence = sequences && sequences.length > 0 ? (sequences[sequences.length - 1] || 0) + 1 : 1;
         // style={{backgroundColor: getRGBA(getRoleIndex(this.template, role.name))}}
-        return (index$1.h(index$1.Host, { class: { dragging: this.dragging } }, index$1.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index$1.h("h5", null, "Roles and Workflow"), index$1.h("div", { class: "roles" }, sequences.map((sequence, index) => (index$1.h("div", { class: "sequence" }, index$1.h("div", { class: "sequence-label no-drag" }, index + 1, "."), index$1.h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
+        return (index$1.h(index$1.Host, { class: { dragging: this.dragging } }, index$1.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index$1.h("h5", null, "Roles and Workflow"), index$1.h("div", { class: "roles" }, sequences.map((sequence, index) => (index$1.h("div", { class: "sequence" }, console.log('Rendering sequence', sequence, index, this.getRolesAtSequence(sequence)), index$1.h("div", { class: "sequence-label no-drag" }, index + 1, "."), index$1.h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
             const unknown = !role.email || !role.first_name || !role.last_name;
             return unknown ? (index$1.h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index$1.h("div", { class: "role-name" }, role.name), index$1.h("div", { class: "icons" }, index$1.h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), index$1.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover })))) : (index$1.h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index$1.h("div", { class: "role-name" }, jsSdk.formatFullName(role)), index$1.h("div", { class: "icons" }, index$1.h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), index$1.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }))));
         })), index$1.h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) })))), index$1.h("div", { class: "sequence add-sequence" }, index$1.h("div", { class: "sequence-label no-drag" }, sequences.length + 1, "."), index$1.h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-add-target`, "data-sequence": nextSequence }), index$1.h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, nextSequence) }))), roleNames.length < 1 && (index$1.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index$1.h("br", null), " Click the ", index$1.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index$1.h("div", { class: "buttons" }, index$1.h("div", { class: "flex-fill" }), index$1.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index$1.h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index$1.h("verdocs-menu-panel", { onClose: () => (this.showingRoleDialog = null) }, index$1.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {