legalesign-document-viewer 0.4.9 → 0.5.0

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

@@ -81,10 +81,17 @@ export class LsDocumentViewer {
     pageNum = 1;
     pageCount = 1;
     signer = 0;
+    groupInfo;
     _template;
     validationErrors = [];
     status;
-    groupInfo;
+    /**
+   * The following state properties define the defaults for field
+   * creation. They should be overridden by the users most used
+   * values from localStorage or profile settings.
+   */
+    fontSize = 10;
+    fontFamily = 'arial';
     selected = [];
     isLoading = true;
     fieldTypeSelected = {
@@ -169,13 +176,13 @@ export class LsDocumentViewer {
     selectFields;
     // Send an external event to be processed
     mutate;
-    // Send an internal event to be processed
-    update;
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
         if (this.token && this.adapter)
-            event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
+            event.detail.forEach(me => this.adapter.handleEvent(me, this.token)
+                .then(result => matchData.bind(this)(result))
+                .then(() => this.syncChange(me)));
     }
     handleFieldTypeSelected(event) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -185,11 +192,6 @@ export class LsDocumentViewer {
         this.fieldTypeSelected = event.detail;
     }
     // 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));
-    }
-    // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
         const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
         const parent = this._template.roles.find(r => r.id === event.detail.parent);
@@ -209,7 +211,6 @@ export class LsDocumentViewer {
                 },
             },
         ];
-        this.update.emit(data);
         this.mutate.emit(data);
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -346,10 +347,10 @@ export class LsDocumentViewer {
         const fields = newTemplate.elementConnection.templateElements.map(f => {
             return {
                 ...f,
-                top: this.clip(f.ay) * this.pageDimensions[0].height,
-                left: this.clip(f.ax) * this.pageDimensions[0].width,
-                height: (this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height,
-                width: (this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width,
+                top: Math.floor(this.clip(f.ay) * this.pageDimensions[0].height),
+                left: Math.floor(this.clip(f.ax) * this.pageDimensions[0].width),
+                height: Math.floor((this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height),
+                width: Math.floor((this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width),
                 templateId: newTemplate.id,
             };
         });
@@ -448,7 +449,6 @@ export class LsDocumentViewer {
                 this.selected = Array.from(fields).filter(fx => fx.selected);
             }
             else if (update.action === 'delete') {
-                console.log('Deleting field via syncChange', update.data);
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                 if (!fi)
                     return;
@@ -475,9 +475,9 @@ export class LsDocumentViewer {
         // Used for single field selection
         if (this.mode !== 'preview' || this._template?.locked === true) {
             dropTarget.addEventListener('click', mouseClick.bind(this));
-            dropTarget.addEventListener('mousedown', mouseDown.bind(this));
-            dropTarget.addEventListener('mousemove', mouseMove.bind(this));
-            dropTarget.addEventListener('mouseup', mouseUp.bind(this));
+            document.addEventListener('mousedown', mouseDown.bind(this));
+            document.addEventListener('mousemove', mouseMove.bind(this));
+            document.addEventListener('mouseup', mouseUp.bind(this));
             dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
             document.addEventListener('keydown', keyDown.bind(this));
             dropTarget.addEventListener('dragenter', event => {
@@ -537,12 +537,24 @@ 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();
+            });
+        }
     }
     showTool(fieldFormType) {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: '1b0f43587c5ad9a67f270a392c6ba8afcc0f14e3' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '06b758ed6065b14828f50e61b12390e6a4f99c79' }), h("div", { key: 'fa9d8c2f9a88c4499eb87f418c947e0d39ff0a04', class: "page-header" }, h("div", { key: 'dab52a025182879f35e7a3b4046e027654d3b7f5', class: 'left-slot-wrapper' }, h("slot", { key: '089b286e1e2ed2e978a522e63ba4c46573a0fdfd', name: "left-button" })), h("div", { key: '3fd7c33f83675a19497e9c9e0e8a34af7803fda7', class: 'right-slot-wrapper' }, h("slot", { key: 'c4ff4be0e63ad26967f9fdfa52d0c0cb55315144', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '3239a1bace9efb2d12266f66e3dacafa21e58e17' }, h("span", { key: 'ed1f838de84e364e8a88934ec3495b6b843b70dd', class: "header-text-1" }, "Template Creation"), h("span", { key: 'b0eda881de0395e83211b2d92a2511a42324b828' }, "/"), h("span", { key: '04cac9d4cb09316c48e72f0fb0e5ddfea5f707e5', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '2373762eec99b1d26c95aa940a31b409c26ee3ca', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: '8367e2d51d906bc1aae2aaa9e8e0ccc08b2bbd61', class: "header-text-1" }, "Compose"), " ", h("span", { key: '070acf4f705c9ced6a458c3452493e13f257c252' }, "/"), " ", h("ls-title-input", { key: '4364ce5db59d3a902a85ab43f89771dbd5eb307b', template: this._template })))), this.mode === 'editor' && (h("div", { key: 'e07b31facd0fe9bad28d7bfdc2c5885cdf9c8a7c', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'f0901900e71ac857f2174aa371e0dcfbb5604894', validationErrors: this.validationErrors }))), h("form", { key: '04bf2dcc77db554669a6100faa9ef8af79997b5a', 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 => {
+        return (h(Host, { key: '592c7144dc4fd461a0d3b8e227db8e4048467c9f' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '113947587a6fe8e00d89ed00edde9afc8be74593' }), h("div", { key: '677507d66bd4838f83b23b3709a150f3d84f29bd', class: "page-header" }, h("div", { key: '22a111c262260ccba582b3d67e3821e26600b6d9', class: 'left-slot-wrapper' }, h("slot", { key: '6cbdd90b06fe4932945be175c34d30425315fa0f', name: "left-button" })), h("div", { key: '69fc0abcc276a7df62c64f8110be565fcf64543f', class: 'right-slot-wrapper' }, h("slot", { key: '5fcd702fb09f97d0e3ad7c36c1964a4f76511c56', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '26c37fb4933d625f83b4e2e79c64fc404a2bca83' }, h("span", { key: 'ff58207753e287214f7b54301067812ac7a1864f', class: "header-text-1" }, "Template Creation"), h("span", { key: '91f36b80b04d9dd46ebc04250f28c1e0a9ae340a' }, "/"), h("span", { key: 'f0b3432388b7924e8c7e88d088ec8882e74da179', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '174d1395ed9283ccfff0e7054d922d1a099d6ac6', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: 'e45eede718f3acfbf2597e207ac84cda4f3d93f5', class: "header-text-1" }, "Compose"), " ", h("span", { key: '18f911514cf2b4c5058cb49de8b93cfc9d7319a3' }, "/"), " ", h("ls-title-input", { key: '71f7afcfed3fa23b92a81a22211578e5a1ae0837', template: this._template })))), this.mode === 'editor' && (h("div", { key: '44e9e1b2e8e9a8d8d3bfe49075bd9c27272d0bfd', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '15ab405d7eddf10eba6adc64f2ca9460ae05f3bc', validationErrors: this.validationErrors }))), h("form", { key: '38a29a27b4fac98b46fcff7748e1225bc44b2220', 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;
@@ -553,15 +565,14 @@ export class LsDocumentViewer {
                 }
                 else if (manager.detail === 'validation') {
                     var validationManager = this.component.shadowRoot.getElementById('ls-validation-manager');
-                    console.log(validationManager);
                     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') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, 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: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, 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: 27, defaultWidth: 100, 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: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, 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: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, 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: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, 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: 27, defaultWidth: 120, 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: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, 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: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, 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: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, 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: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, 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: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, 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: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, 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: "drawn", 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 &&
+            } })), 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') && (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: "auto sign", 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: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 16, defaultWidth: 100, validation: 30, 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: "date", formElementType: "date", label: "Date", defaultHeight: 16, defaultWidth: 100, validation: 2, 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: "email", 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: "number", 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: "dropdown", 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: "checkbox", 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: "regex", 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: "image", 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: "file", 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: "drawn", 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 })))))), !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();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '019a27378b966ba7e66f734bcef8c6b15a2438d9', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '1f9de8b536ea17fdd07a85acb27c91948bd2f5ef', id: "ls-mid-area" }, h("div", { key: '603716b0c315bfccd9f5e1bae89a8d4e79a14508', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'ebd8c1a0611e38cbdd3df4e04db9db5b8f9fdfaa', id: "ls-document-frame" }, h("canvas", { key: '0b7ebc30d731949d4dc889105309c9f0cdbf76bd', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '975f3012212aafe8f1d18a8e9687d1af4c88fb28', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '71be123371eafb8a66ba8950dac1a948a09e1cc3', id: "ls-box-selector" }))), h("ls-statusbar", { key: '9dd7211c2ccd0ac51a1020c6f87a1767d3a0b6af', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '34fa0cf7608b8d182070de4566117de7eec91019', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: 'a88185257ac871dc06d0cdfb469ce707f5181e4d', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '45e36f82ccbc164030b88b77d5e5bee3d492adbd', id: "ls-mid-area" }, h("div", { key: 'ccfb67c4439afa826187684cb5607aa578d7e2c7', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '8db690eef40e7681d55a741dd73b5baf04746b65', id: "ls-document-frame" }, h("canvas", { key: 'b3c5a5dd0628bc64ed4778331d55f9e21379b030', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'ad39cdc485dc2338cd1a0d352d80b86c9c21aa02', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '50f7fd13fa475862059e0068282dd679b019f53a', id: "ls-box-selector" }))), h("ls-statusbar", { key: '21e4863029cf8b59ad3f902a5dc9c2658aa1cefe', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: 'd55c2e32d2b66bd63aa0fa20873e753736a7aff2', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -579,7 +590,6 @@ export class LsDocumentViewer {
         return {
             "template": {
                 "type": "string",
-                "attribute": "template",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -594,11 +604,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "template"
             },
             "token": {
                 "type": "string",
-                "attribute": "token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -613,11 +623,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "token"
             },
             "userpool": {
                 "type": "string",
-                "attribute": "userpool",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -632,11 +642,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "userpool"
             },
             "endpoint": {
                 "type": "string",
-                "attribute": "endpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -651,11 +661,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "endpoint"
             },
             "templateid": {
                 "type": "string",
-                "attribute": "templateid",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -670,11 +680,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "templateid"
             },
             "recipients": {
                 "type": "string",
-                "attribute": "recipients",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -689,11 +699,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "recipients"
             },
             "_recipients": {
                 "type": "unknown",
-                "attribute": "_recipients",
                 "mutable": false,
                 "complexType": {
                     "original": "any[]",
@@ -711,7 +721,6 @@ export class LsDocumentViewer {
             },
             "zoom": {
                 "type": "number",
-                "attribute": "zoom",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -727,11 +736,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "zoom",
                 "defaultValue": "1.0"
             },
             "pageNum": {
                 "type": "number",
-                "attribute": "page-num",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -747,11 +756,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "page-num",
                 "defaultValue": "1"
             },
             "pageCount": {
                 "type": "number",
-                "attribute": "page-count",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -767,11 +776,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "page-count",
                 "defaultValue": "1"
             },
             "signer": {
                 "type": "number",
-                "attribute": "signer",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -787,11 +796,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "signer",
                 "defaultValue": "0"
             },
             "groupInfo": {
                 "type": "any",
-                "attribute": "group-info",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -806,11 +815,11 @@ export class LsDocumentViewer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "group-info"
             },
             "mode": {
                 "type": "string",
-                "attribute": "mode",
                 "mutable": false,
                 "complexType": {
                     "original": "'preview' | 'editor' | 'compose'",
@@ -826,11 +835,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "'editor'"
             },
             "manager": {
                 "type": "string",
-                "attribute": "manager",
                 "mutable": true,
                 "complexType": {
                     "original": "'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'",
@@ -846,11 +855,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "manager",
                 "defaultValue": "'toolbox'"
             },
             "displayTable": {
                 "type": "boolean",
-                "attribute": "display-table",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -866,11 +875,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-table",
                 "defaultValue": "false"
             },
             "filtertoolbox": {
                 "type": "string",
-                "attribute": "filtertoolbox",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -886,11 +895,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "filtertoolbox",
                 "defaultValue": "null"
             },
             "showstatusbar": {
                 "type": "boolean",
-                "attribute": "showstatusbar",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -906,11 +915,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "showstatusbar",
                 "defaultValue": "false"
             },
             "showpagepreview": {
                 "type": "boolean",
-                "attribute": "showpagepreview",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -926,11 +935,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "showpagepreview",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -946,11 +955,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "showtableview": {
                 "type": "boolean",
-                "attribute": "showtableview",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -966,11 +975,11 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "showtableview",
                 "defaultValue": "false"
             },
             "toolboxFilter": {
                 "type": "string",
-                "attribute": "toolbox-filter",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -986,6 +995,7 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "toolbox-filter",
                 "defaultValue": "null"
             }
         };
@@ -995,6 +1005,8 @@ export class LsDocumentViewer {
             "_template": {},
             "validationErrors": {},
             "status": {},
+            "fontSize": {},
+            "fontFamily": {},
             "selected": {},
             "isLoading": {},
             "fieldTypeSelected": {}
@@ -1073,27 +1085,6 @@ export class LsDocumentViewer {
                         }
                     }
                 }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../types/LSMutateEvent",
-                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {
@@ -1203,12 +1194,6 @@ export class LsDocumentViewer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "update",
-                "method": "updateHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }, {
                 "name": "addParticipant",
                 "method": "addParticpantHandler",