/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { ICreateEnvelopeRecipientFromTemplate, IEnvelope, IEnvelopeField, IOrganization, IRecipient, IRole, ISignerTokenResponse, ITemplate, ITemplateField, TEnvelopeStatus, TRecipientStatus, VerdocsEndpoint } from "@verdocs/js-sdk"; import { IAuthStatus } from "./components/embeds/verdocs-auth/verdocs-auth"; import { SDKError } from "./utils/errors"; import { TVerdocsBuildStep } from "./components/embeds/verdocs-build/verdocs-build"; import { IContactSearchEvent, IContactSelectEvent, TPickerContact } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker"; import { DownloadAction, IDocumentPageInfo, IPageLayer } from "./utils/Types"; import { IMenuOption } from "./components/controls/verdocs-dropdown/verdocs-dropdown"; import { ISelectedFile } from "./components/fields/verdocs-field-attachment/verdocs-field-attachment"; import { IMultiSelectOption } from "./components/controls/verdocs-multiselect/verdocs-multiselect"; import { IFilterOption } from "./components/controls/verdocs-quick-filter/verdocs-quick-filter"; import { ISearchEvent, TContentType } from "./components/elements/verdocs-search-box/verdocs-search-box"; import { IContactSearchEvent as IContactSearchEvent1 } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker"; import { IColumn } from "./components/controls/verdocs-table/verdocs-table"; import { ITab } from "./components/controls/verdocs-tabs/verdocs-tabs"; import { TVerdocsBuildStep as TVerdocsBuildStep1 } from "./components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs"; import { TAllowedTemplateAction } from "./components/templates/verdocs-templates-list/verdocs-templates-list"; import { IToggleIconButtons } from "./components/controls/verdocs-toggle/verdocs-toggle"; import { Placement } from "@popperjs/core/lib/enums"; export { ICreateEnvelopeRecipientFromTemplate, IEnvelope, IEnvelopeField, IOrganization, IRecipient, IRole, ISignerTokenResponse, ITemplate, ITemplateField, TEnvelopeStatus, TRecipientStatus, VerdocsEndpoint } from "@verdocs/js-sdk"; export { IAuthStatus } from "./components/embeds/verdocs-auth/verdocs-auth"; export { SDKError } from "./utils/errors"; export { TVerdocsBuildStep } from "./components/embeds/verdocs-build/verdocs-build"; export { IContactSearchEvent, IContactSelectEvent, TPickerContact } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker"; export { DownloadAction, IDocumentPageInfo, IPageLayer } from "./utils/Types"; export { IMenuOption } from "./components/controls/verdocs-dropdown/verdocs-dropdown"; export { ISelectedFile } from "./components/fields/verdocs-field-attachment/verdocs-field-attachment"; export { IMultiSelectOption } from "./components/controls/verdocs-multiselect/verdocs-multiselect"; export { IFilterOption } from "./components/controls/verdocs-quick-filter/verdocs-quick-filter"; export { ISearchEvent, TContentType } from "./components/elements/verdocs-search-box/verdocs-search-box"; export { IContactSearchEvent as IContactSearchEvent1 } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker"; export { IColumn } from "./components/controls/verdocs-table/verdocs-table"; export { ITab } from "./components/controls/verdocs-tabs/verdocs-tabs"; export { TVerdocsBuildStep as TVerdocsBuildStep1 } from "./components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs"; export { TAllowedTemplateAction } from "./components/templates/verdocs-templates-list/verdocs-templates-list"; export { IToggleIconButtons } from "./components/controls/verdocs-toggle/verdocs-toggle"; export { Placement } from "@popperjs/core/lib/enums"; export namespace Components { /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface VerdocsAdoptSignatureDialog { /** * Initial signature text * @default '' */ "name": string; /** * If true, the name fields will be read-only. Used when the sender has locked the recipient's name. * @default false */ "nameLocked": boolean; } /** * 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 UI development, a visibility flag can force this component to never display. This * allows you to subscribe 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. * ```ts * console.log('Authentication state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsAuth { /** * The display mode to start in. * @default 'login' */ "displayMode": 'login' | 'forgot' | 'reset' | 'signup' | 'verify'; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be in SVG format for best results. * @default 'https://app.verdocs.com/assets/blue-logo.svg' */ "logo": string; /** * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK. * @default true */ "visible": boolean; } /** * Display a template building experience. Several event callbacks provide status updates to the * parent application to support interface updates. * ```ts * { console.log('Sent envelope from template', detail) }} * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface VerdocsBuild { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The step in the creation process to display. * @default 'preview' */ "step": TVerdocsBuildStep; /** * The ID of the template to create the document from. Unlike most other components, this is an optional parameter here. If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process. If it is not specified, `step` will be ignored and the create step will be shown. * @default null */ "templateId": string | null; } /** * A simple button, with consistent styling to other controls in the design system. * ```ts * * ``` */ interface VerdocsButton { /** * Whether the button should be disabled. * @default false */ "disabled": boolean; /** * If desired, a suffix icon for the button. * @default null */ "endIcon": string | null; /** * The label for the button. */ "label": string; /** * The size (height) of the button. * @default 'normal' */ "size": 'xsmall' | 'small' | 'normal' | 'medium' | 'large'; /** * If desired, a prefix icon for the button. * @default null */ "startIcon": string | null; /** * The type of the button. * @default 'button' */ "type": 'button' | 'submit' | 'reset'; /** * The display variant of the button. * @default 'standard' */ "variant": 'standard' | 'text' | 'outline'; } /** * Display an icon button that triggers a drop-down panel that can display * arbitrary child content, such as metadata, forms, or other controls. * ```ts * *
Field Settings
*
*

* * *

*
* * ``` */ interface VerdocsButtonPanel { "hidePanel": () => Promise; /** * SVG icon to display * @default '' */ "icon": string; "showPanel": () => Promise; "toggle": () => Promise; } /** * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check * box for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * (this.thingEnabled = e.target.checked)} * /> * ``` */ interface VerdocsCheckbox { /** * Whether the radio button is currently selected. * @default false */ "checked": boolean; /** * If set, the button will still be displayed but not selectable. * @default false */ "disabled"?: boolean; /** * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be repositioned with CSS. * @default '' */ "label": string; /** * HTML form field name for the input. * @default '' */ "name": string; /** * Size of checkbox to render. * @default 'normal' */ "size": 'normal' | 'small'; /** * Style of checkbox to render. Use 'dark' when rendering on a dark background. * @default 'light' */ "theme": 'light' | 'dark'; /** * Value to track with the input. Value is not used internally by this component but is sometimes useful to set because it can be retrieved in event handlers via e.target.value. This can be used to identify which checkbox was clicked in a checkbox group. * @default '' */ "value": string; } /** * Render a simple error message. */ interface VerdocsComponentError { /** * The message to display. * @default '' */ "message": string; } /** * Display a contact picker suitable for filling out Recipient objects when sending Envelopes. * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event. * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or * to always display the user's own contact record. * ```ts * console.log('Contact completed', e.detail)} * /> * ``` */ interface VerdocsContactPicker { /** * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number of suggestions be limited to the 5 best matching records. * @default [] */ "contactSuggestions": TPickerContact[]; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The role that this contact will be assigned to. * @default null */ "templateRole": Partial | null; } /** * Display a date input field. * ```ts * * ``` */ interface VerdocsDateInput { /** * Should the field be disabled? * @default false */ "disabled": boolean; "focusField": () => Promise; /** * If supplied, a help icon will be displayed to provide the user more information. * @default '' */ "helpText": string; /** * The label for the field. * @default '' */ "label": string; /** * The placeholder for the field. * @default '' */ "placeholder": string; /** * Should the field be required? * @default false */ "required": boolean; /** * The initial value for the input field. * @default '' */ "value": string; } /** * Delegate signing responsibility to another recipient. */ interface VerdocsDelegateDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint": VerdocsEndpoint; /** * The envelope to process. * @default null */ "envelope": IEnvelope | null; } /** * Display a simple dialog where the contents are provided via slots. */ interface VerdocsDialog { /** * If true, clicking on the background overlay will not close the dialog. * @default false */ "persistent": boolean; } /** * Display e-signing disclosures with options to delegate, decline or proceed. */ interface VerdocsDisclosureDialog { /** * If the recipient may delegate, an additional button will be shown to drive this flow. * @default false */ "delegator": boolean; /** * The disclosures to display. * @default "\n" */ "disclosures": string; } interface VerdocsDownloadDialog { /** * The list of documents in the envelope. * @default [] */ "documents": any[]; /** * If true, the envelope has a certificate available for download. * @default false */ "hasCertificate": boolean; /** * If true, we are currently polling the server for updates. * @default false */ "polling": boolean; /** * If true, the envelope is considered signed. * @default false */ "signed": boolean; } /** * 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 * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label. * ```ts * (console.log('OK clicked'))} * /> * ``` */ interface VerdocsDropdown { /** * The menu options to display. * @default [] */ "options": IMenuOption[]; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface VerdocsEnvelopeDocumentPage { /** * The ID of the document to display. * @default '' */ "documentId": string; /** * The endpoint to load from. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The ID of the envelope the document is for. * @default '' */ "envelopeId": string; /** * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer. The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g. if `pages` was ['page', 'fields'] the structure will be: ```
``` * @default [{name: 'page', type: 'canvas'}] */ "layers": IPageLayer[]; /** * The page number being rendered. (Reminder: page numbers are 1-based.) * @default 1 */ "pageNumber": number; /** * @default 'original' */ "type": 'original' | 'filled' | 'certificate'; /** * The "virtual" height of the page canvas. Defaults to 792 which at 72dpi is 11" tall. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 792 */ "virtualHeight": number; /** * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 612 */ "virtualWidth": number; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface VerdocsEnvelopeRecipientLink { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId": string; /** * The role to load. * @default '' */ "roleName": string; } /** * Displays a list of recipients with options to get in-person signing links for each one. */ interface VerdocsEnvelopeRecipientSummary { /** * Enable or disable the Done button. * @default true */ "canDone": boolean; /** * Enable or disable the Send Another button. * @default true */ "canSendAnother": boolean; /** * Enable or disable the View button. * @default true */ "canView": boolean; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId": string; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface VerdocsEnvelopeSidebar { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId": string; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface VerdocsEnvelopeUpdateRecipient { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId": string; /** * The role to load. * @default '' */ "roleName": string; } /** * Displays a list of envelopes matching specified conditions. */ interface VerdocsEnvelopesList { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * If set, filter envelopes by the specified string. * @default '' */ "match": string; /** * The number of rows to display per page. * @default 10 */ "rowsPerPage": number; /** * The initial page number to select. Pagination is internally controlled but may be overriden by the host applicaiton. * @default 0 */ "selectedPage": number; /** * Whether or not pagination should be enabled. * @default true */ "showPagination": boolean; /** * The sort field to use * @default 'created_at' */ "sort": 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'; /** * The status value to filter by * @default 'all' */ "status": TEnvelopeStatus | 'all'; /** * The filtered view to display. "completed" will show envelopes that have been submitted. "action" will show envelopes where the user is a recipient and the envelope is not completed. "waiting" will show only envelopes where the user is the sender and the envelope is not completed. * @default undefined */ "view"?: 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'; } /** * Displays an attachment field. */ interface VerdocsFieldAttachment { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a checkbox. */ interface VerdocsFieldCheckbox { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a date field. When tapped or clicked, the input element will display a date picker component. */ interface VerdocsFieldDate { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * If set, the field will be be scaled vertically by this factor. */ "field"?: ITemplateField; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a dropdown field that allows the user to choose one of a list of options. */ interface VerdocsFieldDropdown { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * 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. */ interface VerdocsFieldInitial { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set, provides the ID of already-adopted initials. If present, clicking the field (when empty) will immediately use these initials instead of showing the adoption dialog. */ "initialid"?: string; /** * The document or template field to display. * @default '' */ "initials": string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as * input types like text and checkbox. */ interface VerdocsFieldPayment { "currentInitial": string; "currentInitialId": string; "currentSignature": string; "currentSignatureId": string; /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; "fieldId": string; /** * The name of the field to display. * @default '' */ "fieldname": string; "fields": any[]; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; "pageNum": number; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "pdfPages": any[]; "recipients": any; "roleName": string; /** * If set, the field will be colored using this index value to select the background color. * @default 0 */ "roleindex"?: number; "selectedRoleName": string; "showSettingsPanel": () => Promise; /** * @default false */ "signed": boolean; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a radio button. */ interface VerdocsFieldRadio { /** * If set, overrides the field's settings object. Primarily used in Storybook mode. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * If set, overrides the field's required object. Primarily used in Storybook mode. * @default false */ "required"?: boolean; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * 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. */ interface VerdocsFieldSignature { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * If set, the signature creation dialog will be initialized with this text. * @default '' */ "name"?: string; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * If set, provides the ID of an already-adopted signature. If present, clicking the field (when empty) will immediately use this signature instead of showing the adoption dialog. */ "signatureid"?: string; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a multi-line text input field. Reminder: the "position" of the field is specified * as the BOTTOM-LEFT corner. */ interface VerdocsFieldTextarea { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * 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. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a simple 1-line text input field. */ interface VerdocsFieldTextbox { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "multiline"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically * filled when the signer submits the document. */ interface VerdocsFieldTimestamp { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field": IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname": string; "focusField": () => Promise; "hideSettingsPanel": () => Promise; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "showSettingsPanel": () => Promise; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source": 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid": string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should * provide the actual upload functionality. * ```ts * console.log('File Selected', e.detail)} /> * ``` */ interface VerdocsFileChooser { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; } interface VerdocsFlag { /** * The text label to display in the flag. * @default 'FILL' */ "label": string; /** * If true, shows "or SKIP" link. * @default false */ "showSkip": boolean; /** * The type of flag to display. * @default 'fill' */ "variant": 'fill' | 'next'; } /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface VerdocsHelpIcon { /** * Optional icon to display. If not supplied, a standard help icon will be shown. * @default '' */ "icon": string; /** * Help text to display on hover/focus * @default '' */ "text": string; } /** * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their initials with a mouse or tablet. */ interface VerdocsInitialDialog { /** * Initial signature text * @default '' */ "initials": string; } /** * Prompt the user to confirm their identity with a PIN or a series of questions. */ interface VerdocsKbaDialog { /** * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes. * @default ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'] */ "choices": string[]; /** * If set, a help/instructions box will be displayed with this text * @default 'Please select the address below that you have most recently lived at.' */ "helptext": string; /** * If set, a help/instructions box will be displayed with this title * @default 'Previous Addresses' */ "helptitle": string; /** * For text input challenges, the label to display next to the input field. * @default 'PIN' */ "label": string; /** * The type of dialog to display. Three modes are supported. * @default 'choice' */ "mode": 'text' | 'choice' | 'identity'; /** * For text input challenges, the placeholder to display inside the input field. * @default 'Enter your PIN...' */ "placeholder": string; /** * For identity confirmation, the current recipient details. * @default null */ "recipient": IRecipient | null; /** * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2. * @default 1 */ "step": number; /** * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator). * @default 3 */ "steps": number; } /** * Animated loader placeholder. There are currently no configuration options for this control. * ```ts * * ``` */ interface VerdocsLoader { } /** * Display a menu panel in a left or right sidebar. The panel will animate (slide) * as it appears, and an background will be shown over the rest of the page. If * the background overlay is present, it can be clicked to dismiss the panel. * ```ts * *
Menu Panel
* * ``` */ interface VerdocsMenuPanel { /** * Whether to show an overlay over the rest of the page. * @default true */ "overlay": boolean; /** * Which side of the screen to place the panel. * @default 'right' */ "side": 'left' | 'right'; /** * The width of the panel. * @default 300 */ "width": number; } /** * Display a dropdown that allows multiple options to be selected. 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 emit. * ```ts * {}} /> * ``` */ interface VerdocsMultiselect { /** * The label for the field. * @default '' */ "label": string; /** * The options to list. */ "options": IMultiSelectOption[]; /** * The placeholder for the input element when no options are selected. * @default 'Select...' */ "placeholder": string; /** * The currently selected options. * @default [] */ "selectedOptions": string[]; } /** * Display a simple text dialog box with an Ok button. 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. */ interface VerdocsOkDialog { /** * Override the "OK" button's label * @default 'OK' */ "buttonLabel": string; /** * The title of the dialog. "title" is a reserved word, so we use heading. * @default '' */ "heading": string; /** * The message content to display. * @default '' */ "message": string; /** * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background overlay to dismiss it. * @default false */ "showCancel": boolean; } /** * Display a small summary card describing an organization. * ```ts * * ``` */ interface VerdocsOrganizationCard { /** * The organization to display */ "organization": Partial; } /** * Prompt the user to confirm their identity with a one time code via email/SMS. */ interface VerdocsOtpDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint": VerdocsEndpoint; /** * The type of dialog to display. Three modes are supported. * @default 'email' */ "method": 'email' | 'sms'; } /** * Display a simple pagination control with individual buttons to move through the data set. * ```ts * {setSelectedpage(e.detail.selectedPage)}} * /> * ``` */ interface VerdocsPagination { /** * The total number of items. * @default 1 */ "itemCount": number; /** * The number of displayed per page. * @default 10 */ "perPage": number; /** * The currently selected page. * @default 0 */ "selectedPage": number; } /** * Prompt the user to confirm their identity with a passcode. */ interface VerdocsPasscodeDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint": VerdocsEndpoint; } /** * 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 *
*
* Tooltip Anchor * *
Tooltip
* *
*
* ``` */ interface VerdocsPortal { /** * Unique ID of the parent element to anchor to. */ "anchor": string; /** * Vertical offset from the parent. * @default 0 */ "voffset": number; } /** * 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 * { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsPreview { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The ID of the template to create the document from. * @default null */ "templateId": string | null; } /** * Display a simple progress bar in a style consistent with the design system. * ```ts * * ``` */ interface VerdocsProgressBar { /** * Optional label to display above the bar * @default '' */ "label": string; /** * The current progress value (0-100) * @default 0 */ "percent": number; /** * If true, the progress percentage will be displayed above the bar. * @default false */ "showPercent": boolean; } /** * Display a simple text dialog box with an Ok button. 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. */ interface VerdocsQuestionDialog { /** * @default '' */ "question": string; } /** * Display a drop-down menu of quick filter options. * ```ts * * ``` */ interface VerdocsQuickFilter { /** * @default 'Filter' */ "label": string; /** * The menu options to display. * @default [] */ "options": IFilterOption[]; /** * @default 'Select...' */ "placeholder": string; /** * @default '' */ "value": string; } /** * Display quick-function buttons for creating templates and documents. * 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. */ interface VerdocsQuickFunctions { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; } /** * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is * designed to be used in signing experiences and contains settings that connect to template fields. This is just a * simple radio button for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * { this.someProperty = 'val1' }} * disabled={false} * /> * ``` */ interface VerdocsRadioButton { /** * Whether the radio button is currently selected. * @default false */ "checked": boolean; /** * If set, the button will still be displayed but not selectable. * @default false */ "disabled"?: boolean; /** * HTML form field name for the input. * @default '' */ "name": string; /** * Value to track with the input. * @default '' */ "value": string; } /** * Displays a customizable input box for search queries. * 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. */ interface VerdocsSearchBox { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; "focusField": () => Promise; /** * If set, the input field will attempt to "grab" focus after being rendered. * @default false */ "grabsFocus": boolean; /** * The placeholder to display in the input field. * @default 'Search envelopes, templates, organizations...' */ "placeholder": string; /** * The text search string entered by the user. * @default '' */ "query": string; /** * If set to a value other than 'all', a removeable filter indicator will be displayed. * @default 'all' */ "type": TContentType; } interface VerdocsSearchTabs { } /** * Display a combo box. This is just a standard HTML select 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 emit. * ```ts * {}} /> * ``` */ interface VerdocsSelectInput { /** * Should the field be disabled? * @default false */ "disabled": boolean; /** * The label for the field. * @default '' */ "label": string; /** * The options to list. */ "options": {label: string; value: string}[]; /** * The initial value for the input field. * @default '' */ "value": string; } /** * Display a form to send a template to one or more recipients in an envelope for signing. * 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 * { console.log('Sending... Show a spinner...', detail) } * onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) } * onExit={({ detail }) => { console.log('Send cancelled.', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsSend { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint": VerdocsEndpoint; /** * The environment the control is being called from, e.g. 'web'. This has an impact on how certain operations such as email communications are handled to ensure users receive the correct URLs for their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors. If environment is not known, do this set this property. * @default '' */ "environment": string; "reset": () => Promise; /** * Whether to show the cancel button. It may be useful to disable this in environments where the embed is shown in a non-wizard flow with its own navigation for the user to exit. * @default true */ "showCancel": boolean; /** * The ID of the template to create the document from. * @default null */ "templateId": string | null; } /** * Display an envelope signing experience. This will display the envelope's attached * documents with signing fields overlaid on each page. * The component will attempt to initiate a signing session and load the specified * envelope. If successful, the recipient's fields will be enabled and the user will * be able to sign the envelope's attached documents. If not, an `sdkError` will be * thrown and the component will be blank/empty. To provide the best user experience, * applications should capture and handle this error to provide the user with * instructions/options for next steps based on the application's design and workflow. * Unlike other components, this will always create its own endpoint to manage the * session session. This endpoint will be included in event callbacks for the * convenience of host applications that may wish to make server calls using the * signer's credentials once signing is complete (e.g. to obtain copies of * the signed attachments.) * ```ts * console.log('Envelope updated state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface VerdocsSign { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default new VerdocsEndpoint({sessionType: 'signing'}) */ "endpoint": VerdocsEndpoint; /** * The ID of the envelope to sign. * @default null */ "envelopeId": string | null; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the header will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects (e.g. "fixed"). The movement of the header to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the header's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "headerTargetId": string | null; /** * The invite code for the signer. * @default null */ "inviteCode": string | null; /** * The ID of the role that will be signing e.g. 'Recipient 1' * @default null */ "roleId": string | null; /** * The style of the toolbar to display. * @default 'menu' */ "toolbarStyle": 'controls' | 'menu'; } /** * Typically presented by the `verdocs-sign` component. Displays a footer toolbar * with a few convenience functions for the envelope recipient to use. */ interface VerdocsSignFooter { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId": string; /** * If the recipient is "done," some buttons will be hidden. * @default false */ "isDone": boolean; } /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface VerdocsSignatureDialog { /** * Initial signature text * @default '' */ "name": string; } interface VerdocsSigningProgress { /** * All fillable fields for the current recipient * @default [] */ "fields": IEnvelopeField[]; /** * The name of the currently focused field (to highlight it and show its label) * @default '' */ "focusedField": string; /** * Display mode * @default 'start' */ "mode": 'start' | 'signing' | 'completed'; /** * All fields for the recipient, used to check filled status (may include non-fillable) * @default [] */ "recipientFields": IEnvelopeField[]; } /** * Display a small loading spinner. * ```ts * * ``` */ interface VerdocsSpinner { /** * @default 'light' */ "mode": 'light' | 'dark'; /** * @default 32 */ "size": number; } /** * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either * directly as a status field or the whole document object may be passed in. * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable * to display a popup panel with per-recipient status data. * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value. */ interface VerdocsStatusIndicator { /** * The document to display status for. Ignored if `status` is set directly. */ "envelope"?: IEnvelope; /** * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows. * @default 'normal' */ "size": 'small' | 'normal'; /** * The status to display. */ "status"?: TEnvelopeStatus | TRecipientStatus | 'accepted'; /** * The theme to use for diplay. * @default 'light' */ "theme"?: 'dark' | 'light'; } /** * Displays a toggle switch * ```ts * * ``` */ interface VerdocsSwitch { /** * @default false */ "checked": boolean; /** * Should the field be disabled? * @default false */ "disabled": boolean; /** * Select purple or green treatments. * @default 'primary' */ "theme": 'primary' | 'secondary'; } /** * Display a simple table of data. Columns and data cells may have custom renderers defined to * support creating interactive table layouts. * ```ts * * ``` */ interface VerdocsTable { /** * The columns to display * @default [] */ "columns": IColumn[]; /** * The rows to display * @default [] */ "data": any[]; } /** * Display a simple row of selectable tabs. This is a controlled element. * The parent must adjust selectedTab as selection events are fired. * ```ts * * ``` */ interface VerdocsTabs { /** * The index of the tab to show selected. * @default 0 */ "selectedTab": number; /** * The tabs to display * @default [] */ "tabs": ITab[]; } /** * Displays an edit form that allows the user to view, add, or remove a template's attachments. * Note that an active session and valid template ID must be supplied. */ interface VerdocsTemplateAttachments { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The template ID to edit. * @default '' */ "templateId": string; } /** * Display a set of tabs for the template builder. */ interface VerdocsTemplateBuildTabs { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The step in the creation process to display. * @default 'preview' */ "step": TVerdocsBuildStep1; /** * The ID of the template to create the document from. Unlike most other components, this is an optional parameter here. If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process. If it is not specified, `step` will be ignored and the create step will be shown. * @default null */ "templateId": string | null; } /** * Displays a summary of a template */ interface VerdocsTemplateCard { /** * The template for which the card will be rendered. */ "template": ITemplate; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface VerdocsTemplateCreate { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * @default 20.5 * 1024 * 1024 */ "maxSize": number; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface VerdocsTemplateDocumentPage { /** * Whether the fields should be disabled (Builder) * @default false */ "disabled": boolean; /** * The ID of the document to display. * @default '' */ "documentId": string; /** * Whether the field are interactable (done/submitted disables this) * @default false */ "done": boolean; /** * Whether the fields should be editable (Builder) * @default false */ "editable": boolean; /** * The endpoint to load from. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer. The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g. if `pages` was ['page', 'fields'] the structure will be: ```
``` * @default [{name: 'page', type: 'canvas'}] */ "layers": IPageLayer[]; /** * The page number being rendered. (Reminder: page numbers are 1-based.) * @default 1 */ "pageNumber": number; /** * The ID of the template the document is for. * @default '' */ "templateId": string; /** * The "virtual" height of the page canvas. Defaults to 792 which at 72dpi is 11" tall. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 792 */ "virtualHeight": number; /** * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 612 */ "virtualWidth": number; } /** * Displays an edit form that allows the user to adjust a field's settings. */ interface VerdocsTemplateFieldProperties { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The field to configure. * @default '' */ "fieldName": string; /** * If specified, the properties card will have a "back" side with the help text as its content. * @default '' */ "helpText"?: string; /** * The template ID to edit. * @default '' */ "templateId": string; } /** * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to * present all of the required controls, so it is primarily intended to be used in desktop environments. */ interface VerdocsTemplateFields { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The ID of the template to create the document from. * @default null */ "templateId": string | null; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the toolbar will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects. The movement of the toolbar to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the toolbar's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "toolbarTargetId": string | null; } /** * Present an editing form suitable for adjusting template-role properties. */ interface VerdocsTemplateRoleProperties { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The role name to edit. * @default '' */ "roleName": string; /** * The template ID to edit. * @default '' */ "templateId": string; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface VerdocsTemplateRoles { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The template ID to edit. * @default '' */ "templateId": string; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface VerdocsTemplateSettings { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The template ID to edit. * @default '' */ "templateId": string; } /** * Displays a clickable star that allows users to mark frequently-used templates. */ interface VerdocsTemplateStar { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * The template to display the star for. */ "template": ITemplate; } /** * Displays a message listing a template's tags. */ interface VerdocsTemplateTags { /** * The tags to display */ "tags": any[]; } /** * Display a list of templates in the caller's account. * ```ts * console.log('View template:', detail) } * /> * ``` */ interface VerdocsTemplatesList { /** * Override the If set, filter templates by the specified name. * @default ['send', 'submitted', 'link', 'edit', 'delete'] */ "allowedActions": TAllowedTemplateAction[]; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint": VerdocsEndpoint; /** * If set, filter templates by the specified name. * @default '' */ "name": string; /** * The number of rows to display per page. * @default 10 */ "rowsPerPage": number; /** * The initial page number to select. Pagination is internally controlled but may be overriden by the host applicaiton. * @default 0 */ "selectedPage": number; /** * Whether or not pagination should be enabled. * @default true */ "showPagination": boolean; /** * The sort order to display. * @default 'updated_at' */ "sort": string; /** * The starred settings to filter by. * @default 'all' */ "starred": 'all' | 'starred' | 'unstarred'; /** * The sharing settings to filter by. * @default 'private_shared' */ "visibility"?: 'private_shared' | 'private' | 'shared' | 'public'; } /** * 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 emit. * ```ts * * ``` */ interface VerdocsTextInput { /** * If desired, the autocomplete attribute to set. * @default '' */ "autocomplete": string; /** * If set, a clear button will be displayed. * @default false */ "clearable": boolean; /** * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be both clearable and copyable. If both properties are set to true, copyable will be ignored. * @default false */ "copyable": boolean; /** * Displayed below the field in a small font, typically used for instructions or reminders. * @default '' */ "description": string; /** * Should the field be disabled? * @default false */ "disabled": boolean; /** * If supplied, a help icon will be displayed to provide the user more information. * @default '' */ "helpText": string; /** * The label for the field. * @default '' */ "label": string; /** * The placeholder for the field. * @default '' */ "placeholder": string; /** * Should the field be required? * @default false */ "required": boolean; /** * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types (e.g. a date picker) will be supported by other controls in the future. * @default 'text' */ "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'; /** * The initial value for the input field. * @default '' */ "value": string; } /** * Displays a label and a set of buttons, also allowing a default selection of a button. * ```ts * * ``` */ interface VerdocsToggle { /** * The tags to display */ "options": IToggleIconButtons; /** * The "theme" to be used */ "theme": 'light' | 'dark'; } /** * Displays a single button that can be toggled on or off by clicking it. * ```ts * * ``` */ interface VerdocsToggleButton { /** * @default false */ "active": boolean; /** * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored. * @default null */ "icon"?: string | null; /** * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored. * @default null */ "label"?: string | null; /** * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions. * @default 'normal' */ "size"?: 'small' | 'normal'; } /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface VerdocsToolbarIcon { /** * SVG icon to display * @default '' */ "icon": string; /** * Override the Popper "placement" setting * @default 'bottom' */ "placement": Placement; /** * Help text to display on hover/focus * @default '' */ "text": string; } /** * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by * callers with a variety of workflows. Instead, data about the chosen file will be passed to the * caller via the onNext event handler. A delete event is also exposed to delete existing attachments. * To represent an existing attachment, set the existingFile property. */ interface VerdocsUploadDialog { "existingFile": any; /** * @default 20 * 1024 * 1024 */ "maxSize": number; } interface VerdocsView { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default null */ "endpoint": VerdocsEndpoint | null; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId": string; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the header will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects (e.g. "fixed"). The movement of the header to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the header's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "headerTargetId": string | null; } } export interface VerdocsAdoptSignatureDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsAdoptSignatureDialogElement; } export interface VerdocsAuthCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsAuthElement; } export interface VerdocsBuildCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsBuildElement; } export interface VerdocsContactPickerCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsContactPickerElement; } export interface VerdocsDelegateDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsDelegateDialogElement; } export interface VerdocsDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsDialogElement; } export interface VerdocsDisclosureDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsDisclosureDialogElement; } export interface VerdocsDownloadDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsDownloadDialogElement; } export interface VerdocsDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsDropdownElement; } export interface VerdocsEnvelopeDocumentPageCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopeDocumentPageElement; } export interface VerdocsEnvelopeRecipientLinkCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopeRecipientLinkElement; } export interface VerdocsEnvelopeRecipientSummaryCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopeRecipientSummaryElement; } export interface VerdocsEnvelopeSidebarCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopeSidebarElement; } export interface VerdocsEnvelopeUpdateRecipientCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopeUpdateRecipientElement; } export interface VerdocsEnvelopesListCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsEnvelopesListElement; } export interface VerdocsFieldAttachmentCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldAttachmentElement; } export interface VerdocsFieldCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldCheckboxElement; } export interface VerdocsFieldDateCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldDateElement; } export interface VerdocsFieldDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldDropdownElement; } export interface VerdocsFieldInitialCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldInitialElement; } export interface VerdocsFieldPaymentCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldPaymentElement; } export interface VerdocsFieldRadioCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldRadioElement; } export interface VerdocsFieldSignatureCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldSignatureElement; } export interface VerdocsFieldTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldTextareaElement; } export interface VerdocsFieldTextboxCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldTextboxElement; } export interface VerdocsFieldTimestampCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFieldTimestampElement; } export interface VerdocsFileChooserCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFileChooserElement; } export interface VerdocsFlagCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsFlagElement; } export interface VerdocsInitialDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsInitialDialogElement; } export interface VerdocsKbaDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsKbaDialogElement; } export interface VerdocsMenuPanelCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsMenuPanelElement; } export interface VerdocsMultiselectCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsMultiselectElement; } export interface VerdocsOkDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsOkDialogElement; } export interface VerdocsOtpDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsOtpDialogElement; } export interface VerdocsPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsPaginationElement; } export interface VerdocsPasscodeDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsPasscodeDialogElement; } export interface VerdocsPortalCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsPortalElement; } export interface VerdocsPreviewCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsPreviewElement; } export interface VerdocsQuestionDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsQuestionDialogElement; } export interface VerdocsQuickFilterCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsQuickFilterElement; } export interface VerdocsQuickFunctionsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsQuickFunctionsElement; } export interface VerdocsSearchBoxCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSearchBoxElement; } export interface VerdocsSendCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSendElement; } export interface VerdocsSignCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSignElement; } export interface VerdocsSignFooterCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSignFooterElement; } export interface VerdocsSignatureDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSignatureDialogElement; } export interface VerdocsSigningProgressCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSigningProgressElement; } export interface VerdocsSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsSwitchElement; } export interface VerdocsTableCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTableElement; } export interface VerdocsTabsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTabsElement; } export interface VerdocsTemplateAttachmentsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateAttachmentsElement; } export interface VerdocsTemplateBuildTabsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateBuildTabsElement; } export interface VerdocsTemplateCreateCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateCreateElement; } export interface VerdocsTemplateDocumentPageCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateDocumentPageElement; } export interface VerdocsTemplateFieldPropertiesCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateFieldPropertiesElement; } export interface VerdocsTemplateFieldsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateFieldsElement; } export interface VerdocsTemplateRolePropertiesCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateRolePropertiesElement; } export interface VerdocsTemplateRolesCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateRolesElement; } export interface VerdocsTemplateSettingsCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateSettingsElement; } export interface VerdocsTemplateStarCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplateStarElement; } export interface VerdocsTemplatesListCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsTemplatesListElement; } export interface VerdocsToggleButtonCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsToggleButtonElement; } export interface VerdocsUploadDialogCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsUploadDialogElement; } export interface VerdocsViewCustomEvent extends CustomEvent { detail: T; target: HTMLVerdocsViewElement; } declare global { interface HTMLVerdocsAdoptSignatureDialogElementEventMap { "next": {signature: string; initials: string}; "exit": any; } /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface HTMLVerdocsAdoptSignatureDialogElement extends Components.VerdocsAdoptSignatureDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsAdoptSignatureDialogElement, ev: VerdocsAdoptSignatureDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsAdoptSignatureDialogElement, ev: VerdocsAdoptSignatureDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsAdoptSignatureDialogElement: { prototype: HTMLVerdocsAdoptSignatureDialogElement; new (): HTMLVerdocsAdoptSignatureDialogElement; }; interface HTMLVerdocsAuthElementEventMap { "authenticated": IAuthStatus; "sdkError": SDKError; } /** * 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 UI development, a visibility flag can force this component to never display. This * allows you to subscribe 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. * ```ts * console.log('Authentication state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface HTMLVerdocsAuthElement extends Components.VerdocsAuth, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsAuthElement, ev: VerdocsAuthCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsAuthElement, ev: VerdocsAuthCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsAuthElement: { prototype: HTMLVerdocsAuthElement; new (): HTMLVerdocsAuthElement; }; interface HTMLVerdocsBuildElementEventMap { "cancel": any; "sdkError": SDKError; "stepChanged": TVerdocsBuildStep; "send": {recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}; "templateUpdated": {endpoint: VerdocsEndpoint; template: ITemplate; event: string}; "templateCreated": {endpoint: VerdocsEndpoint; template: ITemplate; event: string}; "rolesUpdated": {endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}; } /** * Display a template building experience. Several event callbacks provide status updates to the * parent application to support interface updates. * ```ts * { console.log('Sent envelope from template', detail) }} * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface HTMLVerdocsBuildElement extends Components.VerdocsBuild, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsBuildElement, ev: VerdocsBuildCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsBuildElement, ev: VerdocsBuildCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsBuildElement: { prototype: HTMLVerdocsBuildElement; new (): HTMLVerdocsBuildElement; }; /** * A simple button, with consistent styling to other controls in the design system. * ```ts * * ``` */ interface HTMLVerdocsButtonElement extends Components.VerdocsButton, HTMLStencilElement { } var HTMLVerdocsButtonElement: { prototype: HTMLVerdocsButtonElement; new (): HTMLVerdocsButtonElement; }; /** * Display an icon button that triggers a drop-down panel that can display * arbitrary child content, such as metadata, forms, or other controls. * ```ts * *
Field Settings
*
*

* * *

*
* * ``` */ interface HTMLVerdocsButtonPanelElement extends Components.VerdocsButtonPanel, HTMLStencilElement { } var HTMLVerdocsButtonPanelElement: { prototype: HTMLVerdocsButtonPanelElement; new (): HTMLVerdocsButtonPanelElement; }; /** * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check * box for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * (this.thingEnabled = e.target.checked)} * /> * ``` */ interface HTMLVerdocsCheckboxElement extends Components.VerdocsCheckbox, HTMLStencilElement { } var HTMLVerdocsCheckboxElement: { prototype: HTMLVerdocsCheckboxElement; new (): HTMLVerdocsCheckboxElement; }; /** * Render a simple error message. */ interface HTMLVerdocsComponentErrorElement extends Components.VerdocsComponentError, HTMLStencilElement { } var HTMLVerdocsComponentErrorElement: { prototype: HTMLVerdocsComponentErrorElement; new (): HTMLVerdocsComponentErrorElement; }; interface HTMLVerdocsContactPickerElementEventMap { "searchContacts": IContactSearchEvent; "exit": any; "next": IContactSelectEvent; } /** * Display a contact picker suitable for filling out Recipient objects when sending Envelopes. * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event. * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or * to always display the user's own contact record. * ```ts * console.log('Contact completed', e.detail)} * /> * ``` */ interface HTMLVerdocsContactPickerElement extends Components.VerdocsContactPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsContactPickerElement, ev: VerdocsContactPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsContactPickerElement, ev: VerdocsContactPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsContactPickerElement: { prototype: HTMLVerdocsContactPickerElement; new (): HTMLVerdocsContactPickerElement; }; /** * Display a date input field. * ```ts * * ``` */ interface HTMLVerdocsDateInputElement extends Components.VerdocsDateInput, HTMLStencilElement { } var HTMLVerdocsDateInputElement: { prototype: HTMLVerdocsDateInputElement; new (): HTMLVerdocsDateInputElement; }; interface HTMLVerdocsDelegateDialogElementEventMap { "exit": any; "next": {first_name: string; last_name: string; email: string; phone: string; message: string}; } /** * Delegate signing responsibility to another recipient. */ interface HTMLVerdocsDelegateDialogElement extends Components.VerdocsDelegateDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsDelegateDialogElement, ev: VerdocsDelegateDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsDelegateDialogElement, ev: VerdocsDelegateDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsDelegateDialogElement: { prototype: HTMLVerdocsDelegateDialogElement; new (): HTMLVerdocsDelegateDialogElement; }; interface HTMLVerdocsDialogElementEventMap { "exit": any; } /** * Display a simple dialog where the contents are provided via slots. */ interface HTMLVerdocsDialogElement extends Components.VerdocsDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsDialogElement, ev: VerdocsDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsDialogElement, ev: VerdocsDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsDialogElement: { prototype: HTMLVerdocsDialogElement; new (): HTMLVerdocsDialogElement; }; interface HTMLVerdocsDisclosureDialogElementEventMap { "decline": {first_name: string; last_name: string; email: string; phone: string; message: string}; "delegate": {first_name: string; last_name: string; email: string; phone: string; message: string}; "accept": {first_name: string; last_name: string; email: string; phone: string; message: string}; } /** * Display e-signing disclosures with options to delegate, decline or proceed. */ interface HTMLVerdocsDisclosureDialogElement extends Components.VerdocsDisclosureDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsDisclosureDialogElement, ev: VerdocsDisclosureDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsDisclosureDialogElement, ev: VerdocsDisclosureDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsDisclosureDialogElement: { prototype: HTMLVerdocsDisclosureDialogElement; new (): HTMLVerdocsDisclosureDialogElement; }; interface HTMLVerdocsDownloadDialogElementEventMap { "download": {action: DownloadAction; documentId?: string}; "exit": any; } interface HTMLVerdocsDownloadDialogElement extends Components.VerdocsDownloadDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsDownloadDialogElement, ev: VerdocsDownloadDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsDownloadDialogElement, ev: VerdocsDownloadDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsDownloadDialogElement: { prototype: HTMLVerdocsDownloadDialogElement; new (): HTMLVerdocsDownloadDialogElement; }; interface HTMLVerdocsDropdownElementEventMap { "optionSelected": IMenuOption; } /** * 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 * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label. * ```ts * (console.log('OK clicked'))} * /> * ``` */ interface HTMLVerdocsDropdownElement extends Components.VerdocsDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsDropdownElement, ev: VerdocsDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsDropdownElement, ev: VerdocsDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsDropdownElement: { prototype: HTMLVerdocsDropdownElement; new (): HTMLVerdocsDropdownElement; }; interface HTMLVerdocsEnvelopeDocumentPageElementEventMap { "pageRendered": IDocumentPageInfo; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface HTMLVerdocsEnvelopeDocumentPageElement extends Components.VerdocsEnvelopeDocumentPage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeDocumentPageElement, ev: VerdocsEnvelopeDocumentPageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeDocumentPageElement, ev: VerdocsEnvelopeDocumentPageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopeDocumentPageElement: { prototype: HTMLVerdocsEnvelopeDocumentPageElement; new (): HTMLVerdocsEnvelopeDocumentPageElement; }; interface HTMLVerdocsEnvelopeRecipientLinkElementEventMap { "next": {envelope: IEnvelope}; "sdkError": SDKError; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface HTMLVerdocsEnvelopeRecipientLinkElement extends Components.VerdocsEnvelopeRecipientLink, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeRecipientLinkElement, ev: VerdocsEnvelopeRecipientLinkCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeRecipientLinkElement, ev: VerdocsEnvelopeRecipientLinkCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopeRecipientLinkElement: { prototype: HTMLVerdocsEnvelopeRecipientLinkElement; new (): HTMLVerdocsEnvelopeRecipientLinkElement; }; interface HTMLVerdocsEnvelopeRecipientSummaryElementEventMap { "another": {envelope: IEnvelope}; "view": {envelope: IEnvelope}; "next": {envelope: IEnvelope}; "sdkError": SDKError; } /** * Displays a list of recipients with options to get in-person signing links for each one. */ interface HTMLVerdocsEnvelopeRecipientSummaryElement extends Components.VerdocsEnvelopeRecipientSummary, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeRecipientSummaryElement, ev: VerdocsEnvelopeRecipientSummaryCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeRecipientSummaryElement, ev: VerdocsEnvelopeRecipientSummaryCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopeRecipientSummaryElement: { prototype: HTMLVerdocsEnvelopeRecipientSummaryElement; new (): HTMLVerdocsEnvelopeRecipientSummaryElement; }; interface HTMLVerdocsEnvelopeSidebarElementEventMap { "sdkError": SDKError; "envelopeUpdated": {endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}; "toggle": {open: boolean}; "another": {envelope: IEnvelope}; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface HTMLVerdocsEnvelopeSidebarElement extends Components.VerdocsEnvelopeSidebar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeSidebarElement, ev: VerdocsEnvelopeSidebarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeSidebarElement, ev: VerdocsEnvelopeSidebarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopeSidebarElement: { prototype: HTMLVerdocsEnvelopeSidebarElement; new (): HTMLVerdocsEnvelopeSidebarElement; }; interface HTMLVerdocsEnvelopeUpdateRecipientElementEventMap { "next": {action: 'cancel' | 'save'; originalRecipient: IRecipient; updatedRecipient: IRecipient}; "sdkError": SDKError; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface HTMLVerdocsEnvelopeUpdateRecipientElement extends Components.VerdocsEnvelopeUpdateRecipient, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeUpdateRecipientElement, ev: VerdocsEnvelopeUpdateRecipientCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopeUpdateRecipientElement, ev: VerdocsEnvelopeUpdateRecipientCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopeUpdateRecipientElement: { prototype: HTMLVerdocsEnvelopeUpdateRecipientElement; new (): HTMLVerdocsEnvelopeUpdateRecipientElement; }; interface HTMLVerdocsEnvelopesListElementEventMap { "changeView": 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'; "changeStatus": TEnvelopeStatus | 'all'; "changeSort": 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'; "changeMatch": string; "sdkError": SDKError; "viewEnvelope": {endpoint: VerdocsEndpoint; envelope: IEnvelope}; "finishEnvelope": {endpoint: VerdocsEndpoint; envelope: IEnvelope}; } /** * Displays a list of envelopes matching specified conditions. */ interface HTMLVerdocsEnvelopesListElement extends Components.VerdocsEnvelopesList, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsEnvelopesListElement, ev: VerdocsEnvelopesListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsEnvelopesListElement, ev: VerdocsEnvelopesListCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsEnvelopesListElement: { prototype: HTMLVerdocsEnvelopesListElement; new (): HTMLVerdocsEnvelopesListElement; }; interface HTMLVerdocsFieldAttachmentElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "attached": ISelectedFile; "deleted": {fieldName: string}; } /** * Displays an attachment field. */ interface HTMLVerdocsFieldAttachmentElement extends Components.VerdocsFieldAttachment, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldAttachmentElement, ev: VerdocsFieldAttachmentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldAttachmentElement, ev: VerdocsFieldAttachmentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldAttachmentElement: { prototype: HTMLVerdocsFieldAttachmentElement; new (): HTMLVerdocsFieldAttachmentElement; }; interface HTMLVerdocsFieldCheckboxElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Displays a checkbox. */ interface HTMLVerdocsFieldCheckboxElement extends Components.VerdocsFieldCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldCheckboxElement, ev: VerdocsFieldCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldCheckboxElement, ev: VerdocsFieldCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldCheckboxElement: { prototype: HTMLVerdocsFieldCheckboxElement; new (): HTMLVerdocsFieldCheckboxElement; }; interface HTMLVerdocsFieldDateElementEventMap { "settingsPress": any; "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Displays a date field. When tapped or clicked, the input element will display a date picker component. */ interface HTMLVerdocsFieldDateElement extends Components.VerdocsFieldDate, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldDateElement, ev: VerdocsFieldDateCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldDateElement, ev: VerdocsFieldDateCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldDateElement: { prototype: HTMLVerdocsFieldDateElement; new (): HTMLVerdocsFieldDateElement; }; interface HTMLVerdocsFieldDropdownElementEventMap { "fieldChange": string; "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Displays a dropdown field that allows the user to choose one of a list of options. */ interface HTMLVerdocsFieldDropdownElement extends Components.VerdocsFieldDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldDropdownElement, ev: VerdocsFieldDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldDropdownElement, ev: VerdocsFieldDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldDropdownElement: { prototype: HTMLVerdocsFieldDropdownElement; new (): HTMLVerdocsFieldDropdownElement; }; interface HTMLVerdocsFieldInitialElementEventMap { "adopt": string; "exit": any; "fieldChange": string; "settingsChanged": {fieldName: string; field: ITemplateField}; "settingsPress": any; "deleted": {fieldName: string}; } /** * 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. */ interface HTMLVerdocsFieldInitialElement extends Components.VerdocsFieldInitial, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldInitialElement, ev: VerdocsFieldInitialCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldInitialElement, ev: VerdocsFieldInitialCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldInitialElement: { prototype: HTMLVerdocsFieldInitialElement; new (): HTMLVerdocsFieldInitialElement; }; interface HTMLVerdocsFieldPaymentElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as * input types like text and checkbox. */ interface HTMLVerdocsFieldPaymentElement extends Components.VerdocsFieldPayment, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldPaymentElement, ev: VerdocsFieldPaymentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldPaymentElement, ev: VerdocsFieldPaymentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldPaymentElement: { prototype: HTMLVerdocsFieldPaymentElement; new (): HTMLVerdocsFieldPaymentElement; }; interface HTMLVerdocsFieldRadioElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Displays a radio button. */ interface HTMLVerdocsFieldRadioElement extends Components.VerdocsFieldRadio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldRadioElement, ev: VerdocsFieldRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldRadioElement, ev: VerdocsFieldRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldRadioElement: { prototype: HTMLVerdocsFieldRadioElement; new (): HTMLVerdocsFieldRadioElement; }; interface HTMLVerdocsFieldSignatureElementEventMap { "fieldChange": string; "settingsPress": any; "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; "adopt": any; } /** * 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. */ interface HTMLVerdocsFieldSignatureElement extends Components.VerdocsFieldSignature, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldSignatureElement, ev: VerdocsFieldSignatureCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldSignatureElement, ev: VerdocsFieldSignatureCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldSignatureElement: { prototype: HTMLVerdocsFieldSignatureElement; new (): HTMLVerdocsFieldSignatureElement; }; interface HTMLVerdocsFieldTextareaElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Display a multi-line text input field. Reminder: the "position" of the field is specified * as the BOTTOM-LEFT corner. */ interface HTMLVerdocsFieldTextareaElement extends Components.VerdocsFieldTextarea, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldTextareaElement, ev: VerdocsFieldTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldTextareaElement, ev: VerdocsFieldTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldTextareaElement: { prototype: HTMLVerdocsFieldTextareaElement; new (): HTMLVerdocsFieldTextareaElement; }; interface HTMLVerdocsFieldTextboxElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Display a simple 1-line text input field. */ interface HTMLVerdocsFieldTextboxElement extends Components.VerdocsFieldTextbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldTextboxElement, ev: VerdocsFieldTextboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldTextboxElement, ev: VerdocsFieldTextboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldTextboxElement: { prototype: HTMLVerdocsFieldTextboxElement; new (): HTMLVerdocsFieldTextboxElement; }; interface HTMLVerdocsFieldTimestampElementEventMap { "settingsChanged": {fieldName: string; field: ITemplateField}; "deleted": {fieldName: string}; } /** * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically * filled when the signer submits the document. */ interface HTMLVerdocsFieldTimestampElement extends Components.VerdocsFieldTimestamp, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFieldTimestampElement, ev: VerdocsFieldTimestampCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFieldTimestampElement, ev: VerdocsFieldTimestampCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFieldTimestampElement: { prototype: HTMLVerdocsFieldTimestampElement; new (): HTMLVerdocsFieldTimestampElement; }; interface HTMLVerdocsFileChooserElementEventMap { "fileSelected": {file: File | null}; } /** * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should * provide the actual upload functionality. * ```ts * console.log('File Selected', e.detail)} /> * ``` */ interface HTMLVerdocsFileChooserElement extends Components.VerdocsFileChooser, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFileChooserElement, ev: VerdocsFileChooserCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFileChooserElement, ev: VerdocsFileChooserCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFileChooserElement: { prototype: HTMLVerdocsFileChooserElement; new (): HTMLVerdocsFileChooserElement; }; interface HTMLVerdocsFlagElementEventMap { "skip": void; "flagClick": void; } interface HTMLVerdocsFlagElement extends Components.VerdocsFlag, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsFlagElement, ev: VerdocsFlagCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsFlagElement, ev: VerdocsFlagCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsFlagElement: { prototype: HTMLVerdocsFlagElement; new (): HTMLVerdocsFlagElement; }; /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface HTMLVerdocsHelpIconElement extends Components.VerdocsHelpIcon, HTMLStencilElement { } var HTMLVerdocsHelpIconElement: { prototype: HTMLVerdocsHelpIconElement; new (): HTMLVerdocsHelpIconElement; }; interface HTMLVerdocsInitialDialogElementEventMap { "next": string; "exit": any; } /** * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their initials with a mouse or tablet. */ interface HTMLVerdocsInitialDialogElement extends Components.VerdocsInitialDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsInitialDialogElement, ev: VerdocsInitialDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsInitialDialogElement, ev: VerdocsInitialDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsInitialDialogElement: { prototype: HTMLVerdocsInitialDialogElement; new (): HTMLVerdocsInitialDialogElement; }; interface HTMLVerdocsKbaDialogElementEventMap { "exit": any; "pinEntered": string | IRecipient; "next": string | IRecipient | string[]; } /** * Prompt the user to confirm their identity with a PIN or a series of questions. */ interface HTMLVerdocsKbaDialogElement extends Components.VerdocsKbaDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsKbaDialogElement, ev: VerdocsKbaDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsKbaDialogElement, ev: VerdocsKbaDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsKbaDialogElement: { prototype: HTMLVerdocsKbaDialogElement; new (): HTMLVerdocsKbaDialogElement; }; /** * Animated loader placeholder. There are currently no configuration options for this control. * ```ts * * ``` */ interface HTMLVerdocsLoaderElement extends Components.VerdocsLoader, HTMLStencilElement { } var HTMLVerdocsLoaderElement: { prototype: HTMLVerdocsLoaderElement; new (): HTMLVerdocsLoaderElement; }; interface HTMLVerdocsMenuPanelElementEventMap { "close": void; } /** * Display a menu panel in a left or right sidebar. The panel will animate (slide) * as it appears, and an background will be shown over the rest of the page. If * the background overlay is present, it can be clicked to dismiss the panel. * ```ts * *
Menu Panel
* * ``` */ interface HTMLVerdocsMenuPanelElement extends Components.VerdocsMenuPanel, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsMenuPanelElement, ev: VerdocsMenuPanelCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsMenuPanelElement, ev: VerdocsMenuPanelCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsMenuPanelElement: { prototype: HTMLVerdocsMenuPanelElement; new (): HTMLVerdocsMenuPanelElement; }; interface HTMLVerdocsMultiselectElementEventMap { "selectionChanged": {selectedOptions: string[]}; } /** * Display a dropdown that allows multiple options to be selected. 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 emit. * ```ts * {}} /> * ``` */ interface HTMLVerdocsMultiselectElement extends Components.VerdocsMultiselect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsMultiselectElement, ev: VerdocsMultiselectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsMultiselectElement, ev: VerdocsMultiselectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsMultiselectElement: { prototype: HTMLVerdocsMultiselectElement; new (): HTMLVerdocsMultiselectElement; }; interface HTMLVerdocsOkDialogElementEventMap { "next": any; "exit": any; } /** * Display a simple text dialog box with an Ok button. 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. */ interface HTMLVerdocsOkDialogElement extends Components.VerdocsOkDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsOkDialogElement, ev: VerdocsOkDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsOkDialogElement, ev: VerdocsOkDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsOkDialogElement: { prototype: HTMLVerdocsOkDialogElement; new (): HTMLVerdocsOkDialogElement; }; /** * Display a small summary card describing an organization. * ```ts * * ``` */ interface HTMLVerdocsOrganizationCardElement extends Components.VerdocsOrganizationCard, HTMLStencilElement { } var HTMLVerdocsOrganizationCardElement: { prototype: HTMLVerdocsOrganizationCardElement; new (): HTMLVerdocsOrganizationCardElement; }; interface HTMLVerdocsOtpDialogElementEventMap { "exit": any; "next": {response: ISignerTokenResponse}; } /** * Prompt the user to confirm their identity with a one time code via email/SMS. */ interface HTMLVerdocsOtpDialogElement extends Components.VerdocsOtpDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsOtpDialogElement, ev: VerdocsOtpDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsOtpDialogElement, ev: VerdocsOtpDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsOtpDialogElement: { prototype: HTMLVerdocsOtpDialogElement; new (): HTMLVerdocsOtpDialogElement; }; interface HTMLVerdocsPaginationElementEventMap { "selectPage": {selectedPage: number}; } /** * Display a simple pagination control with individual buttons to move through the data set. * ```ts * {setSelectedpage(e.detail.selectedPage)}} * /> * ``` */ interface HTMLVerdocsPaginationElement extends Components.VerdocsPagination, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsPaginationElement, ev: VerdocsPaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsPaginationElement, ev: VerdocsPaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsPaginationElement: { prototype: HTMLVerdocsPaginationElement; new (): HTMLVerdocsPaginationElement; }; interface HTMLVerdocsPasscodeDialogElementEventMap { "exit": any; "next": {response: ISignerTokenResponse}; } /** * Prompt the user to confirm their identity with a passcode. */ interface HTMLVerdocsPasscodeDialogElement extends Components.VerdocsPasscodeDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsPasscodeDialogElement, ev: VerdocsPasscodeDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsPasscodeDialogElement, ev: VerdocsPasscodeDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsPasscodeDialogElement: { prototype: HTMLVerdocsPasscodeDialogElement; new (): HTMLVerdocsPasscodeDialogElement; }; interface HTMLVerdocsPortalElementEventMap { "clickAway": void; } /** * 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 *
*
* Tooltip Anchor * *
Tooltip
* *
*
* ``` */ interface HTMLVerdocsPortalElement extends Components.VerdocsPortal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsPortalElement, ev: VerdocsPortalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsPortalElement, ev: VerdocsPortalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsPortalElement: { prototype: HTMLVerdocsPortalElement; new (): HTMLVerdocsPortalElement; }; interface HTMLVerdocsPreviewElementEventMap { "sdkError": SDKError; } /** * 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 * { console.log('SDK error', detail) } * /> * ``` */ interface HTMLVerdocsPreviewElement extends Components.VerdocsPreview, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsPreviewElement, ev: VerdocsPreviewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsPreviewElement, ev: VerdocsPreviewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsPreviewElement: { prototype: HTMLVerdocsPreviewElement; new (): HTMLVerdocsPreviewElement; }; /** * Display a simple progress bar in a style consistent with the design system. * ```ts * * ``` */ interface HTMLVerdocsProgressBarElement extends Components.VerdocsProgressBar, HTMLStencilElement { } var HTMLVerdocsProgressBarElement: { prototype: HTMLVerdocsProgressBarElement; new (): HTMLVerdocsProgressBarElement; }; interface HTMLVerdocsQuestionDialogElementEventMap { "next": {question: string}; "exit": any; } /** * Display a simple text dialog box with an Ok button. 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. */ interface HTMLVerdocsQuestionDialogElement extends Components.VerdocsQuestionDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsQuestionDialogElement, ev: VerdocsQuestionDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsQuestionDialogElement, ev: VerdocsQuestionDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsQuestionDialogElement: { prototype: HTMLVerdocsQuestionDialogElement; new (): HTMLVerdocsQuestionDialogElement; }; interface HTMLVerdocsQuickFilterElementEventMap { "optionSelected": IFilterOption; } /** * Display a drop-down menu of quick filter options. * ```ts * * ``` */ interface HTMLVerdocsQuickFilterElement extends Components.VerdocsQuickFilter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsQuickFilterElement, ev: VerdocsQuickFilterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsQuickFilterElement, ev: VerdocsQuickFilterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsQuickFilterElement: { prototype: HTMLVerdocsQuickFilterElement; new (): HTMLVerdocsQuickFilterElement; }; interface HTMLVerdocsQuickFunctionsElementEventMap { "createTemplate": any; "createDocument": any; } /** * Display quick-function buttons for creating templates and documents. * 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. */ interface HTMLVerdocsQuickFunctionsElement extends Components.VerdocsQuickFunctions, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsQuickFunctionsElement, ev: VerdocsQuickFunctionsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsQuickFunctionsElement, ev: VerdocsQuickFunctionsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsQuickFunctionsElement: { prototype: HTMLVerdocsQuickFunctionsElement; new (): HTMLVerdocsQuickFunctionsElement; }; /** * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is * designed to be used in signing experiences and contains settings that connect to template fields. This is just a * simple radio button for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * { this.someProperty = 'val1' }} * disabled={false} * /> * ``` */ interface HTMLVerdocsRadioButtonElement extends Components.VerdocsRadioButton, HTMLStencilElement { } var HTMLVerdocsRadioButtonElement: { prototype: HTMLVerdocsRadioButtonElement; new (): HTMLVerdocsRadioButtonElement; }; interface HTMLVerdocsSearchBoxElementEventMap { "searchClicked": ISearchEvent; "typeChanged": TContentType; "queryChanged": string; } /** * Displays a customizable input box for search queries. * 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. */ interface HTMLVerdocsSearchBoxElement extends Components.VerdocsSearchBox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSearchBoxElement, ev: VerdocsSearchBoxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSearchBoxElement, ev: VerdocsSearchBoxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSearchBoxElement: { prototype: HTMLVerdocsSearchBoxElement; new (): HTMLVerdocsSearchBoxElement; }; interface HTMLVerdocsSearchTabsElement extends Components.VerdocsSearchTabs, HTMLStencilElement { } var HTMLVerdocsSearchTabsElement: { prototype: HTMLVerdocsSearchTabsElement; new (): HTMLVerdocsSearchTabsElement; }; /** * Display a combo box. This is just a standard HTML select 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 emit. * ```ts * {}} /> * ``` */ interface HTMLVerdocsSelectInputElement extends Components.VerdocsSelectInput, HTMLStencilElement { } var HTMLVerdocsSelectInputElement: { prototype: HTMLVerdocsSelectInputElement; new (): HTMLVerdocsSelectInputElement; }; interface HTMLVerdocsSendElementEventMap { "beforeSend": {recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; template: ITemplate}; "send": {recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; envelope_id: string; envelope: IEnvelope}; "exit": any; "sdkError": SDKError; "searchContacts": IContactSearchEvent1; } /** * Display a form to send a template to one or more recipients in an envelope for signing. * 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 * { console.log('Sending... Show a spinner...', detail) } * onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) } * onExit={({ detail }) => { console.log('Send cancelled.', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface HTMLVerdocsSendElement extends Components.VerdocsSend, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSendElement, ev: VerdocsSendCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSendElement, ev: VerdocsSendCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSendElement: { prototype: HTMLVerdocsSendElement; new (): HTMLVerdocsSendElement; }; interface HTMLVerdocsSignElementEventMap { "sdkError": SDKError; "envelopeLoaded": {endpoint: VerdocsEndpoint; envelope: IEnvelope}; "envelopeUpdated": {endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}; } /** * Display an envelope signing experience. This will display the envelope's attached * documents with signing fields overlaid on each page. * The component will attempt to initiate a signing session and load the specified * envelope. If successful, the recipient's fields will be enabled and the user will * be able to sign the envelope's attached documents. If not, an `sdkError` will be * thrown and the component will be blank/empty. To provide the best user experience, * applications should capture and handle this error to provide the user with * instructions/options for next steps based on the application's design and workflow. * Unlike other components, this will always create its own endpoint to manage the * session session. This endpoint will be included in event callbacks for the * convenience of host applications that may wish to make server calls using the * signer's credentials once signing is complete (e.g. to obtain copies of * the signed attachments.) * ```ts * console.log('Envelope updated state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface HTMLVerdocsSignElement extends Components.VerdocsSign, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSignElement, ev: VerdocsSignCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSignElement, ev: VerdocsSignCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSignElement: { prototype: HTMLVerdocsSignElement; new (): HTMLVerdocsSignElement; }; interface HTMLVerdocsSignFooterElementEventMap { "askQuestion": {question: string}; "decline": any; "finishLater": any; "sdkError": SDKError; } /** * Typically presented by the `verdocs-sign` component. Displays a footer toolbar * with a few convenience functions for the envelope recipient to use. */ interface HTMLVerdocsSignFooterElement extends Components.VerdocsSignFooter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSignFooterElement, ev: VerdocsSignFooterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSignFooterElement, ev: VerdocsSignFooterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSignFooterElement: { prototype: HTMLVerdocsSignFooterElement; new (): HTMLVerdocsSignFooterElement; }; interface HTMLVerdocsSignatureDialogElementEventMap { "next": string; "exit": any; } /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface HTMLVerdocsSignatureDialogElement extends Components.VerdocsSignatureDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSignatureDialogElement, ev: VerdocsSignatureDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSignatureDialogElement, ev: VerdocsSignatureDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSignatureDialogElement: { prototype: HTMLVerdocsSignatureDialogElement; new (): HTMLVerdocsSignatureDialogElement; }; interface HTMLVerdocsSigningProgressElementEventMap { "started": any; "next": any; "previous": any; "exit": any; } interface HTMLVerdocsSigningProgressElement extends Components.VerdocsSigningProgress, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSigningProgressElement, ev: VerdocsSigningProgressCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSigningProgressElement, ev: VerdocsSigningProgressCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSigningProgressElement: { prototype: HTMLVerdocsSigningProgressElement; new (): HTMLVerdocsSigningProgressElement; }; /** * Display a small loading spinner. * ```ts * * ``` */ interface HTMLVerdocsSpinnerElement extends Components.VerdocsSpinner, HTMLStencilElement { } var HTMLVerdocsSpinnerElement: { prototype: HTMLVerdocsSpinnerElement; new (): HTMLVerdocsSpinnerElement; }; /** * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either * directly as a status field or the whole document object may be passed in. * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable * to display a popup panel with per-recipient status data. * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value. */ interface HTMLVerdocsStatusIndicatorElement extends Components.VerdocsStatusIndicator, HTMLStencilElement { } var HTMLVerdocsStatusIndicatorElement: { prototype: HTMLVerdocsStatusIndicatorElement; new (): HTMLVerdocsStatusIndicatorElement; }; interface HTMLVerdocsSwitchElementEventMap { "checkedChange": boolean; } /** * Displays a toggle switch * ```ts * * ``` */ interface HTMLVerdocsSwitchElement extends Components.VerdocsSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsSwitchElement, ev: VerdocsSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsSwitchElement, ev: VerdocsSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsSwitchElement: { prototype: HTMLVerdocsSwitchElement; new (): HTMLVerdocsSwitchElement; }; interface HTMLVerdocsTableElementEventMap { "colHeaderClick": {col: IColumn}; "rowClick": {row: any}; } /** * Display a simple table of data. Columns and data cells may have custom renderers defined to * support creating interactive table layouts. * ```ts * * ``` */ interface HTMLVerdocsTableElement extends Components.VerdocsTable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTableElement, ev: VerdocsTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTableElement, ev: VerdocsTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTableElement: { prototype: HTMLVerdocsTableElement; new (): HTMLVerdocsTableElement; }; interface HTMLVerdocsTabsElementEventMap { "selectTab": {tab: ITab; index: number}; } /** * Display a simple row of selectable tabs. This is a controlled element. * The parent must adjust selectedTab as selection events are fired. * ```ts * * ``` */ interface HTMLVerdocsTabsElement extends Components.VerdocsTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTabsElement, ev: VerdocsTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTabsElement, ev: VerdocsTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTabsElement: { prototype: HTMLVerdocsTabsElement; new (): HTMLVerdocsTabsElement; }; interface HTMLVerdocsTemplateAttachmentsElementEventMap { "exit": any; "next": {template: ITemplate}; "templateUpdated": {endpoint: VerdocsEndpoint; template: ITemplate; event: string}; "sdkError": SDKError; } /** * Displays an edit form that allows the user to view, add, or remove a template's attachments. * Note that an active session and valid template ID must be supplied. */ interface HTMLVerdocsTemplateAttachmentsElement extends Components.VerdocsTemplateAttachments, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateAttachmentsElement, ev: VerdocsTemplateAttachmentsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateAttachmentsElement, ev: VerdocsTemplateAttachmentsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateAttachmentsElement: { prototype: HTMLVerdocsTemplateAttachmentsElement; new (): HTMLVerdocsTemplateAttachmentsElement; }; interface HTMLVerdocsTemplateBuildTabsElementEventMap { "sdkError": SDKError; "stepChanged": TVerdocsBuildStep1; } /** * Display a set of tabs for the template builder. */ interface HTMLVerdocsTemplateBuildTabsElement extends Components.VerdocsTemplateBuildTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateBuildTabsElement, ev: VerdocsTemplateBuildTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateBuildTabsElement, ev: VerdocsTemplateBuildTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateBuildTabsElement: { prototype: HTMLVerdocsTemplateBuildTabsElement; new (): HTMLVerdocsTemplateBuildTabsElement; }; /** * Displays a summary of a template */ interface HTMLVerdocsTemplateCardElement extends Components.VerdocsTemplateCard, HTMLStencilElement { } var HTMLVerdocsTemplateCardElement: { prototype: HTMLVerdocsTemplateCardElement; new (): HTMLVerdocsTemplateCardElement; }; interface HTMLVerdocsTemplateCreateElementEventMap { "exit": any; "next": ITemplate; "sdkError": SDKError; "templateCreated": {endpoint: VerdocsEndpoint; template: ITemplate; templateId: string}; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface HTMLVerdocsTemplateCreateElement extends Components.VerdocsTemplateCreate, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateCreateElement, ev: VerdocsTemplateCreateCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateCreateElement, ev: VerdocsTemplateCreateCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateCreateElement: { prototype: HTMLVerdocsTemplateCreateElement; new (): HTMLVerdocsTemplateCreateElement; }; interface HTMLVerdocsTemplateDocumentPageElementEventMap { "pageRendered": IDocumentPageInfo; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface HTMLVerdocsTemplateDocumentPageElement extends Components.VerdocsTemplateDocumentPage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateDocumentPageElement, ev: VerdocsTemplateDocumentPageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateDocumentPageElement, ev: VerdocsTemplateDocumentPageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateDocumentPageElement: { prototype: HTMLVerdocsTemplateDocumentPageElement; new (): HTMLVerdocsTemplateDocumentPageElement; }; interface HTMLVerdocsTemplateFieldPropertiesElementEventMap { "close": any; "delete": {templateId: string; roleName: string}; "settingsChanged": {fieldName: string; field: ITemplateField}; "sdkError": SDKError; } /** * Displays an edit form that allows the user to adjust a field's settings. */ interface HTMLVerdocsTemplateFieldPropertiesElement extends Components.VerdocsTemplateFieldProperties, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateFieldPropertiesElement, ev: VerdocsTemplateFieldPropertiesCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateFieldPropertiesElement, ev: VerdocsTemplateFieldPropertiesCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateFieldPropertiesElement: { prototype: HTMLVerdocsTemplateFieldPropertiesElement; new (): HTMLVerdocsTemplateFieldPropertiesElement; }; interface HTMLVerdocsTemplateFieldsElementEventMap { "sdkError": SDKError; "templateUpdated": {endpoint: VerdocsEndpoint; template: ITemplate; event: 'added-field' | 'updated-field' | 'deleted-field'}; } /** * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to * present all of the required controls, so it is primarily intended to be used in desktop environments. */ interface HTMLVerdocsTemplateFieldsElement extends Components.VerdocsTemplateFields, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateFieldsElement, ev: VerdocsTemplateFieldsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateFieldsElement, ev: VerdocsTemplateFieldsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateFieldsElement: { prototype: HTMLVerdocsTemplateFieldsElement; new (): HTMLVerdocsTemplateFieldsElement; }; interface HTMLVerdocsTemplateRolePropertiesElementEventMap { "close": any; "delete": {templateId: string; roleName: string}; "sdkError": SDKError; } /** * Present an editing form suitable for adjusting template-role properties. */ interface HTMLVerdocsTemplateRolePropertiesElement extends Components.VerdocsTemplateRoleProperties, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateRolePropertiesElement, ev: VerdocsTemplateRolePropertiesCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateRolePropertiesElement, ev: VerdocsTemplateRolePropertiesCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateRolePropertiesElement: { prototype: HTMLVerdocsTemplateRolePropertiesElement; new (): HTMLVerdocsTemplateRolePropertiesElement; }; interface HTMLVerdocsTemplateRolesElementEventMap { "next": any; "exit": any; "sdkError": SDKError; "rolesUpdated": {endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface HTMLVerdocsTemplateRolesElement extends Components.VerdocsTemplateRoles, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateRolesElement, ev: VerdocsTemplateRolesCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateRolesElement, ev: VerdocsTemplateRolesCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateRolesElement: { prototype: HTMLVerdocsTemplateRolesElement; new (): HTMLVerdocsTemplateRolesElement; }; interface HTMLVerdocsTemplateSettingsElementEventMap { "next": any; "exit": any; "sdkError": SDKError; "templateUpdated": {endpoint: VerdocsEndpoint; template: ITemplate; event: string}; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface HTMLVerdocsTemplateSettingsElement extends Components.VerdocsTemplateSettings, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateSettingsElement, ev: VerdocsTemplateSettingsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateSettingsElement, ev: VerdocsTemplateSettingsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateSettingsElement: { prototype: HTMLVerdocsTemplateSettingsElement; new (): HTMLVerdocsTemplateSettingsElement; }; interface HTMLVerdocsTemplateStarElementEventMap { "starChange": {templateId: string; starred: boolean; count: number}; "sdkError": SDKError; } /** * Displays a clickable star that allows users to mark frequently-used templates. */ interface HTMLVerdocsTemplateStarElement extends Components.VerdocsTemplateStar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplateStarElement, ev: VerdocsTemplateStarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplateStarElement, ev: VerdocsTemplateStarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplateStarElement: { prototype: HTMLVerdocsTemplateStarElement; new (): HTMLVerdocsTemplateStarElement; }; /** * Displays a message listing a template's tags. */ interface HTMLVerdocsTemplateTagsElement extends Components.VerdocsTemplateTags, HTMLStencilElement { } var HTMLVerdocsTemplateTagsElement: { prototype: HTMLVerdocsTemplateTagsElement; new (): HTMLVerdocsTemplateTagsElement; }; interface HTMLVerdocsTemplatesListElementEventMap { "sdkError": SDKError; "viewTemplate": {endpoint: VerdocsEndpoint; template: ITemplate}; "signNow": {endpoint: VerdocsEndpoint; template: ITemplate}; "submittedData": {endpoint: VerdocsEndpoint; template: ITemplate}; "editTemplate": {endpoint: VerdocsEndpoint; template: ITemplate}; "templateDeleted": {endpoint: VerdocsEndpoint; template: ITemplate}; "changeSort": string; "changeVisibility": 'private_shared' | 'private' | 'shared' | 'public'; "changeStarred": 'all' | 'starred' | 'unstarred'; "changeName": string; } /** * Display a list of templates in the caller's account. * ```ts * console.log('View template:', detail) } * /> * ``` */ interface HTMLVerdocsTemplatesListElement extends Components.VerdocsTemplatesList, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsTemplatesListElement, ev: VerdocsTemplatesListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsTemplatesListElement, ev: VerdocsTemplatesListCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsTemplatesListElement: { prototype: HTMLVerdocsTemplatesListElement; new (): HTMLVerdocsTemplatesListElement; }; /** * 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 emit. * ```ts * * ``` */ interface HTMLVerdocsTextInputElement extends Components.VerdocsTextInput, HTMLStencilElement { } var HTMLVerdocsTextInputElement: { prototype: HTMLVerdocsTextInputElement; new (): HTMLVerdocsTextInputElement; }; /** * Displays a label and a set of buttons, also allowing a default selection of a button. * ```ts * * ``` */ interface HTMLVerdocsToggleElement extends Components.VerdocsToggle, HTMLStencilElement { } var HTMLVerdocsToggleElement: { prototype: HTMLVerdocsToggleElement; new (): HTMLVerdocsToggleElement; }; interface HTMLVerdocsToggleButtonElementEventMap { "toggle": {active: boolean}; } /** * Displays a single button that can be toggled on or off by clicking it. * ```ts * * ``` */ interface HTMLVerdocsToggleButtonElement extends Components.VerdocsToggleButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsToggleButtonElement, ev: VerdocsToggleButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsToggleButtonElement, ev: VerdocsToggleButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsToggleButtonElement: { prototype: HTMLVerdocsToggleButtonElement; new (): HTMLVerdocsToggleButtonElement; }; /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface HTMLVerdocsToolbarIconElement extends Components.VerdocsToolbarIcon, HTMLStencilElement { } var HTMLVerdocsToolbarIconElement: { prototype: HTMLVerdocsToolbarIconElement; new (): HTMLVerdocsToolbarIconElement; }; interface HTMLVerdocsUploadDialogElementEventMap { "exit": any; "next": File[]; "remove": any; } /** * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by * callers with a variety of workflows. Instead, data about the chosen file will be passed to the * caller via the onNext event handler. A delete event is also exposed to delete existing attachments. * To represent an existing attachment, set the existingFile property. */ interface HTMLVerdocsUploadDialogElement extends Components.VerdocsUploadDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsUploadDialogElement, ev: VerdocsUploadDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsUploadDialogElement, ev: VerdocsUploadDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsUploadDialogElement: { prototype: HTMLVerdocsUploadDialogElement; new (): HTMLVerdocsUploadDialogElement; }; interface HTMLVerdocsViewElementEventMap { "sdkError": SDKError; "envelopeUpdated": {endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}; "another": any; "view": any; "next": any; } interface HTMLVerdocsViewElement extends Components.VerdocsView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVerdocsViewElement, ev: VerdocsViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVerdocsViewElement, ev: VerdocsViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVerdocsViewElement: { prototype: HTMLVerdocsViewElement; new (): HTMLVerdocsViewElement; }; interface HTMLElementTagNameMap { "verdocs-adopt-signature-dialog": HTMLVerdocsAdoptSignatureDialogElement; "verdocs-auth": HTMLVerdocsAuthElement; "verdocs-build": HTMLVerdocsBuildElement; "verdocs-button": HTMLVerdocsButtonElement; "verdocs-button-panel": HTMLVerdocsButtonPanelElement; "verdocs-checkbox": HTMLVerdocsCheckboxElement; "verdocs-component-error": HTMLVerdocsComponentErrorElement; "verdocs-contact-picker": HTMLVerdocsContactPickerElement; "verdocs-date-input": HTMLVerdocsDateInputElement; "verdocs-delegate-dialog": HTMLVerdocsDelegateDialogElement; "verdocs-dialog": HTMLVerdocsDialogElement; "verdocs-disclosure-dialog": HTMLVerdocsDisclosureDialogElement; "verdocs-download-dialog": HTMLVerdocsDownloadDialogElement; "verdocs-dropdown": HTMLVerdocsDropdownElement; "verdocs-envelope-document-page": HTMLVerdocsEnvelopeDocumentPageElement; "verdocs-envelope-recipient-link": HTMLVerdocsEnvelopeRecipientLinkElement; "verdocs-envelope-recipient-summary": HTMLVerdocsEnvelopeRecipientSummaryElement; "verdocs-envelope-sidebar": HTMLVerdocsEnvelopeSidebarElement; "verdocs-envelope-update-recipient": HTMLVerdocsEnvelopeUpdateRecipientElement; "verdocs-envelopes-list": HTMLVerdocsEnvelopesListElement; "verdocs-field-attachment": HTMLVerdocsFieldAttachmentElement; "verdocs-field-checkbox": HTMLVerdocsFieldCheckboxElement; "verdocs-field-date": HTMLVerdocsFieldDateElement; "verdocs-field-dropdown": HTMLVerdocsFieldDropdownElement; "verdocs-field-initial": HTMLVerdocsFieldInitialElement; "verdocs-field-payment": HTMLVerdocsFieldPaymentElement; "verdocs-field-radio": HTMLVerdocsFieldRadioElement; "verdocs-field-signature": HTMLVerdocsFieldSignatureElement; "verdocs-field-textarea": HTMLVerdocsFieldTextareaElement; "verdocs-field-textbox": HTMLVerdocsFieldTextboxElement; "verdocs-field-timestamp": HTMLVerdocsFieldTimestampElement; "verdocs-file-chooser": HTMLVerdocsFileChooserElement; "verdocs-flag": HTMLVerdocsFlagElement; "verdocs-help-icon": HTMLVerdocsHelpIconElement; "verdocs-initial-dialog": HTMLVerdocsInitialDialogElement; "verdocs-kba-dialog": HTMLVerdocsKbaDialogElement; "verdocs-loader": HTMLVerdocsLoaderElement; "verdocs-menu-panel": HTMLVerdocsMenuPanelElement; "verdocs-multiselect": HTMLVerdocsMultiselectElement; "verdocs-ok-dialog": HTMLVerdocsOkDialogElement; "verdocs-organization-card": HTMLVerdocsOrganizationCardElement; "verdocs-otp-dialog": HTMLVerdocsOtpDialogElement; "verdocs-pagination": HTMLVerdocsPaginationElement; "verdocs-passcode-dialog": HTMLVerdocsPasscodeDialogElement; "verdocs-portal": HTMLVerdocsPortalElement; "verdocs-preview": HTMLVerdocsPreviewElement; "verdocs-progress-bar": HTMLVerdocsProgressBarElement; "verdocs-question-dialog": HTMLVerdocsQuestionDialogElement; "verdocs-quick-filter": HTMLVerdocsQuickFilterElement; "verdocs-quick-functions": HTMLVerdocsQuickFunctionsElement; "verdocs-radio-button": HTMLVerdocsRadioButtonElement; "verdocs-search-box": HTMLVerdocsSearchBoxElement; "verdocs-search-tabs": HTMLVerdocsSearchTabsElement; "verdocs-select-input": HTMLVerdocsSelectInputElement; "verdocs-send": HTMLVerdocsSendElement; "verdocs-sign": HTMLVerdocsSignElement; "verdocs-sign-footer": HTMLVerdocsSignFooterElement; "verdocs-signature-dialog": HTMLVerdocsSignatureDialogElement; "verdocs-signing-progress": HTMLVerdocsSigningProgressElement; "verdocs-spinner": HTMLVerdocsSpinnerElement; "verdocs-status-indicator": HTMLVerdocsStatusIndicatorElement; "verdocs-switch": HTMLVerdocsSwitchElement; "verdocs-table": HTMLVerdocsTableElement; "verdocs-tabs": HTMLVerdocsTabsElement; "verdocs-template-attachments": HTMLVerdocsTemplateAttachmentsElement; "verdocs-template-build-tabs": HTMLVerdocsTemplateBuildTabsElement; "verdocs-template-card": HTMLVerdocsTemplateCardElement; "verdocs-template-create": HTMLVerdocsTemplateCreateElement; "verdocs-template-document-page": HTMLVerdocsTemplateDocumentPageElement; "verdocs-template-field-properties": HTMLVerdocsTemplateFieldPropertiesElement; "verdocs-template-fields": HTMLVerdocsTemplateFieldsElement; "verdocs-template-role-properties": HTMLVerdocsTemplateRolePropertiesElement; "verdocs-template-roles": HTMLVerdocsTemplateRolesElement; "verdocs-template-settings": HTMLVerdocsTemplateSettingsElement; "verdocs-template-star": HTMLVerdocsTemplateStarElement; "verdocs-template-tags": HTMLVerdocsTemplateTagsElement; "verdocs-templates-list": HTMLVerdocsTemplatesListElement; "verdocs-text-input": HTMLVerdocsTextInputElement; "verdocs-toggle": HTMLVerdocsToggleElement; "verdocs-toggle-button": HTMLVerdocsToggleButtonElement; "verdocs-toolbar-icon": HTMLVerdocsToolbarIconElement; "verdocs-upload-dialog": HTMLVerdocsUploadDialogElement; "verdocs-view": HTMLVerdocsViewElement; } } declare namespace LocalJSX { type OneOf = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never }; /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface VerdocsAdoptSignatureDialog { /** * Initial signature text * @default '' */ "name"?: string; /** * If true, the name fields will be read-only. Used when the sender has locked the recipient's name. * @default false */ "nameLocked"?: boolean; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsAdoptSignatureDialogCustomEvent) => void; /** * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string representation of the signature adopted. */ "onNext"?: (event: VerdocsAdoptSignatureDialogCustomEvent<{signature: string; initials: string}>) => void; } /** * 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 UI development, a visibility flag can force this component to never display. This * allows you to subscribe 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. * ```ts * console.log('Authentication state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsAuth { /** * The display mode to start in. * @default 'login' */ "displayMode"?: 'login' | 'forgot' | 'reset' | 'signup' | 'verify'; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be in SVG format for best results. * @default 'https://app.verdocs.com/assets/blue-logo.svg' */ "logo"?: string; /** * 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. */ "onAuthenticated"?: (event: VerdocsAuthCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsAuthCustomEvent) => void; /** * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK. * @default true */ "visible"?: boolean; } /** * Display a template building experience. Several event callbacks provide status updates to the * parent application to support interface updates. * ```ts * { console.log('Sent envelope from template', detail) }} * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface VerdocsBuild { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired if the user clicks Cancel. */ "onCancel"?: (event: VerdocsBuildCustomEvent) => void; /** * Event fired when roles are updated in the roles step. */ "onRolesUpdated"?: (event: VerdocsBuildCustomEvent<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsBuildCustomEvent) => void; /** * The user completed the Send form and clicked send. */ "onSend"?: (event: VerdocsBuildCustomEvent<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}>) => void; /** * Event fired when the user selects a different step. */ "onStepChanged"?: (event: VerdocsBuildCustomEvent) => void; /** * Event fired when the template is created by the upload step. */ "onTemplateCreated"?: (event: VerdocsBuildCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>) => void; /** * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onTemplateUpdated"?: (event: VerdocsBuildCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>) => void; /** * The step in the creation process to display. * @default 'preview' */ "step"?: TVerdocsBuildStep; /** * The ID of the template to create the document from. Unlike most other components, this is an optional parameter here. If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process. If it is not specified, `step` will be ignored and the create step will be shown. * @default null */ "templateId"?: string | null; } /** * A simple button, with consistent styling to other controls in the design system. * ```ts * * ``` */ interface VerdocsButton { /** * Whether the button should be disabled. * @default false */ "disabled"?: boolean; /** * If desired, a suffix icon for the button. * @default null */ "endIcon"?: string | null; /** * The label for the button. */ "label": string; /** * The size (height) of the button. * @default 'normal' */ "size"?: 'xsmall' | 'small' | 'normal' | 'medium' | 'large'; /** * If desired, a prefix icon for the button. * @default null */ "startIcon"?: string | null; /** * The type of the button. * @default 'button' */ "type"?: 'button' | 'submit' | 'reset'; /** * The display variant of the button. * @default 'standard' */ "variant"?: 'standard' | 'text' | 'outline'; } /** * Display an icon button that triggers a drop-down panel that can display * arbitrary child content, such as metadata, forms, or other controls. * ```ts * *
Field Settings
*
*

* * *

*
* * ``` */ interface VerdocsButtonPanel { /** * SVG icon to display * @default '' */ "icon"?: string; } /** * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check * box for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * (this.thingEnabled = e.target.checked)} * /> * ``` */ interface VerdocsCheckbox { /** * Whether the radio button is currently selected. * @default false */ "checked"?: boolean; /** * If set, the button will still be displayed but not selectable. * @default false */ "disabled"?: boolean; /** * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be repositioned with CSS. * @default '' */ "label"?: string; /** * HTML form field name for the input. * @default '' */ "name"?: string; /** * Size of checkbox to render. * @default 'normal' */ "size"?: 'normal' | 'small'; /** * Style of checkbox to render. Use 'dark' when rendering on a dark background. * @default 'light' */ "theme"?: 'light' | 'dark'; /** * Value to track with the input. Value is not used internally by this component but is sometimes useful to set because it can be retrieved in event handlers via e.target.value. This can be used to identify which checkbox was clicked in a checkbox group. * @default '' */ "value"?: string; } /** * Render a simple error message. */ interface VerdocsComponentError { /** * The message to display. * @default '' */ "message"?: string; } /** * Display a contact picker suitable for filling out Recipient objects when sending Envelopes. * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event. * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or * to always display the user's own contact record. * ```ts * console.log('Contact completed', e.detail)} * /> * ``` */ interface VerdocsContactPicker { /** * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number of suggestions be limited to the 5 best matching records. * @default [] */ "contactSuggestions"?: TPickerContact[]; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsContactPickerCustomEvent) => void; /** * Event fired when the user changes the type. */ "onNext"?: (event: VerdocsContactPickerCustomEvent) => void; /** * Event fired when the user enters text in the search field. The calling application may use this to update the `contactSuggestions` property. */ "onSearchContacts"?: (event: VerdocsContactPickerCustomEvent) => void; /** * The role that this contact will be assigned to. * @default null */ "templateRole"?: Partial | null; } /** * Display a date input field. * ```ts * * ``` */ interface VerdocsDateInput { /** * Should the field be disabled? * @default false */ "disabled"?: boolean; /** * If supplied, a help icon will be displayed to provide the user more information. * @default '' */ "helpText"?: string; /** * The label for the field. * @default '' */ "label"?: string; /** * The placeholder for the field. * @default '' */ "placeholder"?: string; /** * Should the field be required? * @default false */ "required"?: boolean; /** * The initial value for the input field. * @default '' */ "value"?: string; } /** * Delegate signing responsibility to another recipient. */ interface VerdocsDelegateDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint"?: VerdocsEndpoint; /** * The envelope to process. * @default null */ "envelope"?: IEnvelope | null; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsDelegateDialogCustomEvent) => void; /** * Event fired when the process has completed successfully. */ "onNext"?: (event: VerdocsDelegateDialogCustomEvent<{first_name: string; last_name: string; email: string; phone: string; message: string}>) => void; } /** * Display a simple dialog where the contents are provided via slots. */ interface VerdocsDialog { /** * Event fired when the dialog is dismissed by clicking the background overlay. */ "onExit"?: (event: VerdocsDialogCustomEvent) => void; /** * If true, clicking on the background overlay will not close the dialog. * @default false */ "persistent"?: boolean; } /** * Display e-signing disclosures with options to delegate, decline or proceed. */ interface VerdocsDisclosureDialog { /** * If the recipient may delegate, an additional button will be shown to drive this flow. * @default false */ "delegator"?: boolean; /** * The disclosures to display. * @default "\n" */ "disclosures"?: string; /** * Event fired when the user chooses to proceed. */ "onAccept"?: (event: VerdocsDisclosureDialogCustomEvent<{first_name: string; last_name: string; email: string; phone: string; message: string}>) => void; /** * Event fired when the user chooses to decline. */ "onDecline"?: (event: VerdocsDisclosureDialogCustomEvent<{first_name: string; last_name: string; email: string; phone: string; message: string}>) => void; /** * Event fired when the user chooses to delegate signing. */ "onDelegate"?: (event: VerdocsDisclosureDialogCustomEvent<{first_name: string; last_name: string; email: string; phone: string; message: string}>) => void; } interface VerdocsDownloadDialog { /** * The list of documents in the envelope. * @default [] */ "documents"?: any[]; /** * If true, the envelope has a certificate available for download. * @default false */ "hasCertificate"?: boolean; /** * Event fired when an option is selected. */ "onDownload"?: (event: VerdocsDownloadDialogCustomEvent<{action: DownloadAction; documentId?: string}>) => void; /** * Event fired when Cancel is pressed or background is clicked. */ "onExit"?: (event: VerdocsDownloadDialogCustomEvent) => void; /** * If true, we are currently polling the server for updates. * @default false */ "polling"?: boolean; /** * If true, the envelope is considered signed. * @default false */ "signed"?: boolean; } /** * 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 * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label. * ```ts * (console.log('OK clicked'))} * /> * ``` */ interface VerdocsDropdown { /** * Event fired when a menu option is clicked. Web Component events need to be "composed" to cross the Shadow DOM and be received by parent frameworks. */ "onOptionSelected"?: (event: VerdocsDropdownCustomEvent) => void; /** * The menu options to display. * @default [] */ "options"?: IMenuOption[]; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface VerdocsEnvelopeDocumentPage { /** * The ID of the document to display. * @default '' */ "documentId"?: string; /** * The endpoint to load from. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The ID of the envelope the document is for. * @default '' */ "envelopeId"?: string; /** * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer. The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g. if `pages` was ['page', 'fields'] the structure will be: ```
``` * @default [{name: 'page', type: 'canvas'}] */ "layers"?: IPageLayer[]; /** * Fired when a page has been rendered. This is also fired when the page is resized. */ "onPageRendered"?: (event: VerdocsEnvelopeDocumentPageCustomEvent) => void; /** * The page number being rendered. (Reminder: page numbers are 1-based.) * @default 1 */ "pageNumber"?: number; /** * @default 'original' */ "type"?: 'original' | 'filled' | 'certificate'; /** * The "virtual" height of the page canvas. Defaults to 792 which at 72dpi is 11" tall. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 792 */ "virtualHeight"?: number; /** * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 612 */ "virtualWidth"?: number; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface VerdocsEnvelopeRecipientLink { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId"?: string; /** * Event fired when the user clicks Done to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onNext"?: (event: VerdocsEnvelopeRecipientLinkCustomEvent<{envelope: IEnvelope}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsEnvelopeRecipientLinkCustomEvent) => void; /** * The role to load. * @default '' */ "roleName"?: string; } /** * Displays a list of recipients with options to get in-person signing links for each one. */ interface VerdocsEnvelopeRecipientSummary { /** * Enable or disable the Done button. * @default true */ "canDone"?: boolean; /** * Enable or disable the Send Another button. * @default true */ "canSendAnother"?: boolean; /** * Enable or disable the View button. * @default true */ "canView"?: boolean; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId"?: string; /** * Event fired when the user clicks Send Another to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onAnother"?: (event: VerdocsEnvelopeRecipientSummaryCustomEvent<{envelope: IEnvelope}>) => void; /** * Event fired when the user clicks Done to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onNext"?: (event: VerdocsEnvelopeRecipientSummaryCustomEvent<{envelope: IEnvelope}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsEnvelopeRecipientSummaryCustomEvent) => void; /** * Event fired when the user clicks Send Another to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onView"?: (event: VerdocsEnvelopeRecipientSummaryCustomEvent<{envelope: IEnvelope}>) => void; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface VerdocsEnvelopeSidebar { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId"?: string; /** * Event fired when the user clicks Send Another in the Manage Recipients dialog. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onAnother"?: (event: VerdocsEnvelopeSidebarCustomEvent<{envelope: IEnvelope}>) => void; /** * Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onEnvelopeUpdated"?: (event: VerdocsEnvelopeSidebarCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsEnvelopeSidebarCustomEvent) => void; /** * Event fired when the sidebar is opened or closed. */ "onToggle"?: (event: VerdocsEnvelopeSidebarCustomEvent<{open: boolean}>) => void; } /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ interface VerdocsEnvelopeUpdateRecipient { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The envelope ID to edit. * @default '' */ "envelopeId"?: string; /** * Event fired when the user clicks Done to proceed. It is up to the host application to save any updates and proceed to the next step. */ "onNext"?: (event: VerdocsEnvelopeUpdateRecipientCustomEvent<{action: 'cancel' | 'save'; originalRecipient: IRecipient; updatedRecipient: IRecipient}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsEnvelopeUpdateRecipientCustomEvent) => void; /** * The role to load. * @default '' */ "roleName"?: string; } /** * Displays a list of envelopes matching specified conditions. */ interface VerdocsEnvelopesList { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * If set, filter envelopes by the specified string. * @default '' */ "match"?: string; /** * Event fired when the user changes the match filter. This is fired for every inputChange event (every character typed). This event is provided for balance with the other events, but host applications should generally not save this value. Users might appreciate applications remembering their sorting or filtering preferences, but probably not their search terms. */ "onChangeMatch"?: (event: VerdocsEnvelopesListCustomEvent) => void; /** * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences. */ "onChangeSort"?: (event: VerdocsEnvelopesListCustomEvent<'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'>) => void; /** * Event fired when the user changes their status filter. Host applications can use this to save the user's preferences. */ "onChangeStatus"?: (event: VerdocsEnvelopesListCustomEvent) => void; /** * Event fired when the user changes their view. Host applications can use this to save the user's preferences. */ "onChangeView"?: (event: VerdocsEnvelopesListCustomEvent<'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'>) => void; /** * Event fired when the user clicks to finish the envelope. */ "onFinishEnvelope"?: (event: VerdocsEnvelopesListCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsEnvelopesListCustomEvent) => void; /** * Event fired when the user clicks an activity entry. Typically the host application will use this to navigate to the envelope detail view. */ "onViewEnvelope"?: (event: VerdocsEnvelopesListCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>) => void; /** * The number of rows to display per page. * @default 10 */ "rowsPerPage"?: number; /** * The initial page number to select. Pagination is internally controlled but may be overriden by the host applicaiton. * @default 0 */ "selectedPage"?: number; /** * Whether or not pagination should be enabled. * @default true */ "showPagination"?: boolean; /** * The sort field to use * @default 'created_at' */ "sort"?: 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'; /** * The status value to filter by * @default 'all' */ "status"?: TEnvelopeStatus | 'all'; /** * The filtered view to display. "completed" will show envelopes that have been submitted. "action" will show envelopes where the user is a recipient and the envelope is not completed. "waiting" will show only envelopes where the user is the sender and the envelope is not completed. * @default undefined */ "view"?: 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'; } /** * Displays an attachment field. */ interface VerdocsFieldAttachment { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when a file is attached by the signer. */ "onAttached"?: (event: VerdocsFieldAttachmentCustomEvent) => void; /** * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in Build) not for any attachments (during signing). */ "onDeleted"?: (event: VerdocsFieldAttachmentCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldAttachmentCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a checkbox. */ interface VerdocsFieldCheckbox { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldCheckboxCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldCheckboxCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a date field. When tapped or clicked, the input element will display a date picker component. */ interface VerdocsFieldDate { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * If set, the field will be be scaled vertically by this factor. */ "field"?: ITemplateField; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldDateCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldDateCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * Event fired on every character entered into / deleted from the field. */ "onSettingsPress"?: (event: VerdocsFieldDateCustomEvent) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a dropdown field that allows the user to choose one of a list of options. */ interface VerdocsFieldDropdown { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldDropdownCustomEvent<{fieldName: string}>) => void; /** * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc. It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every keypress. */ "onFieldChange"?: (event: VerdocsFieldDropdownCustomEvent) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldDropdownCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * 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. */ interface VerdocsFieldInitial { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set, provides the ID of already-adopted initials. If present, clicking the field (when empty) will immediately use these initials instead of showing the adoption dialog. */ "initialid"?: string; /** * The document or template field to display. * @default '' */ "initials"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image. */ "onAdopt"?: (event: VerdocsFieldInitialCustomEvent) => void; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldInitialCustomEvent<{fieldName: string}>) => void; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsFieldInitialCustomEvent) => void; /** * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc. It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every keypress. */ "onFieldChange"?: (event: VerdocsFieldInitialCustomEvent) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldInitialCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * Event fired on every character entered into / deleted from the field. */ "onSettingsPress"?: (event: VerdocsFieldInitialCustomEvent) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as * input types like text and checkbox. */ interface VerdocsFieldPayment { "currentInitial"?: string; "currentInitialId"?: string; "currentSignature"?: string; "currentSignatureId"?: string; /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; "fieldId"?: string; /** * The name of the field to display. * @default '' */ "fieldname"?: string; "fields"?: any[]; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldPaymentCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldPaymentCustomEvent<{fieldName: string; field: ITemplateField}>) => void; "pageNum"?: number; /** * The page the field is on * @default 1 */ "pagenumber"?: number; "pdfPages"?: any[]; "recipients"?: any; "roleName"?: string; /** * If set, the field will be colored using this index value to select the background color. * @default 0 */ "roleindex"?: number; "selectedRoleName"?: string; /** * @default false */ "signed"?: boolean; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a radio button. */ interface VerdocsFieldRadio { /** * If set, overrides the field's settings object. Primarily used in Storybook mode. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldRadioCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldRadioCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * If set, overrides the field's required object. Primarily used in Storybook mode. * @default false */ "required"?: boolean; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * 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. */ interface VerdocsFieldSignature { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * If set, the signature creation dialog will be initialized with this text. * @default '' */ "name"?: string; "onAdopt"?: (event: VerdocsFieldSignatureCustomEvent) => void; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldSignatureCustomEvent<{fieldName: string}>) => void; /** * Event emitted when the field has changed. */ "onFieldChange"?: (event: VerdocsFieldSignatureCustomEvent) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldSignatureCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * Event fired on every character entered into / deleted from the field. */ "onSettingsPress"?: (event: VerdocsFieldSignatureCustomEvent) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * If set, provides the ID of an already-adopted signature. If present, clicking the field (when empty) will immediately use this signature instead of showing the adoption dialog. */ "signatureid"?: string; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a multi-line text input field. Reminder: the "position" of the field is specified * as the BOTTOM-LEFT corner. */ interface VerdocsFieldTextarea { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * 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. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldTextareaCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldTextareaCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a simple 1-line text input field. */ interface VerdocsFieldTextbox { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "multiline"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldTextboxCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldTextboxCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically * filled when the signer submits the document. */ interface VerdocsFieldTimestamp { /** * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled. * @default false */ "disabled"?: boolean; /** * If set, the field is considered "done" and is drawn in a display-final-value state. * @default false */ "done"?: boolean; /** * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder. * @default false */ "editable"?: boolean; /** * Override the field's settings. This is intended to be used during signing when fields are being mutated. * @default null */ "field"?: IEnvelopeField | null | undefined; /** * The name of the field to display. * @default '' */ "fieldname"?: string; /** * If set to true, it will force interact to unset the el, resulting in no dragging the field. */ "isPreview"?: boolean; /** * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields. * @default false */ "moveable"?: boolean; /** * Event fired when the field is deleted. */ "onDeleted"?: (event: VerdocsFieldTimestampCustomEvent<{fieldName: string}>) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsFieldTimestampCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The page the field is on * @default 1 */ "pagenumber"?: number; /** * Fields may be attached to templates or envelopes, but only template fields may be edited. * @default 'template' */ "source"?: 'template' | 'envelope'; /** * The source template or envelope ID the field is found in. * @default '' */ "sourceid"?: string; /** * If set, the field will be be scaled horizontally by this factor. * @default 1 */ "xscale"?: number; /** * If set, the field will be be scaled vertically by this factor. * @default 1 */ "yscale"?: number; } /** * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should * provide the actual upload functionality. * ```ts * console.log('File Selected', e.detail)} /> * ``` */ interface VerdocsFileChooser { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file. Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file. */ "onFileSelected"?: (event: VerdocsFileChooserCustomEvent<{file: File | null}>) => void; } interface VerdocsFlag { /** * The text label to display in the flag. * @default 'FILL' */ "label"?: string; /** * Emitted when the main flag body is clicked (e.g. to focus field). */ "onFlagClick"?: (event: VerdocsFlagCustomEvent) => void; /** * Emitted when the "SKIP" link is clicked. */ "onSkip"?: (event: VerdocsFlagCustomEvent) => void; /** * If true, shows "or SKIP" link. * @default false */ "showSkip"?: boolean; /** * The type of flag to display. * @default 'fill' */ "variant"?: 'fill' | 'next'; } /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface VerdocsHelpIcon { /** * Optional icon to display. If not supplied, a standard help icon will be shown. * @default '' */ "icon"?: string; /** * Help text to display on hover/focus * @default '' */ "text"?: string; } /** * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their initials with a mouse or tablet. */ interface VerdocsInitialDialog { /** * Initial signature text * @default '' */ "initials"?: string; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsInitialDialogCustomEvent) => void; /** * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string representation of the initials adopted. */ "onNext"?: (event: VerdocsInitialDialogCustomEvent) => void; } /** * Prompt the user to confirm their identity with a PIN or a series of questions. */ interface VerdocsKbaDialog { /** * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes. * @default ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'] */ "choices"?: string[]; /** * If set, a help/instructions box will be displayed with this text * @default 'Please select the address below that you have most recently lived at.' */ "helptext"?: string; /** * If set, a help/instructions box will be displayed with this title * @default 'Previous Addresses' */ "helptitle"?: string; /** * For text input challenges, the label to display next to the input field. * @default 'PIN' */ "label"?: string; /** * The type of dialog to display. Three modes are supported. * @default 'choice' */ "mode"?: 'text' | 'choice' | 'identity'; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsKbaDialogCustomEvent) => void; /** * Event fired when the dialog is closed. The event data will contain the value selected, or the new recipient details if the mode is 'identity'. */ "onNext"?: (event: VerdocsKbaDialogCustomEvent) => void; /** * Event fired when the dialog is closed. The event data will contain the value selected, or the new recipient details if the mode is 'identity'. */ "onPinEntered"?: (event: VerdocsKbaDialogCustomEvent) => void; /** * For text input challenges, the placeholder to display inside the input field. * @default 'Enter your PIN...' */ "placeholder"?: string; /** * For identity confirmation, the current recipient details. * @default null */ "recipient"?: IRecipient | null; /** * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2. * @default 1 */ "step"?: number; /** * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator). * @default 3 */ "steps"?: number; } /** * Animated loader placeholder. There are currently no configuration options for this control. * ```ts * * ``` */ interface VerdocsLoader { } /** * Display a menu panel in a left or right sidebar. The panel will animate (slide) * as it appears, and an background will be shown over the rest of the page. If * the background overlay is present, it can be clicked to dismiss the panel. * ```ts * *
Menu Panel
* * ``` */ interface VerdocsMenuPanel { "onClose"?: (event: VerdocsMenuPanelCustomEvent) => void; /** * Whether to show an overlay over the rest of the page. * @default true */ "overlay"?: boolean; /** * Which side of the screen to place the panel. * @default 'right' */ "side"?: 'left' | 'right'; /** * The width of the panel. * @default 300 */ "width"?: number; } /** * Display a dropdown that allows multiple options to be selected. 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 emit. * ```ts * {}} /> * ``` */ interface VerdocsMultiselect { /** * The label for the field. * @default '' */ "label"?: string; "onSelectionChanged"?: (event: VerdocsMultiselectCustomEvent<{selectedOptions: string[]}>) => void; /** * The options to list. */ "options"?: IMultiSelectOption[]; /** * The placeholder for the input element when no options are selected. * @default 'Select...' */ "placeholder"?: string; /** * The currently selected options. * @default [] */ "selectedOptions"?: string[]; } /** * Display a simple text dialog box with an Ok button. 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. */ interface VerdocsOkDialog { /** * Override the "OK" button's label * @default 'OK' */ "buttonLabel"?: string; /** * The title of the dialog. "title" is a reserved word, so we use heading. * @default '' */ "heading"?: string; /** * The message content to display. * @default '' */ "message"?: string; /** * Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsOkDialogCustomEvent) => void; /** * Event fired when the user clicks the OK button. */ "onNext"?: (event: VerdocsOkDialogCustomEvent) => void; /** * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background overlay to dismiss it. * @default false */ "showCancel"?: boolean; } /** * Display a small summary card describing an organization. * ```ts * * ``` */ interface VerdocsOrganizationCard { /** * The organization to display */ "organization"?: Partial; } /** * Prompt the user to confirm their identity with a one time code via email/SMS. */ interface VerdocsOtpDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint"?: VerdocsEndpoint; /** * The type of dialog to display. Three modes are supported. * @default 'email' */ "method"?: 'email' | 'sms'; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsOtpDialogCustomEvent) => void; /** * Event fired when the process has completed successfully. */ "onNext"?: (event: VerdocsOtpDialogCustomEvent<{response: ISignerTokenResponse}>) => void; } /** * Display a simple pagination control with individual buttons to move through the data set. * ```ts * {setSelectedpage(e.detail.selectedPage)}} * /> * ``` */ interface VerdocsPagination { /** * The total number of items. * @default 1 */ "itemCount"?: number; /** * Event fired when the selected page changes. The new page number is included in the event. */ "onSelectPage"?: (event: VerdocsPaginationCustomEvent<{selectedPage: number}>) => void; /** * The number of displayed per page. * @default 10 */ "perPage"?: number; /** * The currently selected page. * @default 0 */ "selectedPage"?: number; } /** * Prompt the user to confirm their identity with a passcode. */ interface VerdocsPasscodeDialog { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsPasscodeDialogCustomEvent) => void; /** * Event fired when the process has completed successfully. */ "onNext"?: (event: VerdocsPasscodeDialogCustomEvent<{response: ISignerTokenResponse}>) => void; } /** * 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 *
*
* Tooltip Anchor * *
Tooltip
* *
*
* ``` */ interface VerdocsPortal { /** * Unique ID of the parent element to anchor to. */ "anchor"?: string; "onClickAway"?: (event: VerdocsPortalCustomEvent) => void; /** * Vertical offset from the parent. * @default 0 */ "voffset"?: number; } /** * 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 * { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsPreview { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsPreviewCustomEvent) => void; /** * The ID of the template to create the document from. * @default null */ "templateId"?: string | null; } /** * Display a simple progress bar in a style consistent with the design system. * ```ts * * ``` */ interface VerdocsProgressBar { /** * Optional label to display above the bar * @default '' */ "label"?: string; /** * The current progress value (0-100) * @default 0 */ "percent"?: number; /** * If true, the progress percentage will be displayed above the bar. * @default false */ "showPercent"?: boolean; } /** * Display a simple text dialog box with an Ok button. 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. */ interface VerdocsQuestionDialog { /** * Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsQuestionDialogCustomEvent) => void; /** * Event fired when the user clicks the OK button. */ "onNext"?: (event: VerdocsQuestionDialogCustomEvent<{question: string}>) => void; /** * @default '' */ "question"?: string; } /** * Display a drop-down menu of quick filter options. * ```ts * * ``` */ interface VerdocsQuickFilter { /** * @default 'Filter' */ "label"?: string; /** * Event fired when a menu option is clicked. Web Component events need to be "composed" to cross the Shadow DOM and be received by parent frameworks. */ "onOptionSelected"?: (event: VerdocsQuickFilterCustomEvent) => void; /** * The menu options to display. * @default [] */ "options"?: IFilterOption[]; /** * @default 'Select...' */ "placeholder"?: string; /** * @default '' */ "value"?: string; } /** * Display quick-function buttons for creating templates and documents. * 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. */ interface VerdocsQuickFunctions { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when an entry is clicked. */ "onCreateDocument"?: (event: VerdocsQuickFunctionsCustomEvent) => void; /** * Event fired when an entry is clicked. */ "onCreateTemplate"?: (event: VerdocsQuickFunctionsCustomEvent) => void; } /** * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is * designed to be used in signing experiences and contains settings that connect to template fields. This is just a * simple radio button for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * { this.someProperty = 'val1' }} * disabled={false} * /> * ``` */ interface VerdocsRadioButton { /** * Whether the radio button is currently selected. * @default false */ "checked"?: boolean; /** * If set, the button will still be displayed but not selectable. * @default false */ "disabled"?: boolean; /** * HTML form field name for the input. * @default '' */ "name"?: string; /** * Value to track with the input. * @default '' */ "value"?: string; } /** * Displays a customizable input box for search queries. * 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. */ interface VerdocsSearchBox { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * If set, the input field will attempt to "grab" focus after being rendered. * @default false */ "grabsFocus"?: boolean; /** * Event fired when the user changes the query string. */ "onQueryChanged"?: (event: VerdocsSearchBoxCustomEvent) => void; /** * Event fired when the user changes the type. */ "onSearchClicked"?: (event: VerdocsSearchBoxCustomEvent) => void; /** * Event fired when the user changes the type. */ "onTypeChanged"?: (event: VerdocsSearchBoxCustomEvent) => void; /** * The placeholder to display in the input field. * @default 'Search envelopes, templates, organizations...' */ "placeholder"?: string; /** * The text search string entered by the user. * @default '' */ "query"?: string; /** * If set to a value other than 'all', a removeable filter indicator will be displayed. * @default 'all' */ "type"?: TContentType; } interface VerdocsSearchTabs { } /** * Display a combo box. This is just a standard HTML select 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 emit. * ```ts * {}} /> * ``` */ interface VerdocsSelectInput { /** * Should the field be disabled? * @default false */ "disabled"?: boolean; /** * The label for the field. * @default '' */ "label"?: string; /** * The options to list. */ "options"?: {label: string; value: string}[]; /** * The initial value for the input field. * @default '' */ "value"?: string; } /** * Display a form to send a template to one or more recipients in an envelope for signing. * 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 * { console.log('Sending... Show a spinner...', detail) } * onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) } * onExit={({ detail }) => { console.log('Send cancelled.', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ interface VerdocsSend { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default DefaultEndpoint */ "endpoint"?: VerdocsEndpoint; /** * The environment the control is being called from, e.g. 'web'. This has an impact on how certain operations such as email communications are handled to ensure users receive the correct URLs for their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors. If environment is not known, do this set this property. * @default '' */ "environment"?: string; /** * The user is sending an envelope the form and clicked send. */ "onBeforeSend"?: (event: VerdocsSendCustomEvent<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; template: ITemplate}>) => void; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsSendCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsSendCustomEvent) => void; /** * Event fired when the user enters text in a search field. The parent application may use this to update the `contactSuggestions` property. */ "onSearchContacts"?: (event: VerdocsSendCustomEvent) => void; /** * The user completed the form and clicked send. */ "onSend"?: (event: VerdocsSendCustomEvent<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; envelope_id: string; envelope: IEnvelope}>) => void; /** * Whether to show the cancel button. It may be useful to disable this in environments where the embed is shown in a non-wizard flow with its own navigation for the user to exit. * @default true */ "showCancel"?: boolean; /** * The ID of the template to create the document from. * @default null */ "templateId"?: string | null; } /** * Display an envelope signing experience. This will display the envelope's attached * documents with signing fields overlaid on each page. * The component will attempt to initiate a signing session and load the specified * envelope. If successful, the recipient's fields will be enabled and the user will * be able to sign the envelope's attached documents. If not, an `sdkError` will be * thrown and the component will be blank/empty. To provide the best user experience, * applications should capture and handle this error to provide the user with * instructions/options for next steps based on the application's design and workflow. * Unlike other components, this will always create its own endpoint to manage the * session session. This endpoint will be included in event callbacks for the * convenience of host applications that may wish to make server calls using the * signer's credentials once signing is complete (e.g. to obtain copies of * the signed attachments.) * ```ts * console.log('Envelope updated state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ interface VerdocsSign { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default new VerdocsEndpoint({sessionType: 'signing'}) */ "endpoint"?: VerdocsEndpoint; /** * The ID of the envelope to sign. * @default null */ "envelopeId"?: string | null; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the header will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects (e.g. "fixed"). The movement of the header to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the header's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "headerTargetId"?: string | null; /** * The invite code for the signer. * @default null */ "inviteCode"?: string | null; /** * Event fired when the envelope is loaded for the first time. */ "onEnvelopeLoaded"?: (event: VerdocsSignCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>) => void; /** * Event fired when the envelope is updated in any way. */ "onEnvelopeUpdated"?: (event: VerdocsSignCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsSignCustomEvent) => void; /** * The ID of the role that will be signing e.g. 'Recipient 1' * @default null */ "roleId"?: string | null; /** * The style of the toolbar to display. * @default 'menu' */ "toolbarStyle"?: 'controls' | 'menu'; } /** * Typically presented by the `verdocs-sign` component. Displays a footer toolbar * with a few convenience functions for the envelope recipient to use. */ interface VerdocsSignFooter { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId"?: string; /** * If the recipient is "done," some buttons will be hidden. * @default false */ "isDone"?: boolean; /** * Event fired if the user asks the sender a question. The parent component is responsible for handling this. */ "onAskQuestion"?: (event: VerdocsSignFooterCustomEvent<{question: string}>) => void; /** * Event fired if the user asks the sender a question. The parent component is responsible for handling this. */ "onDecline"?: (event: VerdocsSignFooterCustomEvent) => void; /** * Event fired if the user asks the sender a question. The parent component is responsible for handling this. */ "onFinishLater"?: (event: VerdocsSignFooterCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsSignFooterCustomEvent) => void; } /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ interface VerdocsSignatureDialog { /** * Initial signature text * @default '' */ "name"?: string; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsSignatureDialogCustomEvent) => void; /** * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string representation of the signature adopted. */ "onNext"?: (event: VerdocsSignatureDialogCustomEvent) => void; } interface VerdocsSigningProgress { /** * All fillable fields for the current recipient * @default [] */ "fields"?: IEnvelopeField[]; /** * The name of the currently focused field (to highlight it and show its label) * @default '' */ "focusedField"?: string; /** * Display mode * @default 'start' */ "mode"?: 'start' | 'signing' | 'completed'; /** * Emitted when user clicks Submit */ "onExit"?: (event: VerdocsSigningProgressCustomEvent) => void; /** * Emitted when user clicks Next */ "onNext"?: (event: VerdocsSigningProgressCustomEvent) => void; /** * Emitted when user clicks Previous */ "onPrevious"?: (event: VerdocsSigningProgressCustomEvent) => void; /** * Emitted when user clicks Start */ "onStarted"?: (event: VerdocsSigningProgressCustomEvent) => void; /** * All fields for the recipient, used to check filled status (may include non-fillable) * @default [] */ "recipientFields"?: IEnvelopeField[]; } /** * Display a small loading spinner. * ```ts * * ``` */ interface VerdocsSpinner { /** * @default 'light' */ "mode"?: 'light' | 'dark'; /** * @default 32 */ "size"?: number; } /** * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either * directly as a status field or the whole document object may be passed in. * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable * to display a popup panel with per-recipient status data. * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value. */ interface VerdocsStatusIndicator { /** * The document to display status for. Ignored if `status` is set directly. */ "envelope"?: IEnvelope; /** * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows. * @default 'normal' */ "size"?: 'small' | 'normal'; /** * The status to display. */ "status"?: TEnvelopeStatus | TRecipientStatus | 'accepted'; /** * The theme to use for diplay. * @default 'light' */ "theme"?: 'dark' | 'light'; } /** * Displays a toggle switch * ```ts * * ``` */ interface VerdocsSwitch { /** * @default false */ "checked"?: boolean; /** * Should the field be disabled? * @default false */ "disabled"?: boolean; "onCheckedChange"?: (event: VerdocsSwitchCustomEvent) => void; /** * Select purple or green treatments. * @default 'primary' */ "theme"?: 'primary' | 'secondary'; } /** * Display a simple table of data. Columns and data cells may have custom renderers defined to * support creating interactive table layouts. * ```ts * * ``` */ interface VerdocsTable { /** * The columns to display * @default [] */ "columns"?: IColumn[]; /** * The rows to display * @default [] */ "data"?: any[]; /** * Event fired when the user clicks a column header. This may be used to manage sorting options. */ "onColHeaderClick"?: (event: VerdocsTableCustomEvent<{col: IColumn}>) => void; /** * Event fired when the user clicks a row. */ "onRowClick"?: (event: VerdocsTableCustomEvent<{row: any}>) => void; } /** * Display a simple row of selectable tabs. This is a controlled element. * The parent must adjust selectedTab as selection events are fired. * ```ts * * ``` */ interface VerdocsTabs { /** * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate to the template preview. This is also fired when the user selects "Preview/Send" fropm the dropdown menu. */ "onSelectTab"?: (event: VerdocsTabsCustomEvent<{tab: ITab; index: number}>) => void; /** * The index of the tab to show selected. * @default 0 */ "selectedTab"?: number; /** * The tabs to display * @default [] */ "tabs"?: ITab[]; } /** * Displays an edit form that allows the user to view, add, or remove a template's attachments. * Note that an active session and valid template ID must be supplied. */ interface VerdocsTemplateAttachments { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsTemplateAttachmentsCustomEvent) => void; /** * Event fired when the user clicks the next button. */ "onNext"?: (event: VerdocsTemplateAttachmentsCustomEvent<{template: ITemplate}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateAttachmentsCustomEvent) => void; /** * Event fired when the user updates the template. */ "onTemplateUpdated"?: (event: VerdocsTemplateAttachmentsCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>) => void; /** * The template ID to edit. * @default '' */ "templateId"?: string; } /** * Display a set of tabs for the template builder. */ interface VerdocsTemplateBuildTabs { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateBuildTabsCustomEvent) => void; /** * Event fired when the user selects a different step. */ "onStepChanged"?: (event: VerdocsTemplateBuildTabsCustomEvent) => void; /** * The step in the creation process to display. * @default 'preview' */ "step"?: TVerdocsBuildStep1; /** * The ID of the template to create the document from. Unlike most other components, this is an optional parameter here. If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process. If it is not specified, `step` will be ignored and the create step will be shown. * @default null */ "templateId"?: string | null; } /** * Displays a summary of a template */ interface VerdocsTemplateCard { /** * The template for which the card will be rendered. */ "template"?: ITemplate; } /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ interface VerdocsTemplateCreate { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * @default 20.5 * 1024 * 1024 */ "maxSize"?: number; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsTemplateCreateCustomEvent) => void; /** * Event fired when the user changes the type. */ "onNext"?: (event: VerdocsTemplateCreateCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateCreateCustomEvent) => void; /** * Event fired when the user updates the template. */ "onTemplateCreated"?: (event: VerdocsTemplateCreateCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; templateId: string}>) => void; } /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ interface VerdocsTemplateDocumentPage { /** * Whether the fields should be disabled (Builder) * @default false */ "disabled"?: boolean; /** * The ID of the document to display. * @default '' */ "documentId"?: string; /** * Whether the field are interactable (done/submitted disables this) * @default false */ "done"?: boolean; /** * Whether the fields should be editable (Builder) * @default false */ "editable"?: boolean; /** * The endpoint to load from. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer. The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g. if `pages` was ['page', 'fields'] the structure will be: ```
``` * @default [{name: 'page', type: 'canvas'}] */ "layers"?: IPageLayer[]; /** * Fired when a page has been rendered. This is also fired when the page is resized. */ "onPageRendered"?: (event: VerdocsTemplateDocumentPageCustomEvent) => void; /** * The page number being rendered. (Reminder: page numbers are 1-based.) * @default 1 */ "pageNumber"?: number; /** * The ID of the template the document is for. * @default '' */ "templateId"?: string; /** * The "virtual" height of the page canvas. Defaults to 792 which at 72dpi is 11" tall. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 792 */ "virtualHeight"?: number; /** * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute the aspect ratio of the final rendered element when scaling up/down. * @default 612 */ "virtualWidth"?: number; } /** * Displays an edit form that allows the user to adjust a field's settings. */ interface VerdocsTemplateFieldProperties { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * The field to configure. * @default '' */ "fieldName"?: string; /** * If specified, the properties card will have a "back" side with the help text as its content. * @default '' */ "helpText"?: string; /** * Event fired when the user cancels the dialog. */ "onClose"?: (event: VerdocsTemplateFieldPropertiesCustomEvent) => void; /** * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted, the role will have already been deleted server-side. */ "onDelete"?: (event: VerdocsTemplateFieldPropertiesCustomEvent<{templateId: string; roleName: string}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateFieldPropertiesCustomEvent) => void; /** * Event fired when the field's settings are changed. */ "onSettingsChanged"?: (event: VerdocsTemplateFieldPropertiesCustomEvent<{fieldName: string; field: ITemplateField}>) => void; /** * The template ID to edit. * @default '' */ "templateId"?: string; } /** * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to * present all of the required controls, so it is primarily intended to be used in desktop environments. */ interface VerdocsTemplateFields { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateFieldsCustomEvent) => void; /** * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onTemplateUpdated"?: (event: VerdocsTemplateFieldsCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; event: 'added-field' | 'updated-field' | 'deleted-field'}>) => void; /** * The ID of the template to create the document from. * @default null */ "templateId"?: string | null; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the toolbar will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects. The movement of the toolbar to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the toolbar's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "toolbarTargetId"?: string | null; } /** * Present an editing form suitable for adjusting template-role properties. */ interface VerdocsTemplateRoleProperties { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the user cancels the dialog. */ "onClose"?: (event: VerdocsTemplateRolePropertiesCustomEvent) => void; /** * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted, the role will have already been deleted server-side. */ "onDelete"?: (event: VerdocsTemplateRolePropertiesCustomEvent<{templateId: string; roleName: string}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateRolePropertiesCustomEvent) => void; /** * The role name to edit. * @default '' */ "roleName"?: string; /** * The template ID to edit. * @default '' */ "templateId"?: string; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface VerdocsTemplateRoles { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsTemplateRolesCustomEvent) => void; /** * Event fired when the user clicks to proceed. */ "onNext"?: (event: VerdocsTemplateRolesCustomEvent) => void; /** * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onRolesUpdated"?: (event: VerdocsTemplateRolesCustomEvent<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateRolesCustomEvent) => void; /** * The template ID to edit. * @default '' */ "templateId"?: string; } /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ interface VerdocsTemplateSettings { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsTemplateSettingsCustomEvent) => void; /** * Event fired when the user clicks to proceed. */ "onNext"?: (event: VerdocsTemplateSettingsCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateSettingsCustomEvent) => void; /** * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onTemplateUpdated"?: (event: VerdocsTemplateSettingsCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>) => void; /** * The template ID to edit. * @default '' */ "templateId"?: string; } /** * Displays a clickable star that allows users to mark frequently-used templates. */ interface VerdocsTemplateStar { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplateStarCustomEvent) => void; /** * Event fired when the user toggles the star on or off. The event detail will contain the new "starred" status and count. */ "onStarChange"?: (event: VerdocsTemplateStarCustomEvent<{templateId: string; starred: boolean; count: number}>) => void; /** * The template to display the star for. */ "template"?: ITemplate; } /** * Displays a message listing a template's tags. */ interface VerdocsTemplateTags { /** * The tags to display */ "tags"?: any[]; } /** * Display a list of templates in the caller's account. * ```ts * console.log('View template:', detail) } * /> * ``` */ interface VerdocsTemplatesList { /** * Override the If set, filter templates by the specified name. * @default ['send', 'submitted', 'link', 'edit', 'delete'] */ "allowedActions"?: TAllowedTemplateAction[]; /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default VerdocsEndpoint.getDefault() */ "endpoint"?: VerdocsEndpoint; /** * If set, filter templates by the specified name. * @default '' */ "name"?: string; /** * Event fired when the user changes the name filter. This is fired for every inputChange event (every character typed). This event is provided for balance with the other events, but host applications should generally not save this value. Users might appreciate applications remembering their sorting or filtering preferences, but probably not their search terms. */ "onChangeName"?: (event: VerdocsTemplatesListCustomEvent) => void; /** * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences. */ "onChangeSort"?: (event: VerdocsTemplatesListCustomEvent) => void; /** * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences. */ "onChangeStarred"?: (event: VerdocsTemplatesListCustomEvent<'all' | 'starred' | 'unstarred'>) => void; /** * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences. */ "onChangeVisibility"?: (event: VerdocsTemplatesListCustomEvent<'private_shared' | 'private' | 'shared' | 'public'>) => void; /** * Event fired when the user chooses the Edit option from the dropdown menu. */ "onEditTemplate"?: (event: VerdocsTemplatesListCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate}>) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsTemplatesListCustomEvent) => void; /** * Event fired when the user clicks to sign a template now. */ "onSignNow"?: (event: VerdocsTemplatesListCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate}>) => void; /** * Event fired when the user clicks to sign a template now. */ "onSubmittedData"?: (event: VerdocsTemplatesListCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate}>) => void; /** * Event fired when the user chooses the Delete option from the dropdown menu. When this is fired, the template will already have been deleted. The host application should remove it from the list or refresh the list. */ "onTemplateDeleted"?: (event: VerdocsTemplatesListCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate}>) => void; /** * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate to the template preview. This is also fired when the user selects "Preview/Send" fropm the dropdown menu. */ "onViewTemplate"?: (event: VerdocsTemplatesListCustomEvent<{endpoint: VerdocsEndpoint; template: ITemplate}>) => void; /** * The number of rows to display per page. * @default 10 */ "rowsPerPage"?: number; /** * The initial page number to select. Pagination is internally controlled but may be overriden by the host applicaiton. * @default 0 */ "selectedPage"?: number; /** * Whether or not pagination should be enabled. * @default true */ "showPagination"?: boolean; /** * The sort order to display. * @default 'updated_at' */ "sort"?: string; /** * The starred settings to filter by. * @default 'all' */ "starred"?: 'all' | 'starred' | 'unstarred'; /** * The sharing settings to filter by. * @default 'private_shared' */ "visibility"?: 'private_shared' | 'private' | 'shared' | 'public'; } /** * 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 emit. * ```ts * * ``` */ interface VerdocsTextInput { /** * If desired, the autocomplete attribute to set. * @default '' */ "autocomplete"?: string; /** * If set, a clear button will be displayed. * @default false */ "clearable"?: boolean; /** * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be both clearable and copyable. If both properties are set to true, copyable will be ignored. * @default false */ "copyable"?: boolean; /** * Displayed below the field in a small font, typically used for instructions or reminders. * @default '' */ "description"?: string; /** * Should the field be disabled? * @default false */ "disabled"?: boolean; /** * If supplied, a help icon will be displayed to provide the user more information. * @default '' */ "helpText"?: string; /** * The label for the field. * @default '' */ "label"?: string; /** * The placeholder for the field. * @default '' */ "placeholder"?: string; /** * Should the field be required? * @default false */ "required"?: boolean; /** * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types (e.g. a date picker) will be supported by other controls in the future. * @default 'text' */ "type"?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'; /** * The initial value for the input field. * @default '' */ "value"?: string; } /** * Displays a label and a set of buttons, also allowing a default selection of a button. * ```ts * * ``` */ interface VerdocsToggle { /** * The tags to display */ "options"?: IToggleIconButtons; /** * The "theme" to be used */ "theme"?: 'light' | 'dark'; } /** * Displays a single button that can be toggled on or off by clicking it. * ```ts * * ``` */ interface VerdocsToggleButton { /** * @default false */ "active"?: boolean; /** * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored. * @default null */ "icon"?: string | null; /** * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored. * @default null */ "label"?: string | null; /** * Event fired when the button is pressed. */ "onToggle"?: (event: VerdocsToggleButtonCustomEvent<{active: boolean}>) => void; /** * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions. * @default 'normal' */ "size"?: 'small' | 'normal'; } /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ interface VerdocsToolbarIcon { /** * SVG icon to display * @default '' */ "icon"?: string; /** * Override the Popper "placement" setting * @default 'bottom' */ "placement"?: Placement; /** * Help text to display on hover/focus * @default '' */ "text"?: string; } /** * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by * callers with a variety of workflows. Instead, data about the chosen file will be passed to the * caller via the onNext event handler. A delete event is also exposed to delete existing attachments. * To represent an existing attachment, set the existingFile property. */ interface VerdocsUploadDialog { "existingFile"?: any; /** * @default 20 * 1024 * 1024 */ "maxSize"?: number; /** * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved "cancel" event name. */ "onExit"?: (event: VerdocsUploadDialogCustomEvent) => void; /** * Event fired when the dialog is closed. The event data will contain the file selected. */ "onNext"?: (event: VerdocsUploadDialogCustomEvent) => void; /** * Event fired when an existing attachment is deleted. The parent component is responsible for the actual removal. */ "onRemove"?: (event: VerdocsUploadDialogCustomEvent) => void; } interface VerdocsView { /** * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. * @default null */ "endpoint"?: VerdocsEndpoint | null; /** * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored. * @default '' */ "envelopeId"?: string; /** * If set, (recommended), the host application should create a
element with a unique ID. When this component renders, the header will be removed from its default location and placed in the target element. This allows the parent application to more easily control its placement and scroll effects (e.g. "fixed"). The movement of the header to the target container is not dynamic - it is performed only on the initial render. Host applications should not conditionally render this container. If the header's visibility must be externally controlled, use CSS display options to hide/show it instead. * @default null */ "headerTargetId"?: string | null; /** * Event fired when the user clicks Send Another to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onAnother"?: (event: VerdocsViewCustomEvent) => void; /** * Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems. */ "onEnvelopeUpdated"?: (event: VerdocsViewCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}>) => void; /** * Event fired when the user clicks Done to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onNext"?: (event: VerdocsViewCustomEvent) => void; /** * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component. */ "onSdkError"?: (event: VerdocsViewCustomEvent) => void; /** * Event fired when the user clicks Send Another to proceed. It is up to the host application to redirect the user to the appropriate next workflow step. */ "onView"?: (event: VerdocsViewCustomEvent) => void; } interface VerdocsAdoptSignatureDialogAttributes { "name": string; "nameLocked": boolean; } interface VerdocsAuthAttributes { "visible": boolean; "logo": string; "displayMode": 'login' | 'forgot' | 'reset' | 'signup' | 'verify'; } interface VerdocsBuildAttributes { "templateId": string | null; "step": TVerdocsBuildStep; } interface VerdocsButtonAttributes { "label": string; "startIcon": string | null; "endIcon": string | null; "size": 'xsmall' | 'small' | 'normal' | 'medium' | 'large'; "type": 'button' | 'submit' | 'reset'; "variant": 'standard' | 'text' | 'outline'; "disabled": boolean; } interface VerdocsButtonPanelAttributes { "icon": string; } interface VerdocsCheckboxAttributes { "checked": boolean; "name": string; "label": string; "value": string; "theme": 'light' | 'dark'; "size": 'normal' | 'small'; "disabled": boolean; } interface VerdocsComponentErrorAttributes { "message": string; } interface VerdocsDateInputAttributes { "value": string; "label": string; "placeholder": string; "helpText": string; "disabled": boolean; "required": boolean; } interface VerdocsDialogAttributes { "persistent": boolean; } interface VerdocsDisclosureDialogAttributes { "disclosures": string; "delegator": boolean; } interface VerdocsDownloadDialogAttributes { "signed": boolean; "polling": boolean; "hasCertificate": boolean; } interface VerdocsEnvelopeDocumentPageAttributes { "envelopeId": string; "documentId": string; "pageNumber": number; "virtualWidth": number; "virtualHeight": number; "type": 'original' | 'filled' | 'certificate'; } interface VerdocsEnvelopeRecipientLinkAttributes { "envelopeId": string; "roleName": string; } interface VerdocsEnvelopeRecipientSummaryAttributes { "envelopeId": string; "canSendAnother": boolean; "canView": boolean; "canDone": boolean; } interface VerdocsEnvelopeSidebarAttributes { "envelopeId": string; } interface VerdocsEnvelopeUpdateRecipientAttributes { "envelopeId": string; "roleName": string; } interface VerdocsEnvelopesListAttributes { "view": 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'; "status": TEnvelopeStatus | 'all'; "sort": 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'; "match": string; "showPagination": boolean; "rowsPerPage": number; "selectedPage": number; } interface VerdocsFieldAttachmentAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldCheckboxAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "done": boolean; "editable": boolean; "moveable": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldDateAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; "isPreview": boolean; } interface VerdocsFieldDropdownAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldInitialAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "disabled": boolean; "initials": string; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; "initialid": string; "isPreview": boolean; } interface VerdocsFieldPaymentAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "done": boolean; "editable": boolean; "moveable": boolean; "xscale": number; "yscale": number; "pagenumber": number; "pageNum": number; "roleName": string; "fieldId": string; "recipients": string; "selectedRoleName": string; "currentSignature": string; "currentSignatureId": string; "currentInitial": string; "currentInitialId": string; "signed": boolean; "roleindex": number; } interface VerdocsFieldRadioAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "required": boolean; "done": boolean; "editable": boolean; "moveable": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldSignatureAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "name": string; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; "signatureid": string; "isPreview": boolean; } interface VerdocsFieldTextareaAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldTextboxAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "multiline": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFieldTimestampAttributes { "source": 'template' | 'envelope'; "sourceid": string; "fieldname": string; "isPreview": boolean; "disabled": boolean; "editable": boolean; "moveable": boolean; "done": boolean; "xscale": number; "yscale": number; "pagenumber": number; } interface VerdocsFlagAttributes { "variant": 'fill' | 'next'; "label": string; "showSkip": boolean; } interface VerdocsHelpIconAttributes { "text": string; "icon": string; } interface VerdocsInitialDialogAttributes { "initials": string; } interface VerdocsKbaDialogAttributes { "step": number; "steps": number; "helptitle": string; "helptext": string; "mode": 'text' | 'choice' | 'identity'; "label": string; "placeholder": string; } interface VerdocsMenuPanelAttributes { "side": 'left' | 'right'; "overlay": boolean; "width": number; } interface VerdocsMultiselectAttributes { "label": string; "placeholder": string; } interface VerdocsOkDialogAttributes { "heading": string; "message": string; "buttonLabel": string; "showCancel": boolean; } interface VerdocsOtpDialogAttributes { "method": 'email' | 'sms'; } interface VerdocsPaginationAttributes { "selectedPage": number; "itemCount": number; "perPage": number; } interface VerdocsPortalAttributes { "anchor": string; "voffset": number; } interface VerdocsPreviewAttributes { "templateId": string | null; } interface VerdocsProgressBarAttributes { "label": string; "showPercent": boolean; "percent": number; } interface VerdocsQuestionDialogAttributes { "question": string; } interface VerdocsQuickFilterAttributes { "label": string; "value": string; "placeholder": string; } interface VerdocsRadioButtonAttributes { "checked": boolean; "name": string; "value": string; "disabled": boolean; } interface VerdocsSearchBoxAttributes { "placeholder": string; "type": TContentType; "query": string; "grabsFocus": boolean; } interface VerdocsSelectInputAttributes { "value": string; "label": string; "disabled": boolean; } interface VerdocsSendAttributes { "templateId": string | null; "environment": string; "showCancel": boolean; } interface VerdocsSignAttributes { "envelopeId": string | null; "roleId": string | null; "inviteCode": string | null; "headerTargetId": string | null; "toolbarStyle": 'controls' | 'menu'; } interface VerdocsSignFooterAttributes { "envelopeId": string; "isDone": boolean; } interface VerdocsSignatureDialogAttributes { "name": string; } interface VerdocsSigningProgressAttributes { "mode": 'start' | 'signing' | 'completed'; "focusedField": string; } interface VerdocsSpinnerAttributes { "size": number; "mode": 'light' | 'dark'; } interface VerdocsStatusIndicatorAttributes { "size": 'small' | 'normal'; "theme": 'dark' | 'light'; "status": TEnvelopeStatus | TRecipientStatus | 'accepted'; } interface VerdocsSwitchAttributes { "checked": boolean; "theme": 'primary' | 'secondary'; "disabled": boolean; } interface VerdocsTabsAttributes { "selectedTab": number; } interface VerdocsTemplateAttachmentsAttributes { "templateId": string; } interface VerdocsTemplateBuildTabsAttributes { "templateId": string | null; "step": TVerdocsBuildStep; } interface VerdocsTemplateCreateAttributes { "maxSize": number; } interface VerdocsTemplateDocumentPageAttributes { "editable": boolean; "disabled": boolean; "done": boolean; "templateId": string; "documentId": string; "pageNumber": number; "virtualWidth": number; "virtualHeight": number; } interface VerdocsTemplateFieldPropertiesAttributes { "templateId": string; "fieldName": string; "helpText": string; } interface VerdocsTemplateFieldsAttributes { "templateId": string | null; "toolbarTargetId": string | null; } interface VerdocsTemplateRolePropertiesAttributes { "templateId": string; "roleName": string; } interface VerdocsTemplateRolesAttributes { "templateId": string; } interface VerdocsTemplateSettingsAttributes { "templateId": string; } interface VerdocsTemplatesListAttributes { "visibility": 'private_shared' | 'private' | 'shared' | 'public'; "starred": 'all' | 'starred' | 'unstarred'; "sort": string; "name": string; "showPagination": boolean; "rowsPerPage": number; "selectedPage": number; } interface VerdocsTextInputAttributes { "value": string; "label": string; "placeholder": string; "description": string; "autocomplete": string; "helpText": string; "clearable": boolean; "copyable": boolean; "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'; "disabled": boolean; "required": boolean; } interface VerdocsToggleAttributes { "theme": 'light' | 'dark'; } interface VerdocsToggleButtonAttributes { "active": boolean; "icon": string | null; "label": string | null; "size": 'small' | 'normal'; } interface VerdocsToolbarIconAttributes { "text": string; "icon": string; "placement": Placement; } interface VerdocsUploadDialogAttributes { "maxSize": number; "existingFile": string; } interface VerdocsViewAttributes { "envelopeId": string; "headerTargetId": string | null; } interface IntrinsicElements { "verdocs-adopt-signature-dialog": Omit & { [K in keyof VerdocsAdoptSignatureDialog & keyof VerdocsAdoptSignatureDialogAttributes]?: VerdocsAdoptSignatureDialog[K] } & { [K in keyof VerdocsAdoptSignatureDialog & keyof VerdocsAdoptSignatureDialogAttributes as `attr:${K}`]?: VerdocsAdoptSignatureDialogAttributes[K] } & { [K in keyof VerdocsAdoptSignatureDialog & keyof VerdocsAdoptSignatureDialogAttributes as `prop:${K}`]?: VerdocsAdoptSignatureDialog[K] }; "verdocs-auth": Omit & { [K in keyof VerdocsAuth & keyof VerdocsAuthAttributes]?: VerdocsAuth[K] } & { [K in keyof VerdocsAuth & keyof VerdocsAuthAttributes as `attr:${K}`]?: VerdocsAuthAttributes[K] } & { [K in keyof VerdocsAuth & keyof VerdocsAuthAttributes as `prop:${K}`]?: VerdocsAuth[K] }; "verdocs-build": Omit & { [K in keyof VerdocsBuild & keyof VerdocsBuildAttributes]?: VerdocsBuild[K] } & { [K in keyof VerdocsBuild & keyof VerdocsBuildAttributes as `attr:${K}`]?: VerdocsBuildAttributes[K] } & { [K in keyof VerdocsBuild & keyof VerdocsBuildAttributes as `prop:${K}`]?: VerdocsBuild[K] }; "verdocs-button": Omit & { [K in keyof VerdocsButton & keyof VerdocsButtonAttributes]?: VerdocsButton[K] } & { [K in keyof VerdocsButton & keyof VerdocsButtonAttributes as `attr:${K}`]?: VerdocsButtonAttributes[K] } & { [K in keyof VerdocsButton & keyof VerdocsButtonAttributes as `prop:${K}`]?: VerdocsButton[K] } & OneOf<"label", VerdocsButton["label"], VerdocsButtonAttributes["label"]>; "verdocs-button-panel": Omit & { [K in keyof VerdocsButtonPanel & keyof VerdocsButtonPanelAttributes]?: VerdocsButtonPanel[K] } & { [K in keyof VerdocsButtonPanel & keyof VerdocsButtonPanelAttributes as `attr:${K}`]?: VerdocsButtonPanelAttributes[K] } & { [K in keyof VerdocsButtonPanel & keyof VerdocsButtonPanelAttributes as `prop:${K}`]?: VerdocsButtonPanel[K] }; "verdocs-checkbox": Omit & { [K in keyof VerdocsCheckbox & keyof VerdocsCheckboxAttributes]?: VerdocsCheckbox[K] } & { [K in keyof VerdocsCheckbox & keyof VerdocsCheckboxAttributes as `attr:${K}`]?: VerdocsCheckboxAttributes[K] } & { [K in keyof VerdocsCheckbox & keyof VerdocsCheckboxAttributes as `prop:${K}`]?: VerdocsCheckbox[K] }; "verdocs-component-error": Omit & { [K in keyof VerdocsComponentError & keyof VerdocsComponentErrorAttributes]?: VerdocsComponentError[K] } & { [K in keyof VerdocsComponentError & keyof VerdocsComponentErrorAttributes as `attr:${K}`]?: VerdocsComponentErrorAttributes[K] } & { [K in keyof VerdocsComponentError & keyof VerdocsComponentErrorAttributes as `prop:${K}`]?: VerdocsComponentError[K] }; "verdocs-contact-picker": VerdocsContactPicker; "verdocs-date-input": Omit & { [K in keyof VerdocsDateInput & keyof VerdocsDateInputAttributes]?: VerdocsDateInput[K] } & { [K in keyof VerdocsDateInput & keyof VerdocsDateInputAttributes as `attr:${K}`]?: VerdocsDateInputAttributes[K] } & { [K in keyof VerdocsDateInput & keyof VerdocsDateInputAttributes as `prop:${K}`]?: VerdocsDateInput[K] }; "verdocs-delegate-dialog": VerdocsDelegateDialog; "verdocs-dialog": Omit & { [K in keyof VerdocsDialog & keyof VerdocsDialogAttributes]?: VerdocsDialog[K] } & { [K in keyof VerdocsDialog & keyof VerdocsDialogAttributes as `attr:${K}`]?: VerdocsDialogAttributes[K] } & { [K in keyof VerdocsDialog & keyof VerdocsDialogAttributes as `prop:${K}`]?: VerdocsDialog[K] }; "verdocs-disclosure-dialog": Omit & { [K in keyof VerdocsDisclosureDialog & keyof VerdocsDisclosureDialogAttributes]?: VerdocsDisclosureDialog[K] } & { [K in keyof VerdocsDisclosureDialog & keyof VerdocsDisclosureDialogAttributes as `attr:${K}`]?: VerdocsDisclosureDialogAttributes[K] } & { [K in keyof VerdocsDisclosureDialog & keyof VerdocsDisclosureDialogAttributes as `prop:${K}`]?: VerdocsDisclosureDialog[K] }; "verdocs-download-dialog": Omit & { [K in keyof VerdocsDownloadDialog & keyof VerdocsDownloadDialogAttributes]?: VerdocsDownloadDialog[K] } & { [K in keyof VerdocsDownloadDialog & keyof VerdocsDownloadDialogAttributes as `attr:${K}`]?: VerdocsDownloadDialogAttributes[K] } & { [K in keyof VerdocsDownloadDialog & keyof VerdocsDownloadDialogAttributes as `prop:${K}`]?: VerdocsDownloadDialog[K] }; "verdocs-dropdown": VerdocsDropdown; "verdocs-envelope-document-page": Omit & { [K in keyof VerdocsEnvelopeDocumentPage & keyof VerdocsEnvelopeDocumentPageAttributes]?: VerdocsEnvelopeDocumentPage[K] } & { [K in keyof VerdocsEnvelopeDocumentPage & keyof VerdocsEnvelopeDocumentPageAttributes as `attr:${K}`]?: VerdocsEnvelopeDocumentPageAttributes[K] } & { [K in keyof VerdocsEnvelopeDocumentPage & keyof VerdocsEnvelopeDocumentPageAttributes as `prop:${K}`]?: VerdocsEnvelopeDocumentPage[K] }; "verdocs-envelope-recipient-link": Omit & { [K in keyof VerdocsEnvelopeRecipientLink & keyof VerdocsEnvelopeRecipientLinkAttributes]?: VerdocsEnvelopeRecipientLink[K] } & { [K in keyof VerdocsEnvelopeRecipientLink & keyof VerdocsEnvelopeRecipientLinkAttributes as `attr:${K}`]?: VerdocsEnvelopeRecipientLinkAttributes[K] } & { [K in keyof VerdocsEnvelopeRecipientLink & keyof VerdocsEnvelopeRecipientLinkAttributes as `prop:${K}`]?: VerdocsEnvelopeRecipientLink[K] }; "verdocs-envelope-recipient-summary": Omit & { [K in keyof VerdocsEnvelopeRecipientSummary & keyof VerdocsEnvelopeRecipientSummaryAttributes]?: VerdocsEnvelopeRecipientSummary[K] } & { [K in keyof VerdocsEnvelopeRecipientSummary & keyof VerdocsEnvelopeRecipientSummaryAttributes as `attr:${K}`]?: VerdocsEnvelopeRecipientSummaryAttributes[K] } & { [K in keyof VerdocsEnvelopeRecipientSummary & keyof VerdocsEnvelopeRecipientSummaryAttributes as `prop:${K}`]?: VerdocsEnvelopeRecipientSummary[K] }; "verdocs-envelope-sidebar": Omit & { [K in keyof VerdocsEnvelopeSidebar & keyof VerdocsEnvelopeSidebarAttributes]?: VerdocsEnvelopeSidebar[K] } & { [K in keyof VerdocsEnvelopeSidebar & keyof VerdocsEnvelopeSidebarAttributes as `attr:${K}`]?: VerdocsEnvelopeSidebarAttributes[K] } & { [K in keyof VerdocsEnvelopeSidebar & keyof VerdocsEnvelopeSidebarAttributes as `prop:${K}`]?: VerdocsEnvelopeSidebar[K] }; "verdocs-envelope-update-recipient": Omit & { [K in keyof VerdocsEnvelopeUpdateRecipient & keyof VerdocsEnvelopeUpdateRecipientAttributes]?: VerdocsEnvelopeUpdateRecipient[K] } & { [K in keyof VerdocsEnvelopeUpdateRecipient & keyof VerdocsEnvelopeUpdateRecipientAttributes as `attr:${K}`]?: VerdocsEnvelopeUpdateRecipientAttributes[K] } & { [K in keyof VerdocsEnvelopeUpdateRecipient & keyof VerdocsEnvelopeUpdateRecipientAttributes as `prop:${K}`]?: VerdocsEnvelopeUpdateRecipient[K] }; "verdocs-envelopes-list": Omit & { [K in keyof VerdocsEnvelopesList & keyof VerdocsEnvelopesListAttributes]?: VerdocsEnvelopesList[K] } & { [K in keyof VerdocsEnvelopesList & keyof VerdocsEnvelopesListAttributes as `attr:${K}`]?: VerdocsEnvelopesListAttributes[K] } & { [K in keyof VerdocsEnvelopesList & keyof VerdocsEnvelopesListAttributes as `prop:${K}`]?: VerdocsEnvelopesList[K] }; "verdocs-field-attachment": Omit & { [K in keyof VerdocsFieldAttachment & keyof VerdocsFieldAttachmentAttributes]?: VerdocsFieldAttachment[K] } & { [K in keyof VerdocsFieldAttachment & keyof VerdocsFieldAttachmentAttributes as `attr:${K}`]?: VerdocsFieldAttachmentAttributes[K] } & { [K in keyof VerdocsFieldAttachment & keyof VerdocsFieldAttachmentAttributes as `prop:${K}`]?: VerdocsFieldAttachment[K] }; "verdocs-field-checkbox": Omit & { [K in keyof VerdocsFieldCheckbox & keyof VerdocsFieldCheckboxAttributes]?: VerdocsFieldCheckbox[K] } & { [K in keyof VerdocsFieldCheckbox & keyof VerdocsFieldCheckboxAttributes as `attr:${K}`]?: VerdocsFieldCheckboxAttributes[K] } & { [K in keyof VerdocsFieldCheckbox & keyof VerdocsFieldCheckboxAttributes as `prop:${K}`]?: VerdocsFieldCheckbox[K] }; "verdocs-field-date": Omit & { [K in keyof VerdocsFieldDate & keyof VerdocsFieldDateAttributes]?: VerdocsFieldDate[K] } & { [K in keyof VerdocsFieldDate & keyof VerdocsFieldDateAttributes as `attr:${K}`]?: VerdocsFieldDateAttributes[K] } & { [K in keyof VerdocsFieldDate & keyof VerdocsFieldDateAttributes as `prop:${K}`]?: VerdocsFieldDate[K] }; "verdocs-field-dropdown": Omit & { [K in keyof VerdocsFieldDropdown & keyof VerdocsFieldDropdownAttributes]?: VerdocsFieldDropdown[K] } & { [K in keyof VerdocsFieldDropdown & keyof VerdocsFieldDropdownAttributes as `attr:${K}`]?: VerdocsFieldDropdownAttributes[K] } & { [K in keyof VerdocsFieldDropdown & keyof VerdocsFieldDropdownAttributes as `prop:${K}`]?: VerdocsFieldDropdown[K] }; "verdocs-field-initial": Omit & { [K in keyof VerdocsFieldInitial & keyof VerdocsFieldInitialAttributes]?: VerdocsFieldInitial[K] } & { [K in keyof VerdocsFieldInitial & keyof VerdocsFieldInitialAttributes as `attr:${K}`]?: VerdocsFieldInitialAttributes[K] } & { [K in keyof VerdocsFieldInitial & keyof VerdocsFieldInitialAttributes as `prop:${K}`]?: VerdocsFieldInitial[K] }; "verdocs-field-payment": Omit & { [K in keyof VerdocsFieldPayment & keyof VerdocsFieldPaymentAttributes]?: VerdocsFieldPayment[K] } & { [K in keyof VerdocsFieldPayment & keyof VerdocsFieldPaymentAttributes as `attr:${K}`]?: VerdocsFieldPaymentAttributes[K] } & { [K in keyof VerdocsFieldPayment & keyof VerdocsFieldPaymentAttributes as `prop:${K}`]?: VerdocsFieldPayment[K] }; "verdocs-field-radio": Omit & { [K in keyof VerdocsFieldRadio & keyof VerdocsFieldRadioAttributes]?: VerdocsFieldRadio[K] } & { [K in keyof VerdocsFieldRadio & keyof VerdocsFieldRadioAttributes as `attr:${K}`]?: VerdocsFieldRadioAttributes[K] } & { [K in keyof VerdocsFieldRadio & keyof VerdocsFieldRadioAttributes as `prop:${K}`]?: VerdocsFieldRadio[K] }; "verdocs-field-signature": Omit & { [K in keyof VerdocsFieldSignature & keyof VerdocsFieldSignatureAttributes]?: VerdocsFieldSignature[K] } & { [K in keyof VerdocsFieldSignature & keyof VerdocsFieldSignatureAttributes as `attr:${K}`]?: VerdocsFieldSignatureAttributes[K] } & { [K in keyof VerdocsFieldSignature & keyof VerdocsFieldSignatureAttributes as `prop:${K}`]?: VerdocsFieldSignature[K] }; "verdocs-field-textarea": Omit & { [K in keyof VerdocsFieldTextarea & keyof VerdocsFieldTextareaAttributes]?: VerdocsFieldTextarea[K] } & { [K in keyof VerdocsFieldTextarea & keyof VerdocsFieldTextareaAttributes as `attr:${K}`]?: VerdocsFieldTextareaAttributes[K] } & { [K in keyof VerdocsFieldTextarea & keyof VerdocsFieldTextareaAttributes as `prop:${K}`]?: VerdocsFieldTextarea[K] }; "verdocs-field-textbox": Omit & { [K in keyof VerdocsFieldTextbox & keyof VerdocsFieldTextboxAttributes]?: VerdocsFieldTextbox[K] } & { [K in keyof VerdocsFieldTextbox & keyof VerdocsFieldTextboxAttributes as `attr:${K}`]?: VerdocsFieldTextboxAttributes[K] } & { [K in keyof VerdocsFieldTextbox & keyof VerdocsFieldTextboxAttributes as `prop:${K}`]?: VerdocsFieldTextbox[K] }; "verdocs-field-timestamp": Omit & { [K in keyof VerdocsFieldTimestamp & keyof VerdocsFieldTimestampAttributes]?: VerdocsFieldTimestamp[K] } & { [K in keyof VerdocsFieldTimestamp & keyof VerdocsFieldTimestampAttributes as `attr:${K}`]?: VerdocsFieldTimestampAttributes[K] } & { [K in keyof VerdocsFieldTimestamp & keyof VerdocsFieldTimestampAttributes as `prop:${K}`]?: VerdocsFieldTimestamp[K] }; "verdocs-file-chooser": VerdocsFileChooser; "verdocs-flag": Omit & { [K in keyof VerdocsFlag & keyof VerdocsFlagAttributes]?: VerdocsFlag[K] } & { [K in keyof VerdocsFlag & keyof VerdocsFlagAttributes as `attr:${K}`]?: VerdocsFlagAttributes[K] } & { [K in keyof VerdocsFlag & keyof VerdocsFlagAttributes as `prop:${K}`]?: VerdocsFlag[K] }; "verdocs-help-icon": Omit & { [K in keyof VerdocsHelpIcon & keyof VerdocsHelpIconAttributes]?: VerdocsHelpIcon[K] } & { [K in keyof VerdocsHelpIcon & keyof VerdocsHelpIconAttributes as `attr:${K}`]?: VerdocsHelpIconAttributes[K] } & { [K in keyof VerdocsHelpIcon & keyof VerdocsHelpIconAttributes as `prop:${K}`]?: VerdocsHelpIcon[K] }; "verdocs-initial-dialog": Omit & { [K in keyof VerdocsInitialDialog & keyof VerdocsInitialDialogAttributes]?: VerdocsInitialDialog[K] } & { [K in keyof VerdocsInitialDialog & keyof VerdocsInitialDialogAttributes as `attr:${K}`]?: VerdocsInitialDialogAttributes[K] } & { [K in keyof VerdocsInitialDialog & keyof VerdocsInitialDialogAttributes as `prop:${K}`]?: VerdocsInitialDialog[K] }; "verdocs-kba-dialog": Omit & { [K in keyof VerdocsKbaDialog & keyof VerdocsKbaDialogAttributes]?: VerdocsKbaDialog[K] } & { [K in keyof VerdocsKbaDialog & keyof VerdocsKbaDialogAttributes as `attr:${K}`]?: VerdocsKbaDialogAttributes[K] } & { [K in keyof VerdocsKbaDialog & keyof VerdocsKbaDialogAttributes as `prop:${K}`]?: VerdocsKbaDialog[K] }; "verdocs-loader": VerdocsLoader; "verdocs-menu-panel": Omit & { [K in keyof VerdocsMenuPanel & keyof VerdocsMenuPanelAttributes]?: VerdocsMenuPanel[K] } & { [K in keyof VerdocsMenuPanel & keyof VerdocsMenuPanelAttributes as `attr:${K}`]?: VerdocsMenuPanelAttributes[K] } & { [K in keyof VerdocsMenuPanel & keyof VerdocsMenuPanelAttributes as `prop:${K}`]?: VerdocsMenuPanel[K] }; "verdocs-multiselect": Omit & { [K in keyof VerdocsMultiselect & keyof VerdocsMultiselectAttributes]?: VerdocsMultiselect[K] } & { [K in keyof VerdocsMultiselect & keyof VerdocsMultiselectAttributes as `attr:${K}`]?: VerdocsMultiselectAttributes[K] } & { [K in keyof VerdocsMultiselect & keyof VerdocsMultiselectAttributes as `prop:${K}`]?: VerdocsMultiselect[K] }; "verdocs-ok-dialog": Omit & { [K in keyof VerdocsOkDialog & keyof VerdocsOkDialogAttributes]?: VerdocsOkDialog[K] } & { [K in keyof VerdocsOkDialog & keyof VerdocsOkDialogAttributes as `attr:${K}`]?: VerdocsOkDialogAttributes[K] } & { [K in keyof VerdocsOkDialog & keyof VerdocsOkDialogAttributes as `prop:${K}`]?: VerdocsOkDialog[K] }; "verdocs-organization-card": VerdocsOrganizationCard; "verdocs-otp-dialog": Omit & { [K in keyof VerdocsOtpDialog & keyof VerdocsOtpDialogAttributes]?: VerdocsOtpDialog[K] } & { [K in keyof VerdocsOtpDialog & keyof VerdocsOtpDialogAttributes as `attr:${K}`]?: VerdocsOtpDialogAttributes[K] } & { [K in keyof VerdocsOtpDialog & keyof VerdocsOtpDialogAttributes as `prop:${K}`]?: VerdocsOtpDialog[K] }; "verdocs-pagination": Omit & { [K in keyof VerdocsPagination & keyof VerdocsPaginationAttributes]?: VerdocsPagination[K] } & { [K in keyof VerdocsPagination & keyof VerdocsPaginationAttributes as `attr:${K}`]?: VerdocsPaginationAttributes[K] } & { [K in keyof VerdocsPagination & keyof VerdocsPaginationAttributes as `prop:${K}`]?: VerdocsPagination[K] }; "verdocs-passcode-dialog": VerdocsPasscodeDialog; "verdocs-portal": Omit & { [K in keyof VerdocsPortal & keyof VerdocsPortalAttributes]?: VerdocsPortal[K] } & { [K in keyof VerdocsPortal & keyof VerdocsPortalAttributes as `attr:${K}`]?: VerdocsPortalAttributes[K] } & { [K in keyof VerdocsPortal & keyof VerdocsPortalAttributes as `prop:${K}`]?: VerdocsPortal[K] }; "verdocs-preview": Omit & { [K in keyof VerdocsPreview & keyof VerdocsPreviewAttributes]?: VerdocsPreview[K] } & { [K in keyof VerdocsPreview & keyof VerdocsPreviewAttributes as `attr:${K}`]?: VerdocsPreviewAttributes[K] } & { [K in keyof VerdocsPreview & keyof VerdocsPreviewAttributes as `prop:${K}`]?: VerdocsPreview[K] }; "verdocs-progress-bar": Omit & { [K in keyof VerdocsProgressBar & keyof VerdocsProgressBarAttributes]?: VerdocsProgressBar[K] } & { [K in keyof VerdocsProgressBar & keyof VerdocsProgressBarAttributes as `attr:${K}`]?: VerdocsProgressBarAttributes[K] } & { [K in keyof VerdocsProgressBar & keyof VerdocsProgressBarAttributes as `prop:${K}`]?: VerdocsProgressBar[K] }; "verdocs-question-dialog": Omit & { [K in keyof VerdocsQuestionDialog & keyof VerdocsQuestionDialogAttributes]?: VerdocsQuestionDialog[K] } & { [K in keyof VerdocsQuestionDialog & keyof VerdocsQuestionDialogAttributes as `attr:${K}`]?: VerdocsQuestionDialogAttributes[K] } & { [K in keyof VerdocsQuestionDialog & keyof VerdocsQuestionDialogAttributes as `prop:${K}`]?: VerdocsQuestionDialog[K] }; "verdocs-quick-filter": Omit & { [K in keyof VerdocsQuickFilter & keyof VerdocsQuickFilterAttributes]?: VerdocsQuickFilter[K] } & { [K in keyof VerdocsQuickFilter & keyof VerdocsQuickFilterAttributes as `attr:${K}`]?: VerdocsQuickFilterAttributes[K] } & { [K in keyof VerdocsQuickFilter & keyof VerdocsQuickFilterAttributes as `prop:${K}`]?: VerdocsQuickFilter[K] }; "verdocs-quick-functions": VerdocsQuickFunctions; "verdocs-radio-button": Omit & { [K in keyof VerdocsRadioButton & keyof VerdocsRadioButtonAttributes]?: VerdocsRadioButton[K] } & { [K in keyof VerdocsRadioButton & keyof VerdocsRadioButtonAttributes as `attr:${K}`]?: VerdocsRadioButtonAttributes[K] } & { [K in keyof VerdocsRadioButton & keyof VerdocsRadioButtonAttributes as `prop:${K}`]?: VerdocsRadioButton[K] }; "verdocs-search-box": Omit & { [K in keyof VerdocsSearchBox & keyof VerdocsSearchBoxAttributes]?: VerdocsSearchBox[K] } & { [K in keyof VerdocsSearchBox & keyof VerdocsSearchBoxAttributes as `attr:${K}`]?: VerdocsSearchBoxAttributes[K] } & { [K in keyof VerdocsSearchBox & keyof VerdocsSearchBoxAttributes as `prop:${K}`]?: VerdocsSearchBox[K] }; "verdocs-search-tabs": VerdocsSearchTabs; "verdocs-select-input": Omit & { [K in keyof VerdocsSelectInput & keyof VerdocsSelectInputAttributes]?: VerdocsSelectInput[K] } & { [K in keyof VerdocsSelectInput & keyof VerdocsSelectInputAttributes as `attr:${K}`]?: VerdocsSelectInputAttributes[K] } & { [K in keyof VerdocsSelectInput & keyof VerdocsSelectInputAttributes as `prop:${K}`]?: VerdocsSelectInput[K] }; "verdocs-send": Omit & { [K in keyof VerdocsSend & keyof VerdocsSendAttributes]?: VerdocsSend[K] } & { [K in keyof VerdocsSend & keyof VerdocsSendAttributes as `attr:${K}`]?: VerdocsSendAttributes[K] } & { [K in keyof VerdocsSend & keyof VerdocsSendAttributes as `prop:${K}`]?: VerdocsSend[K] }; "verdocs-sign": Omit & { [K in keyof VerdocsSign & keyof VerdocsSignAttributes]?: VerdocsSign[K] } & { [K in keyof VerdocsSign & keyof VerdocsSignAttributes as `attr:${K}`]?: VerdocsSignAttributes[K] } & { [K in keyof VerdocsSign & keyof VerdocsSignAttributes as `prop:${K}`]?: VerdocsSign[K] }; "verdocs-sign-footer": Omit & { [K in keyof VerdocsSignFooter & keyof VerdocsSignFooterAttributes]?: VerdocsSignFooter[K] } & { [K in keyof VerdocsSignFooter & keyof VerdocsSignFooterAttributes as `attr:${K}`]?: VerdocsSignFooterAttributes[K] } & { [K in keyof VerdocsSignFooter & keyof VerdocsSignFooterAttributes as `prop:${K}`]?: VerdocsSignFooter[K] }; "verdocs-signature-dialog": Omit & { [K in keyof VerdocsSignatureDialog & keyof VerdocsSignatureDialogAttributes]?: VerdocsSignatureDialog[K] } & { [K in keyof VerdocsSignatureDialog & keyof VerdocsSignatureDialogAttributes as `attr:${K}`]?: VerdocsSignatureDialogAttributes[K] } & { [K in keyof VerdocsSignatureDialog & keyof VerdocsSignatureDialogAttributes as `prop:${K}`]?: VerdocsSignatureDialog[K] }; "verdocs-signing-progress": Omit & { [K in keyof VerdocsSigningProgress & keyof VerdocsSigningProgressAttributes]?: VerdocsSigningProgress[K] } & { [K in keyof VerdocsSigningProgress & keyof VerdocsSigningProgressAttributes as `attr:${K}`]?: VerdocsSigningProgressAttributes[K] } & { [K in keyof VerdocsSigningProgress & keyof VerdocsSigningProgressAttributes as `prop:${K}`]?: VerdocsSigningProgress[K] }; "verdocs-spinner": Omit & { [K in keyof VerdocsSpinner & keyof VerdocsSpinnerAttributes]?: VerdocsSpinner[K] } & { [K in keyof VerdocsSpinner & keyof VerdocsSpinnerAttributes as `attr:${K}`]?: VerdocsSpinnerAttributes[K] } & { [K in keyof VerdocsSpinner & keyof VerdocsSpinnerAttributes as `prop:${K}`]?: VerdocsSpinner[K] }; "verdocs-status-indicator": Omit & { [K in keyof VerdocsStatusIndicator & keyof VerdocsStatusIndicatorAttributes]?: VerdocsStatusIndicator[K] } & { [K in keyof VerdocsStatusIndicator & keyof VerdocsStatusIndicatorAttributes as `attr:${K}`]?: VerdocsStatusIndicatorAttributes[K] } & { [K in keyof VerdocsStatusIndicator & keyof VerdocsStatusIndicatorAttributes as `prop:${K}`]?: VerdocsStatusIndicator[K] }; "verdocs-switch": Omit & { [K in keyof VerdocsSwitch & keyof VerdocsSwitchAttributes]?: VerdocsSwitch[K] } & { [K in keyof VerdocsSwitch & keyof VerdocsSwitchAttributes as `attr:${K}`]?: VerdocsSwitchAttributes[K] } & { [K in keyof VerdocsSwitch & keyof VerdocsSwitchAttributes as `prop:${K}`]?: VerdocsSwitch[K] }; "verdocs-table": VerdocsTable; "verdocs-tabs": Omit & { [K in keyof VerdocsTabs & keyof VerdocsTabsAttributes]?: VerdocsTabs[K] } & { [K in keyof VerdocsTabs & keyof VerdocsTabsAttributes as `attr:${K}`]?: VerdocsTabsAttributes[K] } & { [K in keyof VerdocsTabs & keyof VerdocsTabsAttributes as `prop:${K}`]?: VerdocsTabs[K] }; "verdocs-template-attachments": Omit & { [K in keyof VerdocsTemplateAttachments & keyof VerdocsTemplateAttachmentsAttributes]?: VerdocsTemplateAttachments[K] } & { [K in keyof VerdocsTemplateAttachments & keyof VerdocsTemplateAttachmentsAttributes as `attr:${K}`]?: VerdocsTemplateAttachmentsAttributes[K] } & { [K in keyof VerdocsTemplateAttachments & keyof VerdocsTemplateAttachmentsAttributes as `prop:${K}`]?: VerdocsTemplateAttachments[K] }; "verdocs-template-build-tabs": Omit & { [K in keyof VerdocsTemplateBuildTabs & keyof VerdocsTemplateBuildTabsAttributes]?: VerdocsTemplateBuildTabs[K] } & { [K in keyof VerdocsTemplateBuildTabs & keyof VerdocsTemplateBuildTabsAttributes as `attr:${K}`]?: VerdocsTemplateBuildTabsAttributes[K] } & { [K in keyof VerdocsTemplateBuildTabs & keyof VerdocsTemplateBuildTabsAttributes as `prop:${K}`]?: VerdocsTemplateBuildTabs[K] }; "verdocs-template-card": VerdocsTemplateCard; "verdocs-template-create": Omit & { [K in keyof VerdocsTemplateCreate & keyof VerdocsTemplateCreateAttributes]?: VerdocsTemplateCreate[K] } & { [K in keyof VerdocsTemplateCreate & keyof VerdocsTemplateCreateAttributes as `attr:${K}`]?: VerdocsTemplateCreateAttributes[K] } & { [K in keyof VerdocsTemplateCreate & keyof VerdocsTemplateCreateAttributes as `prop:${K}`]?: VerdocsTemplateCreate[K] }; "verdocs-template-document-page": Omit & { [K in keyof VerdocsTemplateDocumentPage & keyof VerdocsTemplateDocumentPageAttributes]?: VerdocsTemplateDocumentPage[K] } & { [K in keyof VerdocsTemplateDocumentPage & keyof VerdocsTemplateDocumentPageAttributes as `attr:${K}`]?: VerdocsTemplateDocumentPageAttributes[K] } & { [K in keyof VerdocsTemplateDocumentPage & keyof VerdocsTemplateDocumentPageAttributes as `prop:${K}`]?: VerdocsTemplateDocumentPage[K] }; "verdocs-template-field-properties": Omit & { [K in keyof VerdocsTemplateFieldProperties & keyof VerdocsTemplateFieldPropertiesAttributes]?: VerdocsTemplateFieldProperties[K] } & { [K in keyof VerdocsTemplateFieldProperties & keyof VerdocsTemplateFieldPropertiesAttributes as `attr:${K}`]?: VerdocsTemplateFieldPropertiesAttributes[K] } & { [K in keyof VerdocsTemplateFieldProperties & keyof VerdocsTemplateFieldPropertiesAttributes as `prop:${K}`]?: VerdocsTemplateFieldProperties[K] }; "verdocs-template-fields": Omit & { [K in keyof VerdocsTemplateFields & keyof VerdocsTemplateFieldsAttributes]?: VerdocsTemplateFields[K] } & { [K in keyof VerdocsTemplateFields & keyof VerdocsTemplateFieldsAttributes as `attr:${K}`]?: VerdocsTemplateFieldsAttributes[K] } & { [K in keyof VerdocsTemplateFields & keyof VerdocsTemplateFieldsAttributes as `prop:${K}`]?: VerdocsTemplateFields[K] }; "verdocs-template-role-properties": Omit & { [K in keyof VerdocsTemplateRoleProperties & keyof VerdocsTemplateRolePropertiesAttributes]?: VerdocsTemplateRoleProperties[K] } & { [K in keyof VerdocsTemplateRoleProperties & keyof VerdocsTemplateRolePropertiesAttributes as `attr:${K}`]?: VerdocsTemplateRolePropertiesAttributes[K] } & { [K in keyof VerdocsTemplateRoleProperties & keyof VerdocsTemplateRolePropertiesAttributes as `prop:${K}`]?: VerdocsTemplateRoleProperties[K] }; "verdocs-template-roles": Omit & { [K in keyof VerdocsTemplateRoles & keyof VerdocsTemplateRolesAttributes]?: VerdocsTemplateRoles[K] } & { [K in keyof VerdocsTemplateRoles & keyof VerdocsTemplateRolesAttributes as `attr:${K}`]?: VerdocsTemplateRolesAttributes[K] } & { [K in keyof VerdocsTemplateRoles & keyof VerdocsTemplateRolesAttributes as `prop:${K}`]?: VerdocsTemplateRoles[K] }; "verdocs-template-settings": Omit & { [K in keyof VerdocsTemplateSettings & keyof VerdocsTemplateSettingsAttributes]?: VerdocsTemplateSettings[K] } & { [K in keyof VerdocsTemplateSettings & keyof VerdocsTemplateSettingsAttributes as `attr:${K}`]?: VerdocsTemplateSettingsAttributes[K] } & { [K in keyof VerdocsTemplateSettings & keyof VerdocsTemplateSettingsAttributes as `prop:${K}`]?: VerdocsTemplateSettings[K] }; "verdocs-template-star": VerdocsTemplateStar; "verdocs-template-tags": VerdocsTemplateTags; "verdocs-templates-list": Omit & { [K in keyof VerdocsTemplatesList & keyof VerdocsTemplatesListAttributes]?: VerdocsTemplatesList[K] } & { [K in keyof VerdocsTemplatesList & keyof VerdocsTemplatesListAttributes as `attr:${K}`]?: VerdocsTemplatesListAttributes[K] } & { [K in keyof VerdocsTemplatesList & keyof VerdocsTemplatesListAttributes as `prop:${K}`]?: VerdocsTemplatesList[K] }; "verdocs-text-input": Omit & { [K in keyof VerdocsTextInput & keyof VerdocsTextInputAttributes]?: VerdocsTextInput[K] } & { [K in keyof VerdocsTextInput & keyof VerdocsTextInputAttributes as `attr:${K}`]?: VerdocsTextInputAttributes[K] } & { [K in keyof VerdocsTextInput & keyof VerdocsTextInputAttributes as `prop:${K}`]?: VerdocsTextInput[K] }; "verdocs-toggle": Omit & { [K in keyof VerdocsToggle & keyof VerdocsToggleAttributes]?: VerdocsToggle[K] } & { [K in keyof VerdocsToggle & keyof VerdocsToggleAttributes as `attr:${K}`]?: VerdocsToggleAttributes[K] } & { [K in keyof VerdocsToggle & keyof VerdocsToggleAttributes as `prop:${K}`]?: VerdocsToggle[K] }; "verdocs-toggle-button": Omit & { [K in keyof VerdocsToggleButton & keyof VerdocsToggleButtonAttributes]?: VerdocsToggleButton[K] } & { [K in keyof VerdocsToggleButton & keyof VerdocsToggleButtonAttributes as `attr:${K}`]?: VerdocsToggleButtonAttributes[K] } & { [K in keyof VerdocsToggleButton & keyof VerdocsToggleButtonAttributes as `prop:${K}`]?: VerdocsToggleButton[K] }; "verdocs-toolbar-icon": Omit & { [K in keyof VerdocsToolbarIcon & keyof VerdocsToolbarIconAttributes]?: VerdocsToolbarIcon[K] } & { [K in keyof VerdocsToolbarIcon & keyof VerdocsToolbarIconAttributes as `attr:${K}`]?: VerdocsToolbarIconAttributes[K] } & { [K in keyof VerdocsToolbarIcon & keyof VerdocsToolbarIconAttributes as `prop:${K}`]?: VerdocsToolbarIcon[K] }; "verdocs-upload-dialog": Omit & { [K in keyof VerdocsUploadDialog & keyof VerdocsUploadDialogAttributes]?: VerdocsUploadDialog[K] } & { [K in keyof VerdocsUploadDialog & keyof VerdocsUploadDialogAttributes as `attr:${K}`]?: VerdocsUploadDialogAttributes[K] } & { [K in keyof VerdocsUploadDialog & keyof VerdocsUploadDialogAttributes as `prop:${K}`]?: VerdocsUploadDialog[K] }; "verdocs-view": Omit & { [K in keyof VerdocsView & keyof VerdocsViewAttributes]?: VerdocsView[K] } & { [K in keyof VerdocsView & keyof VerdocsViewAttributes as `attr:${K}`]?: VerdocsViewAttributes[K] } & { [K in keyof VerdocsView & keyof VerdocsViewAttributes as `prop:${K}`]?: VerdocsView[K] }; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ "verdocs-adopt-signature-dialog": LocalJSX.IntrinsicElements["verdocs-adopt-signature-dialog"] & JSXBase.HTMLAttributes; /** * 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 UI development, a visibility flag can force this component to never display. This * allows you to subscribe 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. * ```ts * console.log('Authentication state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ "verdocs-auth": LocalJSX.IntrinsicElements["verdocs-auth"] & JSXBase.HTMLAttributes; /** * Display a template building experience. Several event callbacks provide status updates to the * parent application to support interface updates. * ```ts * { console.log('Sent envelope from template', detail) }} * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ "verdocs-build": LocalJSX.IntrinsicElements["verdocs-build"] & JSXBase.HTMLAttributes; /** * A simple button, with consistent styling to other controls in the design system. * ```ts * * ``` */ "verdocs-button": LocalJSX.IntrinsicElements["verdocs-button"] & JSXBase.HTMLAttributes; /** * Display an icon button that triggers a drop-down panel that can display * arbitrary child content, such as metadata, forms, or other controls. * ```ts * *
Field Settings
*
*

* * *

*
* * ``` */ "verdocs-button-panel": LocalJSX.IntrinsicElements["verdocs-button-panel"] & JSXBase.HTMLAttributes; /** * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check * box for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * (this.thingEnabled = e.target.checked)} * /> * ``` */ "verdocs-checkbox": LocalJSX.IntrinsicElements["verdocs-checkbox"] & JSXBase.HTMLAttributes; /** * Render a simple error message. */ "verdocs-component-error": LocalJSX.IntrinsicElements["verdocs-component-error"] & JSXBase.HTMLAttributes; /** * Display a contact picker suitable for filling out Recipient objects when sending Envelopes. * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event. * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or * to always display the user's own contact record. * ```ts * console.log('Contact completed', e.detail)} * /> * ``` */ "verdocs-contact-picker": LocalJSX.IntrinsicElements["verdocs-contact-picker"] & JSXBase.HTMLAttributes; /** * Display a date input field. * ```ts * * ``` */ "verdocs-date-input": LocalJSX.IntrinsicElements["verdocs-date-input"] & JSXBase.HTMLAttributes; /** * Delegate signing responsibility to another recipient. */ "verdocs-delegate-dialog": LocalJSX.IntrinsicElements["verdocs-delegate-dialog"] & JSXBase.HTMLAttributes; /** * Display a simple dialog where the contents are provided via slots. */ "verdocs-dialog": LocalJSX.IntrinsicElements["verdocs-dialog"] & JSXBase.HTMLAttributes; /** * Display e-signing disclosures with options to delegate, decline or proceed. */ "verdocs-disclosure-dialog": LocalJSX.IntrinsicElements["verdocs-disclosure-dialog"] & JSXBase.HTMLAttributes; "verdocs-download-dialog": LocalJSX.IntrinsicElements["verdocs-download-dialog"] & JSXBase.HTMLAttributes; /** * 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 * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label. * ```ts * (console.log('OK clicked'))} * /> * ``` */ "verdocs-dropdown": LocalJSX.IntrinsicElements["verdocs-dropdown"] & JSXBase.HTMLAttributes; /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ "verdocs-envelope-document-page": LocalJSX.IntrinsicElements["verdocs-envelope-document-page"] & JSXBase.HTMLAttributes; /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ "verdocs-envelope-recipient-link": LocalJSX.IntrinsicElements["verdocs-envelope-recipient-link"] & JSXBase.HTMLAttributes; /** * Displays a list of recipients with options to get in-person signing links for each one. */ "verdocs-envelope-recipient-summary": LocalJSX.IntrinsicElements["verdocs-envelope-recipient-summary"] & JSXBase.HTMLAttributes; /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ "verdocs-envelope-sidebar": LocalJSX.IntrinsicElements["verdocs-envelope-sidebar"] & JSXBase.HTMLAttributes; /** * Displays a single recipient from an envelope, with the opportunity to copy an in-person * signing link for that recipient to use. */ "verdocs-envelope-update-recipient": LocalJSX.IntrinsicElements["verdocs-envelope-update-recipient"] & JSXBase.HTMLAttributes; /** * Displays a list of envelopes matching specified conditions. */ "verdocs-envelopes-list": LocalJSX.IntrinsicElements["verdocs-envelopes-list"] & JSXBase.HTMLAttributes; /** * Displays an attachment field. */ "verdocs-field-attachment": LocalJSX.IntrinsicElements["verdocs-field-attachment"] & JSXBase.HTMLAttributes; /** * Displays a checkbox. */ "verdocs-field-checkbox": LocalJSX.IntrinsicElements["verdocs-field-checkbox"] & JSXBase.HTMLAttributes; /** * Displays a date field. When tapped or clicked, the input element will display a date picker component. */ "verdocs-field-date": LocalJSX.IntrinsicElements["verdocs-field-date"] & JSXBase.HTMLAttributes; /** * Displays a dropdown field that allows the user to choose one of a list of options. */ "verdocs-field-dropdown": LocalJSX.IntrinsicElements["verdocs-field-dropdown"] & JSXBase.HTMLAttributes; /** * 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. */ "verdocs-field-initial": LocalJSX.IntrinsicElements["verdocs-field-initial"] & JSXBase.HTMLAttributes; /** * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as * input types like text and checkbox. */ "verdocs-field-payment": LocalJSX.IntrinsicElements["verdocs-field-payment"] & JSXBase.HTMLAttributes; /** * Displays a radio button. */ "verdocs-field-radio": LocalJSX.IntrinsicElements["verdocs-field-radio"] & JSXBase.HTMLAttributes; /** * 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. */ "verdocs-field-signature": LocalJSX.IntrinsicElements["verdocs-field-signature"] & JSXBase.HTMLAttributes; /** * Display a multi-line text input field. Reminder: the "position" of the field is specified * as the BOTTOM-LEFT corner. */ "verdocs-field-textarea": LocalJSX.IntrinsicElements["verdocs-field-textarea"] & JSXBase.HTMLAttributes; /** * Display a simple 1-line text input field. */ "verdocs-field-textbox": LocalJSX.IntrinsicElements["verdocs-field-textbox"] & JSXBase.HTMLAttributes; /** * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically * filled when the signer submits the document. */ "verdocs-field-timestamp": LocalJSX.IntrinsicElements["verdocs-field-timestamp"] & JSXBase.HTMLAttributes; /** * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should * provide the actual upload functionality. * ```ts * console.log('File Selected', e.detail)} /> * ``` */ "verdocs-file-chooser": LocalJSX.IntrinsicElements["verdocs-file-chooser"] & JSXBase.HTMLAttributes; "verdocs-flag": LocalJSX.IntrinsicElements["verdocs-flag"] & JSXBase.HTMLAttributes; /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ "verdocs-help-icon": LocalJSX.IntrinsicElements["verdocs-help-icon"] & JSXBase.HTMLAttributes; /** * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their initials with a mouse or tablet. */ "verdocs-initial-dialog": LocalJSX.IntrinsicElements["verdocs-initial-dialog"] & JSXBase.HTMLAttributes; /** * Prompt the user to confirm their identity with a PIN or a series of questions. */ "verdocs-kba-dialog": LocalJSX.IntrinsicElements["verdocs-kba-dialog"] & JSXBase.HTMLAttributes; /** * Animated loader placeholder. There are currently no configuration options for this control. * ```ts * * ``` */ "verdocs-loader": LocalJSX.IntrinsicElements["verdocs-loader"] & JSXBase.HTMLAttributes; /** * Display a menu panel in a left or right sidebar. The panel will animate (slide) * as it appears, and an background will be shown over the rest of the page. If * the background overlay is present, it can be clicked to dismiss the panel. * ```ts * *
Menu Panel
* * ``` */ "verdocs-menu-panel": LocalJSX.IntrinsicElements["verdocs-menu-panel"] & JSXBase.HTMLAttributes; /** * Display a dropdown that allows multiple options to be selected. 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 emit. * ```ts * {}} /> * ``` */ "verdocs-multiselect": LocalJSX.IntrinsicElements["verdocs-multiselect"] & JSXBase.HTMLAttributes; /** * Display a simple text dialog box with an Ok button. 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. */ "verdocs-ok-dialog": LocalJSX.IntrinsicElements["verdocs-ok-dialog"] & JSXBase.HTMLAttributes; /** * Display a small summary card describing an organization. * ```ts * * ``` */ "verdocs-organization-card": LocalJSX.IntrinsicElements["verdocs-organization-card"] & JSXBase.HTMLAttributes; /** * Prompt the user to confirm their identity with a one time code via email/SMS. */ "verdocs-otp-dialog": LocalJSX.IntrinsicElements["verdocs-otp-dialog"] & JSXBase.HTMLAttributes; /** * Display a simple pagination control with individual buttons to move through the data set. * ```ts * {setSelectedpage(e.detail.selectedPage)}} * /> * ``` */ "verdocs-pagination": LocalJSX.IntrinsicElements["verdocs-pagination"] & JSXBase.HTMLAttributes; /** * Prompt the user to confirm their identity with a passcode. */ "verdocs-passcode-dialog": LocalJSX.IntrinsicElements["verdocs-passcode-dialog"] & JSXBase.HTMLAttributes; /** * 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 *
*
* Tooltip Anchor * *
Tooltip
* *
*
* ``` */ "verdocs-portal": LocalJSX.IntrinsicElements["verdocs-portal"] & JSXBase.HTMLAttributes; /** * 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 * { console.log('SDK error', detail) } * /> * ``` */ "verdocs-preview": LocalJSX.IntrinsicElements["verdocs-preview"] & JSXBase.HTMLAttributes; /** * Display a simple progress bar in a style consistent with the design system. * ```ts * * ``` */ "verdocs-progress-bar": LocalJSX.IntrinsicElements["verdocs-progress-bar"] & JSXBase.HTMLAttributes; /** * Display a simple text dialog box with an Ok button. 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. */ "verdocs-question-dialog": LocalJSX.IntrinsicElements["verdocs-question-dialog"] & JSXBase.HTMLAttributes; /** * Display a drop-down menu of quick filter options. * ```ts * * ``` */ "verdocs-quick-filter": LocalJSX.IntrinsicElements["verdocs-quick-filter"] & JSXBase.HTMLAttributes; /** * Display quick-function buttons for creating templates and documents. * 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. */ "verdocs-quick-functions": LocalJSX.IntrinsicElements["verdocs-quick-functions"] & JSXBase.HTMLAttributes; /** * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is * designed to be used in signing experiences and contains settings that connect to template fields. This is just a * simple radio button for UI displays e.g. dialog boxes. * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange` * handler. Sample usage: * ```ts * { this.someProperty = 'val1' }} * disabled={false} * /> * ``` */ "verdocs-radio-button": LocalJSX.IntrinsicElements["verdocs-radio-button"] & JSXBase.HTMLAttributes; /** * Displays a customizable input box for search queries. * 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. */ "verdocs-search-box": LocalJSX.IntrinsicElements["verdocs-search-box"] & JSXBase.HTMLAttributes; "verdocs-search-tabs": LocalJSX.IntrinsicElements["verdocs-search-tabs"] & JSXBase.HTMLAttributes; /** * Display a combo box. This is just a standard HTML select 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 emit. * ```ts * {}} /> * ``` */ "verdocs-select-input": LocalJSX.IntrinsicElements["verdocs-select-input"] & JSXBase.HTMLAttributes; /** * Display a form to send a template to one or more recipients in an envelope for signing. * 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 * { console.log('Sending... Show a spinner...', detail) } * onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) } * onExit={({ detail }) => { console.log('Send cancelled.', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) } * /> * ``` */ "verdocs-send": LocalJSX.IntrinsicElements["verdocs-send"] & JSXBase.HTMLAttributes; /** * Display an envelope signing experience. This will display the envelope's attached * documents with signing fields overlaid on each page. * The component will attempt to initiate a signing session and load the specified * envelope. If successful, the recipient's fields will be enabled and the user will * be able to sign the envelope's attached documents. If not, an `sdkError` will be * thrown and the component will be blank/empty. To provide the best user experience, * applications should capture and handle this error to provide the user with * instructions/options for next steps based on the application's design and workflow. * Unlike other components, this will always create its own endpoint to manage the * session session. This endpoint will be included in event callbacks for the * convenience of host applications that may wish to make server calls using the * signer's credentials once signing is complete (e.g. to obtain copies of * the signed attachments.) * ```ts * console.log('Envelope updated state:', detail) } * onSdkError={({ detail }) => { console.log('SDK error', detail) }} * /> * ``` */ "verdocs-sign": LocalJSX.IntrinsicElements["verdocs-sign"] & JSXBase.HTMLAttributes; /** * Typically presented by the `verdocs-sign` component. Displays a footer toolbar * with a few convenience functions for the envelope recipient to use. */ "verdocs-sign-footer": LocalJSX.IntrinsicElements["verdocs-sign-footer"] & JSXBase.HTMLAttributes; /** * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image * based on their full name, or by hand-drawing their signature with a mouse or tablet. */ "verdocs-signature-dialog": LocalJSX.IntrinsicElements["verdocs-signature-dialog"] & JSXBase.HTMLAttributes; "verdocs-signing-progress": LocalJSX.IntrinsicElements["verdocs-signing-progress"] & JSXBase.HTMLAttributes; /** * Display a small loading spinner. * ```ts * * ``` */ "verdocs-spinner": LocalJSX.IntrinsicElements["verdocs-spinner"] & JSXBase.HTMLAttributes; /** * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either * directly as a status field or the whole document object may be passed in. * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable * to display a popup panel with per-recipient status data. * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value. */ "verdocs-status-indicator": LocalJSX.IntrinsicElements["verdocs-status-indicator"] & JSXBase.HTMLAttributes; /** * Displays a toggle switch * ```ts * * ``` */ "verdocs-switch": LocalJSX.IntrinsicElements["verdocs-switch"] & JSXBase.HTMLAttributes; /** * Display a simple table of data. Columns and data cells may have custom renderers defined to * support creating interactive table layouts. * ```ts * * ``` */ "verdocs-table": LocalJSX.IntrinsicElements["verdocs-table"] & JSXBase.HTMLAttributes; /** * 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": LocalJSX.IntrinsicElements["verdocs-tabs"] & JSXBase.HTMLAttributes; /** * Displays an edit form that allows the user to view, add, or remove a template's attachments. * Note that an active session and valid template ID must be supplied. */ "verdocs-template-attachments": LocalJSX.IntrinsicElements["verdocs-template-attachments"] & JSXBase.HTMLAttributes; /** * Display a set of tabs for the template builder. */ "verdocs-template-build-tabs": LocalJSX.IntrinsicElements["verdocs-template-build-tabs"] & JSXBase.HTMLAttributes; /** * Displays a summary of a template */ "verdocs-template-card": LocalJSX.IntrinsicElements["verdocs-template-card"] & JSXBase.HTMLAttributes; /** * Displays a file upload mechanism suitable for the first step of creating a template. * This is typically the first step in a template creation workflow. */ "verdocs-template-create": LocalJSX.IntrinsicElements["verdocs-template-create"] & JSXBase.HTMLAttributes; /** * Represents one document page. This is primarily a layout container used to coordinate positions of * page-related layers such as the page itself, signature fields, etc. It is not intended to be used * on its own as an individual component. */ "verdocs-template-document-page": LocalJSX.IntrinsicElements["verdocs-template-document-page"] & JSXBase.HTMLAttributes; /** * Displays an edit form that allows the user to adjust a field's settings. */ "verdocs-template-field-properties": LocalJSX.IntrinsicElements["verdocs-template-field-properties"] & JSXBase.HTMLAttributes; /** * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to * present all of the required controls, so it is primarily intended to be used in desktop environments. */ "verdocs-template-fields": LocalJSX.IntrinsicElements["verdocs-template-fields"] & JSXBase.HTMLAttributes; /** * Present an editing form suitable for adjusting template-role properties. */ "verdocs-template-role-properties": LocalJSX.IntrinsicElements["verdocs-template-role-properties"] & JSXBase.HTMLAttributes; /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ "verdocs-template-roles": LocalJSX.IntrinsicElements["verdocs-template-roles"] & JSXBase.HTMLAttributes; /** * Display an edit form that allows the user to adjust a template's roles and workflow. */ "verdocs-template-settings": LocalJSX.IntrinsicElements["verdocs-template-settings"] & JSXBase.HTMLAttributes; /** * Displays a clickable star that allows users to mark frequently-used templates. */ "verdocs-template-star": LocalJSX.IntrinsicElements["verdocs-template-star"] & JSXBase.HTMLAttributes; /** * Displays a message listing a template's tags. */ "verdocs-template-tags": LocalJSX.IntrinsicElements["verdocs-template-tags"] & JSXBase.HTMLAttributes; /** * Display a list of templates in the caller's account. * ```ts * console.log('View template:', detail) } * /> * ``` */ "verdocs-templates-list": LocalJSX.IntrinsicElements["verdocs-templates-list"] & JSXBase.HTMLAttributes; /** * 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 emit. * ```ts * * ``` */ "verdocs-text-input": LocalJSX.IntrinsicElements["verdocs-text-input"] & JSXBase.HTMLAttributes; /** * Displays a label and a set of buttons, also allowing a default selection of a button. * ```ts * * ``` */ "verdocs-toggle": LocalJSX.IntrinsicElements["verdocs-toggle"] & JSXBase.HTMLAttributes; /** * Displays a single button that can be toggled on or off by clicking it. * ```ts * * ``` */ "verdocs-toggle-button": LocalJSX.IntrinsicElements["verdocs-toggle-button"] & JSXBase.HTMLAttributes; /** * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text. * ```ts * * ``` */ "verdocs-toolbar-icon": LocalJSX.IntrinsicElements["verdocs-toolbar-icon"] & JSXBase.HTMLAttributes; /** * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by * callers with a variety of workflows. Instead, data about the chosen file will be passed to the * caller via the onNext event handler. A delete event is also exposed to delete existing attachments. * To represent an existing attachment, set the existingFile property. */ "verdocs-upload-dialog": LocalJSX.IntrinsicElements["verdocs-upload-dialog"] & JSXBase.HTMLAttributes; "verdocs-view": LocalJSX.IntrinsicElements["verdocs-view"] & JSXBase.HTMLAttributes; } } }