@verdocs/web-sdk 1.13.35 → 1.14.1

package/dist/collection/utils/EnvelopeStore.js

@@ -0,0 +1,79 @@
+import { createStore } from '@stencil/store';
+import { getEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+const createEnvelopeStore = (envelopeId) => {
+  const now = new Date().toISOString();
+  return createStore({
+    isLoading: true,
+    isLoaded: false,
+    isError: false,
+    error: null,
+    updateCount: 0,
+    roleNames: [],
+    id: envelopeId,
+    template_id: '',
+    name: '',
+    status: 'pending',
+    profile_id: '',
+    organization_id: '',
+    no_contact: false,
+    created_at: now,
+    updated_at: now,
+    canceled_at: null,
+    reminder_id: null,
+    envelope_document_id: '',
+    certificate_document_id: null,
+    visibility: 'private',
+    histories: [],
+    recipients: [],
+    profile: undefined,
+    certificate: undefined,
+    document: undefined,
+    documents: undefined,
+    fields: undefined,
+  });
+};
+const envelopeStores = {};
+export const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
+  let created = false;
+  if (!envelopeStores[envelopeId]) {
+    console.debug('[ENVELOPES] No envelope store found for ID, creating', envelopeId);
+    envelopeStores[envelopeId] = createEnvelopeStore(envelopeId);
+    created = true;
+  }
+  const store = envelopeStores[envelopeId];
+  // NOTE: If we need it, store.use() returns an unsubcribe function
+  // See https://github.com/ionic-team/stencil-store#storeusesubscriptions
+  store.use({
+    reset: () => console.debug('[ENVELOPES] Store got reset'),
+    dispose: () => console.debug('[ENVELOPES] Store got disposed'),
+  });
+  // TODO: This can create a race condition if two components call this at the same time.
+  //  For now we can probably defer doing something smart here because it's only a
+  //  double-load issue.
+  if (created || forceReload) {
+    console.debug('[ENVELOPES] Reloading envelope', { envelopeId, created, forceReload });
+    store.state.isLoading = true;
+    store.state.isLoaded = false;
+    store.state.isError = false;
+    store.state.error = undefined;
+    try {
+      const envelope = await getEnvelope(endpoint, envelopeId);
+      console.debug('[ENVELOPES] Got envelope', envelope);
+      Object.assign(store.state, envelope);
+      store.state.isLoaded = true;
+      store.state.isError = false;
+      store.state.error = undefined;
+    }
+    catch (e) {
+      console.error('[ENVELOPES] Error loading envelope', e);
+      store.state.isLoaded = false;
+      store.state.isError = true;
+      store.state.error = e;
+      throw e;
+    }
+    store.state.isLoading = false;
+    store.state.updateCount++;
+  }
+  return store;
+};
+export const getRecipientRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.recipients) || []).map(r => r.role_name); };

package/dist/collection/utils/TemplateStore.js

@@ -65,7 +65,6 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
       const template = await getTemplate(endpoint, templateId);
       console.debug('[TEMPLATES] Got template', template);
       Object.assign(store.state, template);
-      // Object.keys(template).forEach(key => store.set(key as keyof TTemplateStore, template[key]));
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;

package/dist/collection/utils/Toast.js

@@ -0,0 +1,63 @@
+/**
+ * Simple helper to display basic toast messages. These toasts do not stack, and
+ * because of this are meant to be used only for infrequent notifications (those
+ * that would rarely happen back to back within a few seconds).
+ *
+ * The main reason to use this and not a toast library is CSS efficiency. All
+ * toast libraries require some block of CSS be installed. That works well for
+ * an app but every Web Component gets compiled as its own mini sandbox app.
+ * That means a toast library's CSS would get compiled over and over. This
+ * method is styled inline and minifie to <3K, most of which is the icons. If
+ * we wanted to trim it more we could move those out to an icon library because
+ * they're reused in other controls as well.
+ */
+const Icons = {
+  error: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  success: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
+</svg></div>`,
+  info: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  // The empty element allows the flex "gap" to still provide the correct spacing, visually
+  default: '<div class="toast-icon"></div>',
+};
+const Colors = {
+  error: '#ed3d3d',
+  success: '#3dc763',
+  info: '#2379c7',
+  default: '#6a56c1',
+};
+const removeToasts = () => Array.from(document.getElementsByClassName('verdocs-toast')).forEach(oldToast => oldToast.remove());
+const closeClicked = (e) => {
+  e.stopPropagation();
+  removeToasts();
+};
+export const VerdocsToast = (text, config = {}) => {
+  // We don't stack because we have only a few specific use-cases and they would
+  // almost never show more than one message at a time.
+  removeToasts();
+  const { duration = 5000, style = 'default' } = config || {};
+  const color = Colors[style] || Colors.default;
+  const icon = Icons[style] || Icons.default;
+  const toastBody = `
+    ${icon}
+    <div class="verdocs-toast-text" style="padding: 12px 12px 12px 0;">${text}</div>
+    <div class="verdocs-toast-close" style="padding: 12px 8px; background: rgba(0,0,0,0.25); cursor: pointer;">✕</div>
+  `;
+  const toast = document.createElement('div');
+  toast.className = 'verdocs-toast';
+  toast.innerHTML = toastBody;
+  toast.style.cssText = `
+display: flex; flex-direction: row; gap: 10px; align-items: center;
+position: fixed; top: 20px; right: 20px; z-index: 2147483647; max-width: calc(50% - 20px);
+color: #ffffff; background: ${color}; font-family: 'Barlow', sans-serif;
+border-radius: 2px; padding-left: 10px;
+box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);`;
+  document.body.append(toast);
+  const closeElements = Array.from(document.getElementsByClassName('verdocs-toast-close'));
+  closeElements.forEach(closeEl => closeEl.addEventListener('click', closeClicked));
+  setTimeout(removeToasts, duration);
+};

package/dist/components/Envelopes.js

@@ -163,4 +163,4 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
     });
 };
 
-export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, getEnvelopeDocumentPageDisplayUri as c, cancelEnvelope as d, getEnvelopeFile as e, getFieldAttachment as f, getSigningSession as g, throttledGetEnvelope as t, updateEnvelopeField as u };
+export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, getEnvelopeDocumentPageDisplayUri as c, getEnvelope as d, cancelEnvelope as e, getEnvelopeFile as f, getSigningSession as g, getFieldAttachment as h, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/Permissions.js

@@ -0,0 +1,34 @@
+import { E as EnvelopeStates } from './Types.js';
+
+/**
+ * Various helpers to identify available operations for an envelope by a user.
+ *
+ * @module
+ */
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userIsEnvelopeOwner = function (session, envelope) { return envelope.profile_id === (session === null || session === void 0 ? void 0 : session.profile_id); };
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userCanCancelEnvelope = function (session, envelope) {
+    return userIsEnvelopeOwner(session, envelope) &&
+        envelope.status !== EnvelopeStates.COMPLETE &&
+        envelope.status !== EnvelopeStates.DECLINED &&
+        envelope.status !== EnvelopeStates.CANCELED;
+};
+/**
+ * Returns true if the recipient has a pending action. Note that this does not necessarily mean the recipient can act (yet).
+ */
+var recipientHasAction = function (recipient) { return !['submitted', 'canceled', 'declined'].includes(recipient.status); };
+/**
+ * Returns the recipients who still have a pending action. Note that not all of these recipients may be able to act (yet).
+ */
+var getRecipientsWithActions = function (envelope) { return ((envelope === null || envelope === void 0 ? void 0 : envelope.recipients) || []).filter(recipientHasAction); };
+/**
+ * Returns true if the recipient can act.
+ */
+var recipientCanAct = function (recipient, recipientsWithActions) { var _a; return recipient.sequence === ((_a = recipientsWithActions === null || recipientsWithActions === void 0 ? void 0 : recipientsWithActions[0]) === null || _a === void 0 ? void 0 : _a.sequence); };
+
+export { userCanCancelEnvelope as a, getRecipientsWithActions as g, recipientCanAct as r, userIsEnvelopeOwner as u };

package/dist/components/TemplateStore.js

@@ -1,198 +1,7 @@
-import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
+import { c as createStore } from './index3.js';
 import { a as getTemplate } from './Templates.js';
 import { T as TemplateSenderTypes } from './VerdocsEndpoint.js';
 
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const unwrap = (val) => (typeof val === 'function' ? val() : val);
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        var _a;
-        // When resetting the state, the default state may be a function - unwrap it to invoke it.
-        // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
-    }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
-
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -257,7 +66,6 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
       const template = await getTemplate(endpoint, templateId);
       console.debug('[TEMPLATES] Got template', template);
       Object.assign(store.state, template);
-      // Object.keys(template).forEach(key => store.set(key as keyof TTemplateStore, template[key]));
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;

package/dist/components/Toast.js

@@ -0,0 +1,138 @@
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Update a recipient's status block
+ */
+var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
+ */
+var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
+};
+/**
+ * Decline to complete an envelope (signing will not terminated).
+ */
+var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
+};
+/**
+ * Agree to electronic signing.
+ */
+var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
+};
+/**
+ * Get an in-person signing link.
+ */
+var getInPersonLink = function (endpoint, envelopeId, roleName) {
+    return endpoint.api //
+        .get("/envelopes/".concat(envelopeId, "/recipients/").concat(encodeURIComponent(roleName), "?in_person_link=true"))
+        .then(function (r) { return r.data; });
+};
+
+/**
+ * Simple helper to display basic toast messages. These toasts do not stack, and
+ * because of this are meant to be used only for infrequent notifications (those
+ * that would rarely happen back to back within a few seconds).
+ *
+ * The main reason to use this and not a toast library is CSS efficiency. All
+ * toast libraries require some block of CSS be installed. That works well for
+ * an app but every Web Component gets compiled as its own mini sandbox app.
+ * That means a toast library's CSS would get compiled over and over. This
+ * method is styled inline and minifie to <3K, most of which is the icons. If
+ * we wanted to trim it more we could move those out to an icon library because
+ * they're reused in other controls as well.
+ */
+const Icons = {
+  error: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  success: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
+</svg></div>`,
+  info: `<div class="toast-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 24px; height: 24px; display: block;">
+  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+</svg></div>`,
+  // The empty element allows the flex "gap" to still provide the correct spacing, visually
+  default: '<div class="toast-icon"></div>',
+};
+const Colors = {
+  error: '#ed3d3d',
+  success: '#3dc763',
+  info: '#2379c7',
+  default: '#6a56c1',
+};
+const removeToasts = () => Array.from(document.getElementsByClassName('verdocs-toast')).forEach(oldToast => oldToast.remove());
+const closeClicked = (e) => {
+  e.stopPropagation();
+  removeToasts();
+};
+const VerdocsToast = (text, config = {}) => {
+  // We don't stack because we have only a few specific use-cases and they would
+  // almost never show more than one message at a time.
+  removeToasts();
+  const { duration = 5000, style = 'default' } = config || {};
+  const color = Colors[style] || Colors.default;
+  const icon = Icons[style] || Icons.default;
+  const toastBody = `
+    ${icon}
+    <div class="verdocs-toast-text" style="padding: 12px 12px 12px 0;">${text}</div>
+    <div class="verdocs-toast-close" style="padding: 12px 8px; background: rgba(0,0,0,0.25); cursor: pointer;">✕</div>
+  `;
+  const toast = document.createElement('div');
+  toast.className = 'verdocs-toast';
+  toast.innerHTML = toastBody;
+  toast.style.cssText = `
+display: flex; flex-direction: row; gap: 10px; align-items: center;
+position: fixed; top: 20px; right: 20px; z-index: 2147483647; max-width: calc(50% - 20px);
+color: #ffffff; background: ${color}; font-family: 'Barlow', sans-serif;
+border-radius: 2px; padding-left: 10px;
+box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);`;
+  document.body.append(toast);
+  const closeElements = Array.from(document.getElementsByClassName('verdocs-toast-close'));
+  closeElements.forEach(closeEl => closeEl.addEventListener('click', closeClicked));
+  setTimeout(removeToasts, duration);
+};
+
+export { VerdocsToast as V, envelopeRecipientDecline as a, envelopeRecipientSubmit as b, envelopeRecipientAgree as e, getInPersonLink as g };

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export { VerdocsComponentError as VerdocsComponentError } from '../types/compone
 export { VerdocsContactPicker as VerdocsContactPicker } from '../types/components/envelopes/verdocs-contact-picker/verdocs-contact-picker';
 export { VerdocsDropdown as VerdocsDropdown } from '../types/components/controls/verdocs-dropdown/verdocs-dropdown';
 export { VerdocsEnvelopeDocumentPage as VerdocsEnvelopeDocumentPage } from '../types/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page';
+export { VerdocsEnvelopeRecipientSummary as VerdocsEnvelopeRecipientSummary } from '../types/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary';
 export { VerdocsEnvelopeSidebar as VerdocsEnvelopeSidebar } from '../types/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar';
 export { VerdocsFieldAttachment as VerdocsFieldAttachment } from '../types/components/fields/verdocs-field-attachment/verdocs-field-attachment';
 export { VerdocsFieldCheckbox as VerdocsFieldCheckbox } from '../types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox';

package/dist/components/index.js

@@ -9,6 +9,7 @@ export { VerdocsComponentError, defineCustomElement as defineCustomElementVerdoc
 export { VerdocsContactPicker, defineCustomElement as defineCustomElementVerdocsContactPicker } from './verdocs-contact-picker.js';
 export { VerdocsDropdown, defineCustomElement as defineCustomElementVerdocsDropdown } from './verdocs-dropdown.js';
 export { VerdocsEnvelopeDocumentPage, defineCustomElement as defineCustomElementVerdocsEnvelopeDocumentPage } from './verdocs-envelope-document-page.js';
+export { VerdocsEnvelopeRecipientSummary, defineCustomElement as defineCustomElementVerdocsEnvelopeRecipientSummary } from './verdocs-envelope-recipient-summary.js';
 export { VerdocsEnvelopeSidebar, defineCustomElement as defineCustomElementVerdocsEnvelopeSidebar } from './verdocs-envelope-sidebar.js';
 export { VerdocsFieldAttachment, defineCustomElement as defineCustomElementVerdocsFieldAttachment } from './verdocs-field-attachment.js';
 export { VerdocsFieldCheckbox, defineCustomElement as defineCustomElementVerdocsFieldCheckbox } from './verdocs-field-checkbox.js';