@verdocs/web-sdk 1.2.0 → 1.4.6

package/dist/components/verdocs-template-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateCard extends Components.VerdocsTemplateCard, HTMLElement {}
+export const VerdocsTemplateCard: {
+  prototype: VerdocsTemplateCard;
+  new (): VerdocsTemplateCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-card.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const ActionsIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`;
+
+const EmailIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>`;
+
+const PagesIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg>`;
+
+const StarIcon = `<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_31553_1553)">
+<path d="M30.886 11.4917C30.8916 11.0917 30.753 10.7034 30.4962 10.3993C30.2394 10.0953 29.882 9.8964 29.4908 9.83995L29.5182 9.65005L29.4908 9.83995L21.0938 8.60261L17.3412 0.912551C17.2067 0.638179 16.9992 0.407285 16.7421 0.245866C16.485 0.0844465 16.1885 -0.00111389 15.886 -0.00111389C15.5835 -0.00111389 15.287 0.0844465 15.0299 0.245866C14.7728 0.407285 14.5653 0.638179 14.4308 0.912551L10.6781 8.60261L2.28121 9.8392C1.89206 9.89475 1.53611 10.0916 1.2796 10.3931C1.02308 10.6945 0.88348 11.08 0.886776 11.4779C0.886447 11.6961 0.929977 11.912 1.01472 12.1125C1.09946 12.3131 1.22363 12.4941 1.37968 12.6445L7.45563 18.5744L6.01943 27.0241C6.00289 27.1258 5.99449 27.2287 5.99435 27.3317C5.99313 27.7717 6.16395 28.1943 6.4695 28.5071C6.77505 28.82 7.19045 28.9976 7.62496 29.0013C7.88846 29.0008 8.14779 28.9345 8.37992 28.8083L15.8883 24.8217L23.3967 28.8114C23.6287 28.9361 23.8873 29.0015 24.15 29.002C24.5752 28.9998 24.9832 28.8318 25.2893 28.5329C25.4452 28.3832 25.5695 28.2029 25.6544 28.003C25.7392 27.8031 25.783 27.5878 25.783 27.3702C25.7827 27.2731 25.7743 27.176 25.7579 27.0803L24.3209 18.6296L30.3931 12.7022C30.7094 12.3809 30.8867 11.9454 30.886 11.4917ZM22.0759 17.53L21.9437 17.3916L22.0759 17.53C22.0072 17.5977 21.9525 17.6787 21.9152 17.7681C21.8779 17.8575 21.8587 17.9536 21.8587 18.0506L21.8693 18.1737L23.2037 26.0237L16.2164 22.3148C16.1136 22.2602 15.9994 22.2317 15.8833 22.2317C15.7673 22.2317 15.653 22.2602 15.5503 22.3148L8.57132 26.0245L9.90651 18.1745L9.91712 18.0506C9.91696 17.9536 9.89768 17.8576 9.86038 17.7682C9.82308 17.6788 9.76851 17.5978 9.6999 17.53L4.05538 11.9724L11.8576 10.8258C11.9725 10.8088 12.0816 10.7638 12.1755 10.6947C12.2695 10.6256 12.3454 10.5344 12.3969 10.429L15.886 3.27721L19.3797 10.429C19.4313 10.5344 19.5074 10.6256 19.6014 10.6948C19.6955 10.7639 19.8047 10.8088 19.9197 10.8258L27.7197 11.9747L22.0759 17.53Z" fill="#ADB6BD"/>
+</g>
+<defs>
+<clipPath id="clip0_31553_1553">
+<rect width="30" height="29" fill="white" transform="translate(0.886719)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+
+const verdocsTemplateCardCss = "verdocs-template-card{font-family:\"Barlow\", sans-serif;width:320px;height:320px;display:-ms-flexbox;display:flex;padding:25px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05)}verdocs-template-card .thumbnail{width:272px;height:158px;-o-object-fit:cover;object-fit:cover;margin-bottom:22px;-o-object-position:-20% 0;object-position:-20% 0}verdocs-template-card .name{font-size:18px;font-weight:700;margin-bottom:7px}verdocs-template-card .org-name{font-size:14px;font-weight:700;margin-bottom:6px}verdocs-template-card hr{width:100%;margin-bottom:17px;background-color:#aeb4bf}verdocs-template-card .controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:16px}verdocs-template-card .controls .control{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;margin-right:8px;-ms-flex-align:start;align-items:flex-start;border-right:1px solid #aeb4bf}verdocs-template-card .controls .control.secondary{-ms-flex-pack:center;justify-content:center}verdocs-template-card .controls .control svg{fill:#aeb4bf;height:16px;max-width:16px;margin:0 8px -2px 0}verdocs-template-card .additional-controls svg{margin-right:0;fill:#654dcb}";
+
+const VerdocsTemplateCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    return (h(Host, null, h("img", { src: ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.template_document) === null || _b === void 0 ? void 0 : _b.thumbnail_url) || '', alt: "Template Thumbnail", class: "thumbnail" }), h("span", { class: "name" }, this.template.name), h("span", { class: "org-name" }, ((_c = this.template.organization) === null || _c === void 0 ? void 0 : _c.name) || 'Public'), h("hr", null), h("div", { class: "controls" }, h("div", { class: "control" }, h("span", { class: "icon", innerHTML: StarIcon }), h("span", { class: "value" }, this.template.star_counter)), h("div", { class: "control secondary" }, h("span", { class: "icon", innerHTML: PagesIcon }), h("span", { class: "value" }, ((_e = (_d = this.template) === null || _d === void 0 ? void 0 : _d.template_document) === null || _e === void 0 ? void 0 : _e.page_numbers) || 1)), h("div", { class: "control secondary" }, h("span", { class: "icon", innerHTML: EmailIcon }), h("span", { class: "value" }, this.template.counter)), h("span", { class: "additional-controls", innerHTML: ActionsIcon }))));
+  }
+  static get style() { return verdocsTemplateCardCss; }
+}, [0, "verdocs-template-card", {
+    "template": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateCard$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsTemplateCard = VerdocsTemplateCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateCard, defineCustomElement };

package/dist/components/verdocs-template-tags.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateTags extends Components.VerdocsTemplateTags, HTMLElement {}
+export const VerdocsTemplateTags: {
+  prototype: VerdocsTemplateTags;
+  new (): VerdocsTemplateTags;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-tags.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const verdocsTemplateTagsCss = "verdocs-template-tags{font-family:\"Barlow\", sans-serif}verdocs-template-tags span{margin:0 4px;height:28px;font-size:12px;font-weight:600;padding:5px 12px 7px;border-radius:5px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-transform:uppercase;color:#33364b;border:1px solid #707ae5;background-color:#f5f5fa}";
+
+const VerdocsTemplateTags$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    var _a;
+    return (h(Host, null, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+  }
+  static get style() { return verdocsTemplateTagsCss; }
+}, [0, "verdocs-template-tags", {
+    "tags": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-tags"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-tags":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateTags$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsTemplateTags = VerdocsTemplateTags$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateTags, defineCustomElement };

package/dist/components/verdocs-text-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTextInput extends Components.VerdocsTextInput, HTMLElement {}
+export const VerdocsTextInput: {
+  prototype: VerdocsTextInput;
+  new (): VerdocsTextInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-text-input.js

@@ -0,0 +1,6 @@
+import { V as VerdocsTextInput$1, d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+const VerdocsTextInput = VerdocsTextInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTextInput, defineCustomElement };

package/dist/components/verdocs-text-input2.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-label{display:block;color:#33354c;font-weight:400;font-size:14px;margin:0 0 4px 0}";
+
+const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldInput = createEvent(this, "fieldInput", 7);
+    this.fieldFocus = createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = createEvent(this, "fieldBlur", 7);
+    /**
+     * The value for the input field.
+     */
+    this.value = '';
+    /**
+     * The label for the field.
+     */
+    this.label = '';
+    /**
+     * The placeholder for the field.
+     */
+    this.placeholder = '';
+    /**
+     * If desired, the autocomplete attribute to set.
+     */
+    this.autocomplete = '';
+    /**
+     * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types
+     * (e.g. a date picker) will be supported by other controls in the future.
+     */
+    this.type = 'text';
+    /**
+     * Should the field be disabled?
+     */
+    this.disabled = false;
+    this._value = '';
+  }
+  componentWillLoad() {
+    this._value = this.value;
+  }
+  componentDidLoad() { }
+  handleInput(event) {
+    this._value = event.target.value;
+    this.fieldInput.emit(this._value);
+  }
+  handleFocus(event) {
+    this.fieldFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.fieldBlur.emit(event);
+  }
+  render() {
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, placeholder: this.placeholder, autoComplete: this.autocomplete, disabled: this.disabled, value: this._value, class: "input-element", onInput: event => this.handleInput(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleBlur(event) }))));
+  }
+  static get style() { return verdocsTextInputCss; }
+}, [0, "verdocs-text-input", {
+    "value": [1],
+    "label": [1],
+    "placeholder": [1],
+    "autocomplete": [1],
+    "type": [1],
+    "disabled": [4],
+    "_value": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTextInput);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTextInput as V, defineCustomElement as d };

package/dist/components/verdocs-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsToggle extends Components.VerdocsToggle, HTMLElement {}
+export const VerdocsToggle: {
+  prototype: VerdocsToggle;
+  new (): VerdocsToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-toggle.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const verdocsToggleCss = "verdocs-toggle{font-family:\"Barlow\", sans-serif}verdocs-toggle .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f5f5fa}verdocs-toggle .label{font-size:24px;font-weight:700;color:#33354c;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}verdocs-toggle .buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}verdocs-toggle .buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}verdocs-toggle .buttons button:not(:last-child){margin-right:11px}verdocs-toggle .buttons svg{width:30px;height:30px}verdocs-toggle .buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .buttons button:hover svg{fill:#f5f5fa;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}";
+
+const VerdocsToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  handleClick(event) {
+    event.preventDefault();
+    let container = event.target;
+    if (container.matches('toggle-icon-buttons')) {
+      container = event.target.shadowRoot;
+      const element = container.activeElement;
+      const siblings = Array.from(element.parentElement.children).filter(child => {
+        return child !== element;
+      });
+      siblings.map((sibling) => {
+        return sibling.classList.remove('selected');
+      });
+      if (!element.classList.contains('selected')) {
+        element.classList.add('selected');
+      }
+    }
+  }
+  render() {
+    return (h("div", { class: "container" }, h("span", { class: "label" }, `${this.options.label}:`), h("div", { class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.options.defaultSelection ? 'selected' : '' }))))));
+  }
+  static get style() { return verdocsToggleCss; }
+}, [0, "verdocs-toggle", {
+    "options": [16],
+    "theme": [1]
+  }, [[6, "click", "handleClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-toggle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsToggle$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsToggle = VerdocsToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsToggle, defineCustomElement };

package/dist/components/verdocs-upload-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsUploadDialog extends Components.VerdocsUploadDialog, HTMLElement {}
+export const VerdocsUploadDialog: {
+  prototype: VerdocsUploadDialog;
+  new (): VerdocsUploadDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-upload-dialog.js

@@ -0,0 +1,6 @@
+import { V as VerdocsUploadDialog$1, d as defineCustomElement$1 } from './verdocs-upload-dialog2.js';
+
+const VerdocsUploadDialog = VerdocsUploadDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsUploadDialog, defineCustomElement };

package/dist/components/verdocs-upload-dialog2.js

@@ -0,0 +1,144 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './verdocs-button2.js';
+
+/**
+ * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that
+ * includes the MIME type of the file, e.g. "data:image/jpeg;base64,iVBORw0K......"
+ */
+var fileToDataUrl = function (file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.onload = function () {
+            return resolve({
+                lastModified: file.lastModified,
+                size: file.size,
+                type: file.type,
+                name: file.name,
+                data: reader.result,
+            });
+        };
+        reader.onerror = reject;
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+        else {
+            reject(new Error('Invalid file'));
+        }
+    });
+};
+
+const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+</svg>
+`;
+
+const Trash = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+</svg>
+`;
+
+const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
+
+const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.cancel = createEvent(this, "cancel", 7);
+    this.done = createEvent(this, "done", 7);
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    this.draggingOver = false;
+    this.decodedFiles = [];
+  }
+  handleCancel() {
+    this.cancel.emit();
+    this.open = false;
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.decodedFiles);
+    this.open = false;
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    this.draggingOver = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
+    let droppedFiles = [];
+    if (e.dataTransfer.items) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {
+          const file = e.dataTransfer.items[i].getAsFile();
+          droppedFiles.push(file);
+        }
+      }
+    }
+    else {
+      droppedFiles = e.dataTransfer.files;
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  handleRemoveAttachment(index) {
+    const newFiles = [...this.decodedFiles];
+    newFiles.splice(index, 1);
+    this.decodedFiles = newFiles;
+  }
+  handleSelectFile() {
+    var _a;
+    (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  async handleFileChange(e) {
+    var _a, _b, _c;
+    console.log('fileChange', e);
+    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+    let droppedFiles = [];
+    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
+      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  render() {
+    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: Paperclip }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+  }
+  static get style() { return verdocsUploadDialogCss; }
+}, [0, "verdocs-upload-dialog", {
+    "open": [4],
+    "draggingOver": [32],
+    "decodedFiles": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-upload-dialog", "verdocs-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-upload-dialog":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsUploadDialog);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsUploadDialog as V, defineCustomElement as d };

package/dist/components/verdocs-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsView extends Components.VerdocsView, HTMLElement {}
+export const VerdocsView: {
+  prototype: VerdocsView;
+  new (): VerdocsView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-view.js

@@ -0,0 +1,6 @@
+import { V as VerdocsView$1, d as defineCustomElement$1 } from './verdocs-view2.js';
+
+const VerdocsView = VerdocsView$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsView, defineCustomElement };