@verdocs/web-sdk 1.9.41 → 1.10.1

package/dist/collection/collection-manifest.json

@@ -3,8 +3,8 @@
     "./components/embeds/verdocs-auth/verdocs-auth.js",
     "./components/elements/verdocs-contact-picker/verdocs-contact-picker.js",
     "./components/controls/verdocs-dropdown/verdocs-dropdown.js",
+    "./components/controls/verdocs-floating-menu/verdocs-floating-menu.js",
     "./components/elements/verdocs-search-box/verdocs-search-box.js",
-    "./components/elements/verdocs-template-recipients/verdocs-template-recipients.js",
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
     "./components/controls/verdocs-button/verdocs-button.js",
     "./components/controls/verdocs-button-panel/verdocs-button-panel.js",
@@ -26,31 +26,36 @@
     "./components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.js",
     "./components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.js",
     "./components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js",
+    "./components/elements/verdocs-component-error/verdocs-component-error.js",
     "./components/elements/verdocs-document-page/verdocs-document-page.js",
     "./components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js",
-    "./components/elements/verdocs-field-attachment/verdocs-field-attachment.js",
-    "./components/elements/verdocs-field-checkbox/verdocs-field-checkbox.js",
-    "./components/elements/verdocs-field-date/verdocs-field-date.js",
-    "./components/elements/verdocs-field-dropdown/verdocs-field-dropdown.js",
-    "./components/elements/verdocs-field-initial/verdocs-field-initial.js",
-    "./components/elements/verdocs-field-payment/verdocs-field-payment.js",
-    "./components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.js",
-    "./components/elements/verdocs-field-signature/verdocs-field-signature.js",
-    "./components/elements/verdocs-field-textarea/verdocs-field-textarea.js",
-    "./components/elements/verdocs-field-textbox/verdocs-field-textbox.js",
-    "./components/elements/verdocs-field-timestamp/verdocs-field-timestamp.js",
     "./components/elements/verdocs-quick-functions/verdocs-quick-functions.js",
     "./components/elements/verdocs-search-activity/verdocs-search-activity.js",
     "./components/elements/verdocs-search-tabs/verdocs-search-tabs.js",
-    "./components/elements/verdocs-template-create/verdocs-template-create.js",
-    "./components/elements/verdocs-template-fields/verdocs-template-fields.js",
-    "./components/elements/verdocs-template-properties/verdocs-template-properties.js",
     "./components/embeds/verdocs-build/verdocs-build.js",
     "./components/embeds/verdocs-preview/verdocs-preview.js",
     "./components/embeds/verdocs-search/verdocs-search.js",
     "./components/embeds/verdocs-send/verdocs-send.js",
     "./components/embeds/verdocs-sign/verdocs-sign.js",
-    "./components/embeds/verdocs-view/verdocs-view.js"
+    "./components/embeds/verdocs-view/verdocs-view.js",
+    "./components/fields/verdocs-field-attachment/verdocs-field-attachment.js",
+    "./components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js",
+    "./components/fields/verdocs-field-date/verdocs-field-date.js",
+    "./components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js",
+    "./components/fields/verdocs-field-initial/verdocs-field-initial.js",
+    "./components/fields/verdocs-field-payment/verdocs-field-payment.js",
+    "./components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js",
+    "./components/fields/verdocs-field-signature/verdocs-field-signature.js",
+    "./components/fields/verdocs-field-textarea/verdocs-field-textarea.js",
+    "./components/fields/verdocs-field-textbox/verdocs-field-textbox.js",
+    "./components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js",
+    "./components/templates/verdocs-template-create/verdocs-template-create.js",
+    "./components/templates/verdocs-template-fields/verdocs-template-fields.js",
+    "./components/templates/verdocs-template-name/verdocs-template-name.js",
+    "./components/templates/verdocs-template-properties/verdocs-template-properties.js",
+    "./components/templates/verdocs-template-recipients/verdocs-template-recipients.js",
+    "./components/templates/verdocs-template-reminders/verdocs-template-reminders.js",
+    "./components/templates/verdocs-template-visibillity/verdocs-template-visibility.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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-text-input/verdocs-text-input.css

@@ -16,6 +16,10 @@ verdocs-text-input .input-element {
   padding: 4px 12px;
   outline: none;
 }
+verdocs-text-input .input-element:disabled {
+  border: 1px solid #aeb4bf;
+  background: #f5f5fa;
+}
 verdocs-text-input .input-element::placeholder {
   color: #aaaaaa;
   opacity: 1;

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/embeds/verdocs-build/verdocs-build.js

@@ -42,7 +42,8 @@ export class VerdocsBuild {
   }
   handleTemplateCreated(e) {
     console.log('Created', e.detail);
-    this.step = 'properties';
+    this.step = 'fields';
+    // this.step = 'properties';
   }
   handlePropertiesUpdated(e) {
     console.log('updated', e.detail);
@@ -53,7 +54,10 @@ export class VerdocsBuild {
     this.step = 'fields';
   }
   render() {
-    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'properties' && h("verdocs-template-properties", { onCancel: e => this.handleCancel(e), onNext: e => this.handlePropertiesUpdated(e) }), this.step === 'recipients' && h("verdocs-template-recipients", { onCancel: e => this.handleCancel(e), onNext: e => this.handleRecipientsUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onNext: e => this.handleCancel(e) })));
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onNext: e => this.handleCancel(e) })));
   }
   static get is() { return "verdocs-build"; }
   static get originalStyleUrls() {

package/dist/collection/components/{elements → fields}/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 → fields}/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 {