@verdocs/web-sdk 1.12.12 → 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() {
@@ -188,22 +184,29 @@ const VerdocsTemplateFieldProperties = class {
       role_name: this.roleName,
       // TODO: Default value in setting?
     };
-    console.log('np', this.required, newProperties);
-    if (this.type === 'dropdown' || this.type === 'checkbox_group' || this.type === 'radio_button_group') {
+    if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
       newProperties.setting = this.setting;
       newProperties.setting.options = this.options;
     }
+    else if (this.type === 'dropdown') {
+      newProperties.setting = {
+        x: this.setting.x,
+        y: this.setting.y,
+        options: this.options,
+      };
+    }
     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

@@ -86,22 +86,29 @@ export class VerdocsTemplateFieldProperties {
       role_name: this.roleName,
       // TODO: Default value in setting?
     };
-    console.log('np', this.required, newProperties);
-    if (this.type === 'dropdown' || this.type === 'checkbox_group' || this.type === 'radio_button_group') {
+    if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
       newProperties.setting = this.setting;
       newProperties.setting.options = this.options;
     }
+    else if (this.type === 'dropdown') {
+      newProperties.setting = {
+        x: this.setting.x,
+        y: this.setting.y,
+        options: this.options,
+      };
+    }
     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

@@ -97,22 +97,29 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       role_name: this.roleName,
       // TODO: Default value in setting?
     };
-    console.log('np', this.required, newProperties);
-    if (this.type === 'dropdown' || this.type === 'checkbox_group' || this.type === 'radio_button_group') {
+    if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
       newProperties.setting = this.setting;
       newProperties.setting.options = this.options;
     }
+    else if (this.type === 'dropdown') {
+      newProperties.setting = {
+        x: this.setting.x,
+        y: this.setting.y,
+        options: this.options,
+      };
+    }
     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-10T17:35:54",
+  "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() {
@@ -184,22 +180,29 @@ const VerdocsTemplateFieldProperties = class {
       role_name: this.roleName,
       // TODO: Default value in setting?
     };
-    console.log('np', this.required, newProperties);
-    if (this.type === 'dropdown' || this.type === 'checkbox_group' || this.type === 'radio_button_group') {
+    if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
       newProperties.setting = this.setting;
       newProperties.setting.options = this.options;
     }
+    else if (this.type === 'dropdown') {
+      newProperties.setting = {
+        x: this.setting.x,
+        y: this.setting.y,
+        options: this.options,
+      };
+    }
     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.