npm - @verdocs/web-sdk - Versions diffs - 1.9.6 → 1.9.10 - Mend

@verdocs/web-sdk 1.9.6 → 1.9.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (796) hide show

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.js CHANGED Viewed

@@ -59,7 +59,7 @@ export class VerdocsTemplateFields {
       }
     }
     catch (e) {
-      console.log('[PREVIEW] Error with preview session', e);
+      console.log('[FIELDS] Error with preview session', e);
       (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
     }
   }
@@ -71,19 +71,18 @@ export class VerdocsTemplateFields {
     this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;
   }
   async handleFieldChange(field, e, optionId) {
-    console.log('[PREVIEW] handleFieldChange', field, e, optionId);
+    console.log('[FIELDS] handleFieldChange', field, e, optionId);
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[PREVIEW] Page rendered', pageInfo);
+    console.log('[FIELDS] Page rendered', pageInfo);
     const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[PREVIEW] Fields on page', fields);
+    console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
       const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);
       // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
       if (!el) {
-        console.log('Skipping partially rendered field', field);
         return;
       }
       el.addEventListener('recipientChanged', e => {
@@ -95,10 +94,9 @@ export class VerdocsTemplateFields {
       interact(el).draggable({
         listeners: {
           start(event) {
-            console.log('drag started', event.type, event.target);
+            console.log('[FIELDS] Drag started', event.type, event.target);
           },
           move(event) {
-            console.log('moved');
             const oldX = +(event.target.getAttribute('posX') || 0);
             const oldY = +(event.target.getAttribute('posY') || 0);
             const xScale = +(event.target.getAttribute('xScale') || 1);
@@ -110,7 +108,7 @@ export class VerdocsTemplateFields {
             updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
           },
           end(event) {
-            console.log('ended', event);
+            console.log('[FIELDS] Drag ended', event);
             // event.target.setAttribute('posX', 0);
             // event.target.setAttribute('posy', 0);
             // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
@@ -135,7 +133,7 @@ export class VerdocsTemplateFields {
     if (TemplateStore.loading) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, null, TemplateStore.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onPress: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onPress: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onPress: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onPress: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onPress: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onPress: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onPress: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => console.log('save'), disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => console.log('close'), class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
+    return (h(Host, null, TemplateStore.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(TemplateStore.template); }, disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
         { name: 'page', type: 'canvas' },
         { name: 'controls', type: 'div' },
       ] }))) : (h("div", null, "Error loading Template. Please try again later."))));
@@ -196,8 +194,8 @@ export class VerdocsTemplateFields {
   }
   static get events() {
     return [{
-        "method": "settingsUpdated",
-        "name": "settingsUpdated",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -206,9 +204,14 @@ export class VerdocsTemplateFields {
           "text": "Event fired when the user completes the step."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "ITemplate",
+          "resolved": "ITemplate",
+          "references": {
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "cancel",

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-template-fields.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n /\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n const currentTransform = el.style.transform;\n // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n const components = [...currentTransform.matchAll(/(\\w+)\$([^)])\$/gi)];\n el.style.transform = [\n components //\n .filter(component => component[1] !== key) // Remove the entry if it's already set\n .map(component => component[0]), // Convert back the remaining entries\n `${key}(${value})`,\n ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/*\n Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n /\n@Component({\n tag: 'verdocs-template-fields',\n styleUrl: 'verdocs-template-fields.scss',\n shadow: false,\n})\nexport class VerdocsTemplateFields {\n page0El: HTMLDivElement;\n toolbarEl: HTMLDivElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n if (!this.templateId) {\n console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n return;\n }\n\n try {\n console.log(`[FIELDS] Loading template ${this.templateId}`);\n await loadTemplate(this.endpoint, this.templateId);\n } catch (e) {\n console.log('[FIELDS] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n } catch (e) {\n console.log('[PREVIEW] Error with preview session', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n componentDidRender() {\n // console.log('rendered', this.page0El, this.toolbarEl);\n // console.log('w', this.page0El.clientWidth);\n // console.log('t', this.toolbarEl.clientWidth);\n interact.dynamicDrop(true);\n this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[PREVIEW] Page rendered', pageInfo);\n\n const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[PREVIEW] Fields on page', fields);\n fields.forEach(field => {\n const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n if (!el) {\n console.log('Skipping partially rendered field', field);\n return;\n }\n\n el.addEventListener('recipientChanged', e => {\n el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n });\n\n el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n interact(el).draggable({\n listeners: {\n start(event) {\n console.log('drag started', event.type, event.target);\n },\n move(event) {\n console.log('moved');\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const xScale = +(event.target.getAttribute('xScale') \|\| 1);\n const yScale = +(event.target.getAttribute('yScale') \|\| 1);\n const newX = event.dx / xScale + oldX;\n const newY = event.dy / yScale + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n },\n end(event) {\n console.log('ended', event);\n // event.target.setAttribute('posX', 0);\n // event.target.setAttribute('posy', 0);\n // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n },\n },\n });\n });\n }\n\n render() {\n const testField: ITemplateField = {\n template_id: '',\n name: 'test',\n role_name: 'Recipient 1',\n type: 'textbox',\n required: true,\n setting: {\n x: 0,\n y: 0,\n },\n page_sequence: 0,\n };\n\n if (TemplateStore.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n return (\n <Host>\n {TemplateStore.template ? (\n <Fragment>\n <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n <div class=\"label\">Add Field:</div>\n <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n <div style={{flex: '1'}} />\n <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n Save\n </button>\n <button onClick={() => console.log('close')} class=\"operation\">\n Close\n </button>\n </div>\n\n <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n <div class=\"user-placed-fields\">\n <div class=\"title\">User-Placed Fields</div>\n <verdocs-field-signature\n field={testField}\n style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n moveable={true}\n editable={true}\n />\n </div>\n </div>\n\n <verdocs-view\n templateId={this.templateId}\n endpoint={this.endpoint}\n onPageRendered={e => this.handlePageRendered(e)}\n pageLayers={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n </Fragment>\n ) : (\n <div>Error loading Template. Please try again later.</div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-template-fields.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n /\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n const currentTransform = el.style.transform;\n // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n const components = [...currentTransform.matchAll(/(\\w+)\$([^)])\$/gi)];\n el.style.transform = [\n components //\n .filter(component => component[1] !== key) // Remove the entry if it's already set\n .map(component => component[0]), // Convert back the remaining entries\n `${key}(${value})`,\n ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/*\n Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n /\n@Component({\n tag: 'verdocs-template-fields',\n styleUrl: 'verdocs-template-fields.scss',\n shadow: false,\n})\nexport class VerdocsTemplateFields {\n page0El: HTMLDivElement;\n toolbarEl: HTMLDivElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) next: EventEmitter<ITemplate>;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n if (!this.templateId) {\n console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n return;\n }\n\n try {\n console.log(`[FIELDS] Loading template ${this.templateId}`);\n await loadTemplate(this.endpoint, this.templateId);\n } catch (e) {\n console.log('[FIELDS] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n } catch (e) {\n console.log('[FIELDS] Error with preview session', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n componentDidRender() {\n // console.log('rendered', this.page0El, this.toolbarEl);\n // console.log('w', this.page0El.clientWidth);\n // console.log('t', this.toolbarEl.clientWidth);\n interact.dynamicDrop(true);\n this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[FIELDS] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[FIELDS] Page rendered', pageInfo);\n\n const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[FIELDS] Fields on page', fields);\n fields.forEach(field => {\n const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n if (!el) {\n return;\n }\n\n el.addEventListener('recipientChanged', e => {\n el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n });\n\n el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n interact(el).draggable({\n listeners: {\n start(event) {\n console.log('[FIELDS] Drag started', event.type, event.target);\n },\n move(event) {\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const xScale = +(event.target.getAttribute('xScale') \|\| 1);\n const yScale = +(event.target.getAttribute('yScale') \|\| 1);\n const newX = event.dx / xScale + oldX;\n const newY = event.dy / yScale + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n },\n end(event) {\n console.log('[FIELDS] Drag ended', event);\n // event.target.setAttribute('posX', 0);\n // event.target.setAttribute('posy', 0);\n // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n },\n },\n });\n });\n }\n\n render() {\n const testField: ITemplateField = {\n template_id: '',\n name: 'test',\n role_name: 'Recipient 1',\n type: 'textbox',\n required: true,\n setting: {\n x: 0,\n y: 0,\n },\n page_sequence: 0,\n };\n\n if (TemplateStore.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n return (\n <Host>\n {TemplateStore.template ? (\n <Fragment>\n <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n <div class=\"label\">Add Field:</div>\n <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onClick={() => console.log('single press')} />\n <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onClick={() => console.log('multi press')} />\n <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onClick={() => console.log('check press')} />\n <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onClick={() => console.log('radio press')} />\n <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onClick={() => console.log('date press')} />\n <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onClick={() => console.log('signature press')} />\n <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onClick={() => console.log('initial press')} />\n <div style={{flex: '1'}} />\n <button onClick={() => this.next?.emit(TemplateStore.template)} disabled={true} class=\"operation\">\n Save\n </button>\n <button onClick={() => this.cancel?.emit()} class=\"operation\">\n Close\n </button>\n </div>\n\n <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n <div class=\"user-placed-fields\">\n <div class=\"title\">User-Placed Fields</div>\n <verdocs-field-signature\n field={testField}\n style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n moveable={true}\n editable={true}\n />\n </div>\n </div>\n\n <verdocs-view\n templateId={this.templateId}\n endpoint={this.endpoint}\n onPageRendered={e => this.handlePageRendered(e)}\n pageLayers={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n </Fragment>\n ) : (\n <div>Error loading Template. Please try again later.</div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.stories.js CHANGED Viewed

@@ -6,15 +6,15 @@ export default {
     templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
   argTypes: {
-    cancel: { action: 'cancel' },
-    save: { action: 'save' },
+    onCancel: { action: 'cancel' },
+    onNext: { action: 'next' },
   },
   parameters: {
     layout: 'fullscreen',
   },
 };
 //export const TemplateFields = ({templateId, cancel, save}) => html`<div style="height: 600px; transform: translateZ(0);">
-export const TemplateFields = ({ templateId, cancel, save }) => html `<div style="height: 600px">
-  <verdocs-template-fields .templateId=${templateId} @cancel=${cancel} @save=${save} />
+export const TemplateFields = ({ templateId, onCancel, onNext }) => html `<div style="height: 600px">
+  <verdocs-template-fields .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />
 </div>`;
 //# sourceMappingURL=verdocs-template-fields.stories.js.map

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-template-fields.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,yBAAyB;EACpC,IAAI,EAAE;IACJ,UAAU,EAAE,sCAAsC;GACnD;EACD,QAAQ,EAAE;IACR,~~MAAM~~,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;~~IAC1B~~,~~IAAI~~,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;~~GACvB~~;EACD,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACM,CAAC;AAEV,2HAA2H;AAC3H,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,UAAU,EAAE,~~MAAM~~,EAAE,~~IAAI~~,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA;~~yCACzB~~,UAAU,YAAY,~~MAAM~~,UAAU,~~IAAI~~;~~OAC5E~~,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Elements/Template Fields',\n component: 'verdocs-template-fields',\n args: {\n templateId: 'd2338742-f3a1-465b-8592-806587413cc1',\n },\n argTypes: {\n ~~cancel~~: {action: 'cancel'},\n ~~save~~: {action: '~~save~~'},\n },\n parameters: {\n layout: 'fullscreen',\n },\n} as Meta;\n\n//export const TemplateFields = ({templateId, cancel, save}) => html`<div style=\"height: 600px; transform: translateZ(0);\">\nexport const TemplateFields = ({templateId, ~~cancel~~, ~~save~~}) => html`<div style=\"height: 600px\">\n <verdocs-template-fields .templateId=${templateId} @cancel=${~~cancel~~} @~~save~~=${~~save~~} />\n</div>`;\n"]}
1	+ {"version":3,"file":"verdocs-template-fields.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,yBAAyB;EACpC,IAAI,EAAE;IACJ,UAAU,EAAE,sCAAsC;GACnD;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC5B,MAAM,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;GACzB;EACD,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACM,CAAC;AAEV,2HAA2H;AAC3H,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA;yCAC7B,UAAU,YAAY,QAAQ,UAAU,MAAM;OAChF,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Elements/Template Fields',\n component: 'verdocs-template-fields',\n args: {\n templateId: 'd2338742-f3a1-465b-8592-806587413cc1',\n },\n argTypes: {\n onCancel: {action: 'cancel'},\n onNext: {action: 'next'},\n },\n parameters: {\n layout: 'fullscreen',\n },\n} as Meta;\n\n//export const TemplateFields = ({templateId, cancel, save}) => html`<div style=\"height: 600px; transform: translateZ(0);\">\nexport const TemplateFields = ({templateId, onCancel, onNext}) => html`<div style=\"height: 600px\">\n <verdocs-template-fields .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />\n</div>`;\n"]}

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.js CHANGED Viewed

@@ -12,6 +12,7 @@ export class VerdocsTemplateProperties {
     this.templateId = '';
     this.template = null;
     this.name = '';
+    this.visibility = '';
     this.sendReminders = false;
     this.firstReminderDays = '1';
     this.reminderDays = '1';
@@ -37,10 +38,6 @@ export class VerdocsTemplateProperties {
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
-  handleMessageChange(e) {
-    console.log(e);
-    // this.message = e.target.value;
-  }
   handleCancel(e) {
     var _a;
     e.stopPropagation();
@@ -49,20 +46,15 @@ export class VerdocsTemplateProperties {
   handleSubmit(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit();
-    // this.contactSelected?.emit({
-    //   delegator: this.delegator,
-    // });
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
+      name: this.name,
+      firstReminderDays: +this.firstReminderDays,
+      reminderDays: +this.reminderDays,
+      sendReminders: this.sendReminders,
+    });
   }
   render() {
-    console.log('vals', { firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name });
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => {
-        this.name = e.target.value;
-      } })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onSelected: e => (this.sendReminders = e.detail.value === 'on') })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => (this.name = e.target.value) })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => (this.sendReminders = e.target.checked) })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value) })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value) }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private", onChange: () => (this.visibility = 'private') }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared", onChange: () => (this.visibility = 'shared') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public", onChange: () => (this.visibility = 'shared_public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: this.visibility === 'public', value: "public", onChange: () => (this.visibility = 'public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
   }
   static get is() { return "verdocs-template-properties"; }
   static get originalStyleUrls() {
@@ -122,6 +114,7 @@ export class VerdocsTemplateProperties {
     return {
       "template": {},
       "name": {},
+      "visibility": {},
       "sendReminders": {},
       "firstReminderDays": {},
       "reminderDays": {}
@@ -144,8 +137,8 @@ export class VerdocsTemplateProperties {
           "references": {}
         }
       }, {
-        "method": "settingsUpdated",
-        "name": "settingsUpdated",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -154,8 +147,8 @@ export class VerdocsTemplateProperties {
           "text": "Event fired when the user completes the step."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}",
+          "resolved": "{ name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number; }",
           "references": {}
         }
       }, {

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-template-properties.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/*\n Displays a collection of settings boxes that allow a user to configure a template's behavior.\n /\n@Component({\n tag: 'verdocs-template-properties',\n styleUrl: 'verdocs-template-properties.scss',\n shadow: false,\n})\nexport class VerdocsTemplateProperties {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The template ID to edit.\n /\n @Prop() templateId: string = '';\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() template: ITemplate \| null = null;\n @State() name: string = '';\n @State() sendReminders = false;\n @State() firstReminderDays = '1';\n @State() reminderDays = '1';\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n const template = await getTemplate(this.endpoint, this.templateId);\n if (!template) {\n console.log('[PREVIEW] Unable to load template');\n return;\n }\n\n console.log('[PROPERTIES] Got template', template);\n this.template = template;\n TemplateStore.template = template;\n this.name = template.name;\n this.sendReminders = template.reminder_id !== null;\n } catch (e) {\n console.log('[PROPERTIES] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n handleMessageChange(e: any) {\n console.log(e);\n // this.message = e.target.value;\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.settingsUpdated?.emit();\n\n // this.contactSelected?.emit({\n // delegator: this.delegator,\n // });\n }\n\n render() {\n console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Template Name</h5>\n <fieldset>\n <verdocs-text-input\n value={this.name}\n autocomplete=\"off\"\n onInput={(e: any) => {\n this.name = e.target.value;\n }}\n />\n </fieldset>\n\n <h5>Reminders</h5>\n <fieldset>\n <div class=\"input-row\">\n <label>Send Automatic Reminders</label>\n <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n </div>\n\n <div class=\"input-row\">\n <label>Days Before First Reminder</label>\n <verdocs-text-input\n value={this.firstReminderDays}\n onInput={(e: any) => {\n this.firstReminderDays = e.target.value;\n }}\n />\n </div>\n <div class=\"input-row\">\n <label>Days Between Reminders</label>\n <verdocs-text-input\n value={this.reminderDays}\n onInput={(e: any) => {\n this.firstReminderDays = e.target.value;\n }}\n />\n </div>\n </fieldset>\n\n <h5>Template Visibility</h5>\n <fieldset>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n <label htmlFor=\"verdocs-radio-button-visibility-private\">\n <div class=\"title\">Private</div>\n <div class=\"description\">Only you can share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n <div class=\"title\">Shared to your organization</div>\n <div class=\"description\">Give access to your organization to share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n <div class=\"title\">Shared to your organization and Public</div>\n <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-public\">\n <div class=\"title\">Public</div>\n <div class=\"description\">Anyone on the Web can find and use this template</div>\n </label>\n </div>\n </fieldset>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-template-properties.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAC;AAEhE,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAC/C,OAAO,aAAa,MAAM,8BAA8B,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,yBAAyB;;oBAIA,eAAe,CAAC,UAAU,EAAE;sBAKnC,EAAE;oBAkBO,IAAI;gBAClB,EAAE;sBACI,EAAE;yBACP,KAAK;6BACD,GAAG;wBACR,GAAG;;EAE3B,KAAK,CAAC,iBAAiB;;IACrB,IAAI;MACF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;MAE5B,OAAO,CAAC,GAAG,CAAC,iCAAiC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MAChE,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;MACnE,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QACjD,OAAO;OACR;MAED,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,QAAQ,CAAC,CAAC;MACnD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACzB,aAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;MAClC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;MAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,WAAW,KAAK,IAAI,CAAC;KACpD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAC;MACtD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;EACH,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC;MACd,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,iBAAiB,EAAE,CAAC,IAAI,CAAC,iBAAiB;MAC1C,YAAY,EAAE,CAAC,IAAI,CAAC,YAAY;MAChC,aAAa,EAAE,IAAI,CAAC,aAAa;KAClC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK;MAC5F,8BAAsB;MACtB;QACE,0BAAoB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CACrG;MAEX,0BAAkB;MAClB;QACE,WAAK,KAAK,EAAC,WAAW;UACpB,4CAAuC;UACvC,wBAAkB,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAI,CACjJ;QAEN,WAAK,KAAK,EAAC,WAAW;UACpB,8CAAyC;UACzC,0BAAoB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CACjH;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,0CAAqC;UACrC,0BAAoB,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CACvG,CACG;MAEX,oCAA4B;MAC5B;QACE,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,GAAI;UACxH,aAAO,OAAO,EAAC,yCAAyC;YACtD,WAAK,KAAK,EAAC,OAAO,cAAc;YAChC,WAAK,KAAK,EAAC,aAAa,+CAA+C,CACjE,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAI;UACtH,aAAO,OAAO,EAAC,wCAAwC;YACrD,WAAK,KAAK,EAAC,OAAO,kCAAkC;YACpD,WAAK,KAAK,EAAC,aAAa,sEAAsE,CACxF,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,GAAI;UACpI,aAAO,OAAO,EAAC,+CAA+C;YAC5D,WAAK,KAAK,EAAC,OAAO,6CAA6C;YAC/D,WAAK,KAAK,EAAC,aAAa,oHAAoH,CACtI,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAI;UAC9I,aAAO,OAAO,EAAC,wCAAwC;YACrD,WAAK,KAAK,EAAC,OAAO,aAAa;YAC/B,WAAK,KAAK,EAAC,aAAa,uDAAuD,CACzE,CACJ,CACG;MAEX,WAAK,KAAK,EAAC,SAAS;QAClB,WAAK,KAAK,EAAC,WAAW,GAAG;QAEzB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI;QACpG,sBAAgB,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CAC1E,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/*\n Displays a collection of settings boxes that allow a user to configure a template's behavior.\n /\n@Component({\n tag: 'verdocs-template-properties',\n styleUrl: 'verdocs-template-properties.scss',\n shadow: false,\n})\nexport class VerdocsTemplateProperties {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The template ID to edit.\n /\n @Prop() templateId: string = '';\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) next: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() template: ITemplate \| null = null;\n @State() name: string = '';\n @State() visibility: string = '';\n @State() sendReminders = false;\n @State() firstReminderDays = '1';\n @State() reminderDays = '1';\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n const template = await getTemplate(this.endpoint, this.templateId);\n if (!template) {\n console.log('[PREVIEW] Unable to load template');\n return;\n }\n\n console.log('[PROPERTIES] Got template', template);\n this.template = template;\n TemplateStore.template = template;\n this.name = template.name;\n this.sendReminders = template.reminder_id !== null;\n } catch (e) {\n console.log('[PROPERTIES] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.next?.emit({\n name: this.name,\n firstReminderDays: +this.firstReminderDays,\n reminderDays: +this.reminderDays,\n sendReminders: this.sendReminders,\n });\n }\n\n render() {\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Template Name</h5>\n <fieldset>\n <verdocs-text-input value={this.name} autocomplete=\"off\" onInput={(e: any) => (this.name = e.target.value)} />\n </fieldset>\n\n <h5>Reminders</h5>\n <fieldset>\n <div class=\"input-row\">\n <label>Send Automatic Reminders</label>\n <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onInput={(e: any) => (this.sendReminders = e.target.checked)} />\n </div>\n\n <div class=\"input-row\">\n <label>Days Before First Reminder</label>\n <verdocs-text-input value={this.firstReminderDays} onInput={(e: any) => (this.firstReminderDays = e.target.value)} />\n </div>\n <div class=\"input-row\">\n <label>Days Between Reminders</label>\n <verdocs-text-input value={this.reminderDays} onInput={(e: any) => (this.reminderDays = e.target.value)} />\n </div>\n </fieldset>\n\n <h5>Template Visibility</h5>\n <fieldset>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" onChange={() => (this.visibility = 'private')} />\n <label htmlFor=\"verdocs-radio-button-visibility-private\">\n <div class=\"title\">Private</div>\n <div class=\"description\">Only you can share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" onChange={() => (this.visibility = 'shared')} />\n <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n <div class=\"title\">Shared to your organization</div>\n <div class=\"description\">Give access to your organization to share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" onChange={() => (this.visibility = 'shared_public')} />\n <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n <div class=\"title\">Shared to your organization and Public</div>\n <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={this.visibility === 'public'} value=\"public\" onChange={() => (this.visibility = 'public')} />\n <label htmlFor=\"verdocs-radio-button-visibility-public\">\n <div class=\"title\">Public</div>\n <div class=\"description\">Anyone on the Web can find and use this template</div>\n </label>\n </div>\n </fieldset>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.stories.js CHANGED Viewed

@@ -6,9 +6,9 @@ export default {
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
   },
   argTypes: {
-    cancel: { action: 'cancel' },
-    settingsUpdated: { action: 'settingsUpdated' },
+    onCancel: { action: 'cancel' },
+    onNext: { action: 'next' },
   },
 };
-export const TemplateProperties = ({ cancel, settingsUpdated, templateId }) => html `<verdocs-template-properties .templateId=${templateId} @cancel=${cancel} @settingsUpdated=${settingsUpdated} />`;
+export const TemplateProperties = ({ onCancel, onNext, templateId }) => html `<verdocs-template-properties .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />`;
 //# sourceMappingURL=verdocs-template-properties.stories.js.map

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-template-properties.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,6BAA6B;EACxC,IAAI,EAAE;IACJ,UAAU,EAAE,sCAAsC;GACnD;EACD,QAAQ,EAAE;IACR,~~MAAM~~,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;~~IAC1B~~,~~eAAe~~,EAAE,EAAC,MAAM,EAAE,~~iBAAiB~~,EAAC;~~GAC7C~~;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,~~MAAM~~,EAAE,~~eAAe~~,EAAE,UAAU,EAAC,EAAE,EAAE,~~CAC1E~~,IAAI,CAAA,4CAA4C,UAAU,YAAY,~~MAAM~~,~~qBAAqB~~,~~eAAe~~,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Elements/Template Properties',\n component: 'verdocs-template-properties',\n args: {\n templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n },\n argTypes: {\n ~~cancel~~: {action: 'cancel'},\n ~~settingsUpdated~~: {action: '~~settingsUpdated~~'},\n },\n} as Meta;\n\nexport const TemplateProperties = ({~~cancel~~, ~~settingsUpdated~~, templateId}) ~~=>\n~~ html`<verdocs-template-properties .templateId=${templateId} @cancel=${~~cancel~~} @~~settingsUpdated~~=${~~settingsUpdated~~} />`;\n"]}
1	+ {"version":3,"file":"verdocs-template-properties.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,6BAA6B;EACxC,IAAI,EAAE;IACJ,UAAU,EAAE,sCAAsC;GACnD;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC5B,MAAM,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;GACzB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,UAAU,YAAY,QAAQ,UAAU,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Elements/Template Properties',\n component: 'verdocs-template-properties',\n args: {\n templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n },\n argTypes: {\n onCancel: {action: 'cancel'},\n onNext: {action: 'next'},\n },\n} as Meta;\n\nexport const TemplateProperties = ({onCancel, onNext, templateId}) => html`<verdocs-template-properties .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />`;\n"]}

package/dist/collection/components/elements/verdocs-template-recipients/verdocs-template-recipients.js CHANGED Viewed

@@ -191,17 +191,16 @@ export class VerdocsTemplateRecipients {
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
-    var _a, _b;
+    var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.contactSelected) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       full_name: this.name,
       email: this.email,
       phone: this.phone,
       message: this.message,
       delegator: this.delegator,
     });
-    (_b = this.settingsUpdated) === null || _b === void 0 ? void 0 : _b.emit({});
   }
   render() {
     console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));
@@ -210,9 +209,9 @@ export class VerdocsTemplateRecipients {
     return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Participant Order"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[this.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" }))), this.sequences.map(sequence => (h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence }), this.rolesAtSequence[sequence].map(role => {
       beforeOrder = role.order;
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence })));
-    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { open: true, value: this.sender, onCancel: () => (this.showingSenderDialog = false), onDone: e => {
+    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { value: this.sender, onCancel: () => (this.showingSenderDialog = false), onNext: e => {
         this.showingSenderDialog = false;
-        this.sender = e.detail.sender;
+        this.sender = e.detail;
       } }))));
   }
   static get is() { return "verdocs-template-recipients"; }
@@ -345,29 +344,14 @@ export class VerdocsTemplateRecipients {
           "references": {}
         }
       }, {
-        "method": "settingsUpdated",
-        "name": "settingsUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user completes the step."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "contactSelected",
-        "name": "contactSelected",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user changes the type."
+          "text": "Event fired when the user selects a contact."
         },
         "complexType": {
           "original": "IContactSelectEvent",

package/dist/collection/components/elements/verdocs-template-recipients/verdocs-template-recipients.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-template-recipients.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n const newArr = [...arr];\n newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n [TemplateSenderTypes.EVERYONE]: 'Everyone',\n [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n // The text the user has entered in the search field\n query: string;\n}\n\nexport interface IContactSelectEvent {\n full_name: string;\n email: string;\n phone: string;\n message: string;\n delegator: boolean;\n}\n\nexport interface IEmailContact {\n // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n id?: any;\n\n // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n // `verdocs-contact-picker .avatar { display: none; }`\n avatar?: string;\n\n // The recipient's name, as it should be displayed to the user.\n name: string;\n\n // The email address for the contact.\n email: string;\n\n // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n // notifications will be sent to both locations.\n phone?: string;\n\n [key: string]: any;\n}\n\nexport interface IPhoneContact {\n // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n id?: any;\n\n // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n // `verdocs-contact-picker .avatar { display: none; }`\n avatar?: string;\n\n // The recipient's name, as it should be displayed to the user.\n name: string;\n\n // The email address for the contact.\n email?: string;\n\n // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n // notifications will be sent to both locations.\n phone: string;\n\n [key: string]: any;\n}\n\n/*\n Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n \n This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n /\n@Component({\n tag: 'verdocs-template-recipients',\n styleUrl: 'verdocs-template-recipients.scss',\n shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The role that this contact will be assigned to.\n /\n @Prop() templateRole: IRole \| null = null;\n\n /\n If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n * of suggestions be limited to the 5 best matching records.\n /\n @Prop() contactSuggestions: (IEmailContact \| IPhoneContact)[] = [];\n\n /\n Event fired when the user enters text in the search field. The calling application may use this to update\n * the `contactSuggestions` property.\n /\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n @State() name: string;\n @State() email: string;\n @State() phone: string;\n @State() message: string;\n @State() showSuggestions: boolean = false;\n @State() showMessage: boolean = false;\n @State() delegator: boolean = false;\n @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n @State() showingSenderDialog = false;\n @State() orderedRoles: TAnnotatedRole[] = [];\n\n sequences: number[] = [];\n rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n componentWillLoad() {\n if (this.templateRole) {\n this.name = this.templateRole.full_name \|\| '';\n this.email = this.templateRole.email \|\| '';\n this.phone = this.templateRole.phone \|\| '';\n this.delegator = this.templateRole.delegator \|\| false;\n this.message = this.templateRole.message \|\| '';\n this.showMessage = this.message !== '';\n }\n\n this.orderedRoles = [\n {\n order: 0,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Seller 1',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 1,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 1,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Seller 2',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 1,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 2,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Buyer 1',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 2,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 3,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Buyer 2',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 2,\n fields: [],\n delegator: false,\n phone: '',\n },\n ];\n\n this.computeRolesBySequence();\n }\n\n componentDidRender() {\n interact.dynamicDrop(true);\n interact('.recipient').draggable({\n listeners: {\n start(event) {\n console.log('drag start', event.type, event.target);\n },\n move(event) {\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const newX = event.dx + oldX;\n const newY = event.dy + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n },\n end(event) {\n console.log('end', event);\n event.target.setAttribute('posX', 0);\n event.target.setAttribute('posy', 0);\n event.target.style.transform = `translate(0px, 0px)`;\n },\n },\n });\n\n interact('.dropzone').dropzone({\n overlap: 0.05,\n ondrop: event => {\n event.target.classList.remove('active');\n\n console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n const roleName = event.relatedTarget.dataset.rolename;\n const targetOrder = +event.target.dataset.order;\n const targetSequence = +event.target.dataset.sequence;\n // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n if (roleIndex !== -1) {\n console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n const role = this.orderedRoles[roleIndex];\n role.sequence = targetSequence;\n\n console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n this.orderedRoles.forEach((role, index) => {\n role.order = index;\n });\n console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n this.computeRolesBySequence();\n }\n },\n ondropactivate: e => {\n // console.log('drop activated');\n e.target.classList.add('visible');\n },\n ondropdeactivate: e => {\n e.target.classList.remove('visible');\n },\n ondragenter: e => {\n // console.log('drag enter', e);\n e.target.classList.add('active');\n },\n ondragleave: e => {\n // console.log('drag leave', e);\n e.target.classList.remove('active');\n },\n });\n }\n\n computeRolesBySequence() {\n const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n this.orderedRoles.forEach(role => {\n rolesAtSequence[role.sequence] \|\|= [];\n rolesAtSequence[role.sequence].push(role);\n });\n\n this.rolesAtSequence = rolesAtSequence;\n\n console.log('ras', this.rolesAtSequence);\n this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n this.sequences.sort((a, b) => a - b);\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.showSuggestions = false;\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.showSuggestions = false;\n this.contactSelected?.emit({\n full_name: this.name,\n email: this.email,\n phone: this.phone,\n message: this.message,\n delegator: this.delegator,\n });\n\n this.settingsUpdated?.emit({});\n }\n\n render() {\n console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n const roleNames = this.orderedRoles.map(role => role.name) \|\| [];\n let beforeOrder = 0;\n\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Participant Order</h5>\n\n <div class=\"participants\">\n <div class=\"left-line\" />\n <div class=\"row\">\n <div class=\"icon\" innerHTML={startIcon} />\n <div class=\"sender\">\n <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n </div>\n </div>\n\n {this.sequences.map(sequence => (\n <div class=\"row\">\n <div class=\"icon\" innerHTML={stepIcon} />\n <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n {this.rolesAtSequence[sequence].map(role => {\n beforeOrder = role.order;\n return (\n <Fragment>\n <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n </div>\n <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n </Fragment>\n );\n })}\n </div>\n ))}\n\n <div class=\"row\">\n <div class=\"icon\" innerHTML={doneIcon} />\n <div class=\"complete\">Document Complete</div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n </div>\n\n {/ We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n {this.showingSenderDialog && (\n <verdocs-template-sender-dialog\n open={true}\n value={this.sender}\n onCancel={() => (this.showingSenderDialog = false)}\n onDone={e => {\n this.showingSenderDialog = false;\n this.sender = e.detail.sender;\n }}\n />\n )}\n </form>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-template-recipients.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n const newArr = [...arr];\n newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n [TemplateSenderTypes.EVERYONE]: 'Everyone',\n [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n // The text the user has entered in the search field\n query: string;\n}\n\nexport interface IContactSelectEvent {\n full_name: string;\n email: string;\n phone: string;\n message: string;\n delegator: boolean;\n}\n\nexport interface IEmailContact {\n // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n id?: any;\n\n // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n // `verdocs-contact-picker .avatar { display: none; }`\n avatar?: string;\n\n // The recipient's name, as it should be displayed to the user.\n name: string;\n\n // The email address for the contact.\n email: string;\n\n // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n // notifications will be sent to both locations.\n phone?: string;\n\n [key: string]: any;\n}\n\nexport interface IPhoneContact {\n // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n id?: any;\n\n // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n // `verdocs-contact-picker .avatar { display: none; }`\n avatar?: string;\n\n // The recipient's name, as it should be displayed to the user.\n name: string;\n\n // The email address for the contact.\n email?: string;\n\n // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n // notifications will be sent to both locations.\n phone: string;\n\n [key: string]: any;\n}\n\n/*\n Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n \n This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n /\n@Component({\n tag: 'verdocs-template-recipients',\n styleUrl: 'verdocs-template-recipients.scss',\n shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The role that this contact will be assigned to.\n /\n @Prop() templateRole: IRole \| null = null;\n\n /\n If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n * of suggestions be limited to the 5 best matching records.\n /\n @Prop() contactSuggestions: (IEmailContact \| IPhoneContact)[] = [];\n\n /\n Event fired when the user enters text in the search field. The calling application may use this to update\n * the `contactSuggestions` property.\n /\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user selects a contact.\n /\n @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n @State() name: string;\n @State() email: string;\n @State() phone: string;\n @State() message: string;\n @State() showSuggestions: boolean = false;\n @State() showMessage: boolean = false;\n @State() delegator: boolean = false;\n @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n @State() showingSenderDialog = false;\n @State() orderedRoles: TAnnotatedRole[] = [];\n\n sequences: number[] = [];\n rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n componentWillLoad() {\n if (this.templateRole) {\n this.name = this.templateRole.full_name \|\| '';\n this.email = this.templateRole.email \|\| '';\n this.phone = this.templateRole.phone \|\| '';\n this.delegator = this.templateRole.delegator \|\| false;\n this.message = this.templateRole.message \|\| '';\n this.showMessage = this.message !== '';\n }\n\n this.orderedRoles = [\n {\n order: 0,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Seller 1',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 1,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 1,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Seller 2',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 1,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 2,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Buyer 1',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 2,\n fields: [],\n delegator: false,\n phone: '',\n },\n {\n order: 3,\n template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n name: 'Buyer 2',\n full_name: '',\n email: '',\n type: 'signer',\n sequence: 2,\n fields: [],\n delegator: false,\n phone: '',\n },\n ];\n\n this.computeRolesBySequence();\n }\n\n componentDidRender() {\n interact.dynamicDrop(true);\n interact('.recipient').draggable({\n listeners: {\n start(event) {\n console.log('drag start', event.type, event.target);\n },\n move(event) {\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const newX = event.dx + oldX;\n const newY = event.dy + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n },\n end(event) {\n console.log('end', event);\n event.target.setAttribute('posX', 0);\n event.target.setAttribute('posy', 0);\n event.target.style.transform = `translate(0px, 0px)`;\n },\n },\n });\n\n interact('.dropzone').dropzone({\n overlap: 0.05,\n ondrop: event => {\n event.target.classList.remove('active');\n\n console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n const roleName = event.relatedTarget.dataset.rolename;\n const targetOrder = +event.target.dataset.order;\n const targetSequence = +event.target.dataset.sequence;\n // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n if (roleIndex !== -1) {\n console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n const role = this.orderedRoles[roleIndex];\n role.sequence = targetSequence;\n\n console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n this.orderedRoles.forEach((role, index) => {\n role.order = index;\n });\n console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n this.computeRolesBySequence();\n }\n },\n ondropactivate: e => {\n // console.log('drop activated');\n e.target.classList.add('visible');\n },\n ondropdeactivate: e => {\n e.target.classList.remove('visible');\n },\n ondragenter: e => {\n // console.log('drag enter', e);\n e.target.classList.add('active');\n },\n ondragleave: e => {\n // console.log('drag leave', e);\n e.target.classList.remove('active');\n },\n });\n }\n\n computeRolesBySequence() {\n const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n this.orderedRoles.forEach(role => {\n rolesAtSequence[role.sequence] \|\|= [];\n rolesAtSequence[role.sequence].push(role);\n });\n\n this.rolesAtSequence = rolesAtSequence;\n\n console.log('ras', this.rolesAtSequence);\n this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n this.sequences.sort((a, b) => a - b);\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.showSuggestions = false;\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.showSuggestions = false;\n this.next?.emit({\n full_name: this.name,\n email: this.email,\n phone: this.phone,\n message: this.message,\n delegator: this.delegator,\n });\n }\n\n render() {\n console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n const roleNames = this.orderedRoles.map(role => role.name) \|\| [];\n let beforeOrder = 0;\n\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Participant Order</h5>\n\n <div class=\"participants\">\n <div class=\"left-line\" />\n <div class=\"row\">\n <div class=\"icon\" innerHTML={startIcon} />\n <div class=\"sender\">\n <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n </div>\n </div>\n\n {this.sequences.map(sequence => (\n <div class=\"row\">\n <div class=\"icon\" innerHTML={stepIcon} />\n <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n {this.rolesAtSequence[sequence].map(role => {\n beforeOrder = role.order;\n return (\n <Fragment>\n <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n </div>\n <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n </Fragment>\n );\n })}\n </div>\n ))}\n\n <div class=\"row\">\n <div class=\"icon\" innerHTML={doneIcon} />\n <div class=\"complete\">Document Complete</div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n </div>\n\n {/ We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n {this.showingSenderDialog && (\n <verdocs-template-sender-dialog\n value={this.sender}\n onCancel={() => (this.showingSenderDialog = false)}\n onNext={e => {\n this.showingSenderDialog = false;\n this.sender = e.detail;\n }}\n />\n )}\n </form>\n );\n }\n}\n"]}