@verdocs/web-sdk 1.2.0 → 1.4.6

package/dist/docs.d.ts

@@ -54,6 +54,9 @@ export interface JsonDocsProp {
     name: string;
     type: string;
     mutable: boolean;
+    /**
+     * The name of the attribute that is exposed to configure a compiled web component
+     */
     attr?: string;
     reflectToAttr: boolean;
     docs: string;

package/dist/docs.json

@@ -1,16 +1,16 @@
 {
-  "timestamp": "2022-02-18T06:01:40",
+  "timestamp": "2022-07-28T20:29:00",
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.12.1",
-    "typescriptVersion": "4.3.5"
+    "version": "2.17.1",
+    "typescriptVersion": "4.5.4"
   },
   "components": [
     {
       "filePath": "./src/components/embeds/verdocs-auth/verdocs-auth.tsx",
       "encapsulation": "none",
       "tag": "verdocs-auth",
-      "docs": "Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\noccur during the process (especially successful completion). The success callback will be fired immediately if the\nuser is already authenticated with a valid session, so this component may not always display visibly. To simplify\nsome types of authentication flows, a visibility flag can force this component to never display.\n\nThis embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\ncontainer to allow sufficient space for the required forms.\n\nAs noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\nthe widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\ncancels) authentication steps.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.\n\n```typescript\ninterface IAuthStatus {\n  // If true, the user is authenticated with a valid session\n  authenticated: boolean;\n\n  // Details for the user's session\n  session: IActiveSession | null;\n}\n```",
+      "docs": "Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\noccur during the process (especially successful completion). The success callback will be fired immediately if the\nuser is already authenticated with a valid session, so this component may not always display visibly.\n\nTo simplify some types of authentication flows, a visibility flag can force this component to never display. This\nallows you to susbcribe to notifications from the\n\nThis embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\ncontainer to allow sufficient space for the required forms.\n\nAs noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\nthe widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\ncancels) authentication steps.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.\n\n```typescript\ninterface IAuthStatus {\n  // If true, the user is authenticated with a valid session\n  authenticated: boolean;\n\n  // Details for the user's session\n  session: IActiveSession | null;\n}\n```",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -103,7 +103,7 @@
       "filePath": "./src/components/controls/verdocs-button/verdocs-button.tsx",
       "encapsulation": "none",
       "tag": "verdocs-button",
-      "docs": "Display a simple button. Three variants are supported. Standard and Outline buttons look like traditional form buttons and are\nideal candidates for 'Ok' and 'Cancel' options in most cases. Text buttons are intended to be used inline in content blocks or\nfor more subtle button options. (Auth uses text buttons for the Forgot Password and Sign Up options.)",
+      "docs": "Display a simple button.\n\nThree variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n(Auth uses text buttons for the Forgot Password and Sign Up options.)\n\nFour sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\nas pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\nbigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n\nIcons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\nbe rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\nfor the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -124,15 +124,78 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "endIcon",
+          "type": "string",
+          "mutable": false,
+          "attr": "end-icon",
+          "reflectToAttr": false,
+          "docs": "If desired, a suffix icon for the button",
+          "docsTags": [],
+          "default": "null",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "The label for the  button.",
+          "docs": "The label for the button.",
           "docsTags": [],
-          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"medium\" | \"normal\" | \"small\"",
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "The size (height) of the button.",
+          "docsTags": [],
+          "default": "'normal'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "normal",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "startIcon",
+          "type": "string",
+          "mutable": false,
+          "attr": "start-icon",
+          "reflectToAttr": false,
+          "docs": "If desired, a prefix icon for the button",
+          "docsTags": [],
+          "default": "null",
           "values": [
             {
               "type": "string"
@@ -213,6 +276,7 @@
       "dependents": [
         "verdocs-auth",
         "verdocs-initial-dialog",
+        "verdocs-kba-dialog",
         "verdocs-ok-dialog",
         "verdocs-sign",
         "verdocs-signature-dialog",
@@ -226,6 +290,9 @@
         "verdocs-initial-dialog": [
           "verdocs-button"
         ],
+        "verdocs-kba-dialog": [
+          "verdocs-button"
+        ],
         "verdocs-ok-dialog": [
           "verdocs-button"
         ],
@@ -240,63 +307,11 @@
         ]
       }
     },
-    {
-      "filePath": "./src/components/controls/verdocs-document-status/verdocs-document-status.tsx",
-      "encapsulation": "none",
-      "tag": "verdocs-document-status",
-      "docs": "Displays an icon and message describing a document's completion status.",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "status",
-          "type": "\"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
-          "mutable": false,
-          "attr": "status",
-          "reflectToAttr": false,
-          "docs": "The status to display",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "canceled",
-              "type": "string"
-            },
-            {
-              "value": "complete",
-              "type": "string"
-            },
-            {
-              "value": "declined",
-              "type": "string"
-            },
-            {
-              "value": "in progress",
-              "type": "string"
-            },
-            {
-              "value": "pending",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx",
       "encapsulation": "none",
       "tag": "verdocs-dropdown",
-      "docs": "Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\nwhen the button is pressed again, or an option is selected.\n\n```typescript\ninterface IMenuOption {\n  // The label to display on the menu option.\n  label: string;\n  // Optional icon to display next to the option's label. Specify icons as SVG strings.\n  icon?: string;\n  // If true, the option will be shown disabled (dimmed and not clickable).\n  disabled?: boolean;\n  // Optional additional fields such as IDs or other data. When a menu option is clicked/tapped, the associated\n  // IMenuOptionwill be passed to the event handler. This data may be used to help identify the option selected.\n  [key: string]: any;\n}\n```",
+      "docs": "Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\nwhen the button is pressed again, or an option is selected.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -1932,11 +1947,212 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-kba-dialog",
+      "docs": "Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\nbox with a message and optional header/title. An OK button is shown that will dismiss the message.\nIt can also be dismissed by clicking the background overlay.",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "choices",
+          "type": "string[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.",
+          "docsTags": [],
+          "default": "['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd']",
+          "values": [
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "helptext",
+          "type": "string",
+          "mutable": false,
+          "attr": "helptext",
+          "reflectToAttr": false,
+          "docs": "If set, a help/instructions box will be displayed with this text",
+          "docsTags": [],
+          "default": "'Please check your text messages for a security code, and enter the code below.'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "helptitle",
+          "type": "string",
+          "mutable": false,
+          "attr": "helptitle",
+          "reflectToAttr": false,
+          "docs": "If set, a help/instructions box will be displayed with this title",
+          "docsTags": [],
+          "default": "'One Time Code'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "For text input challenges, the label to display next to the input field.",
+          "docsTags": [],
+          "default": "'PIN'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "mode",
+          "type": "\"choice\" | \"text\"",
+          "mutable": false,
+          "attr": "mode",
+          "reflectToAttr": false,
+          "docs": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.",
+          "docsTags": [],
+          "default": "'choice'",
+          "values": [
+            {
+              "value": "choice",
+              "type": "string"
+            },
+            {
+              "value": "text",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "open",
+          "reflectToAttr": false,
+          "docs": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "mutable": false,
+          "attr": "placeholder",
+          "reflectToAttr": false,
+          "docs": "For text input challenges, the placeholder to display inside the input field.",
+          "docsTags": [],
+          "default": "'Enter your PIN...'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "mutable": false,
+          "attr": "step",
+          "reflectToAttr": false,
+          "docs": "Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.",
+          "docsTags": [],
+          "default": "1",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "steps",
+          "type": "number",
+          "mutable": false,
+          "attr": "steps",
+          "reflectToAttr": false,
+          "docs": "How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).",
+          "docsTags": [],
+          "default": "3",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "cancel",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the dialog is closed. The event data will contain the closure reason.",
+          "docsTags": []
+        },
+        {
+          "event": "done",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the dialog is closed. The event data will contain the closure reason.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "verdocs-button"
+      ],
+      "dependencyGraph": {
+        "verdocs-kba-dialog": [
+          "verdocs-button"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/controls/verdocs-loader/verdocs-loader.tsx",
       "encapsulation": "none",
       "tag": "verdocs-loader",
-      "docs": "",
+      "docs": "Animated loader placeholder. There are currently no configuration options for this control.",
       "docsTags": [],
       "usage": {},
       "props": [],
@@ -2587,6 +2803,137 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/controls/verdocs-status-indicator/verdocs-status-indicator.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-status-indicator",
+      "docs": "Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\ndirectly as a status field or the whole document object may be passed in.\n\nIf the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\nto display a popup panel with per-recipient status data.\n\nIf the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "document",
+          "type": "IDocument",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The document to display status for. Ignored if `status` is set directly.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "IDocument"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"normal\" | \"small\"",
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.",
+          "docsTags": [],
+          "default": "'normal'",
+          "values": [
+            {
+              "value": "normal",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "status",
+          "type": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
+          "mutable": false,
+          "attr": "status",
+          "reflectToAttr": false,
+          "docs": "The status to display.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "accepted",
+              "type": "string"
+            },
+            {
+              "value": "canceled",
+              "type": "string"
+            },
+            {
+              "value": "complete",
+              "type": "string"
+            },
+            {
+              "value": "declined",
+              "type": "string"
+            },
+            {
+              "value": "in progress",
+              "type": "string"
+            },
+            {
+              "value": "invited",
+              "type": "string"
+            },
+            {
+              "value": "opened",
+              "type": "string"
+            },
+            {
+              "value": "pending",
+              "type": "string"
+            },
+            {
+              "value": "signed",
+              "type": "string"
+            },
+            {
+              "value": "submitted",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "theme",
+          "type": "\"dark\" | \"light\"",
+          "mutable": false,
+          "attr": "theme",
+          "reflectToAttr": false,
+          "docs": "The theme to use for diplay.",
+          "docsTags": [],
+          "default": "'light'",
+          "values": [
+            {
+              "value": "dark",
+              "type": "string"
+            },
+            {
+              "value": "light",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/controls/verdocs-template-card/verdocs-template-card.tsx",
       "encapsulation": "none",

package/dist/esm/Auth-b330f209.js

@@ -0,0 +1,85 @@
+import { g as getEndpoint, d as decodeAccessTokenBody } from './Token-a587e3ad.js';
+
+/**
+ * Authenticate to Verdocs via user/password authentication
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ * import {Transport} from '@verdocs/js-sdk/HTTP';
+ *
+ * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });
+ * Transport.setAuthToken(accessToken);
+ * ```
+ */
+var authenticateUser = function (params) {
+    return getEndpoint()
+        .api.post('/authentication/login', params)
+        .then(function (r) { return r.data; });
+};
+var clearSession = function (source, persist) {
+    getEndpoint().setAuthorization(null);
+    if (persist) {
+        localStorage.removeItem(source);
+    }
+    notifySessionListeners(source, null);
+    return null;
+};
+/**
+ * Parses and sets the active session, optionally persisting (brower-only, persists to localStorage).
+ */
+var setSession = function (source, token, persist) {
+    if (persist === void 0) { persist = false; }
+    if (token === null) {
+        return clearSession(source, persist);
+    }
+    var session = decodeAccessTokenBody(token || '');
+    if (session === null || (session.exp && session.exp * 1000 < new Date().getTime())) {
+        return clearSession(source, persist);
+    }
+    if (persist) {
+        localStorage.setItem(source, token);
+    }
+    getEndpoint().setAuthorization(token);
+    notifySessionListeners(source, session);
+    return session;
+};
+/**
+ * Load a session from localStorage
+ */
+var loadSession = function (source) {
+    var token = localStorage.getItem(source);
+    if (!token) {
+        return null;
+    }
+    var session = decodeAccessTokenBody(token);
+    if (!session) {
+        return null;
+    }
+    if (session.exp && session.exp * 1000 < new Date().getTime()) {
+        localStorage.removeItem(source);
+        return null;
+    }
+    getEndpoint().setAuthorization(token);
+    notifySessionListeners(source, session);
+    return session;
+};
+/**
+ * End the active session.
+ */
+var endSession = function (source, persist) {
+    if (persist === void 0) { persist = false; }
+    return clearSession(source, persist);
+};
+var sessionChangedListeners = new Map();
+var notifySessionListeners = function (source, session) {
+    sessionChangedListeners.forEach(function (listener) {
+        try {
+            listener(source, session);
+        }
+        catch (e) {
+            // NOOP
+        }
+    });
+};
+
+export { authenticateUser as a, endSession as e, loadSession as l, setSession as s };