@verdocs/web-sdk 1.11.3 → 1.11.5

package/dist/cjs/verdocs-floating-menu_3.cjs.entry.js

@@ -1,248 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1329d89c.js');
-const TemplateDocuments = require('./TemplateDocuments-6b395b32.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
-const utils = require('./utils-f4cfa1fb.js');
-const popper = require('./popper-11d5f714.js');
-require('./Token-576f0e8a.js');
-require('./Envelopes-7381bd9a.js');
-require('./Files-4bdc0c0f.js');
-require('./index-6528b430.js');
-
-const verdocsFloatingMenuCss = "verdocs-floating-menu{display:none}#verdocs-floating-menu{position:absolute;width:56px;height:56px;display:-ms-flexbox;display:flex;-ms-flex:0 0 fit-content;flex:0 0 fit-content}#verdocs-floating-menu:not(.force-closed):hover{height:500px}#verdocs-floating-menu:not(.force-closed):hover .trigger{-webkit-box-shadow:0 10px 25px #4c56cb;box-shadow:0 10px 25px #4c56cb;-webkit-transform:translatey(2px);transform:translatey(2px);-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu:not(.force-closed):hover .options{display:-ms-flexbox;display:flex}#verdocs-floating-menu:not(.force-closed):hover .options .option{-webkit-animation:vfm-appear 0.1s forwards 0.2s;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;-webkit-box-shadow:0 10px 25px -5px #4c56cb;box-shadow:0 10px 25px -5px #4c56cb;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu .options{width:56px;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 fit-content;flex:0 0 fit-content;position:absolute;bottom:70px;display:none}#verdocs-floating-menu .option{background:#654dcb;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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:-ms-flexbox;display:flex}#verdocs-floating-menu verdocs-toolbar-icon .icon svg{fill:#ffffff}@-webkit-keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}";
-
-// @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);
-};
-const VerdocsFloatingMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionSelected = index.createEvent(this, "optionSelected", 7);
-    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 index.h(index.Host, null);
-  }
-  get el() { return index.getElement(this); }
-};
-VerdocsFloatingMenu.style = verdocsFloatingMenuCss;
-
-const verdocsTemplateDocumentPageCss = "verdocs-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
-
-const VerdocsTemplateDocumentPage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pageRendered = index.createEvent(this, "pageRendered", 7);
-    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.documentId = '';
-    this.pageNumber = 1;
-    this.virtualWidth = 612;
-    this.virtualHeight = 792;
-    this.layers = [{ name: 'page', type: 'canvas' }];
-    this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
-    this.renderedWidth = this.virtualWidth;
-    this.renderedHeight = this.virtualHeight;
-    this.naturalWidth = this.virtualWidth;
-    this.naturalHeight = this.virtualHeight;
-    this.aspectRatio = this.virtualWidth / this.virtualHeight;
-    this.skipFirstNotification = true;
-    this.pageDisplayUri = '';
-  }
-  async componentWillLoad() {
-    const uri = await TemplateDocuments.getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
-    console.log('pd', uri);
-    this.pageDisplayUri = uri;
-  }
-  componentDidLoad() {
-    this.resizeObserver = new ResizeObserver(utils.throttle(entries => {
-      for (const entry of entries) {
-        const renderedWidth = entry.contentRect.width;
-        this.renderedWidth = renderedWidth;
-        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
-      }
-      this.notifyRenderedSize();
-    }, 100));
-    this.resizeObserver.observe(this.container);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
-  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
-  // componentDidRender() {
-  //   this.notifyRenderedSize();
-  // }
-  notifyRenderedSize() {
-    // We skip one notification because by default we will always get at least two, one when rendering the initial size
-    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
-    if (this.skipFirstNotification) {
-      this.skipFirstNotification = false;
-      return;
-    }
-    this.pageRendered.emit({
-      // container: this.container,
-      containerId: this.containerId,
-      pageNumber: this.pageNumber,
-      virtualWidth: this.virtualWidth,
-      virtualHeight: this.virtualHeight,
-      renderedWidth: this.renderedWidth,
-      renderedHeight: this.renderedHeight,
-      naturalWidth: this.naturalWidth,
-      naturalHeight: this.naturalHeight,
-      aspectRatio: this.aspectRatio,
-      xScale: this.renderedWidth / this.virtualWidth,
-      yScale: this.renderedHeight / this.virtualHeight,
-    });
-  }
-  render() {
-    const height = `${this.renderedHeight}px`;
-    return (index.h(index.Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
-        // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
-        // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
-        // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
-        // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
-        // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
-        // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
-        // TODO: Store this in the DB with each page.
-        this.naturalWidth = e.target.naturalWidth;
-        this.naturalHeight = e.target.naturalHeight;
-        this.aspectRatio = this.naturalWidth / this.naturalHeight;
-        this.virtualHeight = this.virtualWidth / this.aspectRatio;
-      } })) : (index.h("div", null)))));
-  }
-  get container() { return index.getElement(this); }
-};
-VerdocsTemplateDocumentPage.style = verdocsTemplateDocumentPageCss;
-
-const verdocsToolbarIconCss = "verdocs-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}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}";
-
-const VerdocsToolbarIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.text = '';
-    this.icon = '';
-    this.placement = 'bottom';
-    this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentDidLoad() {
-    this.popperInstance = popper.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) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
-    }
-  }
-  show() {
-    var _a, _b;
-    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-  }
-  hide() {
-    var _a;
-    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-  }
-  // handlePress() {
-  //   this.press?.emit();
-  // }
-  render() {
-    return (index.h(index.Host, { class: {} }, index.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) }), index.h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { "data-popper-arrow": "true", class: "arrow" }))));
-  }
-};
-VerdocsToolbarIcon.style = verdocsToolbarIconCss;
-
-exports.verdocs_floating_menu = VerdocsFloatingMenu;
-exports.verdocs_template_document_page = VerdocsTemplateDocumentPage;
-exports.verdocs_toolbar_icon = VerdocsToolbarIcon;