@verdocs/web-sdk 1.9.41 → 1.10.0

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.css

@@ -0,0 +1,91 @@
+verdocs-floating-menu {
+  display: none;
+}
+
+#verdocs-floating-menu {
+  position: absolute;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  flex: 0 0 fit-content;
+}
+#verdocs-floating-menu:not(.force-closed):hover {
+  height: 500px;
+}
+#verdocs-floating-menu:not(.force-closed):hover .trigger {
+  box-shadow: 0 10px 25px #4c56cb;
+  transform: translatey(2px);
+  transition: all 0.3s;
+}
+#verdocs-floating-menu:not(.force-closed):hover .options {
+  display: flex;
+}
+#verdocs-floating-menu:not(.force-closed):hover .options .option {
+  animation: vfm-appear 0.1s forwards 0.2s;
+}
+#verdocs-floating-menu .trigger {
+  position: absolute;
+  width: 56px;
+  height: 56px;
+  background: #654dcb;
+  bottom: 0;
+  border-radius: 50%;
+  left: 0;
+  right: 0;
+  margin: auto;
+  color: white;
+  line-height: 52px;
+  text-align: center;
+  font-size: 44px;
+  z-index: 100;
+  box-shadow: 0 10px 25px -5px #4c56cb;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+#verdocs-floating-menu .options {
+  width: 56px;
+  flex-direction: column;
+  flex: 0 0 fit-content;
+  position: absolute;
+  bottom: 70px;
+  display: none;
+}
+#verdocs-floating-menu .option {
+  background: #654dcb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  margin: 5px auto;
+  color: white;
+  font-weight: 500;
+  text-align: center;
+  line-height: 36px;
+  opacity: 0;
+}
+#verdocs-floating-menu verdocs-toolbar-icon .icon {
+  display: flex;
+}
+#verdocs-floating-menu verdocs-toolbar-icon .icon svg {
+  fill: #ffffff;
+}
+
+@keyframes vfm-appear {
+  0% {
+    opacity: 0;
+  }
+  30% {
+    transform: scale(0.4);
+    opacity: 0.3;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.js

@@ -0,0 +1,158 @@
+import { h, Host } from '@stencil/core';
+const getTop = (el) => el.offsetTop + (el.parentElement && getTop(el.parentElement));
+const getLeft = (el) => el.offsetLeft + (el.parentElement && getLeft(el.parentElement));
+// @see https://stackoverflow.com/a/49186677/1812436
+const getScrollParent = node => {
+  const regex = /(auto|scroll)/;
+  const parents = (_node, ps) => {
+    if (_node.parentNode === null) {
+      return ps;
+    }
+    return parents(_node.parentNode, ps.concat([_node]));
+  };
+  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+  const scroll = _node => regex.test(overflow(_node));
+  const scrollParent = _node => {
+    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+      return;
+    }
+    const ps = parents(_node.parentNode, []);
+    for (let i = 0; i < ps.length; i += 1) {
+      if (scroll(ps[i])) {
+        return ps[i];
+      }
+    }
+    return document.scrollingElement || document.documentElement;
+  };
+  return scrollParent(node);
+};
+/**
+ * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
+ * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
+ * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
+ */
+export class VerdocsFloatingMenu {
+  constructor() {
+    this.menuContainer = null;
+    this.scrollParent = null;
+    this.scrollParentParent = null;
+    this.options = [];
+  }
+  componentDidLoad() {
+    this.menuContainer = document.createElement('div');
+    this.menuContainer.id = 'verdocs-floating-menu';
+    let el = document.createElement('div');
+    el.className = 'trigger';
+    el.innerText = '+';
+    this.menuContainer.append(el);
+    el = document.createElement('div');
+    el.className = 'options';
+    this.menuContainer.append(el);
+    const localhandleSelect = this.handleSelect.bind(this);
+    this.options.forEach(option => {
+      const childEl = document.createElement('div');
+      childEl.className = 'option';
+      childEl.addEventListener('click', () => localhandleSelect(option));
+      el.append(childEl);
+      const iconEl = document.createElement('verdocs-toolbar-icon');
+      iconEl.setAttribute('icon', option.icon);
+      iconEl.setAttribute('text', option.tooltip);
+      iconEl.setAttribute('placement', 'left');
+      childEl.append(iconEl);
+    });
+    document.body.append(this.menuContainer);
+    this.scrollParent = getScrollParent(this.el);
+    if (this.scrollParent) {
+      this.scrollParentParent = this.scrollParent.parentElement;
+      this.repositionTrigger(this.scrollParent);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  handleSelect(option) {
+    var _a;
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+    const el = document.getElementById('verdocs-floating-menu');
+    if (el) {
+      el.className = 'force-closed';
+      setTimeout(() => {
+        el.className = '';
+      }, 100);
+    }
+  }
+  repositionTrigger(scrollParent) {
+    const scrollParentParent = scrollParent.parentElement;
+    if (scrollParentParent) {
+      const bounds = scrollParentParent.getBoundingClientRect();
+      const menu = document.getElementById('verdocs-floating-menu');
+      if (menu) {
+        menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
+        menu.style.left = `${bounds.right - 80}px`;
+      }
+    }
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "verdocs-floating-menu"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-floating-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-floating-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IOption[]",
+          "resolved": "IOption[]",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The role that this contact will be assigned to."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "optionSelected",
+        "name": "optionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+// This component is heavily commented so it can be used as a reference for developing other components. Please use the comments here
+// as a guide / resource, but do not copy them to new components (so we don't create a maintenance hassle). If you copy this component
+// as a template, clean up all the comments in the copy, so this remains the "main reference".
+// We are using a custom doc generator specifically for Web Components. We use "inline docs" to get documentation out of code
+// comments rather than having to use separate README files. See https://www.npmjs.com/package/@pxtrn/storybook-addon-docs-stencil
+// for more information.
+export default {
+  // Where in Storybook this control will be listed
+  title: 'Controls/Floating Menu',
+  // Hint to help the docs addon find the component
+  component: 'verdocs-floating-menu',
+  // We can apply default args only shown in Storybook as follows
+  args: {
+    options: [
+      { id: 'attachment', tooltip: 'Attachment', icon: 'A' },
+      { id: 'checkbox', tooltip: 'Check Box', icon: 'C' },
+      { id: 'date', tooltip: 'Date', icon: 'D' },
+      { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
+      { id: 'initial', tooltip: 'Initials', icon: 'I' },
+      { id: 'payment', tooltip: 'Payment', icon: 'P' },
+      { id: 'radio', tooltip: 'Radio Button', icon: 'R' },
+      { id: 'signature', tooltip: 'Signature', icon: 'S' },
+      { id: 'textarea', tooltip: 'Text Area', icon: 'M' },
+      { id: 'textbox', tooltip: 'Text Box', icon: 'T' },
+      { id: 'timestamp', tooltip: 'Timestamp', icon: 'X' },
+    ],
+  },
+  // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
+  // here. Only those that need special attention.
+  argTypes: {
+    optionSelected: {
+      action: 'optionSelected',
+      // Prevents a duplicate event entry from appearing in the properties table
+      table: {
+        disable: true,
+      },
+    },
+  },
+  layout: 'fullscreen',
+};
+export const FloatingMenu = ({ options, optionSelected }) => html `
+  <div style="width: 400px; height: 600px; overflow-y: scroll; background: white;">
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <verdocs-floating-menu .options=${options} @optionSelected=${optionSelected} />
+  </div>
+`;

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.css

@@ -20,7 +20,8 @@ verdocs-toolbar-icon .tooltip {
   font-size: 13px;
   position: relative;
   border-radius: 4px;
-  z-index: 10000;
+  z-index: 20000;
+  white-space: nowrap;
 }
 verdocs-toolbar-icon .tooltip .arrow,
 verdocs-toolbar-icon .tooltip .arrow::before {
@@ -52,4 +53,10 @@ verdocs-toolbar-icon .tooltip[data-popper-placement^=left] > .arrow {
 }
 verdocs-toolbar-icon .tooltip[data-popper-placement^=right] > .arrow {
   left: -4px;
+}
+verdocs-toolbar-icon .tooltip[data-popper-placement^=left] {
+  padding: 3px 10px;
+}
+verdocs-toolbar-icon .tooltip[data-popper-placement^=left] > .arrow {
+  right: -1px;
 }

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.js

@@ -8,13 +8,17 @@ export class VerdocsToolbarIcon {
   constructor() {
     this.text = '';
     this.icon = '';
+    this.placement = 'bottom';
     this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
     this.popperInstance = createPopper(this.iconEl, this.tooltip, {
+      placement: this.placement,
+      modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+    });
     // placement: 'top-end',
     // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
+    // });
   }
   disconnectedCallback() {
     if (this.popperInstance) {
@@ -35,7 +39,7 @@ export class VerdocsToolbarIcon {
   //   this.press?.emit();
   // }
   render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get is() { return "verdocs-toolbar-icon"; }
   static get originalStyleUrls() {
@@ -85,6 +89,29 @@ export class VerdocsToolbarIcon {
         "attribute": "icon",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core/lib/enums"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Override the Popper \"placement\" setting"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
       }
     };
   }

package/dist/collection/components/elements/verdocs-component-error/verdocs-component-error.css

@@ -0,0 +1,16 @@
+verdocs-component-error {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: flex;
+  padding: 15px;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-component-error .inner {
+  flex: 1;
+  height: 300px;
+  display: flex;
+  font-size: 18px;
+  background: #ffffff;
+  align-items: center;
+  justify-content: center;
+}

package/dist/collection/components/elements/verdocs-component-error/verdocs-component-error.js

@@ -0,0 +1,46 @@
+// NOTE: This component does not have a story because it's not intended for external use.
+import { h, Host } from '@stencil/core';
+/**
+ * Render a simple error message.
+ */
+export class VerdocsComponentError {
+  constructor() {
+    this.message = '';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "inner" }, this.message)));
+  }
+  static get is() { return "verdocs-component-error"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-component-error.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-component-error.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The message to display."
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

package/dist/collection/components/elements/verdocs-document-page/verdocs-document-page.js

@@ -49,7 +49,7 @@ export class VerdocsDocumentPage {
       return;
     }
     this.pageRendered.emit({
-      container: this.container,
+      // container: this.container,
       containerId: this.containerId,
       pageNumber: this.pageNumber,
       virtualWidth: this.virtualWidth,

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.css

@@ -1,7 +1,7 @@
 verdocs-field-radio-button {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   display: block;
   font-size: 11px;
   position: relative;

package/dist/collection/components/elements/verdocs-field-textbox/verdocs-field-textbox.css

@@ -8,6 +8,7 @@ verdocs-field-textbox {
   letter-spacing: -0.2px;
   background-color: transparent;
   transform-origin: bottom left;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 verdocs-field-textbox.disabled {
   opacity: 0.5;
@@ -21,9 +22,7 @@ verdocs-field-textbox input {
   transform-origin: 0 0;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-verdocs-field-textbox input:focus {
+  border: none;
   outline: none;
 }
 verdocs-field-textbox input.hide {

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js

@@ -1,5 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { createTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
 import { createTemplate, getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { SDKError } from '../../../utils/errors';
@@ -15,7 +15,9 @@ export class VerdocsTemplateCreate {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.file = undefined;
   }
-  componentWillLoad() { }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
   handleFileChanged(e) {
     var _a;
     console.log('files', e.target.files);
@@ -60,6 +62,9 @@ export class VerdocsTemplateCreate {
     }
   }
   render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "Select a file from your computer", size: "small", onClick: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file }))));
   }
   static get is() { return "verdocs-template-create"; }

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.css

@@ -1,5 +1,6 @@
 verdocs-template-fields {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  position: relative;
 }
 verdocs-template-fields .page-0 {
   padding: 65px 15px 0 15px;
@@ -21,47 +22,6 @@ verdocs-template-fields .page-0 .user-placed-fields .title {
   position: absolute;
   background: #46497d;
 }
-verdocs-template-fields .fields-bar {
-  height: 50px;
-  display: flex;
-  z-index: 10000;
-  position: fixed;
-  padding: 5px 20px;
-  line-height: 28px;
-  align-items: center;
-  flex-direction: row;
-  box-sizing: border-box;
-  background: #46497d;
-}
-verdocs-template-fields .fields-bar .label {
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: bold;
-  margin-right: 8px;
-}
-verdocs-template-fields .fields-bar .icon {
-  margin: 0 4px;
-  display: flex;
-  transform: scale(0.8, 0.8);
-}
-verdocs-template-fields .fields-bar .icon svg {
-  fill: #ffffff;
-}
-verdocs-template-fields .fields-bar .operation {
-  border: none;
-  outline: none;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 16px;
-  margin-left: 10px;
-  background: transparent;
-  text-transform: uppercase;
-}
-verdocs-template-fields .fields-bar .operation:disabled {
-  color: #cccccc;
-  cursor: inherit;
-  pointer-events: none;
-}
 verdocs-template-fields .pages {
   display: flex;
   padding: 15px;
@@ -75,4 +35,37 @@ verdocs-template-fields .pages {
 verdocs-template-fields .pages div,
 verdocs-template-fields .pages canvas {
   box-sizing: border-box;
+}
+verdocs-template-fields.placing-attachment {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-checkbox {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-date {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-dropdown {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-initial {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-payment {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-radio {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-signature {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-textarea {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-textbox {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-timestamp {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }