legalesign-document-viewer 0.9.7 → 0.9.9

package/dist/collection/components/ls-document-viewer/ls-document-viewer.css

@@ -84,7 +84,7 @@ h6 {
   padding: 0px;
 }
 
-.left-slot-wrapper {
+.ls-dv-left-slot-wrapper {
   position: fixed;
   top: 0.375rem;
   left: 0.675rem;
@@ -106,83 +106,23 @@ slot {
 }
 
 
-.right-slot-wrapper {
+.ls-dv-right-slot-wrapper {
   position: fixed;
   top: 0.375rem;
   right: 0.675rem;
   z-index: 2000;
 }
 
-.validation-tag-wrapper {
-  position: fixed;
+.ls-dv-validation-tag-wrapper {
+  position: absolute;
   top: 0.375rem;
   right: 0.375rem;
   z-index: 2000;
 }
 
-#my-field-panel {
-  position: relative;
-  height: calc(100% - 4.313rem);
-}
-
-.leftBox {
-  position: relative;
-  border-radius: 1rem;
-  border: 1px solid var(--gray-30, #edeff2);
-  background: var(--white, #fff);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  width: 21.25rem;
-  margin: 1rem;
-  min-width: 21.25rem;
-  max-height: 100%;
-  z-index: 1000;
-  left: 0;
-  top: 0;
-}
-
-.left-box-inner {
-  position: relative;
-  display: flex;
-  height: 100%;
-  padding: 0.75rem;
-  gap: 0.75rem;
-}
 
-.rightBox {
-  border: 1px gray solid;
-  width: 29.375rem;
-  min-width: 24.375rem;
-  padding: 0.25rem;
-  font-family: inherit;
-}
 
-.toolbox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.5rem;
-  border: 1px solid var(--gray-30, #e0e2e5);
-  background: var(--gray-10, #f7f8fa);
-  padding: 0.75rem;
-  gap: 1rem;
-  overflow-y: auto;
-}
-
-.compose-toolbox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: none;
-  border-radius: 0;
-  border: none;
-  background: white;
-  padding: 0.25rem;
-
-}
-
-.custom-loader-slot {
+.ls-dv-custom-loader-slot {
   position: absolute;
   top: 0;
   left: 0;
@@ -191,42 +131,7 @@ slot {
   z-index: 3999;
 }
 
-.recipients-box {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  overflow-y: auto;
-  /* width: calc(100% + 0.25rem); */
-  padding: 0.75rem 0.25rem 0.25rem 0.25rem;
-  height: 100%;
-}
-
-.scroll-gradient-top {
-  position: absolute;
-  top: 5.9375rem;
-  left: 0;
-  width: 100%;
-  height: 1rem;
-  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
-  pointer-events: none;
-  z-index: 100;
-}
-
-.scroll-gradient-bottom {
-  position: absolute;
-  bottom: 1rem;
-  left: 0.75rem;
-  width: calc(100% - 1.5rem);
-  height: 1rem;
-  background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
-  pointer-events: none;
-  z-index: 100;
-}
 
-.ls-editor-infobox {
-  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
-}
 
 #pdf-canvas {
   top: 0px;
@@ -249,7 +154,7 @@ slot {
 
 }
 
-.document-frame-wrapper {
+.ls-dv-document-frame-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -273,17 +178,17 @@ slot {
 
 }
 
-.prevButton {
+.ls-dv-prev-button {
   position: relative;
   bottom: 1.875rem;
 }
 
-.nextButton {
+.ls-dv-next-button {
   position: relative;
   bottom: 1.875rem;
 }
 
-.fieldBox {
+.ls-dv-field-box {
   z-index: 1000;
 }
 
@@ -303,36 +208,15 @@ slot {
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset;
 }
 
-.hidden {
+.ls-dv-hidden {
   visibility: hidden;
   display: none;
   width: 0px;
 }
 
-.toolbox-section-title {
-  color: var(--gray-100, #45484d);
-  font-size: 1.125rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.75rem;
-  /* 155.556% */
-}
 
-.toolbox-section-description {
-  color: var(--gray-80, #5e6066);
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1rem;
-}
 
-.fields-box {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.page-header {
+.ls-dv-page-header {
   display: flex;
   height: 2.25rem;
   gap: 0.5rem;
@@ -341,7 +225,7 @@ slot {
   align-items: center;
 }
 
-.header-text-1 {
+.ls-dv-header-text-1 {
   color: var(--gray-100, #45484d);
   font-size: 0.875rem;
   font-style: normal;
@@ -349,7 +233,7 @@ slot {
   line-height: 1.25rem;
 }
 
-.header-text-2 {
+.ls-dv-header-text-2 {
   color: var(--gray-100, #45484d);
   font-size: 0.875rem;
   font-style: normal;
@@ -357,33 +241,9 @@ slot {
   line-height: 1.25rem;
 }
 
-.properties-header {
-  display: flex;
-  padding: 1rem;
-  gap: 0.75rem;
-  align-items: center;
-  border-bottom: 1px solid var(--gray-20, #edeff2);
-}
 
-.properties-header-title {
-  color: var(--gray-100, #45484d);
-  width: 100%;
-  font-size: 1.5rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 2rem;
-  /* 133.333% */
-}
 
-.properties-header-icon {
-  display: flex;
-  padding: 0.5rem;
-  border-radius: 0.625rem;
-  background: var(--primary-10, #eff4ff);
-  color: var(--primary-60, #4456f6);
-}
-
-.expand-fields-row {
+.ls-dv-expand-fields-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -397,7 +257,7 @@ slot {
   /* 142.857% */
 }
 
-.expand-fields-row p {
+.ls-dv-expand-fields-row p {
   color: var(--gray-100, #45484d);
   font-size: 1rem;
   font-style: normal;
@@ -437,8 +297,8 @@ a:hover {
   color: var(--primary-70, #2134dc);
 }
 
-.button-link,
-.button-link:hover {
+.ls-dv-button-link,
+.ls-dv-button-link:hover {
   all: unset;
 }
 
@@ -447,7 +307,7 @@ select {
   height: 2.25rem;
 }
 
-.input-wrapper {
+.ls-dv-input-wrapper {
   position: relative;
   width: fit-content;
 }
@@ -470,7 +330,7 @@ select {
   color: var(--gray-80, #6c6e73);
 }
 
-.has-leading-icon {
+.ls-dv-has-leading-icon {
   padding-left: 2.5rem;
 }
 
@@ -482,7 +342,7 @@ textarea {
   padding: 0.5rem 0.75rem;
   font-family: var(--font-family);
   font-size: var(--text-sm);
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   color: var(--gray-100, #45484d);
   font-weight: 400;
 }
@@ -535,7 +395,7 @@ input[type='checkbox'] {
 }
 
 input[type='checkbox']:checked,
-input[type='checkbox'].indeterminate {
+input[type='checkbox'].ls-dv-indeterminate {
   background-color: var(--primary-60, #4456f6);
   border: none;
 }
@@ -552,7 +412,7 @@ input[type='checkbox']:checked::after {
   border-right: 0.125rem solid white;
 }
 
-input[type='checkbox'].indeterminate::after {
+input[type='checkbox'].ls-dv-indeterminate::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -564,7 +424,7 @@ input[type='checkbox'].indeterminate::after {
 }
 
 input[type='checkbox']:checked:hover,
-input[type='checkbox'].indeterminate:hover {
+input[type='checkbox'].ls-dv-indeterminate:hover {
   background-color: var(--primary-70, #2134dc);
   border: none;
 }
@@ -593,13 +453,13 @@ input[type='checkbox']:disabled:checked {
   cursor: not-allowed;
 }
 
-.checkbox-container {
+.ls-dv-checkbox-container {
   display: flex;
   gap: 0.5rem;
   width: 100%;
 }
 
-.checkbox-label {
+.ls-dv-checkbox-label {
   color: var(--gray-100, #45484d);
   font-size: 1rem;
   font-style: normal;
@@ -607,7 +467,7 @@ input[type='checkbox']:disabled:checked {
   line-height: 1rem;
 }
 
-.form-label {
+.ls-dv-form-label {
   color: var(--gray-100, #45484d);
   font-size: 1rem;
   font-style: normal;
@@ -615,20 +475,16 @@ input[type='checkbox']:disabled:checked {
   line-height: 1.5rem;
 }
 
-.form-field {
+.ls-dv-form-field {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   width: 100%;
 }
 
-.field-properties-outer {
-  position: relative;
-  height: 100%;
 
-}
 
-.loading-box {
+.ls-dv-loading-box {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -652,26 +508,26 @@ button {
   min-width: 2.25rem;
 }
 
-button.tertiaryGrey {
+button.ls-dv-tertiary-grey {
   border: 1px solid var(--gray-40, #d8d9dc);
   background-color: white;
   color: var(--gray-80, #787a80);
 }
 
-button.tertiaryGrey:hover {
+button.ls-dv-tertiary-grey:hover {
   border: 1px solid var(--gray-50, #c8c9cc);
   background: var(--gray-10, #f7f8fa);
 }
 
-.button-group {
+.ls-dv-button-group {
   display: flex;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   border: 1px solid var(--gray-30, #e0e2e5);
   background: var(--white, #ffffff);
   overflow: clip;
 }
 
-.button-group button {
+.ls-dv-button-group button {
   display: flex;
   background: transparent;
   border-radius: unset;
@@ -681,18 +537,18 @@ button.tertiaryGrey:hover {
   color: var(--gray-80, #6c6e73);
 }
 
-.button-group button:hover {
+.ls-dv-button-group button:hover {
   background: var(--gray-10, #f7f8fa);
 }
 
-.button-group> :first-child {
-  border-radius: 0.5rem 0 0 0.5rem;
+.ls-dv-button-group> :first-child {
+  border-radius: 0.625rem 0 0 0.625rem;
 }
 
-.button-group> :last-child {
+.ls-dv-button-group> :last-child {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
-.button-group> :not(:first-child) {
+.ls-dv-button-group> :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }

package/dist/collection/components/ls-document-viewer/ls-document-viewer.js

@@ -95,6 +95,7 @@ export class LsDocumentViewer {
     fontFamily = 'arial';
     selected = [];
     isLoading = true;
+    selectedDataItems = [];
     fieldTypeSelected = {
         label: 'Signature',
         formElementType: 'signature',
@@ -230,22 +231,6 @@ export class LsDocumentViewer {
     updateSigner(event) {
         if (event.detail) {
             this.signer = event.detail;
-            try {
-                const leftBox = this.component.shadowRoot?.getElementById('ls-recipient-manager');
-                if (leftBox) {
-                    const recipientsBox = leftBox.querySelector('.recipients-box');
-                    const card = recipientsBox?.querySelector(`ls-recipient-card[data-signer-index="${event.detail}"]`);
-                    if (card && recipientsBox) {
-                        recipientsBox.scrollTo({
-                            top: 0,
-                            behavior: 'smooth',
-                        });
-                    }
-                }
-            }
-            catch (e) {
-                // fail silently
-            }
         }
     }
     // Send selection changes to bars and panels if in use.
@@ -260,13 +245,12 @@ export class LsDocumentViewer {
         if (toolbar) {
             toolbar.dataItem = event.detail;
         }
-        var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
         if (event.detail.length === 0) {
             this.selected = [];
         }
         else {
             console.log(event.detail, 'selected');
-            propPanel.dataItem = event.detail;
+            this.selectedDataItems = event.detail;
         }
         // change style of selected fields
         event.detail.forEach(fc => {
@@ -295,6 +279,7 @@ export class LsDocumentViewer {
         this.pageNum += 1;
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
+        this.pageResize();
     }
     /**
      * Page backward
@@ -307,6 +292,7 @@ export class LsDocumentViewer {
         this.pageNum -= 1;
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
+        this.pageResize();
     }
     /**
      * Unselect all fields
@@ -318,19 +304,22 @@ export class LsDocumentViewer {
         });
         this.selected = [];
     }
+    pageResize() {
+        this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
+        const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+        // const wrapper = this.component.shadowRoot.getElementById('document-frame-wrapper') as HTMLDivElement;
+        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * this.zoom + 'px';
+        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * this.zoom + 'px';
+        frame.style.height = this.pageDimensions[this.pageNum - 1].height * this.zoom + 'px';
+        frame.style.width = this.pageDimensions[this.pageNum - 1].width * this.zoom + 'px';
+    }
     /**
      * Page and field resize on zoom change
      *
      */
     async setZoom(z) {
         this.zoom = z;
-        this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
-        const frame = this.component.shadowRoot.getElementById('ls-document-frame');
-        // const wrapper = this.component.shadowRoot.getElementById('document-frame-wrapper') as HTMLDivElement;
-        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * z + 'px';
-        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * z + 'px';
-        frame.style.height = this.pageDimensions[this.pageNum - 1].height * z + 'px';
-        frame.style.width = this.pageDimensions[this.pageNum - 1].width * z + 'px';
+        this.pageResize();
         // wrapper.style.height = this.pageDimensions[this.pageNum - 1].height * z + 200 + 'px';
         // wrapper.style.width = this.pageDimensions[this.pageNum - 1].width * z + 600 + 'px';
         // place all fields at new zoom level
@@ -382,14 +371,16 @@ export class LsDocumentViewer {
      * Render the page based on pageNumber
      * {number} pageNumber
      */
+    RENDER_SCALE = 2;
     renderPage(pageNumber) {
         this.isPageRendering = true;
         if (this.pdfDocument !== undefined && this.pdfDocument !== null) {
             this.pdfDocument.getPage(pageNumber).then((page) => {
-                const viewport = page.getViewport({ scale: this.zoom });
+                const viewport = page.getViewport({ scale: this.zoom * this.RENDER_SCALE });
                 this.canvas.height = Math.floor(viewport.height);
                 this.canvas.width = Math.floor(viewport.width);
-                // Render PDF page into canvas context
+                this.canvas.style.width = Math.floor(this.pageDimensions[this.pageNum - 1].width * this.zoom) + 'px';
+                this.canvas.style.height = Math.floor(this.pageDimensions[this.pageNum - 1].height * this.zoom) + 'px';
                 const renderContext = {
                     canvasContext: this.ctx,
                     viewport,
@@ -518,7 +509,7 @@ export class LsDocumentViewer {
     showPageFields(page) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         Array.from(fields).forEach(fx => {
-            fx.className = fx.dataItem.page === page ? '' : 'hidden';
+            fx.className = fx.dataItem.page === page ? '' : 'ls-dv-hidden';
             // Find assignee for this field
             const data = fx.dataItem;
             const assignee = this.mode === 'compose' ? this._recipients?.find(r => r.signerIndex === data.signer) : this._template.roles.find(r => r.signerIndex === data.signer);
@@ -576,25 +567,16 @@ export class LsDocumentViewer {
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
-        const leftBox = this.component.shadowRoot.getElementById('ls-left-box');
-        if (leftBox) {
-            leftBox.addEventListener('mousedown', e => {
-                e.stopPropagation();
-            });
-            leftBox.addEventListener('mouseup', e => {
-                e.stopPropagation();
-            });
-            leftBox.addEventListener('mousemove', e => {
-                e.stopPropagation();
-            });
-        }
+    }
+    handleManagerChange(manager) {
+        this.manager = manager;
     }
     showTool(fieldFormType) {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     /// Check if the current signer has a role of the specified type
     checkType(type) {
-        if (this.mode === "compose" && this._recipients) {
+        if (this.mode === 'compose' && this._recipients) {
             return this._recipients.find(r => r.roleType === type && r.signerIndex === this.signer) !== undefined;
         }
         else if (this._template) {
@@ -604,25 +586,9 @@ export class LsDocumentViewer {
             return false;
     }
     render() {
-        return (h(Host, { key: 'b2430be0f9a0dedc4e6b14d249aca4d3afae75a1' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("ls-page-loader", { key: 'd8ec9bc54cd3e29b3ae33f99754da38b689920ad' }), h("div", { key: 'e50783ed9890b223e15fce16365f6f9d4a614e4a', class: 'custom-loader-slot' }, h("slot", { key: '5a84d4336a02643f73e239368306d29df6444885', name: 'custom-loader' })), this.mode === 'compose' && h("ls-compose-loader", { key: '3c89269bbc4648803af0eca6bd29170617c5d71f' }))), h("div", { key: '54afd06b1cda797d7dc9f25d8ac91eee9f75cbaf', class: "page-header" }, h("div", { key: 'f221198846cf0998325936916db945ae382b55a4', class: 'left-slot-wrapper' }, h("slot", { key: '763a53dd797d5aa48b7f337abf3c0819343fe96e', name: "left-button" })), h("div", { key: '5084c268d77adaf5f2150e38a18f43ae0c1fdcca', class: 'right-slot-wrapper' }, h("slot", { key: '2a81cb4feb5c979880a5ccfb106bad9d1c6130d6', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '4aceb5a48fbe917c461ea8e1086d75e81a895edd' }, h("span", { key: '262c584d97229ea01b73be5e24fb59c47a442693', class: "header-text-1" }, "Template Creation"), h("span", { key: '11230f28b68245c85585981d0b7d96ad585b2d1c' }, "/"), h("span", { key: '209c453820be213fc99396cffe85d4f850fc2a9a', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '691154c519d45bb86b6d66281c2265e6ddfd9082', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: 'e1dbf3867713fc17be2a33f4349566dc4f7217e0', name: "top-bar" })))), this.mode === 'editor' && (h("div", { key: 'ba38673b32778024cbfec99944a40cdf89e2bd76', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'c0c7205d8492dfb60c454470993e8ccbd5e22a33', validationErrors: this.validationErrors }))), h("form", { key: '0ee013c3287d17abfdd655bae1bd4e145e13dc5b', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
-                if (manager.detail === 'document') {
-                    var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
-                    documentManager.template = this._template;
-                }
-                else if (manager.detail === 'participant') {
-                    var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
-                    participantManager.template = this._template;
-                }
-                else if (manager.detail === 'validation') {
-                    var validationManager = this.component.shadowRoot.getElementById('ls-validation-manager');
-                    validationManager.validationErrors = this.validationErrors;
-                }
-                this.manager = manager.detail;
-            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, (this.signer > 0 && this.showTool('signature') && !this.checkType('APPROVER')) && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 25, defaultWidth: 97, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "admin", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 25, defaultWidth: 97, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 16, defaultWidth: 150, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "signing date", label: "Signing Date", defaultHeight: 16, defaultWidth: 100, validation: 32, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "date", label: "Date", defaultHeight: 16, defaultWidth: 100, validation: 4, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "text", formElementType: "email", label: "Email", defaultHeight: 16, defaultWidth: 150, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 25, defaultWidth: 70, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "text", formElementType: "number", label: "Number", defaultHeight: 16, defaultWidth: 150, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "text", formElementType: "dropdown", label: "Dropdown", defaultHeight: 16, defaultWidth: 100, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "text", formElementType: "checkbox", label: "Checkbox", defaultHeight: 16, defaultWidth: 16, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "text", formElementType: "regex", label: "Regex", defaultHeight: 16, defaultWidth: 150, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "text", formElementType: "image", label: "Image", defaultHeight: 16, defaultWidth: 100, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "text", formElementType: "file", label: "File", defaultHeight: 16, defaultWidth: 100, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "text", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '1.125rem', right: '1rem' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
-            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))), h("slot", { name: "recipient-panel" }))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
+        return (h(Host, { key: '02da3c452cfeb24a4ad8479d071ad3d5a20be6e0' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("ls-page-loader", { key: 'fee68d81c0ed812b4be117137978874e831391a6' }), h("div", { key: 'be3cf89474cde9f3483476a42ec099f6dccb7da0', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: 'afa88745a03c7b4f0d09edbf752366091f06fbb0', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: 'ed3bf0da3873932607875904c602ce6acc8c13e8' }))), h("div", { key: 'd369df97ed79e78b29a890b24756cc72e2c576e5', class: "ls-dv-page-header" }, h("div", { key: '1836c3d96971e3555e5c7db2668a564ee603a488', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: 'f6f4c4047518b9e325b4a8b8965176c362fae3e4', name: "left-button" })), h("div", { key: '2484fb083b507e830c7642adae27840ca70eb641', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: 'f6c17eea7106d75517dbef34ced68e424335287b', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'ed30a792545b418ab323d3c6ef05acb652ad4c53' }, h("span", { key: 'd6f128f8c0ed1d17075bb5d451cfbac4c2dae3dd', class: "ls-dv-header-text-1" }, "Template Creation"), h("span", { key: '24b58673f06946a13a19184879608a961c40bf3c' }, "/"), h("span", { key: '0ee1f52dab005d35622d518030d98f551ee16b3a', class: "ls-dv-header-text-2" }, this._template?.title), h("div", { key: 'd34d25338ae0c0dc10f85a8742dd9180029c0676', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: '554d7a84279c909e23bab720e7e07612de8a123f', validationErrors: this.validationErrors })))), this.mode === 'compose' && (h("div", { key: 'd88148ab87e64f987f37070972f176fcbf7cb723', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: 'e660b065f829e81f76f4679de972ae5901b7421f', name: "top-bar" })))), h("form", { key: 'fcd21d3f8584cc1d89452a2b5152b35e2cbe4cf5', id: "ls-editor-form" }, h("ls-left-bar", { key: '7dc6296656e27c6dda8a8a36df5c719a2e8a34f6', mode: this.mode, selected: this.selected, manager: this.manager, signer: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, recipients: this._recipients, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, displayTable: this.displayTable, selectedDataItems: this.selectedDataItems, onManagerChange: e => this.handleManagerChange(e.detail), onClearSelected: () => {
                 this.selected = [];
-                e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: '059e306bf7d59490030398c498e44aef1f891992', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode }), h("div", { key: '003adfd32a2f6fd02257826ba5826b68bcc15b05', id: "ls-mid-area" }, h("div", { key: '852b51e47f7d6e3e06b2644335a92726cd458cf8', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'd2cb3653efdfaedc8fee4a96a407c563f678f0e3', id: "ls-document-frame" }, h("canvas", { key: '558f3c84823275f4a2c7693ebd73315f3c1f3f93', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '642765f3948a7fd6756c59f41758797b5bde7c7b', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '778eeb602a57b5d6e768b807c5e1ddc4011bd0d8', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'a5ca94194901243659d177fbe6017ec725f91f9f', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '1e4670e522a5f86485421778e9bba1d80761e810', id: "ls-tooltip-master" })));
+            } }, h("slot", { key: '7930f988674b6f725dc2e817b216cd39da898d51', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: 'a0afc22d546f1c10241805c8c91d1bf2637488ba', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode }), h("div", { key: '7f345e4965e464ff7b1d57c542a6c7b8ef21c453', id: "ls-mid-area" }, h("div", { key: '2e29144820b0ea4d56403d25d872da076f365dcf', class: 'ls-dv-document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'b641631ee3ab558a501be1746d6026429b42a36e', id: "ls-document-frame" }, h("canvas", { key: 'c8a792c723f9a63849886d1aff2e81495c992b95', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: 'f6ce169f1d48721bbfa2e20946b9f5f56b8b06eb', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: 'a83fd68cba81fd9c65bab731955004c5229efd45', id: "ls-box-selector" }))), h("ls-statusbar", { key: '37aec8475d024dd8127b37aee6f6f31681e9a4d2', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '7c8ed1007f10c52aec943c005e7c1671397ac9a7', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -1059,6 +1025,7 @@ export class LsDocumentViewer {
             "fontFamily": {},
             "selected": {},
             "isLoading": {},
+            "selectedDataItems": {},
             "fieldTypeSelected": {}
         };
     }
@@ -1264,14 +1231,6 @@ export class LsDocumentViewer {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLCanvasElement": {
-                            "location": "global",
-                            "id": "global::HTMLCanvasElement"
-                        },
-                        "HTMLDivElement": {
-                            "location": "global",
-                            "id": "global::HTMLDivElement"
                         }
                     },
                     "return": "Promise<void>"