@verdocs/web-sdk 1.12.13 → 1.12.14

package/dist/cjs/verdocs-button-panel_3.cjs.entry.js

@@ -43,39 +43,35 @@ const VerdocsButtonPanel = class {
     }
   }
   async showPanel() {
-    if (!this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    this.showing = true;
+    this.hiderEl = document.createElement('div');
+    this.hiderEl.style.zIndex = '100';
+    this.hiderEl.style.position = 'absolute';
+    this.hiderEl.style.top = '0px';
+    this.hiderEl.style.left = '0px';
+    this.hiderEl.style.right = '0px';
+    this.hiderEl.style.bottom = '0px';
+    this.hiderEl.onclick = (e) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+    document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    console.log('Hiding panel', this.showing);
-    if (this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    this.showing = false;
   }
   async toggle() {
-    var _a, _b, _c, _d;
     if (this.showing) {
-      (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-      (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
-      this.showing = false;
+      await this.hidePanel();
     }
     else {
-      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
-      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
-      this.showing = true;
-      this.hiderEl = document.createElement('div');
-      this.hiderEl.style.zIndex = '100';
-      this.hiderEl.style.position = 'absolute';
-      this.hiderEl.style.top = '0px';
-      this.hiderEl.style.left = '0px';
-      this.hiderEl.style.right = '0px';
-      this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => {
-        e.stopPropagation();
-        this.toggle();
-      };
-      document.body.appendChild(this.hiderEl);
+      await this.showPanel();
     }
   }
   render() {
@@ -199,18 +195,18 @@ const VerdocsTemplateFieldProperties = class {
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     Fields.updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      templateStore.state.fields.forEach(field => {
+      const field = templateStore.state.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })

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

@@ -2615,7 +2615,7 @@ const VerdocsFieldDate = class {
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const settings = utils.getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
@@ -2623,7 +2623,7 @@ const VerdocsFieldDate = class {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? index$1.format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return index.h(index.Host, { class: { done: this.done } }, formatted);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/cjs/verdocs-template-create_2.cjs.entry.js

@@ -200,7 +200,9 @@ const VerdocsTemplateFields = class {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', templateStore.state.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', utils.getRoleIndex(templateStore.state.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -331,9 +333,10 @@ const VerdocsTemplateFields = class {
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (templateStore.state.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, templateStore.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -37,39 +37,35 @@ export class VerdocsButtonPanel {
     }
   }
   async showPanel() {
-    if (!this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    this.showing = true;
+    this.hiderEl = document.createElement('div');
+    this.hiderEl.style.zIndex = '100';
+    this.hiderEl.style.position = 'absolute';
+    this.hiderEl.style.top = '0px';
+    this.hiderEl.style.left = '0px';
+    this.hiderEl.style.right = '0px';
+    this.hiderEl.style.bottom = '0px';
+    this.hiderEl.onclick = (e) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+    document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    console.log('Hiding panel', this.showing);
-    if (this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    this.showing = false;
   }
   async toggle() {
-    var _a, _b, _c, _d;
     if (this.showing) {
-      (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-      (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
-      this.showing = false;
+      await this.hidePanel();
     }
     else {
-      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
-      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
-      this.showing = true;
-      this.hiderEl = document.createElement('div');
-      this.hiderEl.style.zIndex = '100';
-      this.hiderEl.style.position = 'absolute';
-      this.hiderEl.style.top = '0px';
-      this.hiderEl.style.left = '0px';
-      this.hiderEl.style.right = '0px';
-      this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => {
-        e.stopPropagation();
-        this.toggle();
-      };
-      document.body.appendChild(this.hiderEl);
+      await this.showPanel();
     }
   }
   render() {

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js

@@ -54,7 +54,7 @@ export class VerdocsFieldDate {
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
@@ -62,7 +62,7 @@ export class VerdocsFieldDate {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -97,18 +97,18 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      TemplateStore.fields.forEach(field => {
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -99,7 +99,9 @@ export class VerdocsTemplateFields {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', TemplateStore.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -230,9 +232,10 @@ export class VerdocsTemplateFields {
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (TemplateStore.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, TemplateStore.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.

package/dist/components/verdocs-button-panel2.js

@@ -31,39 +31,35 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
   }
   async showPanel() {
-    if (!this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    this.showing = true;
+    this.hiderEl = document.createElement('div');
+    this.hiderEl.style.zIndex = '100';
+    this.hiderEl.style.position = 'absolute';
+    this.hiderEl.style.top = '0px';
+    this.hiderEl.style.left = '0px';
+    this.hiderEl.style.right = '0px';
+    this.hiderEl.style.bottom = '0px';
+    this.hiderEl.onclick = (e) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+    document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    console.log('Hiding panel', this.showing);
-    if (this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    this.showing = false;
   }
   async toggle() {
-    var _a, _b, _c, _d;
     if (this.showing) {
-      (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-      (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
-      this.showing = false;
+      await this.hidePanel();
     }
     else {
-      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
-      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
-      this.showing = true;
-      this.hiderEl = document.createElement('div');
-      this.hiderEl.style.zIndex = '100';
-      this.hiderEl.style.position = 'absolute';
-      this.hiderEl.style.top = '0px';
-      this.hiderEl.style.left = '0px';
-      this.hiderEl.style.right = '0px';
-      this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => {
-        e.stopPropagation();
-        this.toggle();
-      };
-      document.body.appendChild(this.hiderEl);
+      await this.showPanel();
     }
   }
   render() {

package/dist/components/verdocs-field-date.js

@@ -2615,7 +2615,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
@@ -2623,7 +2623,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/components/verdocs-template-field-properties2.js

@@ -108,18 +108,18 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      state.fields.forEach(field => {
+      const field = state.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })

package/dist/components/verdocs-template-fields2.js

@@ -106,7 +106,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', state.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -237,9 +239,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (state.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-13T15:19:02",
+  "timestamp": "2023-03-13T15:41:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",

package/dist/esm/verdocs-button-panel_3.entry.js

@@ -39,39 +39,35 @@ const VerdocsButtonPanel = class {
     }
   }
   async showPanel() {
-    if (!this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    this.showing = true;
+    this.hiderEl = document.createElement('div');
+    this.hiderEl.style.zIndex = '100';
+    this.hiderEl.style.position = 'absolute';
+    this.hiderEl.style.top = '0px';
+    this.hiderEl.style.left = '0px';
+    this.hiderEl.style.right = '0px';
+    this.hiderEl.style.bottom = '0px';
+    this.hiderEl.onclick = (e) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+    document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    console.log('Hiding panel', this.showing);
-    if (this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    this.showing = false;
   }
   async toggle() {
-    var _a, _b, _c, _d;
     if (this.showing) {
-      (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-      (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
-      this.showing = false;
+      await this.hidePanel();
     }
     else {
-      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
-      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
-      this.showing = true;
-      this.hiderEl = document.createElement('div');
-      this.hiderEl.style.zIndex = '100';
-      this.hiderEl.style.position = 'absolute';
-      this.hiderEl.style.top = '0px';
-      this.hiderEl.style.left = '0px';
-      this.hiderEl.style.right = '0px';
-      this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => {
-        e.stopPropagation();
-        this.toggle();
-      };
-      document.body.appendChild(this.hiderEl);
+      await this.showPanel();
     }
   }
   render() {
@@ -195,18 +191,18 @@ const VerdocsTemplateFieldProperties = class {
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      state.fields.forEach(field => {
+      const field = state.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })

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

@@ -2611,7 +2611,7 @@ const VerdocsFieldDate = class {
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
@@ -2619,7 +2619,7 @@ const VerdocsFieldDate = class {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/esm/verdocs-template-create_2.entry.js

@@ -196,7 +196,9 @@ const VerdocsTemplateFields = class {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', state.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -327,9 +329,10 @@ const VerdocsTemplateFields = class {
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (state.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.

package/dist/esm-es5/verdocs-button-panel_3.entry.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,o,i){function r(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,n){function s(e){try{a(i.next(e))}catch(e){n(e)}}function l(e){try{a(i["throw"](e))}catch(e){n(e)}}function a(e){e.done?o(e.value):r(e.value).then(s,l)}a((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,s;return s={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function l(e){return function(t){return a([e,t])}}function a(s){if(i)throw new TypeError("Generator is already executing.");while(o)try{if(i=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;r=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(n=o.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){o.label=s[1];break}if(s[0]===6&&o.label<n[1]){o.label=n[1];n=s;break}if(n&&o.label<n[2]){o.label=n[2];o.ops.push(s);break}if(n[2])o.ops.pop();o.trys.pop();continue}s=t.call(e,o)}catch(e){s=[6,e];r=0}finally{i=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,o){if(o||arguments.length===2)for(var i=0,r=t.length,n;i<r;i++){if(n||!(i in t)){if(!n)n=Array.prototype.slice.call(t,0,i);n[i]=t[i]}}return e.concat(n||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,c as createEvent,a as getElement}from"./index-e64d45e2.js";import{c as createPopper}from"./popper-f860750c.js";import{u as updateField,d as deleteField}from"./Fields-c82e6df3.js";import{V as VerdocsEndpoint}from"./VerdocsEndpoint-6ec36985.js";import{s as state}from"./templateStore-5cb73464.js";import{l as loadTemplate}from"./Templates-f8a6628a.js";import{S as SDKError}from"./errors-9b5498c8.js";import"./Token-54690789.js";import"./index-24fd1580.js";import"./Primitives-054bc6e5.js";import"./Templates-8e4ab976.js";var verdocsButtonPanelCss='verdocs-button-panel{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}';var VerdocsButtonPanel=function(){function e(e){registerInstance(this,e);this.showing=false;this.icon=""}e.prototype.componentDidRender=function(){document.body.appendChild(this.panelEl);if(this.popperInstance){this.popperInstance.destroy()}this.popperInstance=createPopper(this.iconEl,this.panelEl,{})};e.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.panelEl){this.panelEl.remove()}};e.prototype.showPanel=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!!this.showing)return[3,2];return[4,this.toggle()];case 1:e.sent();e.label=2;case 2:return[2]}}))}))};e.prototype.hidePanel=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:console.log("Hiding panel",this.showing);if(!this.showing)return[3,2];return[4,this.toggle()];case 1:e.sent();e.label=2;case 2:return[2]}}))}))};e.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,o,i;var r=this;return __generator(this,(function(n){if(this.showing){(e=this.panelEl)===null||e===void 0?void 0:e.removeAttribute("data-show");(t=this.hiderEl)===null||t===void 0?void 0:t.remove();this.showing=false}else{(o=this.panelEl)===null||o===void 0?void 0:o.setAttribute("data-show","");(i=this.popperInstance)===null||i===void 0?void 0:i.update().catch((function(){}));this.showing=true;this.hiderEl=document.createElement("div");this.hiderEl.style.zIndex="100";this.hiderEl.style.position="absolute";this.hiderEl.style.top="0px";this.hiderEl.style.left="0px";this.hiderEl.style.right="0px";this.hiderEl.style.bottom="0px";this.hiderEl.onclick=function(e){e.stopPropagation();r.toggle()};document.body.appendChild(this.hiderEl)}return[2]}))}))};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"icon",innerHTML:this.icon,onClick:function(t){t.stopPropagation();return e.toggle()},ref:function(t){return e.iconEl=t}}),h("div",{role:"tooltip",class:"verdocs-button-panel-content","data-popper-placement":"bottom",ref:function(t){return e.panelEl=t}},h("div",{"data-popper-arrow":"true",class:"arrow"}),h("slot",null)))};return e}();VerdocsButtonPanel.style=verdocsButtonPanelCss;var verdocsSelectInputCss='verdocs-select-input{font-family:"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;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 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-element:focus{border:1px solid #7d88ff}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}';var VerdocsSelectInput=function(){function e(e){registerInstance(this,e);this.value="";this.label="";this.options=undefined;this.disabled=false}e.prototype.render=function(){var e=this;return h(Host,{class:"input-field"},h("label",null,this.label?h("div",{class:"input-label"},this.label+":"):h("div",null),h("select",{class:"input-element",disabled:this.disabled},this.options.map((function(t){return h("option",{value:t.value,selected:t.value===e.value},t.label)})))))};return e}();VerdocsSelectInput.style=verdocsSelectInputCss;var verdocsTemplateFieldPropertiesCss='verdocs-template-field-properties{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;font-size:16px;font-weight:bold;margin:0 0 8px 0;color:#092c4c}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}';var TrashIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>';var VerdocsTemplateFieldProperties=function(){function e(e){registerInstance(this,e);this.close=createEvent(this,"close",7);this.delete=createEvent(this,"delete",7);this.settingsChanged=createEvent(this,"settingsChanged",7);this.sdkError=createEvent(this,"sdkError",7);this.endpoint=VerdocsEndpoint.getDefault();this.templateId="";this.fieldName="";this.dirty=false;this.loading=true;this.type="signature";this.setting=null;this.name="";this.roleName="";this.required=false;this.options=[];this.placeholder="";this.defaultValue=""}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,o,i,r,n,s;var l=this;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,2,,3]);this.endpoint.loadSession();if(!this.templateId){console.error("[FIELD PROPERTIES] Missing required template ID");return[2]}if(!this.fieldName){console.error("[FIELD PROPERTIES] Missing required field name");return[2]}if(!this.endpoint.session){console.error("[FIELD PROPERTIES] Unable to start builder session, must be authenticated");return[2]}return[4,loadTemplate(this.endpoint,this.templateId)];case 1:a.sent();n=state.fields.find((function(e){return e.name===l.fieldName}));if(!n){console.log('[FIELD PROPERTIES] Unable to find field "'.concat(this.fieldName,'" in template'))}this.type=n.type;this.name=n.name;this.roleName=n.role_name;this.required=n.required;this.placeholder=n.label;this.defaultValue=((e=n.setting)===null||e===void 0?void 0:e.value)||"";this.setting=n.setting||{};this.options=((t=n.setting)===null||t===void 0?void 0:t.options)||[];this.dirty=false;this.loading=false;return[3,3];case 2:s=a.sent();console.log("[FIELD PROPERTIES] Error loading template",s);this.loading=false;(o=this.sdkError)===null||o===void 0?void 0:o.emit(new SDKError(s.message,(i=s.response)===null||i===void 0?void 0:i.status,(r=s.response)===null||r===void 0?void 0:r.data));return[3,3];case 3:return[2]}}))}))};e.prototype.handleCancel=function(e){var t=this;var o,i;e.stopPropagation();var r=state.fields.find((function(e){return e.name===t.fieldName}));console.log("hc",e,r);if(r){this.name=r.name;this.roleName=r.role_name;this.required=r.required;this.placeholder=r.label;this.defaultValue=((o=r.setting)===null||o===void 0?void 0:o.result)||""}this.dirty=false;(i=this.close)===null||i===void 0?void 0:i.emit()};e.prototype.handleSave=function(e){var t=this;e.stopPropagation();var o={name:this.name,required:this.required,role_name:this.roleName};if(this.type==="checkbox_group"||this.type==="radio_button_group"){o.setting=this.setting;o.setting.options=this.options}else if(this.type==="dropdown"){o.setting={x:this.setting.x,y:this.setting.y,options:this.options}}console.log("np",this.required,o);updateField(this.endpoint,this.templateId,this.fieldName,o).then((function(){var e,o;t.dirty=false;state.fields.forEach((function(e){e.name=t.name;e.role_name=t.roleName;e.required=t.required;e.label=t.placeholder;e.setting.result=t.defaultValue}));(e=t.settingsChanged)===null||e===void 0?void 0:e.emit({fieldName:t.fieldName});(o=t.close)===null||o===void 0?void 0:o.emit()})).catch((function(){console.log("Field update failed",e)}))};e.prototype.handleDelete=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(o){e.stopPropagation();if(window.confirm("Are you sure you wish to remove this field? This action cannot be undone.")){deleteField(this.endpoint,this.templateId,this.fieldName).then((function(e){var o;console.log("Field deleted",e);state.fields=__spreadArray([],state.fields.filter((function(e){return e.name!==t.fieldName})),true);state.template.roles.forEach((function(e){e.fields=__spreadArray([],e.fields.filter((function(e){return e.name!==t.fieldName})),true)}));(o=t.delete)===null||o===void 0?void 0:o.emit({templateId:t.templateId,roleName:t.roleName})})).catch((function(e){console.log("Deletion error",e)}))}return[2]}))}))};e.prototype.render=function(){var e=this;if(!this.endpoint.session){return h(Host,null,h("verdocs-component-error",{message:"You must be authenticated to use this module."}))}if(!this.endpoint.session||!state.template){return h(Host,{class:"empty"})}return h(Host,null,h("h6",null,"Field Settings"),h("form",{onSubmit:function(e){return e.preventDefault()},onClick:function(e){return e.stopPropagation()},autocomplete:"off"},h("div",{class:"row"},h("verdocs-text-input",{id:"verdocs-field-name",label:"Field Name",value:this.name,autocomplete:"off",helpText:"The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key.",placeholder:"Field Name...",onInput:function(t){e.name=t.target.value;e.dirty=true}})),h("div",{class:"row"},h("div",{class:"input-label"},"Role:"),h("verdocs-select-input",{value:this.roleName,options:state.template.roles.map((function(e){return{label:e.name,value:e.name}})),onInput:function(t){e.roleName=t.target.value;e.dirty=true}}),h("verdocs-help-icon",{text:"The participant who will complete this field."})),["textbox","textarea"].includes(this.type)&&h("verdocs-text-input",{id:"verdocs-field-placeholder",label:"Placeholder",value:this.name,autocomplete:"off",helpText:"Placeholder to display if the field is empty.",placeholder:"Placeholder...",onInput:function(t){e.placeholder=t.target.value;e.dirty=true}}),h("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px"}},h("label",{htmlFor:"verdocs-is-required",class:"input-label"},"Required"),h("verdocs-checkbox",{id:"verdocs-is-required",name:"is-required",checked:this.required,value:"on",onInput:function(t){e.required=t.target.checked;e.dirty=true}})),["dropdown"].includes(this.type)&&h("div",{class:"options"},h("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px",textAlign:"center",fontWeight:"700",fontSize:"14px",justifyContent:"center",backgroundColor:"#333333",padding:"5px 8px",color:"#ffffff"}},"Options ",h("verdocs-help-icon",{text:"Each option requires a unique ID and value. The ID will be stored when the user selects an option."})),h("div",{class:"row-header"},h("h6",null,"ID"),h("h6",null,"Label"),h("div",{style:{width:"34px"}})),this.options.map((function(t,o){return h("div",{class:"row option-row",key:o},h("verdocs-text-input",{id:"verdocs-option-id-".concat(t.id),value:t.id,placeholder:"Unique ID",onInput:function(t){e.options[o].id=t.target.value;e.dirty=true}}),h("verdocs-text-input",{id:"verdocs-option-value-".concat(t.id),value:t.value,placeholder:"Display value",onInput:function(t){e.options[o].value=t.target.value;e.dirty=true}}),h("button",{innerHTML:TrashIcon,class:"remove-button",onClick:function(){e.options=e.options.filter((function(e){return e.id!==t.id}));e.dirty=true}}))})),h("div",{class:"row-header"},h("button",{class:"add-option-button",onClick:function(){e.options=__spreadArray(__spreadArray([],e.options,true),[{id:"option-".concat(e.options.length+1),value:"Option ".concat(e.options.length+1)}],false);e.dirty=true}},"Add Option"))),h("div",{class:"buttons"},h("button",{class:"delete-button",disabled:this.dirty,onClick:function(t){return e.handleDelete(t)},innerHTML:TrashIcon}),h("div",{style:{flex:"1"}}),h("verdocs-button",{size:"small",variant:"outline",label:"Cancel",disabled:!this.dirty,onClick:function(t){return e.handleCancel(t)}}),h("verdocs-button",{size:"small",label:"Save",disabled:!this.dirty,onClick:function(t){return e.handleSave(t)}}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsTemplateFieldProperties.style=verdocsTemplateFieldPropertiesCss;export{VerdocsButtonPanel as verdocs_button_panel,VerdocsSelectInput as verdocs_select_input,VerdocsTemplateFieldProperties as verdocs_template_field_properties};
+var __awaiter=this&&this.__awaiter||function(e,t,o,i){function r(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,n){function s(e){try{a(i.next(e))}catch(e){n(e)}}function l(e){try{a(i["throw"](e))}catch(e){n(e)}}function a(e){e.done?o(e.value):r(e.value).then(s,l)}a((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,s;return s={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function l(e){return function(t){return a([e,t])}}function a(s){if(i)throw new TypeError("Generator is already executing.");while(o)try{if(i=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;r=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(n=o.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){o.label=s[1];break}if(s[0]===6&&o.label<n[1]){o.label=n[1];n=s;break}if(n&&o.label<n[2]){o.label=n[2];o.ops.push(s);break}if(n[2])o.ops.pop();o.trys.pop();continue}s=t.call(e,o)}catch(e){s=[6,e];r=0}finally{i=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,o){if(o||arguments.length===2)for(var i=0,r=t.length,n;i<r;i++){if(n||!(i in t)){if(!n)n=Array.prototype.slice.call(t,0,i);n[i]=t[i]}}return e.concat(n||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,c as createEvent,a as getElement}from"./index-e64d45e2.js";import{c as createPopper}from"./popper-f860750c.js";import{u as updateField,d as deleteField}from"./Fields-c82e6df3.js";import{V as VerdocsEndpoint}from"./VerdocsEndpoint-6ec36985.js";import{s as state}from"./templateStore-5cb73464.js";import{l as loadTemplate}from"./Templates-f8a6628a.js";import{S as SDKError}from"./errors-9b5498c8.js";import"./Token-54690789.js";import"./index-24fd1580.js";import"./Primitives-054bc6e5.js";import"./Templates-8e4ab976.js";var verdocsButtonPanelCss='verdocs-button-panel{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}';var VerdocsButtonPanel=function(){function e(e){registerInstance(this,e);this.showing=false;this.icon=""}e.prototype.componentDidRender=function(){document.body.appendChild(this.panelEl);if(this.popperInstance){this.popperInstance.destroy()}this.popperInstance=createPopper(this.iconEl,this.panelEl,{})};e.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.panelEl){this.panelEl.remove()}};e.prototype.showPanel=function(){return __awaiter(this,void 0,void 0,(function(){var e,t;var o=this;return __generator(this,(function(i){(e=this.panelEl)===null||e===void 0?void 0:e.setAttribute("data-show","");(t=this.popperInstance)===null||t===void 0?void 0:t.update().catch((function(){}));this.showing=true;this.hiderEl=document.createElement("div");this.hiderEl.style.zIndex="100";this.hiderEl.style.position="absolute";this.hiderEl.style.top="0px";this.hiderEl.style.left="0px";this.hiderEl.style.right="0px";this.hiderEl.style.bottom="0px";this.hiderEl.onclick=function(e){e.stopPropagation();o.toggle()};document.body.appendChild(this.hiderEl);return[2]}))}))};e.prototype.hidePanel=function(){return __awaiter(this,void 0,void 0,(function(){var e,t;return __generator(this,(function(o){(e=this.panelEl)===null||e===void 0?void 0:e.removeAttribute("data-show");(t=this.hiderEl)===null||t===void 0?void 0:t.remove();this.showing=false;return[2]}))}))};e.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!this.showing)return[3,2];return[4,this.hidePanel()];case 1:e.sent();return[3,4];case 2:return[4,this.showPanel()];case 3:e.sent();e.label=4;case 4:return[2]}}))}))};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"icon",innerHTML:this.icon,onClick:function(t){t.stopPropagation();return e.toggle()},ref:function(t){return e.iconEl=t}}),h("div",{role:"tooltip",class:"verdocs-button-panel-content","data-popper-placement":"bottom",ref:function(t){return e.panelEl=t}},h("div",{"data-popper-arrow":"true",class:"arrow"}),h("slot",null)))};return e}();VerdocsButtonPanel.style=verdocsButtonPanelCss;var verdocsSelectInputCss='verdocs-select-input{font-family:"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;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 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-element:focus{border:1px solid #7d88ff}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}';var VerdocsSelectInput=function(){function e(e){registerInstance(this,e);this.value="";this.label="";this.options=undefined;this.disabled=false}e.prototype.render=function(){var e=this;return h(Host,{class:"input-field"},h("label",null,this.label?h("div",{class:"input-label"},this.label+":"):h("div",null),h("select",{class:"input-element",disabled:this.disabled},this.options.map((function(t){return h("option",{value:t.value,selected:t.value===e.value},t.label)})))))};return e}();VerdocsSelectInput.style=verdocsSelectInputCss;var verdocsTemplateFieldPropertiesCss='verdocs-template-field-properties{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;font-size:16px;font-weight:bold;margin:0 0 8px 0;color:#092c4c}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}';var TrashIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>';var VerdocsTemplateFieldProperties=function(){function e(e){registerInstance(this,e);this.close=createEvent(this,"close",7);this.delete=createEvent(this,"delete",7);this.settingsChanged=createEvent(this,"settingsChanged",7);this.sdkError=createEvent(this,"sdkError",7);this.endpoint=VerdocsEndpoint.getDefault();this.templateId="";this.fieldName="";this.dirty=false;this.loading=true;this.type="signature";this.setting=null;this.name="";this.roleName="";this.required=false;this.options=[];this.placeholder="";this.defaultValue=""}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,o,i,r,n,s;var l=this;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,2,,3]);this.endpoint.loadSession();if(!this.templateId){console.error("[FIELD PROPERTIES] Missing required template ID");return[2]}if(!this.fieldName){console.error("[FIELD PROPERTIES] Missing required field name");return[2]}if(!this.endpoint.session){console.error("[FIELD PROPERTIES] Unable to start builder session, must be authenticated");return[2]}return[4,loadTemplate(this.endpoint,this.templateId)];case 1:a.sent();n=state.fields.find((function(e){return e.name===l.fieldName}));if(!n){console.log('[FIELD PROPERTIES] Unable to find field "'.concat(this.fieldName,'" in template'))}this.type=n.type;this.name=n.name;this.roleName=n.role_name;this.required=n.required;this.placeholder=n.label;this.defaultValue=((e=n.setting)===null||e===void 0?void 0:e.value)||"";this.setting=n.setting||{};this.options=((t=n.setting)===null||t===void 0?void 0:t.options)||[];this.dirty=false;this.loading=false;return[3,3];case 2:s=a.sent();console.log("[FIELD PROPERTIES] Error loading template",s);this.loading=false;(o=this.sdkError)===null||o===void 0?void 0:o.emit(new SDKError(s.message,(i=s.response)===null||i===void 0?void 0:i.status,(r=s.response)===null||r===void 0?void 0:r.data));return[3,3];case 3:return[2]}}))}))};e.prototype.handleCancel=function(e){var t=this;var o,i;e.stopPropagation();var r=state.fields.find((function(e){return e.name===t.fieldName}));console.log("hc",e,r);if(r){this.name=r.name;this.roleName=r.role_name;this.required=r.required;this.placeholder=r.label;this.defaultValue=((o=r.setting)===null||o===void 0?void 0:o.result)||""}this.dirty=false;(i=this.close)===null||i===void 0?void 0:i.emit()};e.prototype.handleSave=function(e){var t=this;e.stopPropagation();var o={name:this.name,required:this.required,role_name:this.roleName};if(this.type==="checkbox_group"||this.type==="radio_button_group"){o.setting=this.setting;o.setting.options=this.options}else if(this.type==="dropdown"){o.setting={x:this.setting.x,y:this.setting.y,options:this.options}}updateField(this.endpoint,this.templateId,this.fieldName,o).then((function(){var e,o;t.dirty=false;var i=state.fields.find((function(e){return e.name===t.fieldName}));if(i){i.name=t.name;i.role_name=t.roleName;i.required=t.required;i.label=t.placeholder;i.setting.result=t.defaultValue}(e=t.settingsChanged)===null||e===void 0?void 0:e.emit({fieldName:t.fieldName});(o=t.close)===null||o===void 0?void 0:o.emit()})).catch((function(){console.log("Field update failed",e)}))};e.prototype.handleDelete=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(o){e.stopPropagation();if(window.confirm("Are you sure you wish to remove this field? This action cannot be undone.")){deleteField(this.endpoint,this.templateId,this.fieldName).then((function(e){var o;console.log("Field deleted",e);state.fields=__spreadArray([],state.fields.filter((function(e){return e.name!==t.fieldName})),true);state.template.roles.forEach((function(e){e.fields=__spreadArray([],e.fields.filter((function(e){return e.name!==t.fieldName})),true)}));(o=t.delete)===null||o===void 0?void 0:o.emit({templateId:t.templateId,roleName:t.roleName})})).catch((function(e){console.log("Deletion error",e)}))}return[2]}))}))};e.prototype.render=function(){var e=this;if(!this.endpoint.session){return h(Host,null,h("verdocs-component-error",{message:"You must be authenticated to use this module."}))}if(!this.endpoint.session||!state.template){return h(Host,{class:"empty"})}return h(Host,null,h("h6",null,"Field Settings"),h("form",{onSubmit:function(e){return e.preventDefault()},onClick:function(e){return e.stopPropagation()},autocomplete:"off"},h("div",{class:"row"},h("verdocs-text-input",{id:"verdocs-field-name",label:"Field Name",value:this.name,autocomplete:"off",helpText:"The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key.",placeholder:"Field Name...",onInput:function(t){e.name=t.target.value;e.dirty=true}})),h("div",{class:"row"},h("div",{class:"input-label"},"Role:"),h("verdocs-select-input",{value:this.roleName,options:state.template.roles.map((function(e){return{label:e.name,value:e.name}})),onInput:function(t){e.roleName=t.target.value;e.dirty=true}}),h("verdocs-help-icon",{text:"The participant who will complete this field."})),["textbox","textarea"].includes(this.type)&&h("verdocs-text-input",{id:"verdocs-field-placeholder",label:"Placeholder",value:this.name,autocomplete:"off",helpText:"Placeholder to display if the field is empty.",placeholder:"Placeholder...",onInput:function(t){e.placeholder=t.target.value;e.dirty=true}}),h("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px"}},h("label",{htmlFor:"verdocs-is-required",class:"input-label"},"Required"),h("verdocs-checkbox",{id:"verdocs-is-required",name:"is-required",checked:this.required,value:"on",onInput:function(t){e.required=t.target.checked;e.dirty=true}})),["dropdown"].includes(this.type)&&h("div",{class:"options"},h("div",{class:"row",style:{marginTop:"15px",marginBottom:"15px",textAlign:"center",fontWeight:"700",fontSize:"14px",justifyContent:"center",backgroundColor:"#333333",padding:"5px 8px",color:"#ffffff"}},"Options ",h("verdocs-help-icon",{text:"Each option requires a unique ID and value. The ID will be stored when the user selects an option."})),h("div",{class:"row-header"},h("h6",null,"ID"),h("h6",null,"Label"),h("div",{style:{width:"34px"}})),this.options.map((function(t,o){return h("div",{class:"row option-row",key:o},h("verdocs-text-input",{id:"verdocs-option-id-".concat(t.id),value:t.id,placeholder:"Unique ID",onInput:function(t){e.options[o].id=t.target.value;e.dirty=true}}),h("verdocs-text-input",{id:"verdocs-option-value-".concat(t.id),value:t.value,placeholder:"Display value",onInput:function(t){e.options[o].value=t.target.value;e.dirty=true}}),h("button",{innerHTML:TrashIcon,class:"remove-button",onClick:function(){e.options=e.options.filter((function(e){return e.id!==t.id}));e.dirty=true}}))})),h("div",{class:"row-header"},h("button",{class:"add-option-button",onClick:function(){e.options=__spreadArray(__spreadArray([],e.options,true),[{id:"option-".concat(e.options.length+1),value:"Option ".concat(e.options.length+1)}],false);e.dirty=true}},"Add Option"))),h("div",{class:"buttons"},h("button",{class:"delete-button",disabled:this.dirty,onClick:function(t){return e.handleDelete(t)},innerHTML:TrashIcon}),h("div",{style:{flex:"1"}}),h("verdocs-button",{size:"small",variant:"outline",label:"Cancel",disabled:!this.dirty,onClick:function(t){return e.handleCancel(t)}}),h("verdocs-button",{size:"small",label:"Save",disabled:!this.dirty,onClick:function(t){return e.handleSave(t)}}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsTemplateFieldProperties.style=verdocsTemplateFieldPropertiesCss;export{VerdocsButtonPanel as verdocs_button_panel,VerdocsSelectInput as verdocs_select_input,VerdocsTemplateFieldProperties as verdocs_template_field_properties};