legalesign-document-viewer 0.2.19 → 0.3.0

package/dist/cjs/ls-document-options_44.cjs.entry.js

@@ -20283,6 +20283,7 @@ function mouseDown(e) {
             this.hitField = f;
         }
     });
+    console.log('hit field', this.hitField);
     if (this.hitField) {
         const { height, width } = this.hitField.getBoundingClientRect();
         const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
@@ -24788,7 +24789,7 @@ const LsDocumentViewer = class {
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
      */
-    mode = 'custom';
+    mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
             this.showtoolbar = false;
@@ -24802,6 +24803,12 @@ const LsDocumentViewer = class {
             this.showstatusbar = true;
             this.readonly = false;
         }
+        else if (_newMode === 'compose') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
     }
     tableViewHandler(_newMode, _oldMode) {
         if (_newMode === true) {
@@ -24878,7 +24885,7 @@ const LsDocumentViewer = class {
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        if (this.token)
+        if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -24984,6 +24991,13 @@ const LsDocumentViewer = class {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Ensure broken or misplaced fields are put onto the page.
+     * {number} position
+     */
+    clip(legacyPosition, failback = 0.0) {
+        return (legacyPosition > 1 ? failback : legacyPosition);
+    }
     /**
      * Decorate the template data object with useful transformations.
      * {string} json of template
@@ -25000,10 +25014,10 @@ const LsDocumentViewer = class {
         const fields = newTemplate.elementConnection.templateElements.map(f => {
             return {
                 ...f,
-                top: f.ay * pages[0].height,
-                left: f.ax * pages[0].width,
-                height: (f.by - f.ay) * pages[0].height,
-                width: (f.bx - f.ax) * pages[0].width,
+                top: this.clip(f.ay) * this.pageDimensions[0].height,
+                left: this.clip(f.ax) * this.pageDimensions[0].width,
+                height: (this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height,
+                width: (this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width,
                 templateId: newTemplate.id,
             };
         });
@@ -25065,10 +25079,10 @@ const LsDocumentViewer = class {
     prepareElement(newElement) {
         return {
             ...newElement,
-            top: Math.floor(newElement.ay * this.pageDimensions[newElement.page - 1].height),
-            left: Math.floor(newElement.ax * this.pageDimensions[newElement.page - 1].width),
-            height: Math.floor((newElement.by - newElement.ay) * this.pageDimensions[newElement.page - 1].height),
-            width: Math.floor((newElement.bx - newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            top: Math.floor(this.clip(newElement.ay) * this.pageDimensions[newElement.page - 1].height),
+            left: Math.floor(this.clip(newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            height: Math.floor((this.clip(newElement.by, 0.05) - this.clip(newElement.ay)) * this.pageDimensions[newElement.page - 1].height),
+            width: Math.floor((this.clip(newElement.bx, 0.2) - this.clip(newElement.ax)) * this.pageDimensions[newElement.page - 1].width),
             pageDimensions: this.pageDimensions[newElement.page - 1],
             templateId: this._template.id,
         };
@@ -25152,6 +25166,7 @@ const LsDocumentViewer = class {
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.selected = [];
+            this.setZoom(1.0);
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25166,7 +25181,7 @@ const LsDocumentViewer = class {
         box.scrollLeft = -380;
     }
     render() {
-        return (index.h(index.Host, { key: '772256fe57cd8d2aa9584044d3341ae94f5d856a' }, index.h(index.h.Fragment, null, index.h("div", { key: '3a047e1c06d8da29de6545555e67bf07d879bb90', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: 'd1c6be4cdd857c8e38f77a036b6594aa44b8fb28', validationErrors: this.validationErrors })), index.h("div", { key: 'bb06ebe66befacf101094d6b7d25a40a0c9cff0d', class: "page-header" }, index.h("p", { key: '1b56235e4994ae43add1b084a5c6de2f40ad5c26', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '9573e82cb20082b311c31d4752c59618c0164c3a' }, "/"), index.h("p", { key: 'ac2f7068d3a7b9fab04be3e5b0e354251db9ae0d', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '5e1b6cefe3d2f12ab7fb711af9a189887744509e', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '408a483345bfc50d897ea5f814196cde773dc81b' }, index.h(index.h.Fragment, null, index.h("div", { key: '1b178aecaad7714a41b9324a1a6b14768265ea99', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: 'd6c6dd18b133b691b80da2755dcd151826fce4e4', validationErrors: this.validationErrors })), index.h("div", { key: '5c91872e3076e524dc5fe034e82f48df5f283a92', class: "page-header" }, index.h("p", { key: '6d3246932f4f0f11a62cdd5bc5f9984e1625bdbc', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'c5b4f16c27bf7cbe0dcdcd9b8202bc682ea300d0' }, "/"), index.h("p", { key: '5341750c8f49593b05d7c60a83eb5450c0bb16aa', class: "header-text-2" }, this._template?.title)), index.h("form", { key: 'a064dfdbb7c856647265213149361b4c253b6166', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25179,7 +25194,7 @@ const LsDocumentViewer = class {
             } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (index.h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '71e1039ef2125174823e1731f00da673fb3610d3', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '34104168b0dfaf818f1811f20a76f087c87d9e2e', id: "ls-mid-area" }, index.h("div", { key: '12b3c327d7629deba257d0d44d478ad2a93775bb', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: 'b41998ec0bf1323db3b355fe6fb6cd2cb22cf02d', id: "ls-document-frame" }, index.h("canvas", { key: 'd756a54e89a8f463b26db71d1bb51bebbfc3564e', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'd9387528cab97c0a2533164c55e627eda6b40c9b', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'cbf35e7c60ddf374b4e6181594a763fc116654e2', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'fd5030967606ba707b0f654aa14a5086289a8c02', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '32dfd4516a22e63b86504c8f5ae67b506081114c', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: 'f67d0998fd3c66fa96829d37cfbc3f47ce8bff68', id: "ls-mid-area" }, index.h("div", { key: 'b58b889de53bd50c721c4c07022b0c9ce5a5ad2e', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '0fad41bb168bba9fe80c8a0b54b239f270b13b0c', id: "ls-document-frame" }, index.h("canvas", { key: 'c5ee491b1788b3245b3d5689590a0537a508a660', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ecbde00fc2c892249fa89998216de43dd1670cd3', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'bd987f10feae01ef7ec0ce35e990bf5b1a4199f3', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '69a5f957ae656a2812b5401e270c20e25c974808', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -34179,7 +34194,8 @@ const LsValidationTag = class {
     isExpanded = false;
     render() {
         return (index.h(index.Host, { key: '19a7fa173b5753ee1323adf935c9b76aab197a1b' }, index.h("div", { key: '5c0b59aa90ee1bf2c39f341e167437ae0cfb700b', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '209d7861899401458d8a5fa7a64665d7e7991a51', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (index.h("ls-icon", { key: '0a528826d3b7d67382a934259c1fd515a931a108', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (index.h("div", { key: 'b02370495b444d5fdffce3b6424ebdada55da955', class: 'field-dropdown' }, index.h("div", { key: 'aa939c4bf56a8e5ba53ec3f09d76a897a3c279a9', class: 'dropdown-header' }, index.h("h2", { key: 'cf3d5932c59a742bdefd9a05007d1d6b657789cc' }, "Signature Fields Required"), index.h("p", { key: '2c231dc8f4fd0d0f14f173aae3251078551ab056' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
-            const pallette = defaultRolePalette[field?.role?.signerIndex || field?.element?.signer || 0];
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (index.h("div", { key: idx, class: 'required-field', style: {
                     '--field-background': pallette.s10,
                     '--field-border-color': pallette.s10,