@verdocs/web-sdk 1.14.12 → 1.15.1

package/dist/cjs/{verdocs-status-indicator.cjs.entry.js → verdocs-pagination_4.cjs.entry.js}

@@ -3,7 +3,165 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
+const Primitives = require('./Primitives-be5088cb.js');
+const utils = require('./utils-2c6835c6.js');
 const popper = require('./popper-9def2535.js');
+require('./_commonjsHelpers-0c557e26.js');
+require('./Envelopes-43302e10.js');
+require('./Types-f89f9116.js');
+require('./Files-4bdc0c0f.js');
+require('./Types-ee5afdf8.js');
+require('./index-7c19ba1d.js');
+
+const verdocsPaginationCss = "verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";
+
+const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
+const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
+const PageButton = ({ page, selected, onClick }) => {
+  let label;
+  if (page === 'first') {
+    label = ChevronDoubleLeft;
+  }
+  else if (page === 'last') {
+    label = ChevronDoubleRight;
+  }
+  else {
+    label = String(page + 1);
+  }
+  return index.h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
+};
+const VerdocsQuickFilter$2 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectPage = index.createEvent(this, "selectPage", 7);
+    this.selectedPage = 0;
+    this.itemCount = 1;
+    this.perPage = 10;
+  }
+  handleSelectPage(page) {
+    var _a;
+    this.selectedPage = page;
+    (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
+  }
+  render() {
+    const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
+    // If there are 10 pages:
+    //   If page == 0 => firstPage: 0, numPagesToDisplay:
+    const firstPage = Math.max(0, this.selectedPage - 2);
+    const numPagesToDisplay = Math.min(numPages, 5);
+    return (index.h(index.Host, null, this.selectedPage > 0 && index.h(PageButton, { page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { class: "ellipsis" }, "..."), Primitives.integerSequence(firstPage, numPagesToDisplay - firstPage).map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), numPagesToDisplay < numPages && index.h("div", { class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+  }
+  get el() { return index.getElement(this); }
+};
+VerdocsQuickFilter$2.style = verdocsPaginationCss;
+
+const verdocsQuickFilterCss = "verdocs-quick-filter{position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-quick-filter .control{outline:0;height:34px;display:-ms-flexbox;display:flex;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;-webkit-transition:all 100ms ease 0s;transition:all 100ms ease 0s;border:1px solid #cccccc}verdocs-quick-filter .title{padding:0 8px;font-size:14px;max-width:100%;overflow:hidden;color:#33364b;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis}verdocs-quick-filter .title .prefix{display:inline;font-weight:700;margin:0 7px 0 0;color:#4c56cb}verdocs-quick-filter .arrow{width:32px;height:32px;border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#ffffff;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s}verdocs-quick-filter .arrow svg{-webkit-transition:0.3s;transition:0.3s;fill:#cccccc}verdocs-quick-filter .separator{width:1px;display:block;margin-top:8px;margin-bottom:8px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#cccccc}verdocs-quick-filter .items{display:none;z-index:10000;position:absolute;border-radius:4px;background:#ffffff;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px}verdocs-quick-filter .items[data-show]{display:block}verdocs-quick-filter .option{width:100%;border:none;display:block;font-size:14px;text-align:left;background:none;padding:10px 20px;color:#1e2031}verdocs-quick-filter .option:hover{cursor:pointer;background:#4c56cb3f}verdocs-quick-filter .option[disabled]{color:#aaaaaa}verdocs-quick-filter .option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}verdocs-quick-filter.open .items{display:block}verdocs-quick-filter.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1)}";
+
+const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
+const VerdocsQuickFilter$1 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.optionSelected = index.createEvent(this, "optionSelected", 7);
+    // We need to do this to reliably disconnect the click-away listener
+    this.clickListenerSymbol = new AbortController();
+    this.options = [];
+    this.label = 'Filter';
+    this.value = '';
+    this.placeholder = 'Select...';
+    this.open = undefined;
+  }
+  componentDidLoad() {
+    this.popper = popper.createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [-1, 14] } }] });
+    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
+  }
+  disconnectedCallback() {
+    this.clickListenerSymbol.abort();
+  }
+  clickListener(e) {
+    const outside = !(e.target == this.el || this.el.contains(e.target));
+    if (outside) {
+      this.hide();
+    }
+  }
+  handleSelectOption(e, option) {
+    e.stopPropagation();
+    this.optionSelected.emit(option);
+    this.value = option.value;
+    this.hide();
+  }
+  // See https://popper.js.org/docs/v2/tutorial/
+  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+  showDropdown() {
+    var _a, _b;
+    this.open = true;
+    this.dropdownMenu.setAttribute('data-show', '');
+    this.dropdownMenu.removeAttribute('aria-hidden');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+    })).catch(() => { });
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+  }
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown(e) {
+    e.stopPropagation();
+    if (this.open) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.open = false;
+    this.dropdownMenu.removeAttribute('data-show');
+    this.dropdownMenu.setAttribute('aria-hidden', 'true');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+    })).catch(() => { });
+  }
+  render() {
+    var _a, _b, _c;
+    const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.value === this.value);
+    const longestOption = (_b = this.options) === null || _b === void 0 ? void 0 : _b.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));
+    const longestLabelWidth = utils.renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
+    const prefixWidth = utils.renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
+    const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
+    return (index.h(index.Host, { class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, index.h("div", { class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, index.h("div", { class: "title", ref: el => (this.dropdownButton = el) }, index.h("span", { class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), index.h("div", { style: { flex: '1' } }), index.h("div", { class: "separator" }), index.h("div", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), index.h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (index.h("div", { class: "separator" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+VerdocsQuickFilter$1.style = verdocsQuickFilterCss;
+
+const verdocsSpinnerCss = "verdocs-spinner{display:inline-block;border-radius:50%;-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+
+const LIGHT_STYLE = { border: '3px solid rgba(255, 255, 255, 0.3)', borderTopColor: '#fff' };
+const DARK_STYLE = { border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333' };
+const VerdocsQuickFilter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 32;
+    this.mode = 'light';
+  }
+  render() {
+    return (index.h(index.Host, { style: {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        flex: `0 0 ${this.size}px`,
+        ...(this.mode === 'light' ? LIGHT_STYLE : DARK_STYLE),
+      } }));
+  }
+};
+VerdocsQuickFilter.style = verdocsSpinnerCss;
 
 const methods$1 = {};
 const names = [];
@@ -7231,12 +7389,12 @@ const ENTRY_PADDING = 40;
 const VerdocsStatusIndicator = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.recipientStatusIcons = [];
     this.size = 'normal';
     this.theme = 'light';
     this.status = undefined;
     this.envelope = undefined;
     this.isOpen = undefined;
-    this.recipientStatusIcons = [];
     this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
@@ -7443,4 +7601,7 @@ const VerdocsStatusIndicator = class {
 };
 VerdocsStatusIndicator.style = verdocsStatusIndicatorCss;
 
+exports.verdocs_pagination = VerdocsQuickFilter$2;
+exports.verdocs_quick_filter = VerdocsQuickFilter$1;
+exports.verdocs_spinner = VerdocsQuickFilter;
 exports.verdocs_status_indicator = VerdocsStatusIndicator;

package/dist/cjs/verdocs-preview.cjs.entry.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
-const utils = require('./utils-f4efefe3.js');
-const TemplateStore = require('./TemplateStore-f2fb6a62.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
+const utils = require('./utils-2c6835c6.js');
+const TemplateStore = require('./TemplateStore-fe148e97.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
-require('./Envelopes-e5ffb6a5.js');
+require('./Envelopes-43302e10.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 require('./index-e84e0687.js');
-require('./Templates-24580a13.js');
+require('./Templates-1a86703d.js');
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 

package/dist/cjs/verdocs-quick-functions_3.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
-const Templates = require('./Templates-24580a13.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
+const Templates = require('./Templates-1a86703d.js');
 
 /**
  * Verdocs provides a range of search functions to help find and retrieve content. This module provides generic functions intended

package/dist/cjs/verdocs-radio-button.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-70677d67.js');
+
+const verdocsRadioButtonCss = "verdocs-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-radio-button.disabled{opacity:0.5}verdocs-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-radio-button input[type=radio]+label:before{content:\"\";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:16px;height:16px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-radio-button.hide{display:none}verdocs-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsRadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checked = false;
+    this.name = '';
+    this.value = '';
+    this.disabled = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: { disabled: this.disabled } }, index.h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+  }
+};
+VerdocsRadioButton.style = verdocsRadioButtonCss;
+
+exports.verdocs_radio_button = VerdocsRadioButton;

package/dist/cjs/verdocs-search.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
 
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
 

package/dist/cjs/verdocs-send.cjs.entry.js

@@ -4,19 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
-const TemplateStore = require('./TemplateStore-f2fb6a62.js');
-const utils = require('./utils-f4efefe3.js');
+const TemplateStore = require('./TemplateStore-fe148e97.js');
+const utils = require('./utils-2c6835c6.js');
 const errors = require('./errors-0396da3d.js');
 require('./index-e84e0687.js');
-require('./Templates-24580a13.js');
+require('./Templates-1a86703d.js');
 require('./_commonjsHelpers-0c557e26.js');
-require('./Envelopes-e5ffb6a5.js');
+require('./Envelopes-43302e10.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsSendCss = "verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:none}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
 

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
-const Envelopes = require('./Envelopes-e5ffb6a5.js');
+const Envelopes = require('./Envelopes-43302e10.js');
 const Types$1 = require('./Types-f89f9116.js');
 const Recipients = require('./Recipients-f3d6cf10.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-2c6835c6.js');
 const Types = require('./Types-ee5afdf8.js');
 const errors = require('./errors-0396da3d.js');
 const Toast = require('./Toast-06880504.js');
-const index$1 = require('./index-6528b430.js');
+const index$1 = require('./index-7c19ba1d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.js');
 

package/dist/cjs/verdocs-template-attachments_2.cjs.entry.js

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-70677d67.js');
+require('./Types-f89f9116.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-cb0b1329.js');
+const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
+const Icons = require('./Icons-a11fb3fc.js');
+const TemplateStore = require('./TemplateStore-fe148e97.js');
+const errors = require('./errors-0396da3d.js');
+const Templates = require('./Templates-1a86703d.js');
+require('./index-e84e0687.js');
+
+const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-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;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
+
+const VerdocsTemplateAttachments = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.exit = index.createEvent(this, "exit", 7);
+    this.next = index.createEvent(this, "next", 7);
+    this.templateUpdate = index.createEvent(this, "templateUpdate", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.uploading = false;
+    this.progressLabel = 'Uploading...';
+    this.progressPercent = 0;
+    this.showDeleteError = false;
+    this.confirmDeleteDocument = null;
+    this.store = null;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+    }
+    catch (e) {
+      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  handleCancel(e) {
+    e.stopPropagation();
+    this.exit.emit();
+  }
+  handleUploadProgress(percent) {
+    if (percent >= 99) {
+      this.progressPercent = 100;
+      this.progressLabel = 'Processing...';
+    }
+    else {
+      this.progressPercent = percent;
+    }
+  }
+  async handleUpload(e) {
+    var _a, _b, _c;
+    e.stopPropagation();
+    const file = e.detail.file;
+    if (!file) {
+      return;
+    }
+    console.log('[ATTACHMENTS] Uploading...', file);
+    this.uploading = true;
+    this.progressLabel = 'Uploading...';
+    try {
+      const template = await TemplateDocuments.createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
+      console.log('[ATTACHMENTS] Created attachment', template);
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, true);
+      console.log('[ATTACHMENTS] New template', this.store.state);
+      this.uploading = false;
+      this.progressLabel = '';
+      this.progressPercent = 0;
+    }
+    catch (e) {
+      console.log('[ATTACHMENTS] Error creating template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      this.uploading = false;
+    }
+  }
+  handleNext(e) {
+    var _a;
+    e.stopPropagation();
+    this.uploading = false;
+    this.progressLabel = '';
+    this.progressPercent = 0;
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
+  }
+  async confirmDelete() {
+    await TemplateDocuments.deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
+    this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, true);
+    console.log('[ATTACHMENTS] New template', this.store.state);
+    this.confirmDeleteDocument = null;
+  }
+  async handleDelete(document) {
+    var _a;
+    if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.template_documents.length) > 1) {
+      this.confirmDeleteDocument = document;
+    }
+    else {
+      this.showDeleteError = true;
+    }
+  }
+  getFileIcon(document) {
+    switch (document.mime) {
+      case 'application/pdf':
+        return Icons.PdfIcon;
+      case 'image/jpeg':
+        return Icons.JpgIcon;
+      case 'image/png':
+        return Icons.PngIcon;
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return Icons.DocIcon;
+    }
+    return Icons.FileIcon;
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+    if (!templateState.isLoaded) {
+      return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    if (!this.endpoint.session || !templateState.profile_id) {
+      return index.h(index.Host, { class: "empty" });
+    }
+    return (index.h(index.Host, null, index.h("h5", null, "Existing Attachments"), index.h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.template_documents.map(document => (index.h("div", { class: "attachment" }, index.h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), index.h("div", { class: "filename", title: document.name }, document.name), index.h("div", { class: "pages" }, index.h("div", { class: "count" }, document.page_numbers), index.h("div", { class: "pages-icon", innerHTML: Icons.PageCountIcon })), index.h("div", { class: "trash-icon", innerHTML: Icons.TrashIcon, onClick: () => this.handleDelete(document) }))))), index.h("h5", null, "Attach a New Document"), this.uploading ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.template_documents.length) || this.uploading })), this.showDeleteError && (index.h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (index.h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
+        this.confirmDeleteDocument = null;
+      } }))));
+  }
+};
+VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
+
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+
+const unicodeNBSP = ' ';
+const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
+const VerdocsTemplateCreate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.exit = index.createEvent(this, "exit", 7);
+    this.next = index.createEvent(this, "next", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.file = undefined;
+    this.creating = false;
+    this.progressLabel = 'Uploading...';
+    this.progressPercent = 0;
+  }
+  componentWillLoad() {
+    this.endpoint.setTimeout(30000);
+    this.endpoint.loadSession();
+  }
+  handleFileChanged(e) {
+    var _a;
+    this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+    console.log('[CREATE] Selected file', this.file);
+    // this.filePath = e.target.files?.[0]?.name;
+  }
+  handleUpload(e) {
+    e.stopPropagation();
+    const fileElem = document.getElementById('verdocs-template-create-file');
+    fileElem.click();
+  }
+  handleCancel(e) {
+    e.stopPropagation();
+    this.exit.emit();
+  }
+  async handleSubmit(e) {
+    var _a, _b, _c, _d;
+    e.stopPropagation();
+    console.log('Submitting');
+    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
+    if (!this.file) {
+      return;
+    }
+    this.creating = true;
+    this.progressLabel = 'Uploading...';
+    try {
+      const template = await Templates.createTemplate(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+        if (percent >= 99) {
+          this.progressLabel = 'Processing...';
+          this.progressPercent = 100;
+        }
+        else {
+          this.progressPercent = percent;
+        }
+      });
+      console.log('[CREATE] Created template', template);
+      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(template);
+      this.creating = false;
+      this.progressLabel = '';
+      this.progressPercent = 0;
+    }
+    catch (e) {
+      console.log('[CREATE] Error creating template', e);
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new errors.SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+      this.creating = false;
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("div", { class: "upload-box", onDrop: (e) => {
+        e.preventDefault();
+        e.target.classList.remove('drag-over');
+        this.file = e.dataTransfer.files[0];
+      }, onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, index.h("div", null, index.h("span", { innerHTML: FileIcon })), index.h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { style: {
+        marginTop: '20px',
+        marginBottom: '20px',
+        fontSize: '16px',
+        height: '20px',
+      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), index.h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
+  }
+};
+VerdocsTemplateCreate.style = verdocsTemplateCreateCss;
+
+exports.verdocs_template_attachments = VerdocsTemplateAttachments;
+exports.verdocs_template_create = VerdocsTemplateCreate;