@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/esm/verdocs-checkbox_5.entry.js

@@ -1,586 +1,401 @@
-import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-172625c5.js';
-import { a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-8196ff47.js';
-import { u as updateField, d as deleteField } from './Fields-c82e6df3.js';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-6e67e86b.js';
-import { g as getTemplateRoleStore } from './TemplateRoleStore-33229997.js';
-import { g as getTemplateStore } from './TemplateStore-940da116.js';
-import { S as SDKError } from './errors-9b5498c8.js';
-import './index-4439b0d1.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b89cf6a4.js';
+import uuidv4 from 'uuid-browser';
+import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-d7516adf.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore-ddc3b96f.js';
+import { g as getTemplateStore } from './TemplateStore-df5484bb.js';
+import { S as SDKError } from './errors-887f1e88.js';
+import './index-296aabaf.js';
+import './index-7456b04f.js';
 
 const verdocsCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
+const VerdocsCheckboxStyle0 = verdocsCheckboxCss;
 
 const VerdocsCheckbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.checked = false;
-    this.name = '';
-    this.label = '';
-    this.value = '';
-    this.theme = 'light';
-    this.disabled = false;
-  }
-  render() {
-    return (h(Host, { class: { disabled: this.disabled, [this.theme]: true } }, h("label", null, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", null, this.label))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checked = false;
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.theme = 'light';
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '419474760206bae27e0ad8f578a0fb0d97702791', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '4cb5190cdc28bec1528637bfeeb130d392ce4347' }, h("input", { key: 'f032febf516c10b0540094f058a59031ce2c706b', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: 'c089f80a6a1060d775c1a13d8cbe8a577287f329' }, this.label))));
+    }
 };
-VerdocsCheckbox.style = verdocsCheckboxCss;
+VerdocsCheckbox.style = VerdocsCheckboxStyle0;
 
 const verdocsComponentErrorCss = "@-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-component-error{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-component-error .inner{-ms-flex:1;flex:1;height:300px;display:-ms-flexbox;display:flex;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 20px;background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+const VerdocsComponentErrorStyle0 = verdocsComponentErrorCss;
 
 const VerdocsComponentError = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.message = '';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "inner" }, this.message)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.message = '';
+    }
+    render() {
+        return (h(Host, { key: 'af86792a4a2d09d2242645a1a8db657c5cd984bf' }, h("div", { key: '52096cd84877537d50bea3e0e7a424e5d352c566', class: "inner" }, this.message)));
+    }
 };
-VerdocsComponentError.style = verdocsComponentErrorCss;
+VerdocsComponentError.style = VerdocsComponentErrorStyle0;
 
 const verdocsPortalCss = "@-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)}}";
+const VerdocsPortalStyle0 = verdocsPortalCss;
 
 const Z_INDEX = '10001';
 const VerdocsPortal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clickAway = createEvent(this, "clickAway", 7);
-    this.moved = false;
-    this.anchor = undefined;
-    this.voffset = 0;
-    this.align = 'left';
-  }
-  handleScroll() {
-    this.calculatePosition();
-  }
-  handleResize() {
-    this.calculatePosition();
-  }
-  handleClick(e) {
-    var _a;
-    if (!this.element.contains(e.target)) {
-      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clickAway = createEvent(this, "clickAway", 7);
+        this.moved = false;
+        this.anchor = undefined;
+        this.voffset = 0;
+        this.align = 'left';
+    }
+    handleScroll() {
+        this.calculatePosition();
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    handleClick(e) {
+        var _a;
+        if (!this.element.contains(e.target)) {
+            (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+        }
+    }
+    calculateLeft() {
+        const anchorEl = document.getElementById(this.anchor);
+        if (!anchorEl)
+            return 0;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        if (this.align === 'left') {
+            return Math.max(anchorRect.left, 0);
+        }
+        if (this.align === 'right') {
+            return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+        }
+        return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
     }
-  }
-  calculateLeft() {
-    const anchorEl = document.getElementById(this.anchor);
-    if (!anchorEl)
-      return 0;
-    const anchorRect = anchorEl.getBoundingClientRect();
-    if (this.align === 'left') {
-      return Math.max(anchorRect.left, 0);
+    calculateTop() {
+        const anchorEl = document.getElementById(this.anchor);
+        if (!anchorEl)
+            return 0;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        return anchorRect.bottom + this.voffset;
     }
-    if (this.align === 'right') {
-      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+    calculatePosition() {
+        this.portal.style.top = `${this.calculateTop()}px`;
+        this.portal.style.left = `${this.calculateLeft()}px`;
+    }
+    componentWillLoad() {
+        var _a;
+        const id = `${this.anchor}-portal`;
+        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', id);
+        this.portal.style.zIndex = Z_INDEX;
+        this.portal.style.position = 'absolute';
+        document.body.append(this.portal);
+    }
+    componentDidLoad() {
+        this.portal.appendChild(this.element);
+        this.calculatePosition();
+    }
+    disconnectedCallback() {
+        this.moved ? this.portal.remove() : (this.moved = true);
+    }
+    render() {
+        return (h(Host, { key: '80b497808d7c72fdb5786712abdd50d98f0ab160', ref: el => (this.element = el) }, h("slot", { key: 'd52fd1a7acd0d7f301ca2c9ba81b406a0107c3a0' })));
     }
-    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
-  }
-  calculateTop() {
-    const anchorEl = document.getElementById(this.anchor);
-    if (!anchorEl)
-      return 0;
-    const anchorRect = anchorEl.getBoundingClientRect();
-    return anchorRect.bottom + this.voffset;
-  }
-  calculatePosition() {
-    this.portal.style.top = `${this.calculateTop()}px`;
-    this.portal.style.left = `${this.calculateLeft()}px`;
-  }
-  componentWillLoad() {
-    var _a;
-    const id = `${this.anchor}-portal`;
-    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
-    this.portal = document.createElement('div');
-    this.portal.setAttribute('id', id);
-    this.portal.style.zIndex = Z_INDEX;
-    this.portal.style.position = 'absolute';
-    document.body.append(this.portal);
-  }
-  componentDidLoad() {
-    this.portal.appendChild(this.element);
-    this.calculatePosition();
-  }
-  disconnectedCallback() {
-    this.moved ? this.portal.remove() : (this.moved = true);
-  }
-  render() {
-    return (h(Host, { ref: el => (this.element = el) }, h("slot", null)));
-  }
 };
-VerdocsPortal.style = verdocsPortalCss;
+VerdocsPortal.style = VerdocsPortalStyle0;
 
 const verdocsSelectInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-select-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;border:1px solid #cccccc;border-radius:4px;background:#ffffff;color:#092c4c;width:100%;font-size:16px;height:28px;padding:2px 8px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
+const VerdocsSelectInputStyle0 = verdocsSelectInputCss;
 
 const VerdocsSelectInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.value = '';
-    this.label = '';
-    this.options = undefined;
-    this.disabled = false;
-  }
-  render() {
-    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(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
-  }
-};
-VerdocsSelectInput.style = verdocsSelectInputCss;
-
-// Unique ID creation requires a high quality random # generator.  In the
-// browser this is a little complicated due to unknown quality of Math.random()
-// and inconsistent support for the `crypto` API.  We do the best we can via
-// feature-detection
-var rng;
-
-var crypto = typeof commonjsGlobal !== 'undefined' && (commonjsGlobal.crypto || commonjsGlobal.msCrypto); // for IE 11
-if (crypto && crypto.getRandomValues) {
-  // WHATWG crypto RNG - http://wiki.whatwg.org/wiki/Crypto
-  var rnds8 = new Uint8Array(16); // eslint-disable-line no-undef
-  rng = function whatwgRNG() {
-    crypto.getRandomValues(rnds8);
-    return rnds8;
-  };
-}
-
-if (!rng) {
-  // Math.random()-based (RNG)
-  //
-  // If all else fails, use Math.random().  It's fast, but is of unspecified
-  // quality.
-  var rnds = new Array(16);
-  rng = function() {
-    for (var i = 0, r; i < 16; i++) {
-      if ((i & 0x03) === 0) r = Math.random() * 0x100000000;
-      rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = '';
+        this.label = '';
+        this.options = undefined;
+        this.disabled = false;
     }
-
-    return rnds;
-  };
-}
-
-var rngBrowser = rng;
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex[i] = (i + 0x100).toString(16).substr(1);
-}
-
-function bytesToUuid(buf, offset) {
-  var i = offset || 0;
-  var bth = byteToHex;
-  return bth[buf[i++]] + bth[buf[i++]] +
-          bth[buf[i++]] + bth[buf[i++]] + '-' +
-          bth[buf[i++]] + bth[buf[i++]] + '-' +
-          bth[buf[i++]] + bth[buf[i++]] + '-' +
-          bth[buf[i++]] + bth[buf[i++]] + '-' +
-          bth[buf[i++]] + bth[buf[i++]] +
-          bth[buf[i++]] + bth[buf[i++]] +
-          bth[buf[i++]] + bth[buf[i++]];
-}
-
-var bytesToUuid_1 = bytesToUuid;
-
-// **`v1()` - Generate time-based UUID**
-//
-// Inspired by https://github.com/LiosK/UUID.js
-// and http://docs.python.org/library/uuid.html
-
-// random #'s we need to init node and clockseq
-var _seedBytes = rngBrowser();
-
-// Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1)
-var _nodeId = [
-  _seedBytes[0] | 0x01,
-  _seedBytes[1], _seedBytes[2], _seedBytes[3], _seedBytes[4], _seedBytes[5]
-];
-
-// Per 4.2.2, randomize (14 bit) clockseq
-var _clockseq = (_seedBytes[6] << 8 | _seedBytes[7]) & 0x3fff;
-
-// Previous uuid creation time
-var _lastMSecs = 0, _lastNSecs = 0;
-
-// See https://github.com/broofa/node-uuid for API details
-function v1(options, buf, offset) {
-  var i = buf && offset || 0;
-  var b = buf || [];
-
-  options = options || {};
-
-  var clockseq = options.clockseq !== undefined ? options.clockseq : _clockseq;
-
-  // UUID timestamps are 100 nano-second units since the Gregorian epoch,
-  // (1582-10-15 00:00).  JSNumbers aren't precise enough for this, so
-  // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'
-  // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
-  var msecs = options.msecs !== undefined ? options.msecs : new Date().getTime();
-
-  // Per 4.2.1.2, use count of uuid's generated during the current clock
-  // cycle to simulate higher resolution clock
-  var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1;
-
-  // Time since last uuid creation (in msecs)
-  var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;
-
-  // Per 4.2.1.2, Bump clockseq on clock regression
-  if (dt < 0 && options.clockseq === undefined) {
-    clockseq = clockseq + 1 & 0x3fff;
-  }
-
-  // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new
-  // time interval
-  if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) {
-    nsecs = 0;
-  }
-
-  // Per 4.2.1.2 Throw error if too many uuids are requested
-  if (nsecs >= 10000) {
-    throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec');
-  }
-
-  _lastMSecs = msecs;
-  _lastNSecs = nsecs;
-  _clockseq = clockseq;
-
-  // Per 4.1.4 - Convert from unix epoch to Gregorian epoch
-  msecs += 12219292800000;
-
-  // `time_low`
-  var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;
-  b[i++] = tl >>> 24 & 0xff;
-  b[i++] = tl >>> 16 & 0xff;
-  b[i++] = tl >>> 8 & 0xff;
-  b[i++] = tl & 0xff;
-
-  // `time_mid`
-  var tmh = (msecs / 0x100000000 * 10000) & 0xfffffff;
-  b[i++] = tmh >>> 8 & 0xff;
-  b[i++] = tmh & 0xff;
-
-  // `time_high_and_version`
-  b[i++] = tmh >>> 24 & 0xf | 0x10; // include version
-  b[i++] = tmh >>> 16 & 0xff;
-
-  // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)
-  b[i++] = clockseq >>> 8 | 0x80;
-
-  // `clock_seq_low`
-  b[i++] = clockseq & 0xff;
-
-  // `node`
-  var node = options.node || _nodeId;
-  for (var n = 0; n < 6; ++n) {
-    b[i + n] = node[n];
-  }
-
-  return buf ? buf : bytesToUuid_1(b);
-}
-
-var v1_1 = v1;
-
-function v4(options, buf, offset) {
-  var i = buf && offset || 0;
-
-  if (typeof(options) == 'string') {
-    buf = options == 'binary' ? new Array(16) : null;
-    options = null;
-  }
-  options = options || {};
-
-  var rnds = options.random || (options.rng || rngBrowser)();
-
-  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-  rnds[6] = (rnds[6] & 0x0f) | 0x40;
-  rnds[8] = (rnds[8] & 0x3f) | 0x80;
-
-  // Copy bytes to buffer, if provided
-  if (buf) {
-    for (var ii = 0; ii < 16; ++ii) {
-      buf[i + ii] = rnds[ii];
+    render() {
+        return (h(Host, { key: 'a353e008560aed3f922fc52d5c091d88cbe099a3', class: "input-field" }, h("label", { key: '90a9b8244853fa2083f0d7fb1672ed204ed22a4c' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: 'a68e1ea7b9f9b6f375b2d6c1df859708acc79bea', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
     }
-  }
-
-  return buf || bytesToUuid_1(rnds);
-}
-
-var v4_1 = v4;
-
-var uuid = v4_1;
-uuid.v1 = v1_1;
-uuid.v4 = v4_1;
-
-var uuidBrowser = uuid;
+};
+VerdocsSelectInput.style = VerdocsSelectInputStyle0;
 
-const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0px #0000001f;box-shadow:2px 2px 10px 0px #0000001f}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;-ms-flex:1;flex:1}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;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}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}";
+const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0px rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0px rgba(0, 0, 0, 0.1215686275)}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;-ms-flex:1;flex:1}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;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}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:rgb(165, 0, 33)}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}";
+const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const 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>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsTemplateFieldProperties = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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.templateStore = null;
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.fieldName = '';
-    this.helpText = '';
-    this.dirty = false;
-    this.loading = true;
-    this.setting = null;
-    this.label = '';
-    this.type = 'textbox';
-    this.name = '';
-    this.required = false;
-    this.roleName = '';
-    this.group = '';
-    this.fieldType = '';
-    this.options = [];
-    this.placeholder = '';
-    this.value = '';
-    this.leading = 0;
-    this.showingHelp = false;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[FIELD PROPERTIES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.fieldName) {
-        console.error(`[FIELD PROPERTIES] Missing required field name`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
-      this.fieldStore = await getTemplateFieldStore(this.templateId);
-      this.roleStore = await getTemplateRoleStore(this.templateId);
-      // console.log('tfs', this.fieldStore?.state);
-      const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-      // console.log('gf', field);
-      if (!field) {
-        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
-      }
-      else {
-        console.log('props', field);
-      }
-      this.type = field.type;
-      this.name = field.name;
-      this.label = field.label;
-      this.group = field.name;
-      this.roleName = field.role_name;
-      this.required = field.required;
-      this.fieldType = field.type;
-      // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
-      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-      this.setting = field.setting || {};
-      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
-      this.dirty = false;
-      this.loading = false;
-      console.log('Displaying settings for', this.setting);
-    }
-    catch (e) {
-      console.log('[FIELD PROPERTIES] Error loading template', e);
-      this.loading = false;
-      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
-    }
-  }
-  handleCancel(e) {
-    var _a, _b, _c, _d, _e;
-    e.stopPropagation();
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-    if (field) {
-      this.name = field.name;
-      this.label = field.label;
-      this.roleName = field.role_name;
-      this.required = field.required;
-      // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
-      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-    }
-    this.dirty = false;
-    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
-    (_e = document.getElementById('verdocs-template-field-properties')) === null || _e === void 0 ? void 0 : _e.remove();
-  }
-  handleSave(e) {
-    e.stopPropagation();
-    const newProperties = {
-      name: this.name,
-      label: this.label || null,
-      required: this.required,
-      role_name: this.roleName,
-      // TODO: Default value in setting?
-    };
-    if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
-      newProperties.setting = this.setting;
-      newProperties.setting.options = this.options;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.templateStore = null;
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.fieldName = '';
+        this.helpText = '';
+        this.dirty = false;
+        this.loading = true;
+        this.setting = null;
+        this.label = '';
+        this.type = 'textbox';
+        this.name = '';
+        this.required = false;
+        this.roleName = '';
+        this.group = '';
+        this.fieldType = '';
+        this.options = [];
+        this.placeholder = '';
+        this.value = '';
+        this.leading = 0;
+        this.showingHelp = false;
     }
-    else if (this.type === 'textarea' || this.type === 'textbox') {
-      newProperties.setting = { ...this.setting };
-      newProperties.setting.result = (this.value || '').trim();
+    async componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[FIELD PROPERTIES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.fieldName) {
+                console.error(`[FIELD PROPERTIES] Missing required field name`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
+            this.fieldStore = await getTemplateFieldStore(this.templateId);
+            this.roleStore = await getTemplateRoleStore(this.templateId);
+            // console.log('tfs', this.fieldStore?.state);
+            const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+            // console.log('gf', field);
+            if (!field) {
+                console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
+            }
+            else {
+                console.log('props', field);
+            }
+            this.type = field.type;
+            this.name = field.name;
+            this.label = field.label;
+            this.group = field.name;
+            this.roleName = field.role_name;
+            this.required = field.required;
+            this.fieldType = field.type;
+            // TODO: Talk about how we want to handle labels/placeholders
+            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
+            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
+            this.setting = field.settings || {};
+            this.options = ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.options) || [];
+            this.dirty = false;
+            this.loading = false;
+            console.log('Displaying settings for', this.setting);
+        }
+        catch (e) {
+            console.log('[FIELD PROPERTIES] Error loading template', e);
+            this.loading = false;
+            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+        }
     }
-    else if (this.type === 'dropdown') {
-      newProperties.setting = {
-        x: this.setting.x,
-        y: this.setting.y,
-        options: this.options,
-      };
+    handleCancel(e) {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+        if (field) {
+            this.name = field.name;
+            this.label = field.label;
+            this.roleName = field.role_name;
+            this.required = field.required;
+            // TODO: Talk about how we want to handle labels/placeholders
+            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
+            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
+        }
+        this.dirty = false;
+        (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+        (_e = document.getElementById('verdocs-template-field-properties')) === null || _e === void 0 ? void 0 : _e.remove();
     }
-    console.log('FP: Will update', this.fieldName, newProperties);
-    updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(updated => {
-      var _a, _b, _c;
-      this.dirty = false;
-      updateStoreField(this.fieldStore, this.fieldName, updated);
-      // if (this.fieldname !== newSettings.name) {
-      //   this.fieldname = newSettings.name;
-      //   console.log('new name', this.fieldname);
-      // }
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-      (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
-    })
-      .catch(() => {
-      console.log('Field update failed', e);
-    });
-  }
-  handleAddOption(e) {
-    e.stopPropagation();
-    const newProperties = {
-      name: this.name,
-      required: this.required,
-      role_name: this.roleName,
-      // TODO: Default value in setting?
-    };
-    this.options.push(this.type === 'radio_button_group'
-      ? {
-        id: uuidBrowser(),
-        value: `Option ${this.options.length + 1}`,
-        selected: false,
-        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-      }
-      : {
-        id: uuidBrowser(),
-        value: `Option ${this.options.length + 1}`,
-        checked: false,
-        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-      });
-    newProperties.setting = { ...this.setting };
-    delete newProperties.setting.result;
-    newProperties.setting.options = [...this.options];
-    updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(updated => {
-      var _a, _b, _c;
-      this.dirty = false;
-      updateStoreField(this.fieldStore, this.fieldName, updated);
-      this.fieldName = updated.name;
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-      (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
-    })
-      .catch(() => {
-      console.log('Field update failed', e);
-    });
-  }
-  async handleDelete(e) {
-    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(() => {
-        var _a, _b;
-        this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
-        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
-        (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
-      })
-        .catch(e => {
-        console.log('[FIELD PROPERTIES] Deletion error', e);
-      });
+    handleSave(e) {
+        e.stopPropagation();
+        const newProperties = {
+            name: this.name,
+            label: this.label || null,
+            required: this.required,
+            role_name: this.roleName,
+            // TODO: Default value in setting?
+        };
+        if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
+            newProperties.settings = this.setting;
+            newProperties.settings.options = this.options;
+        }
+        else if (this.type === 'textarea' || this.type === 'textbox') {
+            newProperties.settings = { ...this.setting };
+            newProperties.settings.result = (this.value || '').trim();
+        }
+        else if (this.type === 'dropdown') {
+            newProperties.settings = {
+                x: this.setting.x,
+                y: this.setting.y,
+                options: this.options,
+            };
+        }
+        console.log('FP: Will update', this.fieldName, newProperties);
+        updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
+            .then(updated => {
+            var _a, _b, _c;
+            this.dirty = false;
+            updateStoreField(this.fieldStore, this.fieldName, updated);
+            // if (this.fieldname !== newSettings.name) {
+            //   this.fieldname = newSettings.name;
+            //   console.log('new name', this.fieldname);
+            // }
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
+            (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+            (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
+        })
+            .catch(() => {
+            console.log('Field update failed', e);
+        });
     }
-  }
-  render() {
-    var _a;
-    // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    handleAddOption(e) {
+        e.stopPropagation();
+        const newProperties = {
+            name: this.name,
+            required: this.required,
+            role_name: this.roleName,
+            // TODO: Default value in setting?
+        };
+        this.options.push(this.type === 'radio_button_group'
+            ? {
+                id: uuidv4(),
+                value: `Option ${this.options.length + 1}`,
+                selected: false,
+                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+            }
+            : {
+                id: uuidv4(),
+                value: `Option ${this.options.length + 1}`,
+                checked: false,
+                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+            });
+        newProperties.settings = { ...this.setting };
+        delete newProperties.settings.result;
+        newProperties.settings.options = [...this.options];
+        updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
+            .then(updated => {
+            var _a, _b, _c;
+            this.dirty = false;
+            updateStoreField(this.fieldStore, this.fieldName, updated);
+            this.fieldName = updated.name;
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
+            (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+            (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
+        })
+            .catch(() => {
+            console.log('Field update failed', e);
+        });
     }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !this.fieldStore.get('fields').some(field => field.name === this.fieldName)) {
-      return h(Host, { class: "empty" });
+    async handleDelete(e) {
+        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(() => {
+                var _a, _b;
+                this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
+                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+                (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
+            })
+                .catch(e => {
+                console.log('[FIELD PROPERTIES] Deletion error', e);
+            });
+        }
     }
-    if (this.helpText && this.showingHelp) {
-      return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
+    render() {
+        var _a;
+        // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+        if (!this.endpoint.session || !this.fieldStore.get('fields').some(field => field.name === this.fieldName)) {
+            return h(Host, { class: "empty" });
+        }
+        if (this.helpText && this.showingHelp) {
+            return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
+        }
+        // console.log('tfp', this.templateId, this.fieldName);
+        return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => 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: (e) => {
+                this.name = e.target.value;
+                this.dirty = true;
+            } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, 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: "Optional Label...", onInput: (e) => {
+                this.label = e.target.value;
+                this.dirty = true;
+            } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+                this.roleName = e.target.value;
+                this.dirty = true;
+            } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
+                this.value = e.target.value;
+                this.dirty = true;
+            } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
+            // helpText="Placeholder to display if the field is empty."
+            placeholder: "Placeholder...", onInput: (e) => {
+                this.placeholder = e.target.value;
+                this.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: (e) => {
+                this.required = e.target.checked;
+                this.dirty = true;
+            } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['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("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+                this.options[index].id = e.target.value;
+                this.dirty = true;
+            } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
+                this.options[index].value = e.target.value;
+                this.dirty = true;
+            } }), h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {
+                this.options = this.options.filter(opt => opt.id !== option.id);
+                this.dirty = true;
+            } })))), h("div", { class: "row-header" }, h("button", { class: "add-option-button", onClick: () => {
+                this.options = [...this.options, { id: `option-${this.options.length + 1}`, value: `Option ${this.options.length + 1}` }];
+                this.dirty = true;
+            } }, "Add Option")))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
     }
-    // console.log('tfp', this.templateId, this.fieldName);
-    return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => 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: (e) => {
-        this.name = e.target.value;
-        this.dirty = true;
-      } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, 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: "Optional Label...", onInput: (e) => {
-        this.label = e.target.value;
-        this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
-        this.roleName = e.target.value;
-        this.dirty = true;
-      } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
-        this.value = e.target.value;
-        this.dirty = true;
-      } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
-      // helpText="Placeholder to display if the field is empty."
-      placeholder: "Placeholder...", onInput: (e) => {
-        this.placeholder = e.target.value;
-        this.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: (e) => {
-        this.required = e.target.checked;
-        this.dirty = true;
-      } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['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("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
-        this.options[index].id = e.target.value;
-        this.dirty = true;
-      } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
-        this.options[index].value = e.target.value;
-        this.dirty = true;
-      } }), h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {
-        this.options = this.options.filter(opt => opt.id !== option.id);
-        this.dirty = true;
-      } })))), h("div", { class: "row-header" }, h("button", { class: "add-option-button", onClick: () => {
-        this.options = [...this.options, { id: `option-${this.options.length + 1}`, value: `Option ${this.options.length + 1}` }];
-        this.dirty = true;
-      } }, "Add Option")))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
-  }
-  get el() { return getElement(this); }
+    get el() { return getElement(this); }
 };
-VerdocsTemplateFieldProperties.style = verdocsTemplateFieldPropertiesCss;
+VerdocsTemplateFieldProperties.style = VerdocsTemplateFieldPropertiesStyle0;
 
 export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsPortal as verdocs_portal, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };