@verdocs/web-sdk 4.0.8 → 4.1.2

package/dist/types/components/controls/verdocs-loader/verdocs-loader.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Animated loader placeholder. There are currently no configuration options for this control.
+ *
+ * ```ts
+ * <verdocs-loader />
+ * ```
+ */
 export declare class VerdocsLoader {
     render(): any;
 }

package/dist/types/components/controls/verdocs-organization-card/verdocs-organization-card.d.ts

@@ -1,8 +1,18 @@
-import { IOrganization } from '@verdocs/js-sdk';
+import type { IOrganization } from '@verdocs/js-sdk';
+/**
+ * Display a small summary card describing an organization.
+ *
+ * ```ts
+ * <verdocs-organization-card organization={organization} />
+ * ```
+ */
 export declare class VerdocsOrganizationCard {
     /**
      * The organization to display
      */
     organization: IOrganization;
+    hovered: boolean;
+    onMouseOver(): void;
+    onMouseOut(): void;
     render(): any;
 }

package/dist/types/components/controls/verdocs-pagination/verdocs-pagination.d.ts

@@ -1,4 +1,16 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Display a simple pagination control with individual buttons to move through the data set.
+ *
+ * ```ts
+ * <verdocs-pagination
+ *   selectedPage={1}
+ *   itemCount={50}
+ *   perPage={10}
+ *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
+ * />
+ * ```
+ */
 export declare class VerdocsQuickFilter {
     el: HTMLElement;
     /**

package/dist/types/components/controls/verdocs-portal/verdocs-portal.d.ts

@@ -1,4 +1,23 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Display a child component in a "portal", popping it out of the main DOM tree
+ * to allow it to escape the bounds set by its parent.
+ * @credit https://github.com/tomas-teston/stencil-portal for the basic
+ * technique. This has been altered in a few ways to make it more friendly
+ * to cases where there may be multiple portals on the page and provide more
+ * alignment options for the child to be displayed.
+ *
+ * ```ts
+ * <div style="padding: 40px">
+ *     <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+ *       Tooltip Anchor
+ *       <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+ *         <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+ *       </verdocs-portal>
+ *     </div>
+ *   </div>
+ * ```
+ */
 export declare class VerdocsPortal {
     private portal;
     private element;

package/dist/types/components/controls/verdocs-progress-bar/verdocs-progress-bar.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Display a simple progress bar in a style consistent with the design system.
+ *
+ * ```ts
+ * <verdocs-progress-bar label="Uploading..." showPercent={true} percent={54} />
+ * ```
+ */
 export declare class VerdocsProgressBar {
     /**
      * Optional label to display above the bar

package/dist/types/components/controls/verdocs-quick-filter/verdocs-quick-filter.d.ts

@@ -6,6 +6,10 @@ export interface IFilterOption {
 }
 /**
  * Display a drop-down menu of quick filter options.
+ *
+ * ```ts
+ * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+ * ```
  */
 export declare class VerdocsQuickFilter {
     el: HTMLElement;

package/dist/types/components/controls/verdocs-radio-button/verdocs-radio-button.d.ts

@@ -6,7 +6,7 @@
  * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
  * handler. Sample usage:
  *
- * ```html
+ * ```ts
  * <verdocs-radio-button
  *    value="val1"
  *    name="someProperty"

package/dist/types/components/controls/verdocs-select-input/verdocs-select-input.d.ts

@@ -1,7 +1,11 @@
 /**
  * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
  * visual styles of the other components. Note that events "bubble" from the input field to the container,
- * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+ * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+ *
+ * ```ts
+ * <verdocs-select-input label="Select:" label="Select" options={[...options]} @input={() => {}} />
+ * ```
  */
 export declare class VerdocsSelectInput {
     /**

package/dist/types/components/controls/verdocs-spinner/verdocs-spinner.d.ts

@@ -1,5 +1,9 @@
 /**
  * Display a small loading spinner.
+ *
+ * ```ts
+ * <verdocs-spinner />
+ * ```
  */
 export declare class VerdocsQuickFilter {
     size: number;

package/dist/types/components/controls/verdocs-table/verdocs-table.d.ts

@@ -8,6 +8,10 @@ export interface IColumn {
 /**
  * Display a simple table of data. Columns and data cells may have custom renderers defined to
  * support creating interactive table layouts.
+ *
+ * ```ts
+ * <verdocs-table columns={[...columns]} data={[...data]} />
+ * ```
  */
 export declare class VerdocsTable {
     /**

package/dist/types/components/controls/verdocs-tabs/verdocs-tabs.d.ts

@@ -7,6 +7,10 @@ export interface ITab {
 /**
  * Display a simple row of selectable tabs. This is a controlled element.
  * The parent must adjust selectedTab as selection events are fired.
+ *
+ * ```ts
+ * <verdocs-tabs tabs={[...tabs]} />
+ * ```
  */
 export declare class VerdocsTabs {
     /**

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

@@ -1,7 +1,11 @@
 /**
  * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
  * visual styles of the other components. Note that events "bubble" from the input field to the container,
- * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+ * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+ *
+ * ```ts
+ * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+ * ```
  */
 export declare class VerdocsTextInput {
     private inputEl;

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

@@ -8,7 +8,11 @@ export interface IToggleIconButtons {
     buttons: IButtons[];
 }
 /**
- * Displays a label and a set of buttons, also allowing a default selection of a button
+ * Displays a label and a set of buttons, also allowing a default selection of a button.
+ *
+ * ```ts
+ * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+ * ```
  */
 export declare class VerdocsToggle {
     /**

package/dist/types/components/controls/verdocs-toggle-button/verdocs-toggle-button.d.ts

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 /**
  * Displays a single button that can be toggled on or off by clicking it.
+ *
+ * ```ts
+ * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+ * ```
  */
 export declare class VerdocsToggleButton {
     active: boolean;

package/dist/types/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.d.ts

@@ -2,6 +2,10 @@ import { Instance } from '@popperjs/core';
 import { Placement } from '@popperjs/core/lib/enums';
 /**
  * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+ *
+ * ```ts
+ * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+ * ```
  */
 export declare class VerdocsToolbarIcon {
     iconEl: HTMLDivElement;

package/dist/types/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.d.ts

@@ -1,8 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 /**
- * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
- * box with a message and optional header/title. An OK button is shown that will dismiss the message.
- * It can also be dismissed by clicking the background overlay.
+ * Prompt the user to confirm their identity with a series of questions.
  */
 export declare class VerdocsKbaDialog {
     /**

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

@@ -6,32 +6,18 @@ export interface IAuthStatus {
     session: TSession;
 }
 /**
- * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
- * occur during the process (especially successful completion). If the user is already authenticated with a valid
- * session, this component will hide itself and fire the success callback immediately. It is up to the host application
- * to render the next appropriate view for the application.
+ * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+ * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+ * host application to render the next appropriate view for the application.
  *
- * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
- * allows you to susbcribe to notifications from the
+ * To simplify UI development, a visibility flag can force this component to never display. This
+ * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
  *
  * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
  * container to allow sufficient space for the required forms.
  *
- * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
- * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
- * cancels) authentication steps.
- *
- * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
- * embed. This Element will reuse the same session produced by logging in via that Embed.
- *
- * ```typescript
- * interface IAuthStatus {
- *   // If true, the user is authenticated with a valid session
- *   authenticated: boolean;
- *
- *   // Details for the user's session
- *   session: IActiveSession | null;
- * }
+ * ```ts
+ * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
  * ```
  */
 export declare class VerdocsAuth {
@@ -52,7 +38,9 @@ export declare class VerdocsAuth {
      */
     logo: string;
     /**
-     * Event fired when session authentication process has completed. Check the event contents for completion status.
+     * Event fired when session authentication process has completed. Check the event
+     * contents for completion status. This event will always be called at least once,
+     * when the component is first rendered.
      */
     authenticated: EventEmitter<IAuthStatus>;
     /**

package/dist/types/components/embeds/verdocs-build/verdocs-build.d.ts

@@ -5,6 +5,10 @@ import { SDKError } from '../../../utils/errors';
 export type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';
 /**
  * Display a template building experience.
+ *
+ * ```ts
+ * <verdocs-build templateId={templateId} />
+ * ```
  */
 export declare class VerdocsBuild {
     el: any;
@@ -64,12 +68,12 @@ export declare class VerdocsBuild {
         event: 'added' | 'deleted' | 'updated';
         roles: IRole[];
     }>;
-    onTemplateIdChanged(newTemplateId: string): void;
-    onStepChanged(newStep: TVerdocsBuildStep): void;
-    store: TTemplateStore | null;
+    onTemplateIdChanged(newTemplateId: string, oldTemplateId: string): void;
+    onStepChanged(): void;
+    templateStore: TTemplateStore | null;
     componentWillLoad(): Promise<void>;
     loadTemplate(templateId: string): Promise<void>;
-    handleCancel(e: any): void;
+    handleCancel(): void;
     handleTemplateCreated(templateId: string): Promise<void>;
     handleRolesUpdated(e: any): Promise<void>;
     handleTemplateUpdated(e: any): Promise<void>;

package/dist/types/components/embeds/verdocs-preview/verdocs-preview.d.ts

@@ -8,6 +8,10 @@ import { SDKError } from '../../../utils/errors';
  * Display a template preview experience. This will display the template's attached
  * documents with signing fields overlaid on each page. Fields will be color-coded
  * by recipient, and will be read-only (cannot be filled, moved, or altered).
+ *
+ * ```ts
+ * <verdocs-preview templateId={templateId} />
+ * ```
  */
 export declare class VerdocsPreview {
     /**
@@ -24,10 +28,12 @@ export declare class VerdocsPreview {
      */
     sdkError: EventEmitter<SDKError>;
     loading: boolean;
+    onTemplateIdChanged(newTemplateId: string): void;
     templateStore: TTemplateStore | null;
     fieldStore: TTemplateFieldStore | null;
     roleStore: TTemplateRoleStore | null;
     componentWillLoad(): Promise<void>;
+    loadTemplate(templateId: string): Promise<void>;
     handlePageRendered(e: any): void;
     render(): any;
 }

package/dist/types/components/embeds/verdocs-send/verdocs-send.d.ts

@@ -8,13 +8,20 @@ type TAnnotatedRole = IRole & {
     id: string;
 };
 /**
- * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
- * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
- * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
- * directly to the `createEnvelope()` call in JS-SDK.
+ * Display a form to send a template to one or more recipients in an envelope for signing. Note
+ * that because most applications have custom workflow requirements to trigger after sending an
+ * Envelope, this component does not actually perform that operation. Parent applications should
+ * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+ * `createEnvelope()` call in JS-SDK.
  *
- * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
- * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+ * Host applications should ensure the template is "sendable" before displaying this component.
+ * To be sendable, a template must have at least one document attached, at least one participant
+ * defined, and at least one field assigned to every "signer" participant. This component will
+ * hide itself if the template is not sendable.
+ *
+ * ```ts
+ * <verdocs-send templateId={templateId} />
+ * ```
  */
 export declare class VerdocsSend {
     /**
@@ -69,10 +76,13 @@ export declare class VerdocsSend {
     sending: boolean;
     rolesCompleted: Record<string, TAnnotatedRole>;
     reset(): Promise<void>;
-    levels: number[];
+    onTemplateIdChanged(newTemplateId: string): void;
     templateStore: TTemplateStore | null;
     roleStore: TTemplateRoleStore | null;
     componentWillLoad(): Promise<void>;
+    loadTemplate(templateId: string): Promise<void>;
+    recomputeRolesCompleted(): void;
+    getRoleLevels(): number[];
     getLevelIcon(level: number): any;
     handleSelectContact(e: any, role: TAnnotatedRole): void;
     handleClickRole(e: any, role: TAnnotatedRole): void;

package/dist/types/components/embeds/verdocs-settings/verdocs-settings.d.ts

@@ -5,6 +5,10 @@ import { SDKError } from '../../../utils/errors';
  * Display a template preview experience. This will display the template's attached
  * documents with signing fields overlaid on each page. Fields will be color-coded
  * by recipient, and will be read-only (cannot be filled, moved, or altered).
+ *
+ * ```ts
+ * <verdocs-settings />
+ * ```
  */
 export declare class VerdocsSettings {
     /**

package/dist/types/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.d.ts

@@ -69,6 +69,9 @@ export declare class VerdocsContactPicker {
     showSuggestions: boolean;
     showMessage: boolean;
     delegator: boolean;
+    showKba: boolean;
+    kbaMethod: string;
+    pinCode: string;
     nameFieldId: string;
     emailFieldId: string;
     phoneFieldId: string;

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

@@ -1,11 +1,27 @@
-import { ITemplateField, ITemplateFieldSetting } from '@verdocs/js-sdk';
+import { ITemplateField, ITemplateFieldSetting, VerdocsEndpoint } from '@verdocs/js-sdk';
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+interface ISelectedFile {
+    lastModified: number;
+    size: number;
+    type: string;
+    name: string;
+    data: string;
+}
 /**
  * Displays an attachment field.
  */
 export declare class VerdocsFieldAttachment {
+    el: HTMLElement;
+    private inputEl;
+    private dialog?;
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     * This component self-manages its resize (width) behavior when in edit-template mode, and uses
+     * this endpoint to save changes.
+     */
+    endpoint: VerdocsEndpoint;
     /**
      * The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog.
      */
@@ -60,21 +76,20 @@ export declare class VerdocsFieldAttachment {
     /**
      * Event fired when the field is deleted.
      */
-    attached: EventEmitter<{
-        data: string;
-        lastModified: number;
-        name: string;
-        size: number;
-        type: string;
-    }>;
+    attached: EventEmitter<ISelectedFile>;
     showingProperties?: boolean;
+    selectedFile?: ISelectedFile | null;
     focusField(): Promise<void>;
-    private dialog?;
-    handleShow(): void;
     showSettingsPanel(): Promise<void>;
     hideSettingsPanel(): Promise<void>;
     fieldStore: TTemplateFieldStore;
     roleStore: TTemplateRoleStore;
     componentWillLoad(): Promise<void>;
+    componentDidRender(): void;
+    handleResizeStart(e: any): void;
+    handleResize(e: any): void;
+    handleResizeEnd(e: any): void;
+    handleShow(): void;
     render(): any;
 }
+export {};

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

@@ -1,7 +1,7 @@
-import { ITemplateField, ITemplateFieldSetting } from '@verdocs/js-sdk';
+import type { ITemplateField, ITemplateFieldSetting } from '@verdocs/js-sdk';
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
-import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import type { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import type { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 /**
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
  */

package/dist/types/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.d.ts

@@ -3,8 +3,7 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 /**
- * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
- * input types like text and checkbox.
+ * Displays a dropdown field that allows the user to choose one of a list of options.
  */
 export declare class VerdocsFieldDropdown {
     private el;

package/dist/types/components/fields/verdocs-field-initial/verdocs-field-initial.d.ts

@@ -3,8 +3,13 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 /**
- * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
- * button will be shown. Clicking the button will show a dialog to adopt an initial.
+ * Displays an initial field. If an initial already exists, it will be displayed and the field
+ * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+ * show a dialog to adopt an initial.
+ *
+ * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+ * This requires operation against a live, valid envelope. If you are testing this component
+ * in Storybook, it will not be visible here.
  */
 export declare class VerdocsFieldInitial {
     /**

package/dist/types/components/fields/verdocs-field-signature/verdocs-field-signature.d.ts

@@ -3,8 +3,13 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 /**
- * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
- * button will be shown. Clicking the button will show a dialog to adopt a signature.
+ * Displays a signature field. If a signature already exists, it will be displayed and the field
+ * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+ * show a dialog to adopt a signature.
+ *
+ * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+ * This requires operation against a live, valid envelope. If you are testing this component
+ * in Storybook, it will not be visible here.
  */
 export declare class VerdocsFieldSignature {
     /**

package/dist/types/components/fields/verdocs-field-textarea/verdocs-field-textarea.d.ts

@@ -4,7 +4,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 /**
- * Display a multi-line text input field.
+ * Display a multi-line text input field. Reminder: the "position" of the field is specified
+ * as the BOTTOM-LEFT corner.
  */
 export declare class VerdocsFieldTextarea {
     el: HTMLElement;

package/dist/types/components/fields/verdocs-field-textbox/verdocs-field-textbox.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 /**
- * Display a text input field.
+ * Display a simple 1-line text input field.
  */
 export declare class VerdocsFieldTextbox {
     el: HTMLElement;

package/dist/types/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.d.ts

@@ -3,7 +3,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { TTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { TTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 /**
- * Display a timestamp field.
+ * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+ * filled when the signer submits the document.
  */
 export declare class VerdocsFieldTimestamp {
     private el;

package/dist/types/components/settings/verdocs-settings-organization/verdocs-settings-organization.d.ts

@@ -25,7 +25,6 @@ export declare class VerdocsSettingsOrganization {
     dirty: boolean;
     submitting: boolean;
     name: string;
-    business_name: string;
     contact_email: string;
     phone: string;
     url: string;

package/dist/types/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.d.ts

@@ -30,10 +30,12 @@ export declare class VerdocsTemplateBuildTabs {
      * Event fired when the user selects a different step.
      */
     stepChanged: EventEmitter<TVerdocsBuildStep>;
-    onStepChanged(): void;
-    store: TTemplateStore | null;
+    templateStore: TTemplateStore | null;
+    onTemplateIdChanged(newTemplateId: string): void;
+    onStepChanged(newStep: TVerdocsBuildStep): void;
     componentWillLoad(): Promise<void>;
-    loadTemplate(): Promise<void>;
+    loadTemplate(templateId: string): Promise<void>;
     setStep(e: any): void;
+    copyTemplateId(): void;
     render(): any;
 }