legalesign-document-viewer 0.3.3 → 0.3.4

package/dist/esm/ls-document-options_40.entry.js

@@ -19958,60 +19958,40 @@ const recalculateCoordinates = (d) => {
 };
 
 // Add a role
-const createRole = (role) => {
-    const newParent = role?.signerParent ? `"${role.signerParent}"` : 'null';
-    return `
-  mutation LDVAddRole {
-    createTemplateRole(input: {
-      templateId: "${role.templateId}"       
-        signerIndex: ${role.signerIndex}
-        signerParent: ${newParent}
-        name: ${JSON.stringify(role.name)}
-        ordinal: ${role.ordinal}
-        roleType: ${role.roleType}
-        experience: "${role.experience}"
-     })
-  }`;
-};
-// Remove a role
-const deleteRole = (role) => {
-    return `
-    mutation LDVremoveRole {
-      deleteTemplateRole(input: {
-        templateRoleId: "${role.id}"       
-       })
-    }`;
-};
-// Save any changes to an role
-const updateRole = (role) => {
-    const newParent = role?.signerParent ? `"${role.signerParent}"` : 'null';
-    return `
-    mutation LDVupdateRole {
-      updateTemplateRole(input: {
-        templateRoleId: "${role.id}"       
-        signerIndex: ${role.signerIndex}
-        ordinal: ${role.ordinal}
-        signerParent: ${newParent}
-        name: ${JSON.stringify(role.name)}
-        roleType: ${role.roleType}
-        experience: "${role.experience}"
-       })
-    }`;
-};
-// swap two adjacent roles
-const swapRoles = (roleId1, roleId2) => {
+const updateTemplate = template => {
     return `
-    mutation LDVswapRole {
-      swapRoles(input: {
-        roleId1: "${roleId1.id}"       
-        roleId2: "${roleId2.id}"
-       })
-    }`;
+    mutation LDVupdateTemplate {
+      updateTemplate(input: {
+        templateId: "${template.id}", 
+        title: "${template.title}",
+        locked: ${template.locked},
+        autoArchive: ${template.autoArchive},
+        fixSignatureScale: ${template.fixSignatureScale ? template.fixSignatureScale : false}
+      })
+    }
+  `;
 };
-const getTemplateRoles = (id) => {
+const getTemplate = (id) => {
     return `
         query LDVGetTemplate {
-          template(id: "${id}") {           
+          template(id: "${id}") {
+            id
+            title
+            fileName
+            pageDimensions
+            pageCount
+            modified
+            link
+            valid
+            locked
+            autoArchive
+            archived
+            tags
+            created
+            createdBy
+            lastSent
+            fixSignatureScale
+            groupId
             roles{
               id
               name
@@ -20021,11 +20001,86 @@ const getTemplateRoles = (id) => {
               signerParent
               experience
             }
+            elementConnection {
+              templateElements {
+                align
+                ax
+                ay
+                bx
+                by
+                elementType
+                formElementType
+                fieldOrder
+                fontName
+                fontSize
+                helpText
+                hideBorder
+                id
+                label
+                labelExtra
+                logicAction
+                logicGroup
+                mapTo
+                options
+                optional
+                page
+                role
+                signer
+                substantive
+                validation
+                value
+              }
+              totalCount
+            }
+            userSignatureConnection {
+              userSignatureElements {
+                id
+                userId
+                ax
+                ay
+                bx
+                by
+                page
+                link
+              }
+            }
           }
         }
       `;
 };
 
+/**
+ * This module contains all the rules required to mark a template
+ * as valid.
+ *
+ */
+function validate(t) {
+    var errors = [];
+    // Check for missing signatures
+    t.roles.forEach(tr => {
+        if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex && tr.roleType !== 'APPROVER').length === 0) {
+            errors.push({
+                id: tr.id,
+                title: 'Missing signature.',
+                description: `{tr.name} is missing a signature.`,
+                role: tr,
+            });
+        }
+    });
+    // Check for missing multi-select options
+    t.elementConnection.templateElements.forEach(element => {
+        if (element.validation === 20 && (!element.options || element.options.length === 0)) {
+            errors.push({
+                id: element.id,
+                title: 'Missing options',
+                description: `Drop down field "${element.label}" is missing options.`,
+                element: element,
+            });
+        }
+    });
+    return errors;
+}
+
 /**
  * These utils are used to make document-viewer more readable
  * but they must be called using the bind() function so that
@@ -20071,19 +20126,23 @@ function matchData(data) {
             fi.setAttribute('id', 'ls-field-' + id);
             fi.dataItem = { ...data.obj, id };
         }
+        this.validationErrors = validate.bind(this)(this._template);
     }
     if (prefix === 'rol') {
         syncRoles.bind(this)();
     }
     if (prefix === 'tpl') {
         this._template = { ...this._template, ...data.obj };
+        this.validationErrors = validate.bind(this)(this._template);
     }
 }
 async function syncRoles() {
     var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
-    const result = await this.adapter.execute(this.token, getTemplateRoles(this._template.id));
-    this._template = { ...this._template, roles: result.template.roles };
+    const tresult = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
+    this.parseTemplate(JSON.stringify(tresult.template));
     participantManager.template = this._template;
+    this.generateFields();
+    this.validationErrors = validate.bind(this)(this._template);
 }
 // Utility function which extracts the type from any API id
 function getApiType(obj) {
@@ -24484,95 +24543,55 @@ const deleteElement = obj => {
 };
 
 // Add a role
-const updateTemplate = template => {
+const createRole = (role) => {
+    const newParent = role?.signerParent ? `"${role.signerParent}"` : 'null';
     return `
-    mutation LDVupdateTemplate {
-      updateTemplate(input: {
-        templateId: "${template.id}", 
-        title: "${template.title}",
-        locked: ${template.locked},
-        autoArchive: ${template.autoArchive},
-        fixSignatureScale: ${template.fixSignatureScale ? template.fixSignatureScale : false}
-      })
-    }
-  `;
+  mutation LDVAddRole {
+    createTemplateRole(input: {
+      templateId: "${role.templateId}"       
+        signerIndex: ${role.signerIndex}
+        signerParent: ${newParent}
+        name: ${JSON.stringify(role.name)}
+        ordinal: ${role.ordinal}
+        roleType: ${role.roleType}
+        experience: "${role.experience}"
+     })
+  }`;
 };
-const getTemplate = (id) => {
+// Remove a role
+const deleteRole = (role) => {
     return `
-        query LDVGetTemplate {
-          template(id: "${id}") {
-            id
-            title
-            fileName
-            pageDimensions
-            pageCount
-            modified
-            link
-            valid
-            locked
-            autoArchive
-            archived
-            tags
-            created
-            createdBy
-            lastSent
-            fixSignatureScale
-            groupId
-            roles{
-              id
-              name
-              roleType
-              signerIndex
-              ordinal
-              signerParent
-              experience
-            }
-            elementConnection {
-              templateElements {
-                align
-                ax
-                ay
-                bx
-                by
-                elementType
-                formElementType
-                fieldOrder
-                fontName
-                fontSize
-                helpText
-                hideBorder
-                id
-                label
-                labelExtra
-                logicAction
-                logicGroup
-                mapTo
-                options
-                optional
-                page
-                role
-                signer
-                substantive
-                validation
-                value
-              }
-              totalCount
-            }
-            userSignatureConnection {
-              userSignatureElements {
-                id
-                userId
-                ax
-                ay
-                bx
-                by
-                page
-                link
-              }
-            }
-          }
-        }
-      `;
+    mutation LDVremoveRole {
+      deleteTemplateRole(input: {
+        templateRoleId: "${role.id}"       
+       })
+    }`;
+};
+// Save any changes to an role
+const updateRole = (role) => {
+    const newParent = role?.signerParent ? `"${role.signerParent}"` : 'null';
+    return `
+    mutation LDVupdateRole {
+      updateTemplateRole(input: {
+        templateRoleId: "${role.id}"       
+        signerIndex: ${role.signerIndex}
+        ordinal: ${role.ordinal}
+        signerParent: ${newParent}
+        name: ${JSON.stringify(role.name)}
+        roleType: ${role.roleType}
+        experience: "${role.experience}"
+       })
+    }`;
+};
+// swap two adjacent roles
+const swapRoles = (roleId1, roleId2) => {
+    return `
+    mutation LDVswapRole {
+      swapRoles(input: {
+        roleId1: "${roleId1.id}"       
+        roleId2: "${roleId2.id}"
+       })
+    }`;
 };
 
 class LsDocumentAdapter {
@@ -24753,38 +24772,6 @@ const getGroupData = (id) => {
       `;
 };
 
-/**
- * This module contains all the rules required to mark a template
- * as valid.
- *
- */
-function validate(t) {
-    var errors = [];
-    // Check for missing signatures
-    t.roles.forEach(tr => {
-        if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex && tr.roleType !== 'APPROVER').length === 0) {
-            errors.push({
-                id: tr.id,
-                title: 'Missing signature.',
-                description: `{tr.name} is missing a signature.`,
-                role: tr,
-            });
-        }
-    });
-    // Check for missing multi-select options
-    t.elementConnection.templateElements.forEach(element => {
-        if (element.validation === 20 && (!element.options || element.options.length === 0)) {
-            errors.push({
-                id: element.id,
-                title: 'Missing options',
-                description: `Drop down field "${element.label}" is missing options.`,
-                element: element,
-            });
-        }
-    });
-    return errors;
-}
-
 const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;border-radius:16px;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{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px;box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw;height:100%}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100vw;overflow:scroll;padding:5rem 380px 2rem 380px}#ls-document-frame{position:relative;height:98vh;margin-right:auto;margin-left:auto}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);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{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;}.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{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;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;}.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{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.field-properties-outer{position:relative;height:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
 pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
@@ -25230,7 +25217,14 @@ const LsDocumentViewer = class {
             event.preventDefault();
         });
         dropTarget.addEventListener('drop', mouseDrop.bind(this));
-        // Generate all the field HTML elements that are required (for every page)
+        this.generateFields();
+    }
+    // Generate all the field HTML elements that are required (for every page)
+    generateFields(clearExisting = true) {
+        if (clearExisting) {
+            const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+            fields.forEach(fi => this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi));
+        }
         this._template.elementConnection.templateElements.forEach(te => {
             addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), this.prepareElement(te));
         });
@@ -25273,7 +25267,7 @@ const LsDocumentViewer = class {
         });
     }
     render() {
-        return (h(Host, { key: '331bbb6ee8979812cac17c61037085c18ffe3ea4' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '2fdab395bd9707041e35176bdbcc898e61dcf640' }), h("div", { key: '676168eb9b02205325cb53c68bda22783669380c', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '62867096f5fda376314bb7915b81e7006d95c492', validationErrors: this.validationErrors })), h("div", { key: '898f1dcc9a33dc8fa3181e409364b575bb923904', class: "page-header" }, h("p", { key: 'd5d0041f19aa10609d02a81412a46cf0c45376bb', class: "header-text-1" }, "Template Creation"), h("p", { key: '08f9eb736cd04e1c4cd867f4882f03d3d1899e39' }, "/"), h("p", { key: '039a5d1475d4ee606b8f11cc1f49fcdcfe309d30', class: "header-text-2" }, this._template?.title)), h("form", { key: 'c4455c35ff74b2ea43adc7e298c46d7db22dc964', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { id: "ls-left-box", class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
+        return (h(Host, { key: '81fb162f62eee08b7e9608ab01a662b8692ced19' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '8d72275abac9bf7b7c60dc0f3bf359b61da2bfa8' }), h("div", { key: '9403504084bfeee0569896524971a8b0b1e7a227', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '989610b8316de91ccbde6ad01c13e8159edc584c', validationErrors: this.validationErrors })), h("div", { key: 'f22196cecc91276d4df7c632b5c4a9412f2a53eb', class: "page-header" }, h("p", { key: '5bda0c223072135232f648d28e59bd79145fe349', class: "header-text-1" }, "Template Creation"), h("p", { key: '129f5a82ea8e5afb4a992687e121bde326908b97' }, "/"), h("p", { key: 'e1f00b84543a3e8a9baee098742c6519d7d2bcde', class: "header-text-2" }, this._template?.title)), h("form", { key: '38f0cbd650c8f45a4b415ee20b5fc2dd73345442', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { id: "ls-left-box", class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25312,7 +25306,7 @@ const LsDocumentViewer = class {
             } })))), 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' })), !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 => {
                 this.selected = [];
                 e.preventDefault();
-            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: '8c4b8034e7ffed516af95db5f10cf4ada95dcbdb', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'f387d5bc8389c756ed527b5a3b90f4622b3cc97c', id: "ls-mid-area" }, h("div", { key: '670fef66b54c73e52b707fc27e6cd058765c2dd2', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '2321a7a20cbd67b5e55607bd54b0bfb8fb5c2dc8', id: "ls-document-frame" }, h("canvas", { key: '76ec82c4ae65781013f12fa382affd327c1271f2', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'a8ec99154542ae3d0290eb3c33d88e5c96cff78e', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '74d7d28664675bfe3c0b178f783fcfe155ac4544', id: "ls-box-selector" }))), h("ls-statusbar", { key: '44c7a537634f5ea25028942223a850804d0f9639', editor: this }))))));
+            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: 'f64bad623489b4f7b56c08d7c1e1fbd2264df854', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'b1d691f755d4ea7a913ab5bf3b6d22bcc02e9464', id: "ls-mid-area" }, h("div", { key: '985b96b3b721d206a0e099ffef062f502d633b32', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '85db5a30105e084d55e962c1a9d74b267d2a332f', id: "ls-document-frame" }, h("canvas", { key: '39041d335b556218f7fb2718e26d018ec596afe7', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '1580ed3da6d3fd5a5ca81b0da0fb733e6a6ced1f', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '6282c570b3d0051adcf46642999516694f3f7996', id: "ls-box-selector" }))), h("ls-statusbar", { key: '236c388bea733eb6eef71e3ae0f8e97e20822261', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],