@verdocs/web-sdk 1.9.9 → 1.9.14

package/dist/cjs/verdocs-toggle.cjs.entry.js

@@ -17,28 +17,6 @@ const VerdocsToggle = class {
     var _a;
     this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
   }
-  // @Listen('click', {
-  //   target: 'document',
-  //   capture: true,
-  //   passive: false,
-  // })
-  // handleClick(event) {
-  //   event.preventDefault();
-  //   let container = event.target;
-  //   if (container.matches('toggle-icon-buttons')) {
-  //     container = event.target.shadowRoot;
-  //     const element = container.activeElement;
-  //     const siblings = Array.from(element.parentElement.children).filter(child => {
-  //       return child !== element;
-  //     });
-  //     siblings.map((sibling: any) => {
-  //       return sibling.classList.remove('selected');
-  //     });
-  //     if (!element.classList.contains('selected')) {
-  //       element.classList.add('selected');
-  //     }
-  //   }
-  // }
   render() {
     return (index.h("div", { class: "container" }, index.h("span", { class: "label" }, `${this.options.label}:`), index.h("div", { class: "buttons" }, this.options.buttons.map((button, index$1) => (index.h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index$1 === this.selectedOption ? 'selected' : '', onClick: () => {
         console.log('clicked', index$1);

package/dist/cjs/verdocs-toggle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCwBnmC,aAAa;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D;;;;;;;;;;;;;;;;;;;;;;;EAyBD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrDA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAEC,OAAa,MACxDD,oBACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAEC,OAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAEA,OAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAGA,OAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;","names":["h","index"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n *\n * ```typescript\n *\n * ```\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  // @Listen('click', {\n  //   target: 'document',\n  //   capture: true,\n  //   passive: false,\n  // })\n  // handleClick(event) {\n  //   event.preventDefault();\n  //   let container = event.target;\n  //   if (container.matches('toggle-icon-buttons')) {\n  //     container = event.target.shadowRoot;\n  //     const element = container.activeElement;\n  //     const siblings = Array.from(element.parentElement.children).filter(child => {\n  //       return child !== element;\n  //     });\n  //     siblings.map((sibling: any) => {\n  //       return sibling.classList.remove('selected');\n  //     });\n  //     if (!element.classList.contains('selected')) {\n  //       element.classList.add('selected');\n  //     }\n  //   }\n  // }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCoBnmC,aAAa;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrDA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAEC,OAAa,MACxDD,oBACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAEC,OAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAEA,OAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAGA,OAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;","names":["h","index"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-upload-dialog.cjs.entry.js

@@ -30,30 +30,20 @@ var fileToDataUrl = function (file) {
     });
 };
 
-const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-</svg>
-`;
-
-const Trash = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-</svg>
-`;
-
 const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
 
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
+const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const VerdocsUploadDialog = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cancel = index.createEvent(this, "cancel", 7);
-    this.done = index.createEvent(this, "done", 7);
-    this.open = false;
+    this.next = index.createEvent(this, "next", 7);
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -63,8 +53,7 @@ const VerdocsUploadDialog = class {
     }
   }
   handleDone() {
-    this.done.emit(this.decodedFiles);
-    this.open = false;
+    this.next.emit(this.decodedFiles);
   }
   handleDragOver(e) {
     e.preventDefault();
@@ -101,18 +90,16 @@ const VerdocsUploadDialog = class {
     var _a;
     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
   }
-  async handleFileChange(e) {
-    var _a, _b, _c;
-    console.log('fileChange', e);
-    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+  async handleFileChange() {
+    var _a, _b;
     let droppedFiles = [];
-    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
-      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
+      droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
     }
     this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
   }
   render() {
-    return (index.h(index.Host, { style: { display: this.open ? 'block' : 'none' } }, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (index.h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, index.h("p", null, "Drag and drop a file here..."), index.h("p", null, "- or -"), index.h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), index.h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (index.h("div", { class: "attachments" }, this.decodedFiles.map((file, index$1) => (index.h("div", { class: "attachment" }, index.h("div", { class: "icon", innerHTML: Paperclip }), index.h("div", { class: "name" }, file.name), index.h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index$1) })))))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), index.h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (index.h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, index.h("p", null, "Drag and drop a file here..."), index.h("p", null, "- or -"), index.h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), index.h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (index.h("div", { class: "attachments" }, this.decodedFiles.map((file, index$1) => (index.h("div", { class: "attachment" }, index.h("div", { class: "icon", innerHTML: PaperclipIcon }), index.h("div", { class: "name" }, file.name), index.h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index$1) })))))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
   }
 };
 VerdocsUploadDialog.style = verdocsUploadDialogCss;

package/dist/cjs/verdocs-upload-dialog.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-upload-dialog.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\nimport Paperclip from './paperclip.svg';\nimport Trash from './trash.svg';\n\n/**\n * Display a file upload experience.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.decodedFiles);\n    this.open = false;\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange(e) {\n    console.log('fileChange', e);\n    console.log('files', this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onPress={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={e => this.handleFileChange(e)} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={Paperclip} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={Trash} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-upload-dialog.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-view.cjs.entry.js

@@ -0,0 +1,331 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-1329d89c.js');
+const Envelopes = require('./Envelopes-aec4ee3d.js');
+require('./Types-da57ce69.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-8c408e5b.js');
+const utils = require('./utils-e0f38696.js');
+const index = require('./index-eb130f52.js');
+const errors = require('./errors-0396da3d.js');
+
+// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
+const { state, onChange } = index.createStore({
+  envelope: null,
+  loadProgress: 0,
+  loading: true,
+  error: '',
+  roleNames: [],
+  dirty: false,
+});
+onChange('envelope', async (newEnvelope) => {
+  if (!newEnvelope) {
+    console.log('[ENVELOPESTORE] Clearing envelope');
+    state.roleNames = [];
+    state.dirty = false;
+    state.loading = false;
+    state.error = '';
+    state.loadProgress = 0;
+    return;
+  }
+  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);
+  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);
+  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);
+});
+
+// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into
+// child elements.
+const getEnvelopeById = async (endpoint, envelopeId) => {
+  var _a;
+  state.envelope = null;
+  if (!envelopeId) {
+    console.log(`[ENVELOPES] Missing required envelope ID`);
+    return;
+  }
+  state.error = '';
+  state.loading = true;
+  try {
+    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);
+    const envelope = await Envelopes.getEnvelope(endpoint, envelopeId);
+    if (!envelope) {
+      console.log('[ENVELOPES] Unable to load envelope');
+      return;
+    }
+    state.envelope = envelope;
+    state.loading = false;
+  }
+  catch (e) {
+    state.loading = false;
+    state.error = ((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 ? 'Authentication required' : e.message;
+    console.log('[ENVELOPES] Error loading envelope', e);
+    throw e;
+  }
+};
+
+const verdocsViewCss = "verdocs-view{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsView = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.sdkError = index$1.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId) {
+      console.error(`[VIEW] Missing reuqired envelopeId`);
+      return;
+    }
+    try {
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+    }
+    catch (e) {
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+    }
+  }
+  // Determine whether a page is "rotated" (in either direction)
+  // isRotated(rotation) {
+  //   return rotation !== 0 && rotation % 180 !== 0;
+  // }
+  // Render one document page. Note that pageNumber is 1-based.
+  // async renderPage(pageNumber: number): Promise<void> {
+  //   const domPage = this.domPages[pageNumber];
+  //
+  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+  //   if (!domPage) {
+  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});
+  //     return;
+  //   }
+  //
+  //   const pageMetrics = this.sourcePageMetrics[pageNumber];
+  //
+  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});
+  //   try {
+  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);
+  //
+  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+  //     // if (!canvas) {
+  //     //   console.log('[VIEW] Unable to find canvas element');
+  //     //   return;
+  //     // }
+  //     //
+  //     // canvas.width = domPage.renderedWidth;
+  //     // canvas.height = domPage.renderedHeight;
+  //     // const canvasContext = canvas.getContext('2d');
+  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+  //     // await pdfPage.render({canvasContext, viewport});
+  //
+  //     this.pageRendered.emit({
+  //       renderedPage: domPage,
+  //       sourcePageMetrics: pageMetrics,
+  //       pages: this.domPages,
+  //     });
+  //   } catch (e) {
+  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //     console.warn('[VIEW] Error rendering page', e);
+  //   }
+  // }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW] Loading error', e);
+  //     });
+  // }
+  // async handlePageRendered(e: any) {
+  //   e.stopPropagation();
+  //
+  //   const domPage = e.detail as IDocumentPageInfo;
+  //   this.domPages[domPage.pageNumber] = domPage;
+  //   await this.renderPage(domPage.pageNumber);
+  // }
+  async handleFieldChange(field, e, optionId) {
+    console.log('fieldChange', field, e);
+    switch (field.type) {
+      case 'textbox':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c, _d, _e, _f;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
+            console.log('jwt expired');
+          }
+          console.log('Error updating', e);
+        });
+        break;
+      case 'checkbox_group':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'radio_button_group':
+        const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'dropdown':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'initial':
+        console.log('Got initial', e.detail);
+        break;
+      case 'signature':
+        console.log('Got signature', e.detail);
+        break;
+    }
+  }
+  handlePageRendered(e) {
+    const pageInfo = e.detail;
+    console.log('[SIGN] Page rendered', pageInfo);
+    state.envelope.recipients.map(recipient => {
+      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+      console.log('[SIGN] Fields on page', fields);
+      fields.forEach(field => {
+        const el = utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(state.roleNames, field.recipient_role), this.handleFieldChange, true, false, false);
+        console.log('rendered element', el);
+        // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
+        if (!el) {
+          return;
+        }
+        el.addEventListener('recipientChanged', e => {
+          el.setAttribute('roleindex', utils.getRoleIndex(state.roleNames, e.detail));
+          // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
+        });
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+        // interact(el).draggable({
+        //   listeners: {
+        //     start(event) {
+        //       console.log('[FIELDS] Drag started', event.type, event.target);
+        //     },
+        //     move(event) {
+        //       const oldX = +(event.target.getAttribute('posX') || 0);
+        //       const oldY = +(event.target.getAttribute('posY') || 0);
+        //       const xScale = +(event.target.getAttribute('xScale') || 1);
+        //       const yScale = +(event.target.getAttribute('yScale') || 1);
+        //       const newX = event.dx / xScale + oldX;
+        //       const newY = event.dy / yScale + oldY;
+        //       event.target.setAttribute('posX', newX);
+        //       event.target.setAttribute('posy', newY);
+        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+        //     },
+        //     end(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`);
+        //     },
+        //   },
+        // });
+      });
+    });
+  }
+  render() {
+    var _a;
+    console.log('[VIEW] Rendering', state.error, state.loading, state.envelope);
+    if (state.loading || !state.envelope) {
+      return (index$1.h(index$1.Host, null, index$1.h("verdocs-loader", null)));
+    }
+    if (state.error) {
+      return (index$1.h(index$1.Host, null, index$1.h("div", null, state.error)));
+    }
+    return (index$1.h(index$1.Host, null, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || []).map(envelopeDocument => {
+      const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
+      pages.sort((a, b) => a.sequence - b.sequence);
+      return (index$1.h(index$1.Fragment, null, pages.map(page => (index$1.h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] })))));
+    })));
+  }
+  get component() { return index$1.getElement(this); }
+};
+VerdocsView.style = verdocsViewCss;
+
+exports.verdocs_view = VerdocsView;
+
+//# sourceMappingURL=verdocs-view.cjs.entry.js.map

package/dist/cjs/verdocs-view.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-view.entry.cjs.js","mappings":"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","names":["createStore","EnvelopeStore","getEnvelope","VerdocsEndpoint","SDKError","Envelopes.updateEnvelopeField","renderDocumentField","getRoleIndex","h","Host","Fragment"],"sources":["./src/utils/envelopeStore.ts","./src/utils/Envelopes.ts","./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"sourcesContent":["// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to\n// resolve. This needs to export a single default value of the store's state. Any helper functions should go in Templates.ts here.\n\nimport {createStore} from '@stencil/store';\nimport {IEnvelope} from '@verdocs/js-sdk/Envelopes/Types';\n\nconst {state, onChange} = createStore({\n  envelope: null as IEnvelope | null,\n  loadProgress: 0,\n  loading: true,\n  error: '',\n\n  roleNames: [] as string[],\n  dirty: false,\n});\n\nonChange('envelope', async newEnvelope => {\n  if (!newEnvelope) {\n    console.log('[ENVELOPESTORE] Clearing envelope');\n    state.roleNames = [];\n    state.dirty = false;\n    state.loading = false;\n    state.error = '';\n    state.loadProgress = 0;\n    return;\n  }\n\n  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);\n\n  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);\n  newEnvelope.recipients;\n  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);\n});\n\nexport default state;\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getEnvelope} from '@verdocs/js-sdk/Envelopes/Envelopes';\nimport EnvelopeStore from './envelopeStore';\n\n// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into\n// child elements.\nexport const getEnvelopeById = async (endpoint: VerdocsEndpoint, envelopeId: string) => {\n  EnvelopeStore.envelope = null;\n\n  if (!envelopeId) {\n    console.log(`[ENVELOPES] Missing required envelope ID`);\n    return;\n  }\n\n  EnvelopeStore.error = '';\n  EnvelopeStore.loading = true;\n\n  try {\n    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);\n    const envelope = await getEnvelope(endpoint, envelopeId);\n    if (!envelope) {\n      console.log('[ENVELOPES] Unable to load envelope');\n      return;\n    }\n\n    EnvelopeStore.envelope = envelope;\n    EnvelopeStore.loading = false;\n  } catch (e) {\n    EnvelopeStore.loading = false;\n    EnvelopeStore.error = e?.response?.status === 401 ? 'Authentication required' : e.message;\n    console.log('[ENVELOPES] Error loading envelope', e);\n    throw e;\n  }\n};\n","@import '../../../theme.scss';\n\nverdocs-view {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Envelopes} from '@verdocs/js-sdk/Envelopes';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface ISourcePageMetrics {\n  width: number;\n  height: number;\n}\n\nexport interface IPageRenderEvent {\n  renderedPage: IDocumentPageInfo;\n  sourcePageMetrics: ISourcePageMetrics;\n  pages: Record<number, IDocumentPageInfo>;\n}\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\n  @Element() component: HTMLElement;\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 envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      console.error(`[VIEW] Missing reuqired envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  // Determine whether a page is \"rotated\" (in either direction)\n  // isRotated(rotation) {\n  //   return rotation !== 0 && rotation % 180 !== 0;\n  // }\n\n  // Render one document page. Note that pageNumber is 1-based.\n  // async renderPage(pageNumber: number): Promise<void> {\n  //   const domPage = this.domPages[pageNumber];\n  //\n  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.\n  //   if (!domPage) {\n  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});\n  //     return;\n  //   }\n  //\n  //   const pageMetrics = this.sourcePageMetrics[pageNumber];\n  //\n  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});\n  //   try {\n  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);\n  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});\n  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);\n  //\n  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;\n  //     // if (!canvas) {\n  //     //   console.log('[VIEW] Unable to find canvas element');\n  //     //   return;\n  //     // }\n  //     //\n  //     // canvas.width = domPage.renderedWidth;\n  //     // canvas.height = domPage.renderedHeight;\n  //     // const canvasContext = canvas.getContext('2d');\n  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);\n  //     // await pdfPage.render({canvasContext, viewport});\n  //\n  //     this.pageRendered.emit({\n  //       renderedPage: domPage,\n  //       sourcePageMetrics: pageMetrics,\n  //       pages: this.domPages,\n  //     });\n  //   } catch (e) {\n  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //     console.warn('[VIEW] Error rendering page', e);\n  //   }\n  // }\n\n  // async renderPages(): Promise<void> {\n  //   const pageNumbersToRender = integerSequence(1, this.numPages);\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     try {\n  //       await this.renderPage(pageNumber);\n  //     } catch (e) {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.warn('[VIEW] Error rendering pages', e);\n  //     }\n  //   }\n  // }\n\n  // onProgress(progress: OnProgressParameters) {\n  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);\n  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);\n  // }\n\n  // After a document is done loading, go through its pages to get their dimensions\n  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {\n  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);\n  //\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     const pdfPage = await pdfDocument.getPage(1);\n  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;\n  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};\n  //   }\n  //\n  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);\n  // }\n\n  // loadAndRender(src: string): void {\n  //   console.log('[VIEW] Loading', src);\n  //\n  //   const token = this.endpoint.getToken();\n  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};\n  //\n  //   const source = {\n  //     url: src,\n  //     cMapUrl: CMAPS_URL,\n  //     cMapPacked: true,\n  //     httpHeaders,\n  //     withCredentials: true,\n  //     stopAtErrors: true,\n  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,\n  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,\n  //   } as DocumentInitParameters;\n  //\n  //   // @ts-ignore\n  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);\n  //   loadingTask.onProgress = this.onProgress;\n  //   loadingTask.promise\n  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {\n  //       await this.parsePageMetrics(pdfDocument);\n  //\n  //       this.pdfDocument = pdfDocument;\n  //       this.numPages = pdfDocument.numPages;\n  //       this.fingerprints = pdfDocument.fingerprints;\n  //       console.log(`[VIEW] Got PDF document fingerprints \"${this.fingerprints.join(', ')}\", ${this.numPages} page(s)`);\n  //\n  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in\n  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.\n  //       this.loadProgress = 100;\n  //     })\n  //     .catch(e => {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.log('[VIEW] Loading error', e);\n  //     });\n  // }\n\n  // async handlePageRendered(e: any) {\n  //   e.stopPropagation();\n  //\n  //   const domPage = e.detail as IDocumentPageInfo;\n  //   this.domPages[domPage.pageNumber] = domPage;\n  //   await this.renderPage(domPage.pageNumber);\n  // }\n\n  async handleFieldChange(field: IDocumentField, e: any, optionId?: string) {\n    console.log('fieldChange', field, e);\n    switch (field.type) {\n      case 'textbox':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            if (e.response?.status === 401 && e.response?.data?.error === 'jwt expired') {\n              console.log('jwt expired');\n            }\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'checkbox_group':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options: [{id: optionId, checked: e.detail}]}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'radio_button_group':\n        const options = field.settings.options.map(option => ({id: option.id, selected: optionId === option.id}));\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'dropdown':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'initial':\n        console.log('Got initial', e.detail);\n        break;\n\n      case 'signature':\n        console.log('Got signature', e.detail);\n        break;\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n\n    EnvelopeStore.envelope.recipients.map(recipient => {\n      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);\n      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n      console.log('[SIGN] Fields on page', fields);\n      fields.forEach(field => {\n        const el = renderDocumentField(field, pageInfo, getRoleIndex(EnvelopeStore.roleNames, field.recipient_role), this.handleFieldChange, true, false, false);\n        console.log('rendered element', el);\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(EnvelopeStore.roleNames, e.detail));\n          // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n        });\n\n        el.setAttribute('xScale', pageInfo.xScale);\n        el.setAttribute('yScale', pageInfo.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\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n          const pages = [...(envelopeDocument?.pages || [])];\n          pages.sort((a, b) => a.sequence - b.sequence);\n\n          return (\n            <Fragment>\n              {pages.map(page => (\n                <verdocs-document-page\n                  pageImageUri={page.display_uri}\n                  virtualWidth={612}\n                  virtualHeight={792}\n                  pageNumber={page.sequence}\n                  onPageRendered={e => this.handlePageRendered(e)}\n                  layers={[\n                    {name: 'page', type: 'canvas'},\n                    {name: 'controls', type: 'div'},\n                  ]}\n                />\n              ))}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}