legalesign-document-viewer 0.4.9 → 0.4.10

package/dist/collection/collection-manifest.json

@@ -57,8 +57,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.2",
-    "typescriptVersion": "5.5.4"
+    "version": "4.39.0",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/ls-compose-manager/ls-compose-manager.js

@@ -27,7 +27,6 @@ export class LsComposeManager {
         return {
             "template": {
                 "type": "unknown",
-                "attribute": "template",
                 "mutable": false,
                 "complexType": {
                     "original": "LSApiTemplate",

package/dist/collection/components/ls-compose-manager/ls-compose-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-compose-manager.js","sourceRoot":"","sources":["../../../src/components/ls-compose-manager/ls-compose-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,gBAAgB;IAE3B;;;OAGG;IACK,QAAQ,CAAgB;IAEhC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC9B,2DAAI,KAAK,EAAC,uBAAuB,uBAAsB;gBACvD,0DAAG,KAAK,EAAC,6BAA6B,wEAAsE,CACxG;YACN,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ;gBACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;oBAC5B,OAAO,CACL,cAAS,CACV,CAAC;gBACJ,CAAC,CAAC,CACA;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\n\n\n@Component({\n  tag: 'ls-compose-manager',\n  styleUrl: 'ls-compose-manager.css',\n  shadow: true,\n})\nexport class LsComposeManager {\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  render() {\n    return (\n      <Host>\n          <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Recipient Fields</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template &&\n            this.template?.roles.map(() => {\n              return (\n                <div   />\n              );\n            })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-compose-manager.js","sourceRoot":"","sources":["../../../src/components/ls-compose-manager/ls-compose-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,gBAAgB;IAE3B;;;OAGG;IACK,QAAQ,CAAgB;IAEhC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC9B,2DAAI,KAAK,EAAC,uBAAuB,uBAAsB;gBACvD,0DAAG,KAAK,EAAC,6BAA6B,wEAAsE,CACxG;YACN,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ;gBACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;oBAC5B,OAAO,CACL,cAAS,CACV,CAAC;gBACJ,CAAC,CAAC,CACA;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\n\n\n@Component({\n  tag: 'ls-compose-manager',\n  styleUrl: 'ls-compose-manager.css',\n  shadow: true,\n})\nexport class LsComposeManager {\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  render() {\n    return (\n      <Host>\n          <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Recipient Fields</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template &&\n            this.template?.roles.map(() => {\n              return (\n                <div   />\n              );\n            })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -80,7 +80,6 @@ export class LsDocumentOptions {
         return {
             "template": {
                 "type": "unknown",
-                "attribute": "template",
                 "mutable": true,
                 "complexType": {
                     "original": "LSApiTemplate",

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

@@ -1 +1 @@
-{"version":3,"file":"ls-document-options.js","sourceRoot":"","sources":["../../../src/components/ls-document-options/ls-document-options.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.css',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Watch('template')\n  selectedHandler(newSelected, _oldSelected) {\n    console.log(newSelected, 'document manager');\n  }\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    function formatDate(isoString) {\n      const date = new Date(isoString);\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Template Details</h2>\n          <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n        </div>\n        <div class={'template-details'}>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Name</p>\n            <div\n              class=\"editButton\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check' : 'pencil-alt'}\n                size=\"1.25rem\"\n                id=\"edit-name-btn\"\n                data-tooltip={this.editTitle ? 'Save' : 'Edit Name'}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Auto Archive</p>\n              <p class={'template-detail-section-info'}>After Sending the Template will be automatically archived.</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Lock Template</p>\n              <p class={'template-detail-section-info'}>Lock Template to avoid changes being made</p>\n            </div>\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\" tooltip-data=\"Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template.\">Fixed Signature Aspect</p>\n              <p class={'template-detail-section-info'}>Fixes the aspect ratio of all signatures on the document</p>\n            </div>\n\n            <ls-toggle\n              checked={this.template?.fixSignatureScale}\n              onValueChange={e => {\n                this.alter({ fixSignatureScale: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Document Retention (Days)</p>\n            <p>\n              <input\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                type='number'\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Pages</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Date Created</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Created By</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-document-options.js","sourceRoot":"","sources":["../../../src/components/ls-document-options/ls-document-options.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.css',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Watch('template')\n  selectedHandler(newSelected, _oldSelected) {\n    console.log(newSelected, 'document manager');\n  }\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    function formatDate(isoString) {\n      const date = new Date(isoString);\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Template Details</h2>\n          <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n        </div>\n        <div class={'template-details'}>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Name</p>\n            <div\n              class=\"editButton\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check' : 'pencil-alt'}\n                size=\"1.25rem\"\n                id=\"edit-name-btn\"\n                data-tooltip={this.editTitle ? 'Save' : 'Edit Name'}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Auto Archive</p>\n              <p class={'template-detail-section-info'}>After Sending the Template will be automatically archived.</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Lock Template</p>\n              <p class={'template-detail-section-info'}>Lock Template to avoid changes being made</p>\n            </div>\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\" tooltip-data=\"Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template.\">Fixed Signature Aspect</p>\n              <p class={'template-detail-section-info'}>Fixes the aspect ratio of all signatures on the document</p>\n            </div>\n\n            <ls-toggle\n              checked={this.template?.fixSignatureScale}\n              onValueChange={e => {\n                this.alter({ fixSignatureScale: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Document Retention (Days)</p>\n            <p>\n              <input\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                type='number'\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Pages</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Date Created</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Created By</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -63,13 +63,12 @@ export function keyDown(ev) {
                 const newTop = s.dataItem.top + s.dataItem.height;
                 // check its in bounds
                 if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {
-                    console.log('Setting new top for duplicated item', newTop);
                     newItem.top = newTop;
                 }
                 return { action: 'create', data: newItem, select: 'clear' };
             });
-            this.update.emit(createdItems);
             this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));
+            this.update.emit(createdItems);
         }
         else if (ev.key === 'Escape') {
             console.log('Clearing selection');

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' || 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    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          console.log('Setting new top for duplicated item', newTop);\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.update.emit(createdItems);\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\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    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n      this.update.emit(createdItems);\n    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n"]}

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 = {
@@ -346,10 +353,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,
             };
         });
@@ -475,9 +482,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 +544,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: '868e5839c2093b1b0e2ca126fd5b1a6ade5165b0' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'f9ccc5ab71135246caf9905842863d2cad6f61b6' }), h("div", { key: '2d0e6c0a892b0df8f8b82b8838f48205fe57dfda', class: "page-header" }, h("div", { key: '17720d0486d7674dafd681701f705a6c5cefc802', class: 'left-slot-wrapper' }, h("slot", { key: 'ee04537b58ccd6b14cff617cb57d7069805f776c', name: "left-button" })), h("div", { key: 'f829c4cd146e924d5d48e6449d30178f9957e7db', class: 'right-slot-wrapper' }, h("slot", { key: '081b0037d3865e78271994ebce81c83942cf1d76', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '3667fe03422e7d4100e51f600a89718631dd6920' }, h("span", { key: '65e60cd936d7a31742332c1aaf897e11f7519d13', class: "header-text-1" }, "Template Creation"), h("span", { key: 'c4ceaba10b9e6325c190b32433598671bcafa012' }, "/"), h("span", { key: '1ee7afec9ec1791af557b99dbe745f88cbb8db06', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: 'bf2516e00f2b07e823906cc10edb70275b7bebe4', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: '94abf7bcf876339afba7994d85e48514c2073e69', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'b00585e269ae956fd45aca6b0ab1741a3a3bcdcd' }, "/"), " ", h("ls-title-input", { key: 'b4300df223f19ad06e779ebd9d5b35aa7d75cb75', template: this._template })))), this.mode === 'editor' && (h("div", { key: 'dd81b1a20596e3a955389b6e876321f67a1c695c', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '82de75ddd3ddc47a31a67e474b45e73d6d97fb62', validationErrors: this.validationErrors }))), h("form", { key: '4b47c5dd6740468d32b49931142a594f2c091029', 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;
@@ -557,11 +576,11 @@ export class LsDocumentViewer {
                     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: '6e35179336337d805786da6949a38fb8bae66a2b', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'acbdff7e6ae94ac87e8b639218078860474f30ee', id: "ls-mid-area" }, h("div", { key: '3124125b9717481915d341ff60b6a9e19c0408c4', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '8cdf8b2b217a59e6b1ddfbdc3b1cb41c8a52f013', id: "ls-document-frame" }, h("canvas", { key: '7b70e383cd1dea52a05e061f1cbd6533b8161a21', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'bb76bf679eb545950935315d7bdd5445ef5018a7', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '89a2c765733293159007e3ea77e13df296c136b5', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'fdcca67071018e732d363c477e1222d1a25d4f7c', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '3dc86980350380030cd5c414ead089bb1f6b5834', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -579,7 +598,6 @@ export class LsDocumentViewer {
         return {
             "template": {
                 "type": "string",
-                "attribute": "template",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -594,11 +612,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 +631,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 +650,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 +669,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 +688,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 +707,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 +729,6 @@ export class LsDocumentViewer {
             },
             "zoom": {
                 "type": "number",
-                "attribute": "zoom",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -727,11 +744,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 +764,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 +784,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 +804,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 +823,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 +843,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 +863,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 +883,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 +903,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 +923,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 +943,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 +963,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 +983,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 +1003,7 @@ export class LsDocumentViewer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "toolbox-filter",
                 "defaultValue": "null"
             }
         };
@@ -995,6 +1013,8 @@ export class LsDocumentViewer {
             "_template": {},
             "validationErrors": {},
             "status": {},
+            "fontSize": {},
+            "fontFamily": {},
             "selected": {},
             "isLoading": {},
             "fieldTypeSelected": {}