legalesign-document-viewer 0.2.19 → 0.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"editorCalculator.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/editorCalculator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LSApiElement } from '../../types/LSApiElement';\n\nexport const findIn = (fields: NodeListOf<HTMLLsEditorFieldElement>, selector: HTMLElement, restyle: boolean = false, additive: boolean = false): HTMLLsEditorFieldElement[] => {\n  const selected: HTMLLsEditorFieldElement[] = new Array();\n  const { top, left, bottom, right } = selector.getBoundingClientRect();\n\n  fields.forEach(f => {\n    if (f.getBoundingClientRect().bottom <= bottom && f.getBoundingClientRect().top >= top && f.getBoundingClientRect().left >= left && f.getBoundingClientRect().right <= right) {\n      if (restyle) f.selected = true;\n      selected.push(f);\n    } else {\n      if (restyle && !additive) f.selected = false;\n    }\n  });\n  return selected;\n};\n\n// Used to append new fields (dropped or loaded from template data)\nexport function addField(frame: HTMLElement, data): HTMLLsEditorFieldElement {\n  const node = document.createElement('ls-editor-field');\n  node.setAttribute('type', data.formElementType);\n  node.setAttribute('id', 'ls-field-' + data.id);\n  // node.setAttribute('selected', 'selected');\n  node.style.zIndex = '100';\n  node.style.position = 'absolute';\n\n  node.style.top = Math.floor(data.top * this.zoom)  +'px';\n  node.style.left = Math.floor(data.left * this.zoom) + 'px';\n  node.style.height = Math.floor(data.height * this.zoom) + 'px';\n  node.style.width = Math.floor(data.width * this.zoom) + 'px';\n  node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n  node.style.alignContent = data.align;\n  node.style.fontFamily = data.fontName;\n  node.dataItem = data;\n  frame.appendChild(node);\n\n  return node as any as HTMLLsEditorFieldElement;\n};\n\nexport function moveField(item: HTMLLsEditorFieldElement, data){\n  item.style.top = Math.floor(data.top * this.zoom) + 'px';\n  item.style.left = Math.floor(data.left * this.zoom) + 'px';\n  item.style.height = Math.floor(data.height * this.zoom) + 'px';\n  item.style.width = Math.floor(data.width * this.zoom) + 'px';\n  item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n  item.style.fontFamily = data.fontName;\n  item.style.textAlign = data.align;\n  item.dataItem = data;\n};\n\n// calculates html compatible coords at current zoom level\nexport const transformCoordinates = (\n  sourceField: LSApiElement,\n  inputFieldWidth: number,\n  inputFieldHeight: number,\n  viewerWidth: number,\n  viewerHeight: number,\n  left: number,\n  top: number,\n  fontName: string,\n  fontSize: number,\n  zoom: number,\n): LSApiElement => {\n  // Returns X, Y coordinates\n  const ax = left > 0 ? left / viewerWidth : 0;\n  const ay = top > 0 ? top / viewerHeight : 0;\n  const bx = (left + inputFieldWidth) / viewerWidth;\n  const by = (top + inputFieldHeight) / viewerHeight;\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    ...sourceField,\n    ax,\n    ay,\n    bx,\n    by,\n    cstyle: {\n      margin: 0,\n      verticalAlign: 'top',\n      boxSizing: 'content-box',\n      fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n      fontFamily: fontName || 'arial',\n      width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`, // app1 input has padding-x 3px\n      height: `${inputFieldHeight * (by - ay) * zoom}px`, // app1 input has padding-y 2px\n      // minHeight: `${inputFieldHeight * (BY - AY) * zoom - 2}px`,\n      lineHeight: 'inherit',\n    },\n    divStyle: {\n      position: 'absolute',\n      top: `${inputFieldHeight * ay * zoom}px`,\n      left: `${inputFieldWidth * ax * zoom}px`,\n      width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`,\n      height: `${inputFieldHeight * (by - ay) * zoom}px`,\n      zIndex: 1000,\n      fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n    },\n    objectHeight: `${inputFieldHeight * (by - ay) * zoom}px`,\n  };\n};\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const findDimensions = (\n  frameContainer: HTMLDivElement,\n  sourceField: HTMLLsEditorFieldElement,\n  pageHeight: number,\n  pageWidth: number,\n  zoom: number\n): { top: number; left: number; height: number; width: number; ax: number; ay: number; bx: number; by: number } => {\n\n  // Position of widget frame\n  const frmDims = frameContainer.getBoundingClientRect();\n  // dimensions relative to viewport\n  const { height, width } = sourceField.getBoundingClientRect();\n  const zwidth = width / zoom;\n  const zheight = height / zoom;\n  const top = Math.floor((sourceField.getBoundingClientRect().top - frmDims.top) / zoom);\n  const left = Math.floor((sourceField.getBoundingClientRect().left - frmDims.left) / zoom);\n  \n  // Returns X, Y coordinates\n  const ax = left > 0 ? left / pageWidth : 0;\n  const ay = top > 0 ? top / pageHeight : 0;\n  const bx = (left + zwidth) / pageWidth;\n  const by = (top + zheight) / pageHeight;\n\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    top,\n    left,\n    height,\n    width,\n    ax,\n    ay,\n    bx,\n    by,\n  };\n};\n\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const recalculateCoordinates = (\n  d: LSApiElement\n): LSApiElement => {\n\n  // Returns X, Y coordinates\n  const ax = d.left / d.pageDimensions.width;\n  const ay = d.top / d.pageDimensions.height;\n  const bx = (d.left + d.width) / d.pageDimensions.width;\n  const by = (d.top + d.height) / d.pageDimensions.height;\n\n   console.log( {\n    ax,\n    ay,\n    bx,\n    by,\n  }, 'recalc')\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    ...d,\n    ax,\n    ay,\n    bx,\n    by,\n  };\n};\n\n\n"]}
+{"version":3,"file":"editorCalculator.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/editorCalculator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LSApiElement } from '../../types/LSApiElement';\n\nexport const findIn = (fields: NodeListOf<HTMLLsEditorFieldElement>, selector: HTMLElement, restyle: boolean = false, additive: boolean = false): HTMLLsEditorFieldElement[] => {\n  const selected: HTMLLsEditorFieldElement[] = new Array();\n  const { top, left, bottom, right } = selector.getBoundingClientRect();\n\n  fields.forEach(f => {\n    if (f.getBoundingClientRect().bottom <= bottom && f.getBoundingClientRect().top >= top && f.getBoundingClientRect().left >= left && f.getBoundingClientRect().right <= right) {\n      if (restyle) f.selected = true;\n      selected.push(f);\n    } else {\n      if (restyle && !additive) f.selected = false;\n    }\n  });\n  return selected;\n};\n\n// Used to append new fields (dropped or loaded from template data)\nexport function addField(frame: HTMLElement, data): HTMLLsEditorFieldElement {\n  const node = document.createElement('ls-editor-field');\n  node.setAttribute('type', data.formElementType);\n  node.setAttribute('id', 'ls-field-' + data.id);\n  // node.setAttribute('selected', 'selected');\n  node.style.zIndex = '100';\n  node.style.position = 'absolute';\n\n  node.style.top = Math.floor(data.top * this.zoom)  +'px';\n  node.style.left = Math.floor(data.left * this.zoom) + 'px';\n  node.style.height = Math.floor(data.height * this.zoom) + 'px';\n  node.style.width = Math.floor(data.width * this.zoom) + 'px';\n  node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n  node.style.alignContent = data.align;\n  node.style.fontFamily = data.fontName;\n  node.dataItem = data;\n  frame.appendChild(node);\n\n  return node as any as HTMLLsEditorFieldElement;\n};\n\nexport function moveField(item: HTMLLsEditorFieldElement, data){\n  item.style.top = Math.floor(data.top * this.zoom) + 'px';\n  item.style.left = Math.floor(data.left * this.zoom) + 'px';\n  item.style.height = Math.floor(data.height * this.zoom) + 'px';\n  item.style.width = Math.floor(data.width * this.zoom) + 'px';\n  item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n  item.style.fontFamily = data.fontName;\n  item.style.textAlign = data.align;\n  item.dataItem = data;\n};\n\n// calculates html compatible coords at current zoom level\nexport const transformCoordinates = (\n  sourceField: LSApiElement,\n  inputFieldWidth: number,\n  inputFieldHeight: number,\n  viewerWidth: number,\n  viewerHeight: number,\n  left: number,\n  top: number,\n  fontName: string,\n  fontSize: number,\n  zoom: number,\n): LSApiElement => {\n  // Returns X, Y coordinates\n  const ax = left > 0 ? left / viewerWidth : 0;\n  const ay = top > 0 ? top / viewerHeight : 0;\n  const bx = (left + inputFieldWidth) / viewerWidth;\n  const by = (top + inputFieldHeight) / viewerHeight;\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    ...sourceField,\n    ax,\n    ay,\n    bx,\n    by,\n    cstyle: {\n      margin: 0,\n      verticalAlign: 'top',\n      boxSizing: 'content-box',\n      fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n      fontFamily: fontName || 'arial',\n      width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`, // app1 input has padding-x 3px\n      height: `${inputFieldHeight * (by - ay) * zoom}px`, // app1 input has padding-y 2px\n      // minHeight: `${inputFieldHeight * (BY - AY) * zoom - 2}px`,\n      lineHeight: 'inherit',\n    },\n    divStyle: {\n      position: 'absolute',\n      top: `${inputFieldHeight * ay * zoom}px`,\n      left: `${inputFieldWidth * ax * zoom}px`,\n      width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`,\n      height: `${inputFieldHeight * (by - ay) * zoom}px`,\n      zIndex: 1000,\n      fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n    },\n    objectHeight: `${inputFieldHeight * (by - ay) * zoom}px`,\n  };\n};\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const findDimensions = (\n  frameContainer: HTMLDivElement,\n  sourceField: HTMLLsEditorFieldElement,\n  pageHeight: number,\n  pageWidth: number,\n  zoom: number\n): { top: number; left: number; height: number; width: number; ax: number; ay: number; bx: number; by: number } => {\n\n  // Position of widget frame\n  const frmDims = frameContainer.getBoundingClientRect();\n  // dimensions relative to viewport\n  const { height, width } = sourceField.getBoundingClientRect();\n  const zwidth = width / zoom;\n  const zheight = height / zoom;\n  const top = Math.floor((sourceField.getBoundingClientRect().top - frmDims.top) / zoom);\n  const left = Math.floor((sourceField.getBoundingClientRect().left - frmDims.left) / zoom);\n  \n  // Returns X, Y coordinates\n  const ax = left > 0 ? left / pageWidth : 0;\n  const ay = top > 0 ? top / pageHeight : 0;\n  const bx = (left + zwidth) / pageWidth;\n  const by = (top + zheight) / pageHeight;\n\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    top,\n    left,\n    height,\n    width,\n    ax,\n    ay,\n    bx,\n    by,\n  };\n};\n\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const recalculateCoordinates = (\n  d: LSApiElement\n): LSApiElement => {\n\n  // Returns X, Y coordinates\n  const ax = d.left / d.pageDimensions.width;\n  const ay = d.top / d.pageDimensions.height;\n  const bx = (d.left + d.width) / d.pageDimensions.width;\n  const by = (d.top + d.height) / d.pageDimensions.height;\n\n  // Return with calculated styles that try to place it as it would appear on legacy signing page\n  return {\n    ...d,\n    ax,\n    ay,\n    bx,\n    by,\n  };\n};\n\n// from a field determinse if out of bounds\nexport const oob = (\n  d: LSApiElement\n): boolean => {\n\n  return (d.left < 0 || d.top < 0 || (d.left + d.width) > d.pageDimensions.width || (d.top + d.height) > d.pageDimensions.height);\n};\n\n\n"]}

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

@@ -47,7 +47,7 @@ export function keyDown(ev) {
                 return oob(alterElement) ? original : alterElement;
             });
         }
-        else if (ev.key === 'Delete') {
+        else if (ev.key === 'Delete' || ev.key === 'Backspace') {
             const arr = Array.from(this.selected);
             this.mutate.emit(arr.map(s => {
                 return { action: 'delete', data: s.dataItem };

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

@@ -1 +1 @@
-{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { alter, oob } from './editorUtils';\n\nexport function keyDown(ev: KeyboardEvent) {\n  if (this.selected && this.selected?.length > 0) {\n    // utils need binding to the context\n    const altbound = alter.bind(this);\n\n    if (ev.key === 'ArrowDown') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n\n      this.update.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { alter, oob } from './editorUtils';\n\nexport function keyDown(ev: KeyboardEvent) {\n  if (this.selected && this.selected?.length > 0) {\n    // utils need binding to the context\n    const altbound = alter.bind(this);\n\n    if (ev.key === 'ArrowDown') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete' || ev.key === 'Backspace') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n\n      this.update.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    }\n  }\n}\n"]}

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

@@ -27,6 +27,8 @@ export class LsDocumentViewer {
     // @ts-ignore
     isMoving = false;
     // @ts-ignore
+    isBoxing = false;
+    // @ts-ignore
     selectionBox = null;
     // @ts-ignore
     hitField;
@@ -76,11 +78,12 @@ export class LsDocumentViewer {
     status;
     groupInfo;
     selected = [];
+    isLoading = true;
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
      */
-    mode = 'custom';
+    mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
             this.showtoolbar = false;
@@ -94,6 +97,12 @@ export class LsDocumentViewer {
             this.showstatusbar = true;
             this.readonly = false;
         }
+        else if (_newMode === 'compose') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
     }
     tableViewHandler(_newMode, _oldMode) {
         if (_newMode === true) {
@@ -170,7 +179,7 @@ export class LsDocumentViewer {
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        if (this.token)
+        if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -210,8 +219,9 @@ export class LsDocumentViewer {
             elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) },
         };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
-        if (toolbar)
+        if (toolbar) {
             toolbar.dataItem = event.detail;
+        }
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
         if (propPanel) {
             propPanel.dataItem = event.detail;
@@ -221,7 +231,7 @@ export class LsDocumentViewer {
             const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
             fu.selected = true;
         });
-        this.selected = fields.filter(fx => fx.selected);
+        // this.selected = fields.filter(fx => fx.selected) as HTMLLsEditorFieldElement[];
         this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
         this.validationErrors = validate.bind(this)(this._template);
     }
@@ -256,6 +266,14 @@ export class LsDocumentViewer {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Unselect all fields
+     */
+    async unselect() {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(fu => { fu.selected = false; });
+        this.selected = [];
+    }
     /**
      * Page and field resize on zoom change
      *
@@ -276,6 +294,13 @@ export class LsDocumentViewer {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Ensure broken or misplaced fields are put onto the page.
+     * {number} position
+     */
+    clip(legacyPosition, failback = 0.0) {
+        return legacyPosition > 1 ? failback : legacyPosition;
+    }
     /**
      * Decorate the template data object with useful transformations.
      * {string} json of template
@@ -292,10 +317,10 @@ export class LsDocumentViewer {
         const fields = newTemplate.elementConnection.templateElements.map(f => {
             return {
                 ...f,
-                top: f.ay * pages[0].height,
-                left: f.ax * pages[0].width,
-                height: (f.by - f.ay) * pages[0].height,
-                width: (f.bx - f.ax) * pages[0].width,
+                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,
                 templateId: newTemplate.id,
             };
         });
@@ -357,23 +382,26 @@ export class LsDocumentViewer {
     prepareElement(newElement) {
         return {
             ...newElement,
-            top: Math.floor(newElement.ay * this.pageDimensions[newElement.page - 1].height),
-            left: Math.floor(newElement.ax * this.pageDimensions[newElement.page - 1].width),
-            height: Math.floor((newElement.by - newElement.ay) * this.pageDimensions[newElement.page - 1].height),
-            width: Math.floor((newElement.bx - newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            top: Math.floor(this.clip(newElement.ay) * this.pageDimensions[newElement.page - 1].height),
+            left: Math.floor(this.clip(newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            height: Math.floor((this.clip(newElement.by, 0.05) - this.clip(newElement.ay)) * this.pageDimensions[newElement.page - 1].height),
+            width: Math.floor((this.clip(newElement.bx, 0.2) - this.clip(newElement.ax)) * this.pageDimensions[newElement.page - 1].width),
             pageDimensions: this.pageDimensions[newElement.page - 1],
             templateId: this._template.id,
         };
     }
     // internal forced change
     syncChange(update) {
+        if (update?.select === 'clear') {
+            this.unselect();
+        }
         if (getApiType(update.data) === 'element') {
             if (update.action === 'create') {
                 const newData = { ...update.data, page: this.pageNum };
                 addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), newData);
-                const newField = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
-                this.selected = [newField];
-                this.selectFields.emit([newData]);
+                //const newField = this.component.shadowRoot.getElementById('ls-field-' + update.data.id) as HTMLLsEditorFieldElement;
+                //this.selected = [newField];
+                //this.selectFields.emit([newData as LSApiElement]);
             }
             else if (update.action === 'update') {
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
@@ -433,6 +461,7 @@ export class LsDocumentViewer {
         });
     }
     async load() {
+        this.isLoading = true;
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -444,6 +473,8 @@ export class LsDocumentViewer {
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.selected = [];
+            this.setZoom(1.0);
+            this.isLoading = false;
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -453,12 +484,15 @@ export class LsDocumentViewer {
         if (this.token && !this._template)
             this.load();
     }
-    componentDidLoad() {
-        const box = this.component.shadowRoot.querySelector('.document-frame-wrapper');
-        box.scrollLeft = -380;
+    handleSelectedField(event) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        fields.forEach(element => {
+            const isSelected = element.formElementType === event.detail;
+            element.isSelected = isSelected;
+        });
     }
     render() {
-        return (h(Host, { key: '772256fe57cd8d2aa9584044d3341ae94f5d856a' }, h(h.Fragment, null, h("div", { key: '3a047e1c06d8da29de6545555e67bf07d879bb90', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'd1c6be4cdd857c8e38f77a036b6594aa44b8fb28', validationErrors: this.validationErrors })), h("div", { key: 'bb06ebe66befacf101094d6b7d25a40a0c9cff0d', class: "page-header" }, h("p", { key: '1b56235e4994ae43add1b084a5c6de2f40ad5c26', class: "header-text-1" }, "Template Creation"), h("p", { key: '9573e82cb20082b311c31d4752c59618c0164c3a' }, "/"), h("p", { key: 'ac2f7068d3a7b9fab04be3e5b0e354251db9ae0d', class: "header-text-2" }, this._template?.title)), h("form", { key: '5e1b6cefe3d2f12ab7fb711af9a189887744509e', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { 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: 'ba98f503028b8060b6d7de59ebec65543bf5d34f' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'da33facea5a874f2c372e6929c792223cd1d774f' }), h("div", { key: 'ed01cec72df4e2343b2fba0fd0e11078c09db240', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'dec9e222a7235a55b0b7d6742ed942bf3af15e31', validationErrors: this.validationErrors })), h("div", { key: '7d6b631c38281c856824897813d1b627d5af17bc', class: "page-header" }, h("p", { key: '1137422244e4fa7f62e6ddf3447a6948198f4f77', class: "header-text-1" }, "Template Creation"), h("p", { key: '9202737314df5c2238f74bd897a23c892facd100' }, "/"), h("p", { key: '8572833ade9d180ad8f39ca7e4bfb3352f3cecc0', class: "header-text-2" }, this._template?.title)), h("form", { key: '84a6e0219e003051bbf200527ed275d05a9b1a40', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { 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;
@@ -468,10 +502,36 @@ export class LsDocumentViewer {
                     participantManager.template = this._template;
                 }
                 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" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (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 })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), 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 }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), 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 }), h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", 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' })), !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("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer, onSelected: event => {
+                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 => {
+                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: "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 => {
+                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 => {
+                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);
+            } }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer, onSelected: event => {
+                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 => {
                 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: '71e1039ef2125174823e1731f00da673fb3610d3', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '34104168b0dfaf818f1811f20a76f087c87d9e2e', id: "ls-mid-area" }, h("div", { key: '12b3c327d7629deba257d0d44d478ad2a93775bb', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'b41998ec0bf1323db3b355fe6fb6cd2cb22cf02d', id: "ls-document-frame" }, h("canvas", { key: 'd756a54e89a8f463b26db71d1bb51bebbfc3564e', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'd9387528cab97c0a2533164c55e627eda6b40c9b', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'cbf35e7c60ddf374b4e6181594a763fc116654e2', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'fd5030967606ba707b0f654aa14a5086289a8c02', 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: '300a112fbe7e1b6acfd6ce0ec54cb3a752f55815', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '92700d27b2be0e8c74952dd1dd4225cd6449f550', id: "ls-mid-area" }, h("div", { key: 'a52bf847bd9eb219a0b470ce4e36fc97e315c6c8', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '9edf12e09ccea929e531ee52a4354c389d055629', id: "ls-document-frame" }, h("canvas", { key: '167c02485f5484e32576749c9ffd90ea478ecfcb', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'ed899a22082224f5f7cc294b68e4c6b56d60d0d3', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'ccf62d6787987a90426cc79139e517c7ac27502c', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'afe98039104214aaecf7b5b77497becbe04b830c', editor: this }))))));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -666,8 +726,8 @@ export class LsDocumentViewer {
                 "attribute": "mode",
                 "mutable": false,
                 "complexType": {
-                    "original": "'preview' | 'editor' | 'custom'",
-                    "resolved": "\"custom\" | \"editor\" | \"preview\"",
+                    "original": "'preview' | 'editor' | 'compose'",
+                    "resolved": "\"compose\" | \"editor\" | \"preview\"",
                     "references": {}
                 },
                 "required": false,
@@ -679,7 +739,7 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'custom'"
+                "defaultValue": "'editor'"
             },
             "manager": {
                 "type": "string",
@@ -888,7 +948,8 @@ export class LsDocumentViewer {
             "_template": {},
             "validationErrors": {},
             "status": {},
-            "selected": {}
+            "selected": {},
+            "isLoading": {}
         };
     }
     static get events() {
@@ -1023,6 +1084,23 @@ export class LsDocumentViewer {
                     "tags": []
                 }
             },
+            "unselect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Unselect all fields",
+                    "tags": []
+                }
+            },
             "setZoom": {
                 "complexType": {
                     "signature": "(z: number) => Promise<void>",