legalesign-document-viewer 0.3.9 → 0.4.1

package/dist/ls-document-viewer/{p-14049937.entry.js → p-fbb241f1.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as n,h as t}from"./p-BzcAlD18.js";const l="* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";const i=class{constructor(t){e(this,t);this.valueChange=n(this,"valueChange")}name;fieldId;label;as="text";value;placeholder;descriptionText;errorText;aria;inputRef;infoTooltipText;hoverTooltipText;disabled;extraLabel="none";required;valid;dirty;count;countMax;buttonClick;buttonIcon;labelIcon;fieldIcon;valueChange;changeHandler(e){this.valueChange.emit(e)}_value;valueWatcher(e){this._value=e;console.log(e)}componentWillLoad(){this.valueWatcher(this?.value?.toString())}render(){const{name:e,fieldId:n,label:l,as:i,value:a,placeholder:o,descriptionText:r,errorText:d,aria:c,infoTooltipText:s,disabled:f,extraLabel:b,valid:u,dirty:m,count:p,countMax:h,buttonClick:x,buttonIcon:y,fieldIcon:g,labelIcon:v}=this;const I=a&&a.toString().length>h?"formfield-count-error":"formfield-count";return t("host",{key:"19aa13876ebe0c20b2ec0ec83c749e4119a8100e",class:"formfield-host"},l?.length>1||b!=="none"&&t("div",{key:"e1dcf69ba8c3f9ec62376d9e303737eebf92da0a",class:"formfield-top-elements"},t("div",{key:"ea50d721ef6a77e7d67a7304cd758921cc3e1866",class:"formfield-left-side"},v&&t("ls-icon",{key:"267f18033109fd18bbfef712471e5ce81f7351d1",name:v}),t("label",{key:"3a87fe6e53db73708040d03a8dd78758b89b1771",htmlFor:e,class:"formfield-label"},l),s&&t("ls-icon",{key:"ea94d57fd409df19e6808fc94bbdabee51cf4410",name:"information-circle"})),b==="optional"?t("ls-label",{text:"Optional",colour:"gray",type:"low"}):b==="required"?t("ls-label",{text:"Required",colour:"gray",type:"low"}):""),i==="text"?t("ls-text-input",{id:n,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g,onValueChange:e=>{this.changeHandler(e.detail)}}):i==="select"?t("ls-select-input",{id:e,name:e,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g},t("slot",null)):i==="radio"?t("ls-radio-input",{radioId:l,label:a?.toString(),icon:g,name:e,disabled:f}):i==="textarea"?t("ls-textarea-input",{id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="password"?t("ls-text-input",{type:"password",id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="displayonly"?t("ls-text-input",{type:"displayonly",id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="number"?t("ls-number-input",{type:"ls",id:e,name:e,value:Number(a),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:f,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):t("p",null,"placeholder"),d||p||h||r&&t("div",{key:"6a17a0eb6234a6beec0dda3e4ccd06a16d95b17f",class:"formfield-bottom-elements"},d&&!u?t("p",{class:"formfield-error-text"},d):r?t("p",{class:"formfield-description-text"},r):"",p&&t("div",{key:"3e579b2aee967c2a6ea6973926afa2f3a33535e1",class:"formfield-count-container"},t("p",{key:"c47b78ed6863386f9b933bde960c5252a2facca8",class:I},a?.toString()?.length),h>0&&t("div",{key:"19fb3b5e4fb2467c6aae75c7f8c52802edc5229e",class:I},t("p",{key:"e68d2d8abb15be6b1f66fc085d8b5df73f083911"},"/"),t("p",{key:"11d569dc63c78755822f54ab5c08fa63b898ce12"},h)))))}static get watchers(){return{value:["valueWatcher"]}}};i.style=l;export{i as ls_formfield};
-//# sourceMappingURL=p-14049937.entry.js.map
+import{r as e,c as n,h as t}from"./p-BzcAlD18.js";const l="* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";const i=class{constructor(t){e(this,t);this.valueChange=n(this,"valueChange")}name;fieldId;label;as="text";value;placeholder;descriptionText;errorText;aria;inputRef;infoTooltipText;hoverTooltipText;disabled;extraLabel="none";required;valid;dirty;count;countMax;buttonClick;buttonIcon;labelIcon;fieldIcon;valueChange;changeHandler(e){this.valueChange.emit(e)}_value;valueWatcher(e){this._value=e;console.log(e)}componentWillLoad(){this.valueWatcher(this?.value?.toString())}render(){const{name:e,fieldId:n,label:l,as:i,value:a,placeholder:o,descriptionText:r,errorText:d,aria:c,infoTooltipText:f,disabled:s,extraLabel:b,valid:u,dirty:m,count:p,countMax:h,buttonClick:x,buttonIcon:y,fieldIcon:g,labelIcon:v}=this;const I=a&&a.toString().length>h?"formfield-count-error":"formfield-count";return t("host",{key:"abb10c40dccbc1df9073bb8135933b50c7addf3f",class:"formfield-host"},l?.length>1||b!=="none"&&t("div",{key:"b8f8cec278fc8b3e224dd4d4cb2a7e3381f1fc53",class:"formfield-top-elements"},t("div",{key:"090b6ce8001334d8ea27ee503bb80abdb4458765",class:"formfield-left-side"},v&&t("ls-icon",{key:"ae0d3022a53947e3948deeb160b1922f9532f662",name:v}),t("label",{key:"63dfbcd3acfd52aa6f977755734071b320ffe717",htmlFor:e,class:"formfield-label"},l),f&&t("ls-icon",{key:"266a2155a80ccc3e51d5474896fc2250964dff1e",name:"information-circle"})),b==="optional"?t("ls-label",{text:"Optional",colour:"gray",type:"low"}):b==="required"?t("ls-label",{text:"Required",colour:"gray",type:"low"}):""),i==="text"?t("ls-text-input",{id:n,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g,onValueChange:e=>{this.changeHandler(e.detail)}}):i==="select"?t("ls-select-input",{id:e,name:e,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g},t("slot",null)):i==="radio"?t("ls-radio-input",{radioId:l,label:a?.toString(),icon:g,name:e,disabled:s}):i==="textarea"?t("ls-textarea-input",{id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="password"?t("ls-text-input",{type:"password",id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="displayonly"?t("ls-text-input",{type:"displayonly",id:e,name:e,value:a?.toString(),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):i==="number"?t("ls-number-input",{type:"ls",id:e,name:e,value:Number(a),countMax:h,placeholder:o,"aria-label":c,required:b==="required",disabled:s,valid:u,dirty:m,buttonIcon:y,buttonClick:x,fieldIcon:g}):t("p",null,"placeholder"),d||p||h||r&&t("div",{key:"cc8ffdb0f955baab2627011dc3ce756d9f3fb755",class:"formfield-bottom-elements"},d&&!u?t("p",{class:"formfield-error-text"},d):r?t("p",{class:"formfield-description-text"},r):"",p&&t("div",{key:"b6d2515988fe6022fbc5dbf353650ad03fa06ed0",class:"formfield-count-container"},t("p",{key:"ac29508788d292a28e13a88f2dfd0f97bfc54120",class:I},a?.toString()?.length),h>0&&t("div",{key:"c6da1cc6b8e8970326344ccc37fc7055c36603c7",class:I},t("p",{key:"68250a9de3633f0a9d0f64006016663d5e4f9414"},"/"),t("p",{key:"4c541ba2dff8b2cdbc9b49830ed46e871cc2bd1f"},h)))))}static get watchers(){return{value:["valueWatcher"]}}};i.style=l;export{i as ls_formfield};
+//# sourceMappingURL=p-fbb241f1.entry.js.map

package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts

@@ -59,10 +59,11 @@ export declare class LsDocumentViewer {
      */
     templateid: string;
     /**
-     * A JSON string containing the signer details. Only used in COMPOSE mode.
+     * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
      */
-    signers: string;
+    recipients: string;
+    _recipients: any[];
     zoom: number;
     pageNum: number;
     pageCount: number;
@@ -80,12 +81,11 @@ export declare class LsDocumentViewer {
      */
     mode: 'preview' | 'editor' | 'compose';
     modeHandler(_newMode: any, _oldMode: any): void;
-    tableViewHandler(_newMode: any, _oldMode: any): void;
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
      */
-    manager: 'document' | 'toolbox' | 'participant';
+    manager: 'document' | 'toolbox' | 'participant' | 'recipient' | 'validation';
     /**
      * Shows the table view of fields rather than the preview.
      * {boolean}
@@ -95,12 +95,7 @@ export declare class LsDocumentViewer {
      * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
      * {string}
      */
-    filterToolbox?: string;
-    /**
-     * Whether the top toolbar is displayed.
-     * {boolean}
-     */
-    showtoolbar?: boolean;
+    filtertoolbox?: string;
     /**
      * Whether the bottom statusbar is displayed.
      * {boolean}
@@ -111,11 +106,6 @@ export declare class LsDocumentViewer {
      * {boolean}
      */
     showpagepreview?: boolean;
-    /**
-     * Whether or not the fields list is expanded.
-     * {boolean}
-     */
-    expandfields?: boolean;
     /**
      * Whether the right panel (which can be default field properties or custom panel) is
      * displayed.
@@ -145,6 +135,7 @@ export declare class LsDocumentViewer {
         type: LSApiRoleType;
         parent?: string | null;
     }>): void;
+    updateSigner(event: CustomEvent<number>): void;
     selectFieldsHandler(event: CustomEvent<LSApiElement[]>): void;
     roleHandler(event: CustomEvent<number>): void;
     /**

package/dist/types/components/ls-feature-column/ls-feature-column.d.ts

@@ -5,13 +5,13 @@ export declare class LsFeatureColoumn {
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
      */
-    manager: 'document' | 'toolbox' | 'participant';
+    manager: 'document' | 'toolbox' | 'participant' | 'recipient' | 'validation';
     /**
      * The mode that document viewer is being used in.
      * {'preview' | 'editor' | 'custom'}
      */
     mode: 'preview' | 'editor' | 'compose';
-    manage: EventEmitter<'document' | 'toolbox' | 'participant'>;
+    manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-icon/ls-icon.d.ts

@@ -2,6 +2,7 @@ import { Icon, IconEnum } from '../../types/Icon';
 export declare class LsIcon {
     name?: Icon;
     solid?: boolean;
+    color?: string;
     size?: string;
     customStyle?: {
         [key: string]: string;

package/dist/types/components/ls-recipient-card/ls-recipient-card.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LSApiRecipient } from '../../types/LSApiRecipient';
+import { LSApiTemplate } from '../../components';
+import { ValidationError } from '../../types/ValidationError';
+export declare class LsRecipientCard {
+    /**
+     * The initial template data, including the link for background PDF. See README and
+     * example for correct GraphQL query and data structure.
+     * {LSApiTemplate}
+     */
+    recipient: LSApiRecipient;
+    activeRecipient: number;
+    template: LSApiTemplate;
+    isHovered: boolean;
+    private setIsHovered;
+    validationErrors: ValidationError[];
+    /**
+     * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
+     * {string}
+     */
+    filtertoolbox?: string;
+    changeSigner: EventEmitter<number>;
+    showTool(fieldFormType: string): boolean;
+    render(): any;
+}

package/dist/types/components/ls-recipient-manager/ls-recipient-manager.d.ts

@@ -0,0 +1,3 @@
+export declare class LsRecipientManager {
+    render(): any;
+}

package/dist/types/components/ls-toolbox-field/ls-toolbox-field.d.ts

@@ -9,6 +9,7 @@ export declare class LsToolboxField {
     elementType: string;
     validation: number;
     fixedAspect: number | null;
+    redDot: boolean;
     /**
      * The text to display for this field type.
      */

package/dist/types/components/ls-validation-manager/ls-validation-manager.d.ts

@@ -0,0 +1,9 @@
+import { ValidationError } from '../../types/ValidationError';
+export declare class LsValidationManager {
+    /**
+     * The template information (as JSON).
+     * {LSApiTemplate}
+     */
+    validationErrors: ValidationError[];
+    render(): any;
+}

package/dist/types/components/ls-validation-tag/ls-validation-tag.d.ts

@@ -3,6 +3,7 @@ export declare class LsValidationTag {
     status: string;
     validationErrors: ValidationError[];
     isExpanded: boolean;
+    type: 'compose' | 'default';
     showDropDown: boolean;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { Icon as Icon1, LSApiElement as LSApiElement1, LSApiTemplate as LSApiTem
 import { LsDocumentViewer } from "./components/ls-document-viewer/ls-document-viewer";
 import { Icon } from "./types/Icon";
 import { LSApiRole, LSApiRoleType } from "./types/LSApiRole";
+import { LSApiRecipient } from "./types/LSApiRecipient";
 import { ValidationError } from "./types/ValidationError";
 export { LSApiTemplate } from "./types/LSApiTemplate";
 export { LSMutateEvent } from "./types/LSMutateEvent";
@@ -20,6 +21,7 @@ export { Icon as Icon1, LSApiElement as LSApiElement1, LSApiTemplate as LSApiTem
 export { LsDocumentViewer } from "./components/ls-document-viewer/ls-document-viewer";
 export { Icon } from "./types/Icon";
 export { LSApiRole, LSApiRoleType } from "./types/LSApiRole";
+export { LSApiRecipient } from "./types/LSApiRecipient";
 export { ValidationError } from "./types/ValidationError";
 export namespace Components {
     interface LsComposeManager {
@@ -40,6 +42,7 @@ export namespace Components {
      * Alex Weinle
      */
     interface LsDocumentViewer {
+        "_recipients": any[];
         /**
           * Shows the table view of fields rather than the preview. {boolean}
           * @default false
@@ -49,22 +52,17 @@ export namespace Components {
           * This will override the default production graphql endpoint. Almost exclusively used for internal development. {string}
          */
         "endpoint": string;
-        /**
-          * Whether or not the fields list is expanded. {boolean}
-          * @default false
-         */
-        "expandfields"?: boolean;
         /**
           * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list. {string}
           * @default null
          */
-        "filterToolbox"?: string;
+        "filtertoolbox"?: string;
         "groupInfo": any;
         /**
           * Determines / sets which of the far left 'managers' is active. {'document' | 'toolbox' | 'participant' }
           * @default 'toolbox'
          */
-        "manager": 'document' | 'toolbox' | 'participant';
+        "manager": 'document' | 'toolbox' | 'participant' | 'recipient' | 'validation';
         /**
           * An ease of use property that will arrange document-viewer appropraitely. {'preview' | 'editor' | 'custom'}
           * @default 'editor'
@@ -91,6 +89,10 @@ export namespace Components {
           * @default false
          */
         "readonly"?: boolean;
+        /**
+          * A JSON string containing the recipient details. Only used in COMPOSE mode. {string}
+         */
+        "recipients": string;
         /**
           * Page and field resize on zoom change
          */
@@ -110,19 +112,10 @@ export namespace Components {
           * @default false
          */
         "showtableview"?: boolean;
-        /**
-          * Whether the top toolbar is displayed. {boolean}
-          * @default false
-         */
-        "showtoolbar"?: boolean;
         /**
           * @default 0
          */
         "signer": number;
-        /**
-          * A JSON string containing the signer details. Only used in COMPOSE mode. {string}
-         */
-        "signers": string;
         /**
           * The initial template data, including the link for background PDF. See README and example for correct GraphQL query and data structure. {LSApiTemplate}
          */
@@ -178,7 +171,7 @@ export namespace Components {
           * Determines / sets which of the far left 'managers' is active. {'document' | 'toolbox' | 'participant' }
           * @default 'toolbox'
          */
-        "manager": 'document' | 'toolbox' | 'participant';
+        "manager": 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation';
         /**
           * The mode that document viewer is being used in. {'preview' | 'editor' | 'custom'}
           * @default 'editor'
@@ -312,6 +305,10 @@ export namespace Components {
         "expanded": boolean;
     }
     interface LsIcon {
+        /**
+          * @default "#000000"
+         */
+        "color"?: string;
         "customStyle"?: { [key: string]: string };
         "name"?: Icon;
         /**
@@ -413,6 +410,25 @@ export namespace Components {
         "name"?: string;
         "radioId": string;
     }
+    interface LsRecipientCard {
+        "activeRecipient": number;
+        /**
+          * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list. {string}
+          * @default null
+         */
+        "filtertoolbox"?: string;
+        /**
+          * The initial template data, including the link for background PDF. See README and example for correct GraphQL query and data structure. {LSApiTemplate}
+         */
+        "recipient": LSApiRecipient;
+        "template": LSApiTemplate1;
+        /**
+          * @default []
+         */
+        "validationErrors": ValidationError[];
+    }
+    interface LsRecipientManager {
+    }
     interface LsSelectInput {
         "aria"?: string;
         "buttonClick"?: any;
@@ -526,6 +542,10 @@ export namespace Components {
           * The text to display for this field type.
          */
         "label": string;
+        /**
+          * @default false
+         */
+        "redDot": boolean;
         /**
           * The signer color of the element
           * @default 0
@@ -554,6 +574,12 @@ export namespace Components {
         "tooltipText": string;
         "tooltipTitle": string;
     }
+    interface LsValidationManager {
+        /**
+          * The template information (as JSON). {LSApiTemplate}
+         */
+        "validationErrors": ValidationError[];
+    }
     interface LsValidationTag {
         /**
           * @default false
@@ -567,6 +593,10 @@ export namespace Components {
           * @default 'Invalid'
          */
         "status": string;
+        /**
+          * @default 'default'
+         */
+        "type": 'compose' | 'default';
         /**
           * @default []
          */
@@ -645,6 +675,10 @@ export interface LsParticipantSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLsParticipantSelectElement;
 }
+export interface LsRecipientCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLsRecipientCardElement;
+}
 export interface LsTextInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLsTextInputElement;
@@ -737,7 +771,7 @@ declare global {
         new (): HTMLLsEditorTableElement;
     };
     interface HTMLLsFeatureColumnElementEventMap {
-        "manage": 'document' | 'toolbox' | 'participant';
+        "manage": 'document' | 'toolbox' | 'participant' | 'recipient' | 'validation';
     }
     interface HTMLLsFeatureColumnElement extends Components.LsFeatureColumn, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLsFeatureColumnElementEventMap>(type: K, listener: (this: HTMLLsFeatureColumnElement, ev: LsFeatureColumnCustomEvent<HTMLLsFeatureColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1134,6 +1168,29 @@ declare global {
         prototype: HTMLLsRadioInputElement;
         new (): HTMLLsRadioInputElement;
     };
+    interface HTMLLsRecipientCardElementEventMap {
+        "changeSigner": number;
+    }
+    interface HTMLLsRecipientCardElement extends Components.LsRecipientCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLsRecipientCardElementEventMap>(type: K, listener: (this: HTMLLsRecipientCardElement, ev: LsRecipientCardCustomEvent<HTMLLsRecipientCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLsRecipientCardElementEventMap>(type: K, listener: (this: HTMLLsRecipientCardElement, ev: LsRecipientCardCustomEvent<HTMLLsRecipientCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLsRecipientCardElement: {
+        prototype: HTMLLsRecipientCardElement;
+        new (): HTMLLsRecipientCardElement;
+    };
+    interface HTMLLsRecipientManagerElement extends Components.LsRecipientManager, HTMLStencilElement {
+    }
+    var HTMLLsRecipientManagerElement: {
+        prototype: HTMLLsRecipientManagerElement;
+        new (): HTMLLsRecipientManagerElement;
+    };
     interface HTMLLsSelectInputElement extends Components.LsSelectInput, HTMLStencilElement {
     }
     var HTMLLsSelectInputElement: {
@@ -1206,13 +1263,13 @@ declare global {
     };
     interface HTMLLsToolboxFieldElementEventMap {
         "fieldTypeSelected": {
-    label: string
-    elementType: string
-    defaultHeight: number
-    defaultWidth: number
-    formElementType: string
-    validation: number
-    fixedAspect: number | null
+    label: string;
+    elementType: string;
+    defaultHeight: number;
+    defaultWidth: number;
+    formElementType: string;
+    validation: number;
+    fixedAspect: number | null;
   };
     }
     interface HTMLLsToolboxFieldElement extends Components.LsToolboxField, HTMLStencilElement {
@@ -1235,6 +1292,12 @@ declare global {
         prototype: HTMLLsTooltipElement;
         new (): HTMLLsTooltipElement;
     };
+    interface HTMLLsValidationManagerElement extends Components.LsValidationManager, HTMLStencilElement {
+    }
+    var HTMLLsValidationManagerElement: {
+        prototype: HTMLLsValidationManagerElement;
+        new (): HTMLLsValidationManagerElement;
+    };
     interface HTMLLsValidationTagElement extends Components.LsValidationTag, HTMLStencilElement {
     }
     var HTMLLsValidationTagElement: {
@@ -1283,6 +1346,8 @@ declare global {
         "ls-participant-select": HTMLLsParticipantSelectElement;
         "ls-props-section": HTMLLsPropsSectionElement;
         "ls-radio-input": HTMLLsRadioInputElement;
+        "ls-recipient-card": HTMLLsRecipientCardElement;
+        "ls-recipient-manager": HTMLLsRecipientManagerElement;
         "ls-select-input": HTMLLsSelectInputElement;
         "ls-statusbar": HTMLLsStatusbarElement;
         "ls-text-input": HTMLLsTextInputElement;
@@ -1291,6 +1356,7 @@ declare global {
         "ls-toolbar": HTMLLsToolbarElement;
         "ls-toolbox-field": HTMLLsToolboxFieldElement;
         "ls-tooltip": HTMLLsTooltipElement;
+        "ls-validation-manager": HTMLLsValidationManagerElement;
         "ls-validation-tag": HTMLLsValidationTagElement;
     }
 }
@@ -1315,6 +1381,7 @@ declare namespace LocalJSX {
      * Alex Weinle
      */
     interface LsDocumentViewer {
+        "_recipients"?: any[];
         /**
           * Shows the table view of fields rather than the preview. {boolean}
           * @default false
@@ -1324,22 +1391,17 @@ declare namespace LocalJSX {
           * This will override the default production graphql endpoint. Almost exclusively used for internal development. {string}
          */
         "endpoint"?: string;
-        /**
-          * Whether or not the fields list is expanded. {boolean}
-          * @default false
-         */
-        "expandfields"?: boolean;
         /**
           * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list. {string}
           * @default null
          */
-        "filterToolbox"?: string;
+        "filtertoolbox"?: string;
         "groupInfo"?: any;
         /**
           * Determines / sets which of the far left 'managers' is active. {'document' | 'toolbox' | 'participant' }
           * @default 'toolbox'
          */
-        "manager"?: 'document' | 'toolbox' | 'participant';
+        "manager"?: 'document' | 'toolbox' | 'participant' | 'recipient' | 'validation';
         /**
           * An ease of use property that will arrange document-viewer appropraitely. {'preview' | 'editor' | 'custom'}
           * @default 'editor'
@@ -1363,6 +1425,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "readonly"?: boolean;
+        /**
+          * A JSON string containing the recipient details. Only used in COMPOSE mode. {string}
+         */
+        "recipients"?: string;
         /**
           * Whether the page previewvertical ribbon will be shown {boolean}
           * @default false
@@ -1378,19 +1444,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "showtableview"?: boolean;
-        /**
-          * Whether the top toolbar is displayed. {boolean}
-          * @default false
-         */
-        "showtoolbar"?: boolean;
         /**
           * @default 0
          */
         "signer"?: number;
-        /**
-          * A JSON string containing the signer details. Only used in COMPOSE mode. {string}
-         */
-        "signers"?: string;
         /**
           * The initial template data, including the link for background PDF. See README and example for correct GraphQL query and data structure. {LSApiTemplate}
          */
@@ -1444,13 +1501,13 @@ declare namespace LocalJSX {
           * Determines / sets which of the far left 'managers' is active. {'document' | 'toolbox' | 'participant' }
           * @default 'toolbox'
          */
-        "manager"?: 'document' | 'toolbox' | 'participant';
+        "manager"?: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation';
         /**
           * The mode that document viewer is being used in. {'preview' | 'editor' | 'custom'}
           * @default 'editor'
          */
         "mode"?: 'preview' | 'editor' | 'compose';
-        "onManage"?: (event: LsFeatureColumnCustomEvent<'document' | 'toolbox' | 'participant'>) => void;
+        "onManage"?: (event: LsFeatureColumnCustomEvent<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>) => void;
     }
     interface LsFieldAlignment {
         "dataItem"?: LSApiElement1[];
@@ -1601,6 +1658,10 @@ declare namespace LocalJSX {
         "expanded"?: boolean;
     }
     interface LsIcon {
+        /**
+          * @default "#000000"
+         */
+        "color"?: string;
         "customStyle"?: { [key: string]: string };
         "name"?: Icon;
         /**
@@ -1711,6 +1772,26 @@ declare namespace LocalJSX {
         "name"?: string;
         "radioId"?: string;
     }
+    interface LsRecipientCard {
+        "activeRecipient"?: number;
+        /**
+          * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list. {string}
+          * @default null
+         */
+        "filtertoolbox"?: string;
+        "onChangeSigner"?: (event: LsRecipientCardCustomEvent<number>) => void;
+        /**
+          * The initial template data, including the link for background PDF. See README and example for correct GraphQL query and data structure. {LSApiTemplate}
+         */
+        "recipient"?: LSApiRecipient;
+        "template"?: LSApiTemplate1;
+        /**
+          * @default []
+         */
+        "validationErrors"?: ValidationError[];
+    }
+    interface LsRecipientManager {
+    }
     interface LsSelectInput {
         "aria"?: string;
         "buttonClick"?: any;
@@ -1829,14 +1910,18 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         "onFieldTypeSelected"?: (event: LsToolboxFieldCustomEvent<{
-    label: string
-    elementType: string
-    defaultHeight: number
-    defaultWidth: number
-    formElementType: string
-    validation: number
-    fixedAspect: number | null
+    label: string;
+    elementType: string;
+    defaultHeight: number;
+    defaultWidth: number;
+    formElementType: string;
+    validation: number;
+    fixedAspect: number | null;
   }>) => void;
+        /**
+          * @default false
+         */
+        "redDot"?: boolean;
         /**
           * The signer color of the element
           * @default 0
@@ -1864,6 +1949,12 @@ declare namespace LocalJSX {
         "tooltipText"?: string;
         "tooltipTitle"?: string;
     }
+    interface LsValidationManager {
+        /**
+          * The template information (as JSON). {LSApiTemplate}
+         */
+        "validationErrors"?: ValidationError[];
+    }
     interface LsValidationTag {
         /**
           * @default false
@@ -1877,6 +1968,10 @@ declare namespace LocalJSX {
           * @default 'Invalid'
          */
         "status"?: string;
+        /**
+          * @default 'default'
+         */
+        "type"?: 'compose' | 'default';
         /**
           * @default []
          */
@@ -1924,6 +2019,8 @@ declare namespace LocalJSX {
         "ls-participant-select": LsParticipantSelect;
         "ls-props-section": LsPropsSection;
         "ls-radio-input": LsRadioInput;
+        "ls-recipient-card": LsRecipientCard;
+        "ls-recipient-manager": LsRecipientManager;
         "ls-select-input": LsSelectInput;
         "ls-statusbar": LsStatusbar;
         "ls-text-input": LsTextInput;
@@ -1932,6 +2029,7 @@ declare namespace LocalJSX {
         "ls-toolbar": LsToolbar;
         "ls-toolbox-field": LsToolboxField;
         "ls-tooltip": LsTooltip;
+        "ls-validation-manager": LsValidationManager;
         "ls-validation-tag": LsValidationTag;
     }
 }
@@ -1985,6 +2083,8 @@ declare module "@stencil/core" {
             "ls-participant-select": LocalJSX.LsParticipantSelect & JSXBase.HTMLAttributes<HTMLLsParticipantSelectElement>;
             "ls-props-section": LocalJSX.LsPropsSection & JSXBase.HTMLAttributes<HTMLLsPropsSectionElement>;
             "ls-radio-input": LocalJSX.LsRadioInput & JSXBase.HTMLAttributes<HTMLLsRadioInputElement>;
+            "ls-recipient-card": LocalJSX.LsRecipientCard & JSXBase.HTMLAttributes<HTMLLsRecipientCardElement>;
+            "ls-recipient-manager": LocalJSX.LsRecipientManager & JSXBase.HTMLAttributes<HTMLLsRecipientManagerElement>;
             "ls-select-input": LocalJSX.LsSelectInput & JSXBase.HTMLAttributes<HTMLLsSelectInputElement>;
             "ls-statusbar": LocalJSX.LsStatusbar & JSXBase.HTMLAttributes<HTMLLsStatusbarElement>;
             "ls-text-input": LocalJSX.LsTextInput & JSXBase.HTMLAttributes<HTMLLsTextInputElement>;
@@ -1993,6 +2093,7 @@ declare module "@stencil/core" {
             "ls-toolbar": LocalJSX.LsToolbar & JSXBase.HTMLAttributes<HTMLLsToolbarElement>;
             "ls-toolbox-field": LocalJSX.LsToolboxField & JSXBase.HTMLAttributes<HTMLLsToolboxFieldElement>;
             "ls-tooltip": LocalJSX.LsTooltip & JSXBase.HTMLAttributes<HTMLLsTooltipElement>;
+            "ls-validation-manager": LocalJSX.LsValidationManager & JSXBase.HTMLAttributes<HTMLLsValidationManagerElement>;
             "ls-validation-tag": LocalJSX.LsValidationTag & JSXBase.HTMLAttributes<HTMLLsValidationTagElement>;
         }
     }

package/dist/types/index.d.ts

@@ -8,4 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { format } from './utils/utils';
-export type * from './components.d.ts';
+export type * from './components';

package/dist/types/types/LSApiRecipient.d.ts

@@ -0,0 +1,8 @@
+export type LSApiRecipient = {
+    name: string;
+    email: string;
+    firstname: string;
+    lastname: string;
+    signerIndex?: number;
+    roleType?: 'SIGNER' | 'WITNESS' | 'APPROVER' | 'FORM_FILLER';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "legalesign-document-viewer",
-  "version": "0.3.9",
+  "version": "0.4.1",
   "description": "Legalesign Document Editor/Viewer",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",