@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/components/verdocs-field-attachment.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VerdocsFieldAttachment extends Components.VerdocsFieldAttachment, HTMLElement {}
 export const VerdocsFieldAttachment: {
-  prototype: VerdocsFieldAttachment;
-  new (): VerdocsFieldAttachment;
+    prototype: VerdocsFieldAttachment;
+    new (): VerdocsFieldAttachment;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { g as getRGBA } from './Colors.js';
+import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
@@ -15,157 +14,158 @@ import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-upload-dialog2.js';
 
 const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}";
+const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
 
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
-const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
-const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.attached = createEvent(this, "attached", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.templateid = '';
-    this.fieldname = '';
-    this.disabled = false;
-    this.editable = false;
-    this.moveable = false;
-    this.done = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.pagenumber = 1;
-    this.showingProperties = false;
-  }
-  async focusField() {
-    this.handleShow();
-  }
-  handleShow() {
-    this.dialog = document.createElement('verdocs-upload-dialog');
-    this.dialog.open = true;
-    this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
-    document.addEventListener('next', (e) => {
-      var _a, _b;
-      console.log('Attachment next', e);
-      (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
-      (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();
-    });
-    document.body.append(this.dialog);
-  }
-  async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.showPanel) {
-      settingsPanel.showPanel();
+const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldAttachment extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.settingsChanged = createEvent(this, "settingsChanged", 7);
+        this.deleted = createEvent(this, "deleted", 7);
+        this.attached = createEvent(this, "attached", 7);
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.templateid = '';
+        this.fieldname = '';
+        this.disabled = false;
+        this.editable = false;
+        this.moveable = false;
+        this.done = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
     }
-  }
-  async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.hidePanel) {
-      settingsPanel.hidePanel();
+    async focusField() {
+        this.handleShow();
     }
-  }
-  async componentWillLoad() {
-    this.fieldStore = getTemplateFieldStore(this.templateid);
-    this.roleStore = getTemplateRoleStore(this.templateid);
-  }
-  render() {
-    var _a, _b;
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    if (!field) {
-      return h(Fragment, null);
+    handleShow() {
+        this.dialog = document.createElement('verdocs-upload-dialog');
+        this.dialog.open = true;
+        this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+        document.addEventListener('next', (e) => {
+            var _a, _b;
+            console.log('Attachment next', e);
+            (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
+            (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();
+        });
+        document.body.append(this.dialog);
     }
-    const settings = getFieldSettings(field);
-    let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const { url } = settings;
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-        e.stopPropagation();
-        this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
-        var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
-        return this.hideSettingsPanel();
-      }, onSettingsChanged: e => {
+    async showSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.showPanel) {
+            settingsPanel.showPanel();
+        }
+    }
+    async hideSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.hidePanel) {
+            settingsPanel.hidePanel();
+        }
+    }
+    async componentWillLoad() {
+        this.fieldStore = getTemplateFieldStore(this.templateid);
+        this.roleStore = getTemplateRoleStore(this.templateid);
+    }
+    render() {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-        return this.hideSettingsPanel();
-      }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' })))))));
-  }
-  static get style() { return verdocsFieldAttachmentCss; }
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
+        if (!field) {
+            return h(Fragment, null);
+        }
+        // TODO:
+        // const disabled = this.disabled ?? settings.disabled ?? false;
+        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
+        // const {url} = settings;
+        return (h(Host, { class: { required: field.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' })))))));
+    }
+    static get style() { return VerdocsFieldAttachmentStyle0; }
 }, [0, "verdocs-field-attachment", {
-    "templateid": [1],
-    "fieldname": [1],
-    "disabled": [4],
-    "editable": [4],
-    "moveable": [4],
-    "done": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "pagenumber": [2],
-    "showingProperties": [32],
-    "focusField": [64],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
+        "templateid": [1],
+        "fieldname": [1],
+        "disabled": [4],
+        "editable": [4],
+        "moveable": [4],
+        "done": [4],
+        "xscale": [2],
+        "yscale": [2],
+        "pagenumber": [2],
+        "showingProperties": [32],
+        "focusField": [64],
+        "showSettingsPanel": [64],
+        "hideSettingsPanel": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-attachment":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldAttachment);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-template-field-properties":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "verdocs-upload-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-field-attachment":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsFieldAttachment);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-template-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "verdocs-upload-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/verdocs-field-checkbox.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VerdocsFieldCheckbox extends Components.VerdocsFieldCheckbox, HTMLElement {}
 export const VerdocsFieldCheckbox: {
-  prototype: VerdocsFieldCheckbox;
-  new (): VerdocsFieldCheckbox;
+    prototype: VerdocsFieldCheckbox;
+    new (): VerdocsFieldCheckbox;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { g as getRGBA } from './Colors.js';
+import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
@@ -14,138 +14,141 @@ import { d as defineCustomElement$2 } from './verdocs-template-field-properties2
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
 const verdocsFieldCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-checkbox .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-checkbox .settings-icon svg{fill:#707ae5}verdocs-field-checkbox .settings-icon:hover{opacity:1}";
+const VerdocsFieldCheckboxStyle0 = verdocsFieldCheckboxCss;
 
-const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.templateid = '';
-    this.fieldname = '';
-    this.option = 0;
-    this.disabled = false;
-    this.done = false;
-    this.editable = false;
-    this.moveable = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.pagenumber = 1;
-    this.showingProperties = false;
-  }
-  async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.showPanel) {
-      settingsPanel.showPanel();
+const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldCheckbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.settingsChanged = createEvent(this, "settingsChanged", 7);
+        this.deleted = createEvent(this, "deleted", 7);
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.templateid = '';
+        this.fieldname = '';
+        this.option = 0;
+        this.disabled = false;
+        this.done = false;
+        this.editable = false;
+        this.moveable = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
     }
-  }
-  async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.hidePanel) {
-      settingsPanel.hidePanel();
+    async showSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.showPanel) {
+            settingsPanel.showPanel();
+        }
     }
-  }
-  async componentWillLoad() {
-    this.fieldStore = getTemplateFieldStore(this.templateid);
-    this.roleStore = getTemplateRoleStore(this.templateid);
-  }
-  render() {
-    var _a, _b, _c, _d;
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    if (!field) {
-      return h(Fragment, null);
+    async hideSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.hidePanel) {
+            settingsPanel.hidePanel();
+        }
     }
-    const settings = getFieldSettings(field);
-    const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
-    const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
+    async componentWillLoad() {
+        this.fieldStore = getTemplateFieldStore(this.templateid);
+        this.roleStore = getTemplateRoleStore(this.templateid);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-        e.stopPropagation();
-        this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
-        var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
-        return this.hideSettingsPanel();
-      }, onSettingsChanged: e => {
-        var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-        return this.hideSettingsPanel();
-      }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' }))))))));
-  }
-  static get style() { return verdocsFieldCheckboxCss; }
+    render() {
+        var _a, _b, _c;
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
+        if (!field) {
+            return h(Fragment, null);
+        }
+        const settings = getFieldSettings(field);
+        const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
+        // TODO:
+        // const disabled = this.disabled ?? settings.disabled ?? false;
+        const disabled = (_c = this.disabled) !== null && _c !== void 0 ? _c : false;
+        if (this.done) {
+            return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
+        }
+        return (h(Host, { class: { required: field.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", checked: option.checked, disabled: disabled, required: field.required, value: option.id }), h("span", null), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' }))))))));
+    }
+    static get style() { return VerdocsFieldCheckboxStyle0; }
 }, [0, "verdocs-field-checkbox", {
-    "templateid": [1],
-    "fieldname": [1],
-    "option": [2],
-    "disabled": [4],
-    "done": [4],
-    "editable": [4],
-    "moveable": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "pagenumber": [2],
-    "showingProperties": [32],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
+        "templateid": [1],
+        "fieldname": [1],
+        "option": [2],
+        "disabled": [4],
+        "done": [4],
+        "editable": [4],
+        "moveable": [4],
+        "xscale": [2],
+        "yscale": [2],
+        "pagenumber": [2],
+        "showingProperties": [32],
+        "showSettingsPanel": [64],
+        "hideSettingsPanel": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-checkbox", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldCheckbox);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-template-field-properties":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-field-checkbox", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-field-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsFieldCheckbox);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-template-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/verdocs-field-date.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VerdocsFieldDate extends Components.VerdocsFieldDate, HTMLElement {}
 export const VerdocsFieldDate: {
-  prototype: VerdocsFieldDate;
-  new (): VerdocsFieldDate;
+    prototype: VerdocsFieldDate;
+    new (): VerdocsFieldDate;
 };
 /**
  * Used to define this component and all nested components recursively.