@verdocs/web-sdk 1.9.6 → 1.9.9

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

@@ -1,8 +1,9 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { IEnvelope } from '@verdocs/js-sdk/Envelopes/Types';
+import { ITemplate } from '@verdocs/js-sdk/Templates/Types';
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { IDocumentPageInfo, IPageLayer } from '../../../utils/Types';
 import { SDKError } from '../../../utils/errors';
-import { ITemplate } from '@verdocs/js-sdk/Templates/Types';
 export interface ISourcePageMetrics {
   width: number;
   height: number;
@@ -12,6 +13,11 @@ export interface IPageRenderEvent {
   sourcePageMetrics: ISourcePageMetrics;
   pages: Record<number, IDocumentPageInfo>;
 }
+/**
+ * View all of the documents attached to a template or envelope. All documents are displayed, in order. This embed wraps
+ * verdocs-view-envelope-document or verdocs-view-template-document, as appropriate, and those controls may be used if
+ * fine-grained control over which documents are displayed (or their order) is required.
+ */
 export declare class VerdocsView {
   component: HTMLElement;
   /**
@@ -19,9 +25,13 @@ export declare class VerdocsView {
    */
   endpoint: VerdocsEndpoint;
   /**
-   * The template ID to render
+   * The template ID to render. Set ONE OF templateId or envelopeId.
    */
   templateId: string;
+  /**
+   * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.
+   */
+  envelopeId: string;
   /**
    * Rotate the PDF in degrees
    */
@@ -30,13 +40,6 @@ export declare class VerdocsView {
    * Layers will be passed through to the individual pages inside this component.
    */
   pageLayers: IPageLayer[];
-  /**
-   * Src of the PDF to load and render
-   */
-  source: string;
-  /**
-   * Listen for changes to src
-   */
   /**
    * Fired when a page has been rendered
    */
@@ -62,19 +65,9 @@ export declare class VerdocsView {
    * terminate the process, and the calling application should correct the condition and re-render the component.
    */
   sdkError: EventEmitter<SDKError>;
-  loadProgress: number;
-  template: ITemplate | null;
-  pageNumbers: number[];
-  pageUris: Record<number, string>;
-  numPages: number;
-  domPages: Record<number, IDocumentPageInfo>;
-  sourcePageMetrics: Record<number, {
-    width: number;
-    height: number;
-  }>;
+  template?: ITemplate;
+  envelope?: IEnvelope;
   componentWillLoad(): void;
   componentDidLoad(): Promise<void>;
-  renderPage(pageNumber: number): Promise<void>;
-  handlePageRendered(e: any): Promise<void>;
   render(): any;
 }

package/dist/types/components/embeds/verdocs-view/verdocs-view.stories.d.ts

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/web-components';
 declare const _default: Meta<import("@storybook/web-components").Args>;
 export default _default;
-export declare const View: ({ source }: {
-  source: any;
+export declare const View: ({ templateId, envelopeId }: {
+  templateId: any;
+  envelopeId: any;
 }) => import("lit-html").TemplateResult<1>;

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { IRole, ITemplate, ITemplateDocument, ITemplateField, TemplateSenderType
 import { IContactSearchEvent, IContactSelectEvent, IEmailContact, IPhoneContact } from "./components/elements/verdocs-contact-picker/verdocs-contact-picker";
 import { IDocumentPageInfo, IPageLayer } from "./utils/Types";
 import { IMenuOption } from "./components/controls/verdocs-dropdown/verdocs-dropdown";
-import { IDocument, IDocumentField, IRecipient, TDocumentStatus, TRecipientStatus } from "@verdocs/js-sdk/Documents/Types";
+import { IDocumentField, IEnvelope, IRecipient, TEnvelopeStatus, TRecipientStatus } from "@verdocs/js-sdk/Envelopes/Types";
 import { IOrganization } from "@verdocs/js-sdk/Organizations/Types";
 import { IRecentSearch } from "@verdocs/js-sdk/Search/Types";
 import { ISearchEvent, TContentType } from "./components/elements/verdocs-search-box/verdocs-search-box";
@@ -20,6 +20,8 @@ import { IContactSearchEvent as IContactSearchEvent1, IContactSelectEvent as ICo
 import { IToggleIconButtons } from "./components/controls/verdocs-toggle/verdocs-toggle";
 import { FileWithData } from "@verdocs/js-sdk/Utils/Files";
 import { IPageRenderEvent } from "./components/embeds/verdocs-view/verdocs-view";
+import { IPageRenderEvent as IPageRenderEvent1 } from "./components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document";
+import { IPageRenderEvent as IPageRenderEvent2 } from "./components/elements/verdocs-view-template-document/verdocs-view-template-document";
 export namespace Components {
     interface VerdocsAuth {
         /**
@@ -127,15 +129,15 @@ export namespace Components {
          */
         "pageImageUri": string;
         /**
-          * The page number being rendered. Not used internally but included in callbacks/events beacuse page numbers are used everywhere in document handling.
+          * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers are used everywhere in document handling. (Reminder: page numbers are 1-based.)
          */
         "pageNumber": number;
         /**
-          * 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.
+          * 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.
          */
         "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.
+          * 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.
          */
         "virtualWidth": number;
     }
@@ -594,14 +596,14 @@ export namespace Components {
         "templateId": string | null;
     }
     interface VerdocsSign {
-        /**
-          * The ID of the document to sign.
-         */
-        "documentId": string | null;
         /**
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
         "endpoint": VerdocsEndpoint;
+        /**
+          * The ID of the envelope to sign.
+         */
+        "envelopeId": string | null;
         /**
           * The invite code for the signer.
          */
@@ -625,7 +627,7 @@ export namespace Components {
         /**
           * The document to display status for. Ignored if `status` is set directly.
          */
-        "document"?: IDocument;
+        "envelope"?: IEnvelope;
         /**
           * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.
          */
@@ -633,7 +635,7 @@ export namespace Components {
         /**
           * The status to display.
          */
-        "status"?: TDocumentStatus | TRecipientStatus | 'accepted';
+        "status"?: TEnvelopeStatus | TRecipientStatus | 'accepted';
         /**
           * The theme to use for diplay.
          */
@@ -773,6 +775,10 @@ export namespace Components {
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
         "endpoint": VerdocsEndpoint;
+        /**
+          * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.
+         */
+        "envelopeId": string;
         /**
           * Layers will be passed through to the individual pages inside this component.
          */
@@ -782,9 +788,49 @@ export namespace Components {
          */
         "rotation": 0 | 90 | 180 | 270;
         /**
-          * Src of the PDF to load and render
+          * The template ID to render. Set ONE OF templateId or envelopeId.
+         */
+        "templateId": string;
+    }
+    interface VerdocsViewEnvelopeDocument {
+        /**
+          * The document ID to render
+         */
+        "documentId": string;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+         */
+        "endpoint": VerdocsEndpoint;
+        /**
+          * The envelope ID to render
          */
-        "source": string;
+        "envelopeId": string;
+        /**
+          * Layers will be passed through to the individual pages inside this component.
+         */
+        "pageLayers": IPageLayer[];
+        /**
+          * Rotate the PDF in degrees
+         */
+        "rotation": 0 | 90 | 180 | 270;
+    }
+    interface VerdocsViewTemplateDocument {
+        /**
+          * The document ID to render within the template
+         */
+        "documentId": string;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+         */
+        "endpoint": VerdocsEndpoint;
+        /**
+          * Layers will be passed through to the individual pages inside this component.
+         */
+        "pageLayers": IPageLayer[];
+        /**
+          * Rotate the PDF in degrees
+         */
+        "rotation": 0 | 90 | 180 | 270;
         /**
           * The template ID to render
          */
@@ -947,6 +993,14 @@ export interface VerdocsViewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVerdocsViewElement;
 }
+export interface VerdocsViewEnvelopeDocumentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVerdocsViewEnvelopeDocumentElement;
+}
+export interface VerdocsViewTemplateDocumentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVerdocsViewTemplateDocumentElement;
+}
 declare global {
     interface HTMLVerdocsAuthElement extends Components.VerdocsAuth, HTMLStencilElement {
     }
@@ -1248,6 +1302,18 @@ declare global {
         prototype: HTMLVerdocsViewElement;
         new (): HTMLVerdocsViewElement;
     };
+    interface HTMLVerdocsViewEnvelopeDocumentElement extends Components.VerdocsViewEnvelopeDocument, HTMLStencilElement {
+    }
+    var HTMLVerdocsViewEnvelopeDocumentElement: {
+        prototype: HTMLVerdocsViewEnvelopeDocumentElement;
+        new (): HTMLVerdocsViewEnvelopeDocumentElement;
+    };
+    interface HTMLVerdocsViewTemplateDocumentElement extends Components.VerdocsViewTemplateDocument, HTMLStencilElement {
+    }
+    var HTMLVerdocsViewTemplateDocumentElement: {
+        prototype: HTMLVerdocsViewTemplateDocumentElement;
+        new (): HTMLVerdocsViewTemplateDocumentElement;
+    };
     interface HTMLElementTagNameMap {
         "verdocs-auth": HTMLVerdocsAuthElement;
         "verdocs-build": HTMLVerdocsBuildElement;
@@ -1299,6 +1365,8 @@ declare global {
         "verdocs-toolbar-icon": HTMLVerdocsToolbarIconElement;
         "verdocs-upload-dialog": HTMLVerdocsUploadDialogElement;
         "verdocs-view": HTMLVerdocsViewElement;
+        "verdocs-view-envelope-document": HTMLVerdocsViewEnvelopeDocumentElement;
+        "verdocs-view-template-document": HTMLVerdocsViewTemplateDocumentElement;
     }
 }
 declare namespace LocalJSX {
@@ -1444,15 +1512,15 @@ declare namespace LocalJSX {
          */
         "pageImageUri"?: string;
         /**
-          * The page number being rendered. Not used internally but included in callbacks/events beacuse page numbers are used everywhere in document handling.
+          * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers are used everywhere in document handling. (Reminder: page numbers are 1-based.)
          */
         "pageNumber"?: number;
         /**
-          * 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.
+          * 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.
          */
         "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.
+          * 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.
          */
         "virtualWidth"?: number;
     }
@@ -2100,14 +2168,14 @@ declare namespace LocalJSX {
         "templateId"?: string | null;
     }
     interface VerdocsSign {
-        /**
-          * The ID of the document to sign.
-         */
-        "documentId"?: string | null;
         /**
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
         "endpoint"?: VerdocsEndpoint;
+        /**
+          * The ID of the envelope to sign.
+         */
+        "envelopeId"?: string | null;
         /**
           * The invite code for the signer.
          */
@@ -2143,7 +2211,7 @@ declare namespace LocalJSX {
         /**
           * The document to display status for. Ignored if `status` is set directly.
          */
-        "document"?: IDocument;
+        "envelope"?: IEnvelope;
         /**
           * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.
          */
@@ -2151,7 +2219,7 @@ declare namespace LocalJSX {
         /**
           * The status to display.
          */
-        "status"?: TDocumentStatus | TRecipientStatus | 'accepted';
+        "status"?: TEnvelopeStatus | TRecipientStatus | 'accepted';
         /**
           * The theme to use for diplay.
          */
@@ -2219,7 +2287,7 @@ declare namespace LocalJSX {
         /**
           * Event fired when the user completes the step.
          */
-        "onSettingsUpdated"?: (event: VerdocsTemplatePropertiesCustomEvent<any>) => void;
+        "onSettingsUpdated"?: (event: VerdocsTemplatePropertiesCustomEvent<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>) => void;
         /**
           * The template ID to edit.
          */
@@ -2367,6 +2435,10 @@ declare namespace LocalJSX {
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
         "endpoint"?: VerdocsEndpoint;
+        /**
+          * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.
+         */
+        "envelopeId"?: string;
         /**
           * Fired when a page has been changed
          */
@@ -2400,9 +2472,97 @@ declare namespace LocalJSX {
          */
         "rotation"?: 0 | 90 | 180 | 270;
         /**
-          * Src of the PDF to load and render
+          * The template ID to render. Set ONE OF templateId or envelopeId.
+         */
+        "templateId"?: string;
+    }
+    interface VerdocsViewEnvelopeDocument {
+        /**
+          * The document ID to render
+         */
+        "documentId"?: string;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+         */
+        "endpoint"?: VerdocsEndpoint;
+        /**
+          * The envelope ID to render
+         */
+        "envelopeId"?: string;
+        /**
+          * Fired when a page has been changed
+         */
+        "onPageChange"?: (event: VerdocsViewEnvelopeDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been initialized
+         */
+        "onPageInit"?: (event: VerdocsViewEnvelopeDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been changed
+         */
+        "onPageLoaded"?: (event: VerdocsViewEnvelopeDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been rendered
+         */
+        "onPageRendered"?: (event: VerdocsViewEnvelopeDocumentCustomEvent<IPageRenderEvent>) => void;
+        /**
+          * Fired when a page has been scaled
+         */
+        "onScaleChange"?: (event: VerdocsViewEnvelopeDocumentCustomEvent<number>) => 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: VerdocsViewEnvelopeDocumentCustomEvent<SDKError>) => void;
+        /**
+          * Layers will be passed through to the individual pages inside this component.
+         */
+        "pageLayers"?: IPageLayer[];
+        /**
+          * Rotate the PDF in degrees
+         */
+        "rotation"?: 0 | 90 | 180 | 270;
+    }
+    interface VerdocsViewTemplateDocument {
+        /**
+          * The document ID to render within the template
          */
-        "source"?: string;
+        "documentId"?: string;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+         */
+        "endpoint"?: VerdocsEndpoint;
+        /**
+          * Fired when a page has been changed
+         */
+        "onPageChange"?: (event: VerdocsViewTemplateDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been initialized
+         */
+        "onPageInit"?: (event: VerdocsViewTemplateDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been changed
+         */
+        "onPageLoaded"?: (event: VerdocsViewTemplateDocumentCustomEvent<number>) => void;
+        /**
+          * Fired when a page has been rendered
+         */
+        "onPageRendered"?: (event: VerdocsViewTemplateDocumentCustomEvent<IPageRenderEvent>) => void;
+        /**
+          * Fired when a page has been scaled
+         */
+        "onScaleChange"?: (event: VerdocsViewTemplateDocumentCustomEvent<number>) => 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: VerdocsViewTemplateDocumentCustomEvent<SDKError>) => void;
+        /**
+          * Layers will be passed through to the individual pages inside this component.
+         */
+        "pageLayers"?: IPageLayer[];
+        /**
+          * Rotate the PDF in degrees
+         */
+        "rotation"?: 0 | 90 | 180 | 270;
         /**
           * The template ID to render
          */
@@ -2459,6 +2619,8 @@ declare namespace LocalJSX {
         "verdocs-toolbar-icon": VerdocsToolbarIcon;
         "verdocs-upload-dialog": VerdocsUploadDialog;
         "verdocs-view": VerdocsView;
+        "verdocs-view-envelope-document": VerdocsViewEnvelopeDocument;
+        "verdocs-view-template-document": VerdocsViewTemplateDocument;
     }
 }
 export { LocalJSX as JSX };
@@ -2515,6 +2677,8 @@ declare module "@stencil/core" {
             "verdocs-toolbar-icon": LocalJSX.VerdocsToolbarIcon & JSXBase.HTMLAttributes<HTMLVerdocsToolbarIconElement>;
             "verdocs-upload-dialog": LocalJSX.VerdocsUploadDialog & JSXBase.HTMLAttributes<HTMLVerdocsUploadDialogElement>;
             "verdocs-view": LocalJSX.VerdocsView & JSXBase.HTMLAttributes<HTMLVerdocsViewElement>;
+            "verdocs-view-envelope-document": LocalJSX.VerdocsViewEnvelopeDocument & JSXBase.HTMLAttributes<HTMLVerdocsViewEnvelopeDocumentElement>;
+            "verdocs-view-template-document": LocalJSX.VerdocsViewTemplateDocument & JSXBase.HTMLAttributes<HTMLVerdocsViewTemplateDocumentElement>;
         }
     }
 }

package/dist/types/utils/Types.d.ts

@@ -6,6 +6,8 @@ export interface IDocumentPageInfo {
   virtualHeight: number;
   renderedWidth: number;
   renderedHeight: number;
+  naturalWidth: number;
+  naturalHeight: number;
   xScale: number;
   yScale: number;
 }

package/dist/types/utils/utils.d.ts

@@ -1,5 +1,5 @@
 import { ITemplateField } from '@verdocs/js-sdk/Templates/Types';
-import { IDocumentField } from '@verdocs/js-sdk/Documents/Types';
+import { IDocumentField } from '@verdocs/js-sdk/Envelopes/Types';
 import { IDocumentPageInfo } from './Types';
 export declare const integerSequence: (start: number, count: number) => number[];
 export declare const fullNameToInitials: (name: string) => string;
@@ -10,4 +10,4 @@ export declare const getFieldId: (field: ITemplateField | IDocumentField) => str
 export declare const getFieldOptionId: (field: ITemplateField, index: number) => string;
 export declare const renderDocumentField: (field: ITemplateField, docPage: IDocumentPageInfo, roleIndex: number, handleFieldChange: (field: ITemplateField, e: any, optionId?: string) => void, disabled: boolean, editable?: boolean, draggable?: boolean) => any;
 export declare const getRoleIndex: (roles: string[], role: string) => number;
-export declare const getFieldSettings: (field: ITemplateField | IDocumentField) => import("@verdocs/js-sdk/Documents/Types").IDocumentFieldSettings | import("@verdocs/js-sdk/Templates/Types").ITemplateFieldSetting;
+export declare const getFieldSettings: (field: ITemplateField | IDocumentField) => import("@verdocs/js-sdk/Templates/Types").ITemplateFieldSetting | import("@verdocs/js-sdk/Envelopes/Types").IDocumentFieldSettings;

package/dist/verdocs-web-sdk/p-03677b65.system.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function s(e){try{l(r.next(e))}catch(e){o(e)}}function u(e){try{l(r["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):a(e.value).then(s,u)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,s;return s={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function u(e){return function(t){return l([e,t])}}function l(s){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,a&&(o=s[0]&2?a["return"]:s[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,s[1])).done)return o;if(a=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;a=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];a=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __asyncValues=this&&this.__asyncValues||function(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t=e[Symbol.asyncIterator],n;return t?t.call(e):(e=typeof __values==="function"?__values(e):e[Symbol.iterator](),n={},r("next"),r("throw"),r("return"),n[Symbol.asyncIterator]=function(){return this},n);function r(t){n[t]=e[t]&&function(n){return new Promise((function(r,o){n=e[t](n),a(r,o,n.done,n.value)}))}}function a(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)}};System.register(["./p-df878df9.system.js","./p-3035b6c5.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.g},function(e){n=e.s}],execute:function(){var r=this;var a=e("c",(function(e,t,n){return e.api.post("/templates/".concat(t,"/pages"),n).then((function(e){return e.data}))}));var o=function(e,t,n){return e.api.get("/templates/".concat(t,"/pages/").concat(n,"/image")).then((function(e){return e.data}))};var s=e("l",(function(e,a){return __awaiter(r,void 0,void 0,(function(){var r,s,u,l,c,i,f,p;var h,y;return __generator(this,(function(g){switch(g.label){case 0:n.template=null;if(!a){console.log("[TEMPLATES] Missing required template ID");return[2]}n.loading=true;g.label=1;case 1:g.trys.push([1,16,,17]);console.log("[TEMPLATES] Loading template ".concat(a));return[4,t(e,a)];case 2:r=g.sent();if(!r){console.log("[TEMPLATES] Unable to load template");return[2]}n.template=r;s={};g.label=3;case 3:g.trys.push([3,9,10,15]);u=__asyncValues(n.template.pages);g.label=4;case 4:return[4,u.next()];case 5:if(!(l=g.sent(),!l.done))return[3,8];c=l.value;console.log("[TEMPLATES] Loading page",c);return[4,o(e,a,c.sequence)];case 6:i=g.sent();s[c.sequence]=i.url;console.log("[TEMPLATES] Got image Uri",i.url);n.loadProgress=c.sequence/n.template.pages.length;g.label=7;case 7:return[3,4];case 8:return[3,15];case 9:f=g.sent();h={error:f};return[3,15];case 10:g.trys.push([10,,13,14]);if(!(l&&!l.done&&(y=u.return)))return[3,12];return[4,y.call(u)];case 11:g.sent();g.label=12;case 12:return[3,14];case 13:if(h)throw h.error;return[7];case 14:return[7];case 15:n.pageUris=s;n.loadProgress=100;n.loading=false;return[3,17];case 16:p=g.sent();console.log("[TEMPLATES] Error loading template",p);throw p;case 17:return[2]}}))}))}))}}}));
+//# sourceMappingURL=p-03677b65.system.js.map

package/dist/verdocs-web-sdk/p-03677b65.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@verdocs/js-sdk/Templates/Pages.js","src/utils/Templates.ts"],"names":["createPage","exports","endpoint","templateId","params","api","post","concat","then","r","data","getPageImage","sequence","get","loadTemplate","__awaiter","_this","TemplateStore","template","console","log","loading","getTemplate","_d","sent","pageUris","pages","page","_b","value","image","url","loadProgress","length","e_2"],"mappings":"6oEAGU,IAACA,EAAUC,EAAA,KAAG,SAAUC,EAAUC,EAAYC,GACpD,OAAOF,EAASG,IACXC,KAAK,cAAcC,OAAOJ,EAAY,UAAWC,GACjDI,MAAK,SAAUC,GAAK,OAAOA,EAAEC,WAsB/B,IAAIC,EAAe,SAAUT,EAAUC,EAAYS,GACtD,OAAOV,EAASG,IACXQ,IAAI,cAAcN,OAAOJ,EAAY,WAAWI,OAAOK,EAAU,WACjEJ,MAAK,SAAUC,GAAK,OAAOA,EAAEC,aC1BzBI,EAAYb,EAAA,KAAG,SAAOC,EAA2BC,GAAkB,OAAAY,UAAAC,OAAA,OAAA,GAAA,mGAC9EC,EAAcC,SAAW,KAEzB,IAAKf,EAAY,CACfgB,QAAQC,IAAI,4CACZ,MAAA,CAAA,GAGFH,EAAcI,QAAU,8CAGtBF,QAAQC,IAAI,gCAAAb,OAAgCJ,IAC3B,MAAA,CAAA,EAAMmB,EAAYpB,EAAUC,WAAvCe,EAAWK,EAAAC,OACjB,IAAKN,EAAU,CACbC,QAAQC,IAAI,uCACZ,MAAA,CAAA,GAGFH,EAAcC,SAAWA,EAEnBO,EAAmC,6CAClBR,EAAAA,cAAAA,EAAcC,SAASQ,uFAA/BC,EAAIC,EAAAC,MACjBV,QAAQC,IAAI,2BAA4BO,GAI1B,MAAA,CAAA,EAAMhB,EAAaT,EAAUC,EAAYwB,EAAKf,kBAAtDkB,EAAQP,EAAAC,OAEdC,EAASE,EAAKf,UAAYkB,EAAMC,IAChCZ,QAAQC,IAAI,4BAA6BU,EAAMC,KAC/Cd,EAAce,aAAeL,EAAKf,SAAWK,EAAcC,SAASQ,MAAMO,oTAG5EhB,EAAcQ,SAAWA,EACzBR,EAAce,aAAe,IAC7Bf,EAAcI,QAAU,sCAExBF,QAAQC,IAAI,qCAAsCc,GAClD,MAAMA","sourcesContent":["/**\n * Add a page to a template.\n */\nexport var createPage = function (endpoint, templateId, params) {\n    return endpoint.api //\n        .post(\"/templates/\".concat(templateId, \"/pages\"), params)\n        .then(function (r) { return r.data; });\n};\n/**\n * Update a template page.\n */\nexport var editPage = function (endpoint, templateId, sequence) {\n    return endpoint.api //\n        .put(\"/templates/\".concat(templateId, \"/pages/\").concat(sequence))\n        .then(function (r) { return r.data; });\n};\n/**\n * Get a page from a template.\n */\nexport var getPage = function (endpoint, templateId, sequence, thumbnail) {\n    if (thumbnail === void 0) { thumbnail = false; }\n    return endpoint.api //\n        .get(\"/templates/\".concat(templateId, \"/pages/\").concat(sequence).concat(thumbnail ? '?thumbnail=true' : ''))\n        .then(function (r) { return r.data; });\n};\n/**\n * Get a page image (PNG format) from a template.\n */\nexport var getPageImage = function (endpoint, templateId, sequence) {\n    return endpoint.api //\n        .get(\"/templates/\".concat(templateId, \"/pages/\").concat(sequence, \"/image\"))\n        .then(function (r) { return r.data; });\n};\n/**\n * Delete a page from a template\n */\nexport var deletePage = function (endpoint, templateId, sequence) {\n    return endpoint.api //\n        .delete(\"/templates/\".concat(templateId, \"/pages/\").concat(sequence))\n        .then(function (r) { return r.data; });\n};\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getPageImage} from '@verdocs/js-sdk/Templates/Pages';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport TemplateStore from './templateStore';\n\nexport const loadTemplate = async (endpoint: VerdocsEndpoint, templateId: string) => {\n  TemplateStore.template = null;\n\n  if (!templateId) {\n    console.log(`[TEMPLATES] Missing required template ID`);\n    return;\n  }\n\n  TemplateStore.loading = true;\n\n  try {\n    console.log(`[TEMPLATES] Loading template ${templateId}`);\n    const template = await getTemplate(endpoint, templateId);\n    if (!template) {\n      console.log('[TEMPLATES] Unable to load template');\n      return;\n    }\n\n    TemplateStore.template = template;\n\n    const pageUris: Record<number, string> = {};\n    for await (let page of TemplateStore.template.pages) {\n      console.log('[TEMPLATES] Loading page', page);\n      // TODO: Make an endpoint to get all of the pages for a template\n      // TODO: When uploading a new template, pre-process its pages into images and comment that the individual page-loader is a utility,\n      //  not the primary mechanism.\n      const image = await getPageImage(endpoint, templateId, page.sequence);\n      // TODO: Make this uri to match the rest of the terminology?\n      pageUris[page.sequence] = image.url;\n      console.log('[TEMPLATES] Got image Uri', image.url);\n      TemplateStore.loadProgress = page.sequence / TemplateStore.template.pages.length;\n    }\n\n    TemplateStore.pageUris = pageUris;\n    TemplateStore.loadProgress = 100;\n    TemplateStore.loading = false;\n  } catch (e) {\n    console.log('[TEMPLATES] Error loading template', e);\n    throw e;\n  }\n};\n"]}

package/dist/verdocs-web-sdk/p-036fc9f9.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"names":["verdocsFieldInitialCss","settingsIcon","VerdocsFieldInitial","[object Object]","this","handleShow","_a","dialog","remove","e","console","log","tempInitials","detail","fieldChange","emit","hideDialog","document","createElement","open","initials","recipient","fullNameToInitials","full_name","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","roleindex","h","Host","class","required","style","src","alt","onClick","editable","icon","label","options","placeholder","onInput"],"mappings":"wIAAA,MAAMA,EAAyB,6xCCM/B,MAAMC,EACJ,+rCAWWC,EAAmB,4LAI0B,4CAU3B,oBAKF,iBAME,oBAKA,qBAKA,oBA6BN,GALbC,mBACRC,KAAKC,aAQPF,oBACEG,EAAAF,KAAKG,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbJ,KAAKG,OAAS,KAGhBJ,YAAYM,SACVC,QAAQC,IAAI,8BACZP,KAAKQ,aAAeH,EAAEI,QACtBP,EAAAF,KAAKU,eAAW,MAAAR,SAAA,OAAA,EAAAA,EAAES,KAAKX,KAAKQ,cAC5BR,KAAKY,aAGPb,aACEC,KAAKG,OAASU,SAASC,cAAc,0BACrCd,KAAKG,OAAOY,KAAO,KACnBf,KAAKG,OAAOa,SAAWhB,KAAKiB,UAAYC,EAAmBlB,KAAKiB,UAAUE,WAAanB,KAAKgB,SAC5FhB,KAAKG,OAAOiB,iBAAiB,UAAU,IAAMpB,KAAKY,eAClDZ,KAAKG,OAAOiB,iBAAiB,SAASf,GAAKL,KAAKqB,YAAYhB,KAC5DQ,SAASS,KAAKC,OAAOvB,KAAKG,QAG5BJ,iBACE,MAAMyB,EAAWC,EAAiBzB,KAAK0B,OACvC,MAAMC,EAAQ3B,KAAKQ,cAAgBgB,EAASI,OAC5C,MAAMC,GAAWC,GAAA5B,EAAAF,KAAK6B,YAAQ,MAAA3B,SAAA,EAAAA,EAAIsB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAMC,EAAkB/B,KAAK0B,MAAM,SAAWM,EAAQhC,KAAKiC,WAE3D,OACEC,EAACC,EAAI,CAACC,MAAO,CAACC,SAAUb,EAASa,SAAUR,SAAAA,GAAWS,MAAO,CAACP,gBAAAA,IAC3DJ,EACCO,EAAA,MAAA,CAAKK,IAAKvC,KAAKQ,cAAgBgB,EAASI,OAAQY,IAAI,aAEpDN,EAAA,SAAA,CAAQE,MAAO,GAAIK,QAAS,KAAOZ,GAAY7B,KAAKC,cAAY,YAKjED,KAAK0C,UACJR,EAAA,uBAAA,CAAsBS,KAAM9C,GAC1BqC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEU,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASjB,MAAO,SACxB,CAACiB,MAAO,SAAUjB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBU,MAAM,aAAajB,MAAM,GAAGmB,YAAY,uBAAuBC,QAAS1C,GAAKC,QAAQC,IAAI,MAAOF,KACpH6B,EAAA,qBAAA,CAAoBU,MAAM,cAAcjB,MAAM,GAAGmB,YAAY,sBAAsBC,QAAS1C,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {fullNameToInitials, getFieldSettings} from '../../../utils/utils';\nimport { getRGBA } from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event emitted when the user cancels the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.open = true;\n    this.dialog.initials = this.recipient ? fullNameToInitials(this.recipient.full_name) : this.initials;\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempInitials || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        {value ? (\n          <img src={this.tempInitials || settings.base64} alt=\"Initials\" />\n        ) : (\n          <button class={{}} onClick={() => !disabled && this.handleShow()}>\n            Initials\n          </button>\n        )}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"names":["verdocsFieldInitialCss","settingsIcon","VerdocsFieldInitial","[object Object]","this","handleShow","_a","dialog","remove","e","console","log","tempInitials","detail","fieldChange","emit","hideDialog","document","createElement","open","initials","recipient","fullNameToInitials","full_name","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","roleindex","h","Host","class","required","style","src","alt","onClick","editable","icon","label","options","placeholder","onInput"],"mappings":"wIAAA,MAAMA,EAAyB,6xCCM/B,MAAMC,EACJ,+rCAWWC,EAAmB,4LAI0B,4CAU3B,oBAKF,iBAME,oBAKA,qBAKA,oBA6BN,GALbC,mBACRC,KAAKC,aAQPF,oBACEG,EAAAF,KAAKG,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbJ,KAAKG,OAAS,KAGhBJ,YAAYM,SACVC,QAAQC,IAAI,8BACZP,KAAKQ,aAAeH,EAAEI,QACtBP,EAAAF,KAAKU,eAAW,MAAAR,SAAA,OAAA,EAAAA,EAAES,KAAKX,KAAKQ,cAC5BR,KAAKY,aAGPb,aACEC,KAAKG,OAASU,SAASC,cAAc,0BACrCd,KAAKG,OAAOY,KAAO,KACnBf,KAAKG,OAAOa,SAAWhB,KAAKiB,UAAYC,EAAmBlB,KAAKiB,UAAUE,WAAanB,KAAKgB,SAC5FhB,KAAKG,OAAOiB,iBAAiB,UAAU,IAAMpB,KAAKY,eAClDZ,KAAKG,OAAOiB,iBAAiB,SAASf,GAAKL,KAAKqB,YAAYhB,KAC5DQ,SAASS,KAAKC,OAAOvB,KAAKG,QAG5BJ,iBACE,MAAMyB,EAAWC,EAAiBzB,KAAK0B,OACvC,MAAMC,EAAQ3B,KAAKQ,cAAgBgB,EAASI,OAC5C,MAAMC,GAAWC,GAAA5B,EAAAF,KAAK6B,YAAQ,MAAA3B,SAAA,EAAAA,EAAIsB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAMC,EAAkB/B,KAAK0B,MAAM,SAAWM,EAAQhC,KAAKiC,WAE3D,OACEC,EAACC,EAAI,CAACC,MAAO,CAACC,SAAUb,EAASa,SAAUR,SAAAA,GAAWS,MAAO,CAACP,gBAAAA,IAC3DJ,EACCO,EAAA,MAAA,CAAKK,IAAKvC,KAAKQ,cAAgBgB,EAASI,OAAQY,IAAI,aAEpDN,EAAA,SAAA,CAAQE,MAAO,GAAIK,QAAS,KAAOZ,GAAY7B,KAAKC,cAAY,YAKjED,KAAK0C,UACJR,EAAA,uBAAA,CAAsBS,KAAM9C,GAC1BqC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEU,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASjB,MAAO,SACxB,CAACiB,MAAO,SAAUjB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBU,MAAM,aAAajB,MAAM,GAAGmB,YAAY,uBAAuBC,QAAS1C,GAAKC,QAAQC,IAAI,MAAOF,KACpH6B,EAAA,qBAAA,CAAoBU,MAAM,cAAcjB,MAAM,GAAGmB,YAAY,sBAAsBC,QAAS1C,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {fullNameToInitials, getFieldSettings} from '../../../utils/utils';\nimport { getRGBA } from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event emitted when the user cancels the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.open = true;\n    this.dialog.initials = this.recipient ? fullNameToInitials(this.recipient.full_name) : this.initials;\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempInitials || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        {value ? (\n          <img src={this.tempInitials || settings.base64} alt=\"Initials\" />\n        ) : (\n          <button class={{}} onClick={() => !disabled && this.handleShow()}>\n            Initials\n          </button>\n        )}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/{p-c62e6e90.entry.js → p-04373c06.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as s,H as i}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as n}from"./p-10d804cf.js";const o='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';const a=class{constructor(s){e(this,s);this.sdkError=t(this,"sdkError",7);this.fields=[];this.endpoint=n.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}async componentDidLoad(){}handleCancel(e){console.log("Cancel",e.detail);this.step=""}handleTemplateCreated(e){console.log("Created",e.detail);this.step="properties"}handlePropertiesUpdated(e){console.log("updated",e.detail);this.step="recipients"}handleRecipientsUpdated(e){console.log("updated",e.detail);this.step="fields"}render(){return s(i,null,this.step==="create"&&s("verdocs-template-create",{onCancel:e=>this.handleCancel(e),onTemplateCreated:e=>this.handleTemplateCreated(e)}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handlePropertiesUpdated(e)}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handleRecipientsUpdated(e)}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handleCancel(e)}))}};a.style=o;export{a as verdocs_build};
-//# sourceMappingURL=p-c62e6e90.entry.js.map
+import{r as e,c as t,h as s,H as i}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as n}from"./p-629237fc.js";const o='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';const a=class{constructor(s){e(this,s);this.sdkError=t(this,"sdkError",7);this.fields=[];this.endpoint=n.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}async componentDidLoad(){}handleCancel(e){console.log("Cancel",e.detail);this.step=""}handleTemplateCreated(e){console.log("Created",e.detail);this.step="properties"}handlePropertiesUpdated(e){console.log("updated",e.detail);this.step="recipients"}handleRecipientsUpdated(e){console.log("updated",e.detail);this.step="fields"}render(){return s(i,null,this.step==="create"&&s("verdocs-template-create",{onCancel:e=>this.handleCancel(e),onTemplateCreated:e=>this.handleTemplateCreated(e)}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handlePropertiesUpdated(e)}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handleRecipientsUpdated(e)}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:e=>this.handleCancel(e),onSettingsUpdated:e=>this.handleCancel(e)}))}};a.style=o;export{a as verdocs_build};
+//# sourceMappingURL=p-04373c06.entry.js.map

package/dist/verdocs-web-sdk/p-04708900.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"names":["verdocsFieldPaymentCss","VerdocsFieldPayment","exports","this","_fields","signatureFile","initialFile","focusOrderNumber","focusFieldName","activeElement","showError","pageNum","fieldIndex","type","dialogOpened","closeAllErrors","fieldsMap","fieldsForCurrentSigner","fontSize","averageFontWidth","requiredFields","class_1","prototype","componentWillLoad","console","log","field","recipients","length","preparer","find","r","preparedMessage","concat","render","settings","getFieldSettings","disabled","_b","_a","h","Host","class","focused","hide","signed","style","display","width","height","src","signatureUrl"],"mappings":"wMAAA,IAAMA,EAAyB,i8CCclBC,EAAmBC,EAAA,wBAAA,yIAqC9BC,KAAAC,QAAiB,GAEjBD,KAAAE,cAAqB,KACrBF,KAAAG,YAAmB,KAEnBH,KAAAI,kBAAoB,EACpBJ,KAAAK,eAAyB,GAEzBL,KAAAM,cAAgB,KAChBN,KAAAO,UAAY,CACVC,SAAU,EACVC,YAAa,EACbC,KAAM,MAERV,KAAAW,aAAe,MACfX,KAAAY,eAAiB,MACjBZ,KAAAa,UAAiB,GAGjBb,KAAAc,uBAAgC,GAGhCd,KAAAe,SAAW,GACXf,KAAAgB,iBAAmB,EACnBhB,KAAAiB,eAAwB,cAzDgC,4CAU3B,iUAaF,kBACD,uDAOM,GA4BhCC,EAAAC,UAAAC,kBAAA,WAIEC,QAAQC,IAAI,aAActB,KAAKuB,OAE/B,GAAIvB,KAAKwB,YAAcxB,KAAKwB,WAAWC,OAAS,EAAG,CACjD,IAAMC,EAAW1B,KAAKwB,WAAWG,MAAK,SAAAC,GAAK,OAAAA,EAAElB,OAAS,cACtDW,QAAQC,IAAI,iBAAkBI,GAC9B,GAAIA,EAAU,CACZ1B,KAAK6B,gBAAkB,eAAAC,OAAeJ,EAAS,iBAsCrDR,EAAAC,UAAAY,OAAA,mBACE,IAAMC,EAAWC,EAAiBjC,KAAKuB,OACvC,IAAMW,GAAWC,GAAAC,EAAApC,KAAKkC,YAAQ,MAAAE,SAAA,EAAAA,EAAIJ,EAASE,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvDd,QAAQC,IAAI,gBAAiBU,GAC7B,OACEK,EAACC,EAAI,CAACC,MAAO,CAACC,QAASxC,KAAKwC,QAASN,SAAQA,IAC3CG,EAAA,SAAA,CAAQE,MAAO,CAACE,KAAMzC,KAAK0C,SAAO,KACjC1C,KAAK0C,OAASL,EAAA,MAAA,CAAKE,MAAM,UAAaF,EAAA,MAAA,CAAKM,MAAO,CAACC,QAAS,UAC7DP,EAAA,MAAA,CAAKQ,MAAM,OAAOC,OAAO,OAAOC,IAAK/C,KAAKgD,0BAvHlB","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\n\n  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    return (\n      <Host class={{focused: this.focused, disabled}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"names":["verdocsFieldPaymentCss","VerdocsFieldPayment","exports","this","_fields","signatureFile","initialFile","focusOrderNumber","focusFieldName","activeElement","showError","pageNum","fieldIndex","type","dialogOpened","closeAllErrors","fieldsMap","fieldsForCurrentSigner","fontSize","averageFontWidth","requiredFields","class_1","prototype","componentWillLoad","console","log","field","recipients","length","preparer","find","r","preparedMessage","concat","render","settings","getFieldSettings","disabled","_b","_a","h","Host","class","focused","hide","signed","style","display","width","height","src","signatureUrl"],"mappings":"wMAAA,IAAMA,EAAyB,i8CCclBC,EAAmBC,EAAA,wBAAA,yIAqC9BC,KAAAC,QAAiB,GAEjBD,KAAAE,cAAqB,KACrBF,KAAAG,YAAmB,KAEnBH,KAAAI,kBAAoB,EACpBJ,KAAAK,eAAyB,GAEzBL,KAAAM,cAAgB,KAChBN,KAAAO,UAAY,CACVC,SAAU,EACVC,YAAa,EACbC,KAAM,MAERV,KAAAW,aAAe,MACfX,KAAAY,eAAiB,MACjBZ,KAAAa,UAAiB,GAGjBb,KAAAc,uBAAgC,GAGhCd,KAAAe,SAAW,GACXf,KAAAgB,iBAAmB,EACnBhB,KAAAiB,eAAwB,cAzDgC,4CAU3B,iUAaF,kBACD,uDAOM,GA4BhCC,EAAAC,UAAAC,kBAAA,WAIEC,QAAQC,IAAI,aAActB,KAAKuB,OAE/B,GAAIvB,KAAKwB,YAAcxB,KAAKwB,WAAWC,OAAS,EAAG,CACjD,IAAMC,EAAW1B,KAAKwB,WAAWG,MAAK,SAAAC,GAAK,OAAAA,EAAElB,OAAS,cACtDW,QAAQC,IAAI,iBAAkBI,GAC9B,GAAIA,EAAU,CACZ1B,KAAK6B,gBAAkB,eAAAC,OAAeJ,EAAS,iBAsCrDR,EAAAC,UAAAY,OAAA,mBACE,IAAMC,EAAWC,EAAiBjC,KAAKuB,OACvC,IAAMW,GAAWC,GAAAC,EAAApC,KAAKkC,YAAQ,MAAAE,SAAA,EAAAA,EAAIJ,EAASE,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvDd,QAAQC,IAAI,gBAAiBU,GAC7B,OACEK,EAACC,EAAI,CAACC,MAAO,CAACC,QAASxC,KAAKwC,QAASN,SAAQA,IAC3CG,EAAA,SAAA,CAAQE,MAAO,CAACE,KAAMzC,KAAK0C,SAAO,KACjC1C,KAAK0C,OAASL,EAAA,MAAA,CAAKE,MAAM,UAAaF,EAAA,MAAA,CAAKM,MAAO,CAACC,QAAS,UAC7DP,EAAA,MAAA,CAAKQ,MAAM,OAAOC,OAAO,OAAOC,IAAK/C,KAAKgD,0BAvHlB","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\n\n  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    return (\n      <Host class={{focused: this.focused, disabled}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-0824553f.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-97329951.system.js"],(function(e){"use strict";var t,s,c,i;return{setters:[function(e){t=e.r;s=e.c;c=e.h;i=e.H}],execute:function(){var o='verdocs-checkbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-checkbox.disabled{opacity:0.5}verdocs-checkbox.hide{display:none}verdocs-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#3f9d67}';var n=e("verdocs_checkbox",function(){function e(e){t(this,e);this.selected=s(this,"selected",7);this.checked=false;this.name="";this.value="";this.disabled=false}e.prototype.handleChange=function(e){console.log("changed",e.target.checked);this.selected.emit({value:this.value})};e.prototype.render=function(){var e=this;return c(i,{class:{disabled:this.disabled}},c("input",{type:"checkbox",value:this.value,name:this.name,id:"verdocs-checkbox-".concat(this.name,"-").concat(this.value),checked:this.checked,disabled:this.disabled,onChange:function(t){return e.handleChange(t)}}))};return e}());n.style=o}}}));
+//# sourceMappingURL=p-0824553f.system.entry.js.map

package/dist/verdocs-web-sdk/p-0824553f.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":["verdocsCheckboxCss","VerdocsCheckbox","exports","class_1","prototype","handleChange","e","console","log","target","checked","this","selected","emit","value","render","_this","h","Host","class","disabled","type","name","id","concat","onChange"],"mappings":"0JAAA,IAAMA,EAAqB,+iBCYdC,EAAeC,EAAA,mBAAA,mFAIC,gBAKJ,cAKC,iBAKK,MAS7BC,EAAAC,UAAAC,aAAA,SAAaC,GACXC,QAAQC,IAAI,UAAWF,EAAEG,OAAOC,SAChCC,KAAKC,SAASC,KAAK,CAACC,MAAOH,KAAKG,SAGlCX,EAAAC,UAAAW,OAAA,WAAA,IAAAC,EAAAL,KACE,OACEM,EAACC,EAAI,CAACC,MAAO,CAACC,SAAUT,KAAKS,WAC3BH,EAAA,QAAA,CACEI,KAAK,WACLP,MAAOH,KAAKG,MACZQ,KAAMX,KAAKW,KACXC,GAAI,oBAAAC,OAAoBb,KAAKW,KAAI,KAAAE,OAAIb,KAAKG,OAC1CJ,QAASC,KAAKD,QACdU,SAAUT,KAAKS,SACfK,SAAU,SAAAnB,GAAK,OAAAU,EAAKX,aAAaC,iBA3Cf","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-checkbox {\n  font-family: $verdocs-primary-font;\n  width: 20px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  input[type='checkbox'] {\n    width: 18px;\n    height: 18px;\n    accent-color: $verdocs-green-accent;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check box\n * for UI displays e.g. dialog boxes.\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-checkbox-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n      </Host>\n    );\n  }\n}\n"]}