legalesign-document-viewer 0.3.2 → 0.3.3

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js

@@ -4,8 +4,11 @@ export class LsValidationTag {
     status = 'Invalid';
     validationErrors = [];
     isExpanded = false;
+    validateChange(newValue) {
+        console.log(newValue);
+    }
     render() {
-        return (h(Host, { key: 'c6bdded8043e03b185383f12a1f4732f94fc1d0b' }, h("div", { key: '75e388c633e4c0f02a597b975f018aeb88cbe30e', 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 && h("div", { key: '0f0034a85c407a98cd72caedb7719d57cbbe6419', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: '5f6dadde5dee6d6539531d3e49c5af14e60926ff', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: 'f69f5c8f2dcd583bfa6472806e1b15f88143e165', class: 'field-dropdown' }, h("div", { key: '86cc44f470f99e329ca950be1cca4af86389620b', class: 'dropdown-header' }, h("h2", { key: 'ec2c565524f20d85432dfbc7d218cd2c23809a36' }, "Signature Fields Required"), h("p", { key: '272cc03365c6a95ad68aa4d3857d0004187ca9da' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+        return (h(Host, { key: '81f7243eb9ac2099bac672ce98f26e4da6bb8fed' }, h("div", { key: '33e7174b2032cc6282f84b26a4f943e1baac6dd9', 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 && h("div", { key: '6b820c6a30a090d656c5a6a06b66c8c3cda8fa2c', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: 'b4404382dea2c84c042dd1b330b2f0be823b643e', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: 'eca209963d0acadbef0764909f15bb4a0350f4c6', class: 'field-dropdown' }, h("div", { key: '5a57240e85f7826049b12bda0f2cbfc72599c6b9', class: 'dropdown-header' }, h("h2", { key: '34bb3c2fac8a092cc424a4ebdce49137d6dcd384' }, "Signature Fields Required"), h("p", { key: 'cedda6d0383cd029efdd33fa7edfcd22c0cf65e2' }, 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 signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
             const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { key: idx, class: 'required-field', style: {
@@ -15,7 +18,7 @@ export class LsValidationTag {
                     '--field-text-color': pallette.s70,
                     '--field-text-color-hover': pallette.s80,
                     '--field-border-color-hover': pallette.s60,
-                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description)))), h("ls-icon", { name: "chevron-right" })));
+                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
         })))));
     }
     static get is() { return "ls-validation-tag"; }
@@ -99,5 +102,11 @@ export class LsValidationTag {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "validationErrors",
+                "methodName": "validateChange"
+            }];
+    }
 }
 //# sourceMappingURL=ls-validation-tag.js.map

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                  <ls-icon name=\"chevron-right\" />\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Watch, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n    @Watch('validationErrors')\n  validateChange(newValue: ValidationError[]) {\n    console.log(newValue);  \n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BWLt02JN.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BvHSBTD8.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');

package/dist/components/ls-document-options.js

@@ -1,4 +1,4 @@
-import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-5I9rEf1F.js';
+import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-Dprl580c.js';
 
 const LsDocumentOptions = LsDocumentOptions$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,43 +1,44 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BWLt02JN.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BvHSBTD8.js';
 import { a as alter, o as oob, u as updateRole, c as createRole, s as swapRoles, d as deleteRole, m as matchData, g as getApiType } from './p-Ovur85Of.js';
-import { d as defineCustomElement$D } from './p-5I9rEf1F.js';
-import { d as defineCustomElement$C } from './p-DgMfXwXc.js';
-import { d as defineCustomElement$B } from './p-C8kySYH4.js';
-import { d as defineCustomElement$A } from './p-7V9_3fXA.js';
-import { d as defineCustomElement$z } from './p-Bsc25fvn.js';
-import { d as defineCustomElement$y } from './p-Lx7PwjNC.js';
-import { d as defineCustomElement$x } from './p-Dp-vgKJq.js';
-import { d as defineCustomElement$w } from './p-_dj7MCcU.js';
-import { d as defineCustomElement$v } from './p-Cfl2rRxL.js';
-import { d as defineCustomElement$u } from './p-CcUFZYwZ.js';
-import { d as defineCustomElement$t } from './p-CpiX4Tih.js';
-import { d as defineCustomElement$s } from './p-C0afavmo.js';
-import { d as defineCustomElement$r } from './p-DOCp-M5v.js';
-import { d as defineCustomElement$q } from './p-CVxA0mrX.js';
-import { d as defineCustomElement$p } from './p-DWqgZCMh.js';
-import { d as defineCustomElement$o } from './p-CwKpqq1h.js';
-import { d as defineCustomElement$n } from './p-C6cWElQ7.js';
-import { d as defineCustomElement$m } from './p-DEArdusa.js';
-import { d as defineCustomElement$l } from './p-CjciOPPE.js';
-import { d as defineCustomElement$k } from './p-GJYwAar9.js';
-import { d as defineCustomElement$j } from './p-Dhknldsv.js';
-import { d as defineCustomElement$i } from './p-BNMjQBPT.js';
-import { d as defineCustomElement$h } from './p-CCMS_IvP.js';
-import { d as defineCustomElement$g } from './p-DORxxjtg.js';
-import { d as defineCustomElement$f } from './p-D990IL5t.js';
-import { d as defineCustomElement$e } from './p-Crkl9bKZ.js';
-import { d as defineCustomElement$d } from './p-BPayWH9u.js';
-import { d as defineCustomElement$c } from './p-BpXqwLh3.js';
-import { d as defineCustomElement$b } from './p-ChCIuJg0.js';
-import { d as defineCustomElement$a } from './p-CozH0k34.js';
-import { d as defineCustomElement$9 } from './p-C4Go47Ak.js';
-import { d as defineCustomElement$8 } from './p-D0PX7hpQ.js';
-import { d as defineCustomElement$7 } from './p-BaMR8ksy.js';
-import { d as defineCustomElement$6 } from './p-wy6ar5D3.js';
-import { d as defineCustomElement$5 } from './p-HaIHVR-P.js';
-import { d as defineCustomElement$4 } from './p-ClYIDEKN.js';
-import { d as defineCustomElement$3 } from './p-D5cswwR_.js';
-import { d as defineCustomElement$2 } from './p-YrxZXlJ1.js';
+import { d as defineCustomElement$E } from './p-Dprl580c.js';
+import { d as defineCustomElement$D } from './p-CZkgAbFI.js';
+import { d as defineCustomElement$C } from './p-CdGtJRZm.js';
+import { d as defineCustomElement$B } from './p-BXKYpxgM.js';
+import { d as defineCustomElement$A } from './p-DxGzQ3Lc.js';
+import { d as defineCustomElement$z } from './p-Da83lhqi.js';
+import { d as defineCustomElement$y } from './p-Bxutt9rC.js';
+import { d as defineCustomElement$x } from './p-C45TaVTh.js';
+import { d as defineCustomElement$w } from './p-B3lY01RV.js';
+import { d as defineCustomElement$v } from './p-9WKoGwO0.js';
+import { d as defineCustomElement$u } from './p-C6NnNmx5.js';
+import { d as defineCustomElement$t } from './p-B-K24bnx.js';
+import { d as defineCustomElement$s } from './p-CzySwvIU.js';
+import { d as defineCustomElement$r } from './p-14owczyX.js';
+import { d as defineCustomElement$q } from './p-vV0A8m2N.js';
+import { d as defineCustomElement$p } from './p-gEso0FtC.js';
+import { d as defineCustomElement$o } from './p-BKNIuWRw.js';
+import { d as defineCustomElement$n } from './p-DqW1sDWy.js';
+import { d as defineCustomElement$m } from './p-CHN41h9u.js';
+import { d as defineCustomElement$l } from './p-23iaNjGp.js';
+import { d as defineCustomElement$k } from './p-C4dJ_NrC.js';
+import { d as defineCustomElement$j } from './p-tfo7xItm.js';
+import { d as defineCustomElement$i } from './p-DY8RJZmx.js';
+import { d as defineCustomElement$h } from './p-DE2r5IdM.js';
+import { d as defineCustomElement$g } from './p-6LFAGg6D.js';
+import { d as defineCustomElement$f } from './p-Co6xLkEu.js';
+import { d as defineCustomElement$e } from './p-DM3pnD5z.js';
+import { d as defineCustomElement$d } from './p-iwXLSFLX.js';
+import { d as defineCustomElement$c } from './p-DqEap43n.js';
+import { d as defineCustomElement$b } from './p-o7kGA8FM.js';
+import { d as defineCustomElement$a } from './p-ozlIyuZ1.js';
+import { d as defineCustomElement$9 } from './p-Yrg6B_xb.js';
+import { d as defineCustomElement$8 } from './p-BLUUNyDx.js';
+import { d as defineCustomElement$7 } from './p-CCE9t160.js';
+import { d as defineCustomElement$6 } from './p-BArjC51C.js';
+import { d as defineCustomElement$5 } from './p-BcfP7mSQ.js';
+import { d as defineCustomElement$4 } from './p-DUVCAq-W.js';
+import { d as defineCustomElement$3 } from './p-Bt5gnPRz.js';
+import { d as defineCustomElement$2 } from './p-DyE9zKT7.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19851,6 +19852,8 @@ const findIn = (fields, selector, restyle = false, additive = false) => {
 };
 // Used to append new fields (dropped or loaded from template data)
 function addField(frame, data) {
+    const fields = this._template.elementConnection.templateElements;
+    this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: [...fields, data] } };
     const node = document.createElement('ls-editor-field');
     node.setAttribute('type', data.formElementType);
     node.setAttribute('id', 'ls-field-' + data.id);
@@ -24476,7 +24479,7 @@ function validate(t) {
                 id: tr.id,
                 title: 'Missing signature.',
                 description: `{tr.name} is missing a signature.`,
-                role: tr
+                role: tr,
             });
         }
     });
@@ -24487,7 +24490,7 @@ function validate(t) {
                 id: element.id,
                 title: 'Missing options',
                 description: `Drop down field "${element.label}" is missing options.`,
-                element: element
+                element: element,
             });
         }
     });
@@ -24672,13 +24675,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     mutateHandler(event) {
         if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
-        this.validationErrors = validate.bind(this)(this._template);
     }
     // Updates are internal event between LS controls not to be confused with mutate
     updateHandler(event) {
         if (event.detail)
             event.detail.forEach(fx => this.syncChange(fx));
-        this.validationErrors = validate.bind(this)(this._template);
     }
     // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
@@ -24825,7 +24826,6 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
             roles: preparedRoles,
         };
-        console.log(this._template);
     }
     /**
      * Render the page based on pageNumber
@@ -24911,6 +24911,8 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             }
             else if (update.action === 'delete') {
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
+                const fields = this._template.elementConnection.templateElements;
+                this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: fields.filter(f => f.id !== update.data.id) } };
                 this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi);
                 this.selected = [];
             }
@@ -24918,6 +24920,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 console.warn('Unrecognised action, check Legalesign documentation. `create`, `update` and `delete` allowed.');
             }
         }
+        this.validationErrors = validate.bind(this)(this._template);
     }
     initViewer() {
         // Generate a canvas to draw the background PDF on.
@@ -24984,7 +24987,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         });
     }
     render() {
-        return (h(Host, { key: '8406b3185fb442e9cc8db99f2e41d12a4fb86e32' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'c9ec4715fbf17ab0fa3e83aa95eef13d805e26d1' }), h("div", { key: '3489b169eefc455c24de83364fae56edf9402559', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '8dbacf34cd6429887f6ab38338a6d414a9687d26', validationErrors: this.validationErrors })), h("div", { key: '8733e49ee8d0cc505685ebbf2d7958a0d23e6418', class: "page-header" }, h("p", { key: 'a2c76cc30525f0f50276584f6056eb4f2b2e8c4b', class: "header-text-1" }, "Template Creation"), h("p", { key: '2dc05f7b78d33a23360175e6eda7d54c72432164' }, "/"), h("p", { key: '5b359ea0c34af996ef03f9b4efdb0ffd1e0cf2c8', class: "header-text-2" }, this._template?.title)), h("form", { key: 'b6e6156c94b8e61e297f2ccfe6668e035b758293', 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: '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 => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24998,17 +25001,17 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 this.handleSelectedField.bind(this)(event);
             } })) : (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, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
-            } })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer, onSelected: event => {
-                this.handleSelectedField.bind(this)(event);
-            } }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer, onSelected: event => {
+            } })), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
             } }), 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, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
             } }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
-            } }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer, onSelected: event => {
+            } }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
-            } }), h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer, onSelected: event => {
+            } }), h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
             } }), h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
@@ -25020,10 +25023,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 this.handleSelectedField.bind(this)(event);
             } }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer, onSelected: event => {
                 this.handleSelectedField.bind(this)(event);
-            } }))))), 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 => {
+            } })))), 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: '0c393716919e6d4bb9c23bd0195ce7323945a173', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'dd628626d6f640fec02ecb23cf4a11071f7d1758', id: "ls-mid-area" }, h("div", { key: '74242aaf4fb4c793597fc68fb95a654c5b0ff06d', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '596c3ef95c0160d1ca2a5e582b5b0acf452c4111', id: "ls-document-frame" }, h("canvas", { key: 'e4d63148c79927790a45a08731c5d2be6f011b95', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'ce85606c532a9c71d4323e81b8d7838d763aef03', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'fd1f97abbc0513ae59d9d57544ea40dc195f8768', id: "ls-box-selector" }))), h("ls-statusbar", { key: '0667e2279abbe34dbabc8beaf62cfc0161e06893', 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: '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 }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25068,7 +25071,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-page-loader", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-validation-tag"];
+    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-page-loader", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-tooltip", "ls-validation-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-document-viewer":
             if (!customElements.get(tagName)) {
@@ -25077,185 +25080,190 @@ function defineCustomElement$1() {
             break;
         case "ls-document-options":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$E();
             }
             break;
         case "ls-editor-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$D();
             }
             break;
         case "ls-editor-table":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "ls-feature-column":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "ls-field-alignment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "ls-field-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "ls-field-distribute":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "ls-field-format":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "ls-field-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "ls-field-properties-autosign":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "ls-field-properties-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "ls-field-properties-email":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "ls-field-properties-general":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "ls-field-properties-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "ls-field-properties-multiple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "ls-field-properties-number":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "ls-field-properties-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "ls-field-size":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "ls-field-type-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "ls-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "ls-page-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "ls-participant-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "ls-participant-manager":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "ls-participant-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "ls-props-section":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ls-statusbar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ls-toggle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ls-toolbar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ls-toolbox-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }