legalesign-document-viewer 0.9.8 → 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 => {
@@ -387,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,
@@ -523,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);
@@ -581,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) {
@@ -609,25 +586,9 @@ export class LsDocumentViewer {
             return false;
     }
     render() {
-        return (h(Host, { key: '6ae6febc377179b3044510f14e11b65e11e94e51' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("ls-page-loader", { key: '8cbb1fbbcd253b58e91d62a401c2de56fcd9b17e' }), h("div", { key: 'efd6deb080632a899782d9b554c8a9be9c13e90b', class: 'custom-loader-slot' }, h("slot", { key: 'cfe9b22b53426c93818873b70f75074e9acc9eba', name: 'custom-loader' })), this.mode === 'compose' && h("ls-compose-loader", { key: 'c75d4d34c384b91e37b1a9b61d2851df5747ef15' }))), h("div", { key: '1e9619ad9eedbd09e6a695a46049b1e372e2cdf6', class: "page-header" }, h("div", { key: 'e49fa3a73955fc2df6c7e8e2bf146013c9fdea2a', class: 'left-slot-wrapper' }, h("slot", { key: '921fd1139da00e9efc48623d17923c1d621919da', name: "left-button" })), h("div", { key: '2d7566a49420bc2d9982dc2caba65b36322b73d2', class: 'right-slot-wrapper' }, h("slot", { key: '650d4074491e3133615c0b7d79c4052efcfc618b', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '4df3d2a06766c7256e9408b54c26576a44bc8924' }, h("span", { key: '8ca76097e8764eb477363be3411684cde72c5328', class: "header-text-1" }, "Template Creation"), h("span", { key: '93028d32cc544c7e0569d5743efea0fea9d576ce' }, "/"), h("span", { key: '13589b4f7e49d5a12aa45e6cc492d21b5dee39e5', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '522d1d78906f233bf59c985c930e78cc949ad4c1', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '433495bb45bdc18cbbb1c66675095d749a2213e5', name: "top-bar" })))), this.mode === 'editor' && (h("div", { key: '9d4f849e0c5c68fadc5b98f0c8f86f22713d759b', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '4cc1a1012574148bf64be8170ce0a6e9fac66a7e', validationErrors: this.validationErrors }))), h("form", { key: '2beaacb5234aa918fdc5e22ad90156f1b5b09c7f', 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: 'd090d6e7e460c463b4b3e097ebbd21dec78b866a', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode }), h("div", { key: '885f4358c2c18fbcef12e35ab708c58597185aab', id: "ls-mid-area" }, h("div", { key: '351beda3b33a687b042204f3f6c3dfb9de4a1b3a', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'de9da8fe829e576186a1d72fe7511fc93c6dc0db', id: "ls-document-frame" }, h("canvas", { key: '69b7d9a5b000626a3ee38e9b8d85dcc2ce0244af', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '86d8080c6868b3ef36e37f8c7e4ea33f50f97b9c', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '7c1d69b409c91c347849923f0928500c679a2ae2', id: "ls-box-selector" }))), h("ls-statusbar", { key: '344ff9e9f823b779365cc81703bd79e7d008a064', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '3eec36b27885c5ecd4c54d6fa3716b1cadcc1774', 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"; }
@@ -1064,6 +1025,7 @@ export class LsDocumentViewer {
             "fontFamily": {},
             "selected": {},
             "isLoading": {},
+            "selectedDataItems": {},
             "fieldTypeSelected": {}
         };
     }