@verdocs/web-sdk 1.2.0 → 1.4.6

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

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

package/dist/components/verdocs-auth.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loadSession, a as authenticateUser, s as setSession, e as endSession } from './Auth.js';
+import { V as VerdocsEndpoint, s as setActiveEndpoint } from './Token.js';
+import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+
+const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;background-color:#4c56cb;padding:40px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#f5f5fa;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
+
+const BASE_URL = 'https://stage-api.verdocs.com/';
+const SOURCE = 'verdocs-stage';
+const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.authenticated = createEvent(this, "authenticated", 7);
+    /**
+     * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
+     * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
+     * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.
+     */
+    this.visible = true;
+    /**
+     * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to
+     * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be
+     * in SVG format for best results.
+     */
+    this.logo = 'https://verdocs.com/assets/blue-logo.svg';
+    /**
+     * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary
+     * if the user's session details will be displayed instead. This may be useful while debugging authentication
+     * flows in new applications.
+     */
+    this.debug = false;
+    this.isAuthenticated = false;
+    this.displayMode = 'login';
+    this.username = '';
+    this.password = '';
+    this.loggingIn = false;
+    this.activeSession = null;
+    this.loginError = null;
+  }
+  componentWillLoad() {
+    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
+    setActiveEndpoint(staging);
+  }
+  componentDidLoad() {
+    const session = loadSession(SOURCE);
+    if (session !== null) {
+      this.isAuthenticated = true;
+      this.activeSession = session;
+      this.authenticated.emit({ authenticated: true, session });
+    }
+    else {
+      this.authenticated.emit({ authenticated: false, session: null });
+    }
+  }
+  // handleSelectOption(option: IMenuOption) {
+  //   this.isAuthenticated = false;
+  //   this.authenticated.emit(option);
+  // }
+  handleLogin() {
+    this.loggingIn = true;
+    authenticateUser({ username: this.username, password: this.password })
+      .then(r => {
+      this.loggingIn = false;
+      const session = setSession(SOURCE, r.accessToken, true);
+      this.activeSession = session;
+      this.isAuthenticated = true;
+      this.authenticated.emit({ authenticated: true, session });
+    })
+      .catch(e => {
+      var _a;
+      console.log('[VERDOCS] Login error', e.response, JSON.stringify(e));
+      this.loggingIn = false;
+      this.activeSession = null;
+      this.authenticated.emit({ authenticated: false, session: null });
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 403) {
+        this.loginError = 'Please check your username and password and try again.';
+      }
+    });
+  }
+  handleLogout() {
+    endSession(SOURCE);
+    this.isAuthenticated = false;
+    this.authenticated.emit({ authenticated: false, session: null });
+  }
+  handleClearError() {
+    this.loginError = null;
+  }
+  render() {
+    if (!this.visible) {
+      return h("div", { style: { display: 'none' } }, "Verdocs Auth Placeholder");
+    }
+    if (this.isAuthenticated) {
+      if (this.debug) {
+        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+      }
+      return h("div", { class: "status-result" }, "Authenticated");
+    }
+    if (this.displayMode === 'signup') {
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+    }
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+  }
+  static get style() { return verdocsAuthCss; }
+}, [0, "verdocs-auth", {
+    "visible": [4],
+    "logo": [1],
+    "debug": [4],
+    "isAuthenticated": [32],
+    "displayMode": [32],
+    "username": [32],
+    "password": [32],
+    "loggingIn": [32],
+    "activeSession": [32],
+    "loginError": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-auth", "verdocs-button", "verdocs-ok-dialog", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-auth":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsAuth$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsAuth = VerdocsAuth$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsAuth, defineCustomElement };

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

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

package/dist/components/verdocs-button.js

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

package/dist/components/verdocs-button2.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const verdocsButtonCss = "verdocs-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999;cursor:none}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+
+const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.press = createEvent(this, "press", 7);
+    /**
+     * If desired, a prefix icon for the button
+     */
+    this.startIcon = null;
+    /**
+     * If desired, a suffix icon for the button
+     */
+    this.endIcon = null;
+    /**
+     * The size (height) of the button.
+     */
+    this.size = 'normal';
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    /**
+     * The display variant of the button.
+     */
+    this.variant = 'standard';
+    /**
+     * Whether the button should be disabled.
+     */
+    this.disabled = false;
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.press.emit();
+  }
+  render() {
+    return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+  }
+  static get style() { return verdocsButtonCss; }
+}, [0, "verdocs-button", {
+    "label": [1],
+    "startIcon": [1, "start-icon"],
+    "endIcon": [1, "end-icon"],
+    "size": [1],
+    "type": [1],
+    "variant": [1],
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsButton as V, defineCustomElement as d };

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

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

package/dist/components/verdocs-dropdown.js

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

package/dist/components/verdocs-dropdown2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './popper.js';
+
+const SortDown = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
+`;
+
+const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+
+const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    /**
+     * The menu options to display.
+     */
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.isOpen = !!this.open;
+  }
+  componentDidLoad() {
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
+  }
+  handleSelectOption(option) {
+    this.isOpen = false;
+    this.optionSelected.emit(option);
+    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.isOpen = 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 }],
+    }));
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
+  }
+  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() {
+    if (this.isOpen) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.isOpen = 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 }],
+    }));
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
+  }
+  static get style() { return verdocsDropdownCss; }
+}, [0, "verdocs-dropdown", {
+    "options": [16],
+    "open": [4],
+    "isOpen": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsDropdown);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsDropdown as V, defineCustomElement as d };

package/dist/components/verdocs-field-attachment.d.ts

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

package/dist/components/verdocs-field-attachment.js

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

package/dist/components/verdocs-field-attachment2.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './verdocs-button2.js';
+import { d as defineCustomElement$1 } from './verdocs-upload-dialog2.js';
+
+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 verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-upload-dialog');
+    this.dialog.open = true;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('done', e => {
+      var _a;
+      console.log('done', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } }, h("span", { innerHTML: Paperclip, onClick: () => this.handleShow() })));
+  }
+  static get style() { return verdocsFieldAttachmentCss; }
+}, [0, "verdocs-field-attachment", {
+    "order": [2],
+    "value": [1],
+    "required": [4],
+    "disabled": [4],
+    "focusField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-upload-dialog"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-attachment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldAttachment);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-upload-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldAttachment as V, defineCustomElement as d };

package/dist/components/verdocs-field-checkbox.d.ts

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

package/dist/components/verdocs-field-checkbox.js

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

package/dist/components/verdocs-field-checkbox2.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";display:block;vertical-align:bottom;width:14px;height:14px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.2);-ms-flex-negative:0;flex-shrink:0}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:var(--verdocs-primary-color)}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:var(--verdocs-primary-color);border-color:var(--verdocs-primary-color)}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid var(--verdocs-required-color)}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = false;
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.checked);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } }, h("label", null, h("input", { type: "checkbox", tabIndex: this.order, checked: this.value, disabled: this.disabled, required: this.required, onChange: e => this.handleChange(e) }), h("span", null))));
+  }
+  static get style() { return verdocsFieldCheckboxCss; }
+}, [0, "verdocs-field-checkbox", {
+    "order": [2],
+    "value": [4],
+    "required": [4],
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldCheckbox);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldCheckbox as V, defineCustomElement as d };

package/dist/components/verdocs-field-date.d.ts

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

package/dist/components/verdocs-field-date.js

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