@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -1,19 +1,131 @@
 'use strict';
 
-const index = require('./index-83ab34ef.js');
+const index = require('./index-a24f3b6a.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
  */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (index.BUILD.isDev && !index.BUILD.isTesting) {
+        index.consoleDevInfo('Running in development mode.');
+    }
+    if (index.BUILD.cssVarShim) {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    if (index.BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(index.H.prototype);
+    }
+    if (index.BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
+        ? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        : null;
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('verdocs-web-sdk.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
+    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!index.BUILD.safari10 && importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
     }
+    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        if (index.BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-7fb93981.js'); }).then(() => opts);
+        }
+    }
     return index.promiseResolve(opts);
 };
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["document-status-indicator.cjs",[[0,"document-status-indicator",{"status":[1]}]]],["dropdown-menu.cjs",[[0,"dropdown-menu",{"options":[16],"open":[4],"tall":[4],"isOpen":[32]}]]],["org-popup.cjs",[[0,"org-popup",{"organization":[8],"theme":[1]}]]],["pdf-viewer.cjs",[[0,"pdf-viewer",{"rotation":[2],"src":[1]}]]],["search-box.cjs",[[0,"search-box",{"placeholder":[1],"type":[1],"query":[1]}]]],["search-embed.cjs",[[1,"search-embed"]]],["search-quick-functions.cjs",[[0,"search-quick-functions"]]],["search-recent.cjs",[[0,"search-recent",{"limit":[2],"recent":[32]}]]],["search-saved.cjs",[[0,"search-saved",{"limit":[2],"saved":[32]}]]],["search-starred.cjs",[[0,"search-starred",{"options":[8]}]]],["search-tabs.cjs",[[4,"search-tabs",{"selected":[32]}]]],["tags-indicator.cjs",[[0,"tags-indicator",{"tags":[16],"theme":[1]}]]],["template-card.cjs",[[0,"template-card",{"template":[8],"theme":[1]}]]],["toggle-icon-buttons.cjs",[[0,"toggle-icon-buttons",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]]], options);
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"documentid":[1],"roleid":[1],"invitecode":[1],"endpoint":[32],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search"]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-quick-functions.cjs",[[0,"verdocs-quick-functions"]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"order":[2],"value":[1],"required":[4],"disabled":[4],"focusField":[64]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"rotation":[2],"source":[1],"token":[1],"loadProgress":[32]}]]],["verdocs-dropdown.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}]]],["verdocs-field-checkbox.cjs",[[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-field-radio-button.cjs",[[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-search-activity.cjs",[[0,"verdocs-search-activity",{"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}]]],["verdocs-search-box.cjs",[[0,"verdocs-search-box",{"placeholder":[1],"type":[1],"query":[1]}]]],["verdocs-text-input.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-loader.cjs",[[0,"verdocs-loader"]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,24 +1,42 @@
 {
   "entries": [
-    "./components/controls/dropdown-menu/dropdown-menu.js",
-    "./components/elements/search-box/search-box.js",
-    "./components/controls/toggle-icon-buttons/toggle-icon-buttons.js",
-    "./components/controls/document-status-indicator/document-status-indicator.js",
-    "./components/controls/tags-indicator/tags-indicator.js",
-    "./components/elements/org-popup/org-popup.js",
-    "./components/elements/search-quick-functions/search-quick-functions.js",
-    "./components/elements/search-recent/search-recent.js",
-    "./components/elements/search-saved/search-saved.js",
-    "./components/elements/search-starred/search-starred.js",
-    "./components/elements/search-tabs/search-tabs.js",
-    "./components/elements/template-card/template-card.js",
-    "./components/embeds/search-embed/search-embed.js",
-    "./components/pdf-viewer/pdf-viewer.js"
+    "./components/embeds/verdocs-auth/verdocs-auth.js",
+    "./components/controls/verdocs-dropdown/verdocs-dropdown.js",
+    "./components/elements/verdocs-search-box/verdocs-search-box.js",
+    "./components/controls/verdocs-toggle/verdocs-toggle.js",
+    "./components/embeds/verdocs-view/verdocs-view.js",
+    "./components/controls/verdocs-button/verdocs-button.js",
+    "./components/controls/verdocs-loader/verdocs-loader.js",
+    "./components/controls/verdocs-organization-card/verdocs-organization-card.js",
+    "./components/controls/verdocs-status-indicator/verdocs-status-indicator.js",
+    "./components/controls/verdocs-template-card/verdocs-template-card.js",
+    "./components/controls/verdocs-template-tags/verdocs-template-tags.js",
+    "./components/controls/verdocs-text-input/verdocs-text-input.js",
+    "./components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js",
+    "./components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.js",
+    "./components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.js",
+    "./components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.js",
+    "./components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js",
+    "./components/elements/verdocs-field-attachment/verdocs-field-attachment.js",
+    "./components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.js",
+    "./components/elements/verdocs-field-date/verdocs-field-date.js",
+    "./components/elements/verdocs-field-dropdown/verdocs-field-dropdown.js",
+    "./components/elements/verdocs-field-initial/verdocs-field-initial.js",
+    "./components/elements/verdocs-field-payment/verdocs-field-payment.js",
+    "./components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.js",
+    "./components/elements/verdocs-field-signature/verdocs-field-signature.js",
+    "./components/elements/verdocs-field-textarea/verdocs-field-textarea.js",
+    "./components/elements/verdocs-field-textbox/verdocs-field-textbox.js",
+    "./components/elements/verdocs-quick-functions/verdocs-quick-functions.js",
+    "./components/elements/verdocs-search-activity/verdocs-search-activity.js",
+    "./components/elements/verdocs-search-tabs/verdocs-search-tabs.js",
+    "./components/embeds/verdocs-search/verdocs-search.js",
+    "./components/embeds/verdocs-sign/verdocs-sign.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
-    "typescriptVersion": "4.3.5"
+    "version": "2.17.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/controls/verdocs-button/verdocs-button.css

@@ -0,0 +1,140 @@
+verdocs-button button {
+  font-family: "Barlow", sans-serif;
+  text-transform: uppercase;
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 700;
+  cursor: pointer;
+  margin: 0;
+}
+verdocs-button button .icon {
+  margin: 0 12px;
+}
+verdocs-button button .icon svg {
+  fill: #fff;
+  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]) {
+  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]) {
+  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;
+}

package/dist/collection/components/controls/verdocs-button/verdocs-button.js

@@ -0,0 +1,205 @@
+import { Component, Prop, h, Event } from '@stencil/core';
+/**
+ * Display a simple button.
+ *
+ * Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and
+ * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.
+ * (Auth uses text buttons for the Forgot Password and Sign Up options.)
+ *
+ * Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such
+ * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also
+ * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.
+ *
+ * Icons may be placed either before ("start") or after ("end") the button label. Icons should be SVG objects passed as strings and will
+ * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill="#ffffff"` setting
+ * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.
+ */
+export class VerdocsButton {
+  constructor() {
+    /**
+     * 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() {
+    console.log('Rendering button', this.startIcon);
+    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 is() { return "verdocs-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label for the button."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "startIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If desired, a prefix icon for the button"
+      },
+      "attribute": "start-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "endIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If desired, a suffix icon for the button"
+      },
+      "attribute": "end-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'normal' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"normal\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size (height) of the button."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'normal'"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'button' | 'submit' | 'reset'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of the button."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'standard' | 'text' | 'outline'",
+        "resolved": "\"outline\" | \"standard\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The display variant of the button."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'standard'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the button should be disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "press",
+      "name": "press",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the button is pressed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/controls/verdocs-button/verdocs-button.stories.js

@@ -0,0 +1,59 @@
+import { html } from 'lit-html';
+// Circle with three dots in it
+const CircleIcon = `
+  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <g>
+      <rect fill="none" height="24" width="24"/>
+    </g>
+    <g>
+      <g>
+        <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"/>
+        <circle cx="7" cy="12" r="1.5"/>
+        <circle cx="12" cy="12" r="1.5"/>
+        <circle cx="17" cy="12" r="1.5"/>
+      </g>
+    </g>
+  </svg>
+`;
+const ArrowIcon = `
+<svg width="10" height="26" viewBox="0 0 10 26" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_31568_3647)">
+<path d="M9.64682 13.431L2.10645 20.9466C1.86503 21.1853 1.47466 21.1853 1.23324 20.9466L0.216218 19.9411C-0.0251976 19.7025 -0.0251976 19.3165 0.216218 19.0778L6.30296 12.9993L0.216218 6.9208C-0.0251976 6.68213 -0.0251976 6.29619 0.216218 6.05752L1.23324 5.05205C1.47466 4.81338 1.86503 4.81338 2.10645 5.05205L9.64682 12.5677C9.88824 12.8064 9.88824 13.1923 9.64682 13.431Z"/>
+</g>
+<defs>
+<clipPath id="clip0_31568_3647">
+<rect width="9.86207" height="26"/>
+</clipPath>
+</defs>
+</svg>
+`;
+export default {
+  title: 'Controls/Button',
+  component: 'verdocs-button',
+  args: {
+    label: 'Click Me',
+    type: 'button',
+    size: 'normal',
+    variant: 'standard',
+    disabled: false,
+  },
+  argTypes: {
+    startIcon: { defaultValue: false, control: { type: 'boolean' } },
+    endIcon: { defaultValue: false, control: { type: 'boolean' } },
+    press: {
+      action: 'press',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const Button = ({ label, size, variant, disabled, startIcon, endIcon, press }) => html `<verdocs-button
+    .label=${label}
+    .startIcon=${startIcon ? CircleIcon : null}
+    .endIcon=${endIcon ? ArrowIcon : null}
+    .size=${size}
+    .variant=${variant}
+    .disabled=${disabled}
+    @press=${press}
+  />`;