legalesign-document-viewer 1.0.3 → 1.0.5

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 { oob } from './editorUtils';\nimport { moveField } from './editorCalculator';\nimport { updateSelectionBox } from './mouseHandlers';\nimport { copySelected, cutSelected, pasteClipboard } from './clipboard';\nimport { undo, redo } from './history';\n\n// Buffer for batching rapid key presses\nlet mutationBuffer = null;\nlet mutationTimer = null;\nconst BUFFER_DELAY = 300; // milliseconds\n\nexport function keyDown(ev: KeyboardEvent) {\n  // Disable keyboard controls in preview mode or when template is locked\n  if (this.mode === 'preview' || this._template?.locked) {\n    return;\n  }\n\n  const isMod = ev.ctrlKey || ev.metaKey;\n\n  // Modifier shortcuts (Ctrl/Cmd + key)\n  if (isMod) {\n    if (ev.key === 'a' || ev.key === 'A') {\n      ev.preventDefault();\n      selectAll.bind(this)();\n      return;\n    }\n    if (ev.key === 'c' || ev.key === 'C') {\n      ev.preventDefault();\n      copySelected.bind(this)();\n      return;\n    }\n    if (ev.key === 'x' || ev.key === 'X') {\n      ev.preventDefault();\n      cutSelected.bind(this)();\n      return;\n    }\n    if (ev.key === 'v' || ev.key === 'V') {\n      ev.preventDefault();\n      pasteClipboard.bind(this)();\n      return;\n    }\n    if (ev.key === 'z' || ev.key === 'Z') {\n      ev.preventDefault();\n      if (ev.shiftKey) {\n        applyRedo.bind(this)();\n      } else {\n        applyUndo.bind(this)();\n      }\n      return;\n    }\n    if (ev.key === 'y' || ev.key === 'Y') {\n      ev.preventDefault();\n      applyRedo.bind(this)();\n      return;\n    }\n  }\n\n  if (this.selected && this.selected?.length > 0) {\n    if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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    } else if (!isMod && (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    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n\nfunction selectAll() {\n  const fields = Array.from(\n    this.component.shadowRoot.querySelectorAll('ls-editor-field'),\n  ) as HTMLLsEditorFieldElement[];\n\n  if (fields.length === 0) return;\n\n  fields.forEach(f => {\n    f.selected = true;\n    f.multiSelected = fields.length > 1;\n  });\n\n  this.selected = fields;\n  this.selectFields.emit(fields.map(f => f.dataItem));\n  updateSelectionBox.bind(this)();\n}\n\nfunction applyUndo() {\n  const mutations = undo();\n  if (!mutations) return;\n  // Emit with _skipHistory flag so mutateHandler doesn't record it\n  this._skipHistory = true;\n  this.mutate.emit(mutations);\n}\n\nfunction applyRedo() {\n  const mutations = redo();\n  if (!mutations) return;\n  this._skipHistory = true;\n  this.mutate.emit(mutations);\n}\n\n// Buffered version of alter that batches rapid key presses\nfunction bufferedAlter(diffFnFactory) {\n  // Clear existing timer\n  if (mutationTimer) {\n    clearTimeout(mutationTimer);\n  }\n\n  // Apply the transformation immediately to the UI\n  const diffFn = diffFnFactory();\n  this.selected.forEach(field => {\n    const updatedItem = diffFn(field.dataItem);\n    // Update the dataItem in place\n    Object.assign(field.dataItem, updatedItem);\n    // Update the visual position using moveField\n    moveField.bind(this)(field, updatedItem);\n  });\n\n  // Update the selection box to match the new field positions\n  updateSelectionBox.bind(this)();\n\n  // Store the latest state for batched mutation\n  mutationBuffer = this.selected.map(c => c.dataItem);\n\n  // Set timer to emit mutation after delay\n  mutationTimer = setTimeout(() => {\n    if (mutationBuffer) {\n      const diffs = mutationBuffer.map(item => ({\n        action: 'update',\n        data: item,\n      }));\n      this.mutate.emit(diffs);\n      mutationBuffer = null;\n    }\n    mutationTimer = null;\n  }, BUFFER_DELAY);\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 { oob } from './editorUtils';\nimport { moveField } from './editorCalculator';\nimport { updateSelectionBox } from './mouseHandlers';\nimport { copySelected, cutSelected, pasteClipboard } from './clipboard';\nimport { undo, redo } from './history';\n\n// Buffer for batching rapid key presses\nlet mutationBuffer = null;\nlet mutationTimer = null;\nconst BUFFER_DELAY = 300; // milliseconds\n\nexport function keyDown(ev: KeyboardEvent) {\n  // Disable keyboard controls in preview mode or when template is locked\n  if (this.mode === 'preview' || this._template?.locked) {\n    return;\n  }\n\n  const isMod = ev.ctrlKey || ev.metaKey;\n\n  // Modifier shortcuts (Ctrl/Cmd + key)\n  if (isMod) {\n    if (ev.key === 'a' || ev.key === 'A') {\n      ev.preventDefault();\n      selectAll.bind(this)();\n      return;\n    }\n    if (ev.key === 'c' || ev.key === 'C') {\n      ev.preventDefault();\n      copySelected.bind(this)();\n      return;\n    }\n    if (ev.key === 'x' || ev.key === 'X') {\n      ev.preventDefault();\n      cutSelected.bind(this)();\n      return;\n    }\n    if (ev.key === 'v' || ev.key === 'V') {\n      ev.preventDefault();\n      pasteClipboard.bind(this)();\n      return;\n    }\n    if (ev.key === 'z' || ev.key === 'Z') {\n      ev.preventDefault();\n      if (ev.shiftKey) {\n        applyRedo.bind(this)();\n      } else {\n        applyUndo.bind(this)();\n      }\n      return;\n    }\n    if (ev.key === 'y' || ev.key === 'Y') {\n      ev.preventDefault();\n      applyRedo.bind(this)();\n      return;\n    }\n  }\n\n  if (this.selected && this.selected?.length > 0) {\n    if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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      ev.preventDefault();\n      bufferedAlter.bind(this)(() => 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    } else if (!isMod && (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    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n\nfunction selectAll() {\n  const fields = Array.from(\n    this.component.shadowRoot.querySelectorAll('ls-editor-field'),\n  ) as HTMLLsEditorFieldElement[];\n\n  if (fields.length === 0) return;\n\n  fields.forEach(f => {\n    f.selected = true;\n    f.multiSelected = fields.length > 1;\n  });\n\n  this.selected = fields;\n  this.selectFields.emit(fields.map(f => f.dataItem));\n  updateSelectionBox.bind(this)();\n}\n\nfunction applyUndo() {\n  const mutations = undo();\n  if (!mutations) return;\n  this._skipHistory = true;\n  this.mutateHandler(new CustomEvent('mutate', { detail: mutations }));\n}\n\nfunction applyRedo() {\n  const mutations = redo();\n  if (!mutations) return;\n  this._skipHistory = true;\n  this.mutateHandler(new CustomEvent('mutate', { detail: mutations }));\n}\n\n// Buffered version of alter that batches rapid key presses\nfunction bufferedAlter(diffFnFactory) {\n  // Clear existing timer\n  if (mutationTimer) {\n    clearTimeout(mutationTimer);\n  }\n\n  // Apply the transformation immediately to the UI\n  const diffFn = diffFnFactory();\n  this.selected.forEach(field => {\n    const updatedItem = diffFn(field.dataItem);\n    // Update the dataItem in place\n    Object.assign(field.dataItem, updatedItem);\n    // Update the visual position using moveField\n    moveField.bind(this)(field, updatedItem);\n  });\n\n  // Update the selection box to match the new field positions\n  updateSelectionBox.bind(this)();\n\n  // Store the latest state for batched mutation\n  mutationBuffer = this.selected.map(c => c.dataItem);\n\n  // Set timer to emit mutation after delay\n  mutationTimer = setTimeout(() => {\n    if (mutationBuffer) {\n      const diffs = mutationBuffer.map(item => ({\n        action: 'update',\n        data: item,\n      }));\n      this.mutate.emit(diffs);\n      mutationBuffer = null;\n    }\n    mutationTimer = null;\n  }, BUFFER_DELAY);\n}\n"]}

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

@@ -15,7 +15,7 @@ import { dvI18n } from "../../i18n/i18n";
 import { addField, moveField } from "./editorCalculator";
 import { DEFAULT_FONT_SIZE, DEFAULT_FONT_NAME, FIELD_DEFAULTS } from "../../constants/fieldDefaults";
 import { keyDown } from "./keyHandlers";
-import { recordMutations } from "./history";
+import { recordMutations, clearHistory, canUndo, canRedo } from "./history";
 import { mouseClick, mouseDoubleClick, mouseDown, mouseMove, mouseUp, toolboxDragStart } from "./mouseHandlers";
 import { getApiType, getInputType, matchData } from "./editorUtils";
 import { updateSelectionBox } from "./mouseHandlers";
@@ -25,6 +25,8 @@ import { getGroupData } from "./adapter/groupActions";
 import { validate } from "./validator";
 import { generateRoles } from "./generateRoles";
 GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@5.4.449/build/pdf.worker.min.mjs`;
+// Module-level reference to the document keydown listener so it can be cleaned up across remounts
+let _activeKeyDownListener = null;
 /**
  * The Legalesign page viewer converted to stencil. To use pass the standard
  * Template information from GraphQL (see Readme).
@@ -89,6 +91,10 @@ export class LsDocumentViewer {
      * {string}
      */
     templateid;
+    templateIdChanged() {
+        if (this.token && this._initialized)
+            this.reload();
+    }
     /**
      * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
@@ -233,6 +239,7 @@ export class LsDocumentViewer {
     addParticipant;
     adapter;
     _skipHistory = false;
+    _loadGeneration = 0;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
         if (this.token && this.adapter) {
@@ -259,11 +266,15 @@ export class LsDocumentViewer {
             }
             this._skipHistory = false;
             this.isMutating = true;
+            const currentGeneration = this._loadGeneration;
             const promises = mutations.map(me => this.adapter
                 .handleEvent(me, this.token)
                 .then(result => {
                 if (result === 'invalid')
                     return;
+                // Discard stale responses from a previous template
+                if (this._loadGeneration !== currentGeneration)
+                    return;
                 // Cascade name change to witness if it still matches a default pattern
                 // Must check before matchData/syncRoles overwrites this._template.roles
                 if (me.action === 'update' && me.data.roleType !== 'WITNESS') {
@@ -756,6 +767,7 @@ export class LsDocumentViewer {
         this.validationErrors = validate.bind(this)(this._template);
         this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
     }
+    _initialized = false;
     initViewer() {
         // Generate a canvas to draw the background PDF on.
         this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
@@ -773,7 +785,12 @@ export class LsDocumentViewer {
             document.addEventListener('mousemove', mouseMove.bind(this));
             document.addEventListener('mouseup', mouseUp.bind(this));
             dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
-            document.addEventListener('keydown', keyDown.bind(this));
+            // Remove any previous keydown listener before adding a new one
+            if (_activeKeyDownListener) {
+                document.removeEventListener('keydown', _activeKeyDownListener);
+            }
+            _activeKeyDownListener = keyDown.bind(this);
+            document.addEventListener('keydown', _activeKeyDownListener);
         }
         // Listen for flushed mutations from destroyed sidebar components
         document.addEventListener('ls-flush-mutate', ((e) => {
@@ -798,6 +815,7 @@ export class LsDocumentViewer {
             this.setZoom(Math.round(newZoom * 1e2) / 1e2);
         }, { passive: false });
         this.generateFields();
+        this._initialized = true;
     }
     // Generate all the field HTML elements that are required (for every page)
     generateFields(clearExisting = true) {
@@ -827,6 +845,8 @@ export class LsDocumentViewer {
     }
     async load() {
         this.isLoading = true;
+        this._loadGeneration++;
+        clearHistory();
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -895,6 +915,32 @@ export class LsDocumentViewer {
             }
         }
     }
+    async reload() {
+        this.isLoading = true;
+        this._loadGeneration++;
+        clearHistory();
+        try {
+            this.adapter = new LsDocumentAdapter(this.endpoint);
+            const result = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
+            this.parseTemplate(JSON.stringify(result.template));
+            const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
+            this.groupInfo = resultGroup.group;
+            this.generateFields();
+            this.showPageFields(this.pageNum);
+            this.validationErrors = validate.bind(this)(this._template);
+            this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
+            this.pageCount = this._template.pageCount;
+            this.selected = [];
+            this.setZoom(1.0);
+            this.isLoading = false;
+            if (this._template?.link)
+                this.loadAndRender(this._template.link);
+        }
+        catch (e) {
+            this.isLoading = false;
+            console.error('Failed to reload template.', e?.message || e);
+        }
+    }
     componentWillLoad() {
         if (this.language) {
             dvI18n.changeLanguage(this.language);
@@ -921,12 +967,12 @@ export class LsDocumentViewer {
             return false;
     }
     render() {
-        return (h(Host, { key: '64ffe7f6df08c90f01216ea526d50e9748353331' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: '7249b7eca35aa61359ff2ae7ec089618b5eedcf0', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: '31c7a6a18cc853505d6eaeffa8e60e3a38457c16', size: 200, colour: "var(--primary-60)" })), h("div", { key: 'eb31717f54a456ba88649a1de5d808ebe861434b', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '71ace12966bb5b1ae111022ec411419e0f606bda', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: 'f908df60d0a6458771d4bf2ef359c611f57d29b0' }))), this.error && (h("div", { key: 'a23ffd75efeb9b8e55ebf282041e566fcc6a3d2a', class: "ls-dv-error-state" }, h("div", { key: '757f34427379b54dab8ca1f40a5756269ecc495e', class: "ls-dv-error-card" }, h("ls-icon", { key: 'cf0dda55abc866ccbae77f94e8420c0c87a8e8f2', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: '0bdb4c380b2757483101433d63aad0489fd28c99', class: "ls-dv-error-title" }, this.errorTitle), h("p", { key: 'd7a4c75cbab37d803124a4452d52456d1eef2807', class: "ls-dv-error-message" }, this.error)))), h("div", { key: '58341edacec17b878965de800d06033b269542b2', class: "ls-dv-page-header" }, h("div", { key: 'abd7f012d872ca69a60f574f1597e1b5745e07e5', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '92a0abf30a28053bb80777fb2daed32a1bd742e0', name: "left-button" })), h("div", { key: '537d946b90e459ddf9613a3d665049a3f4f4b0df', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: 'bac5456f966980b755c674aa501ffadac93d1c21', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '2f860bcad3a032fc904a6efdff8ca1950e9bf6e0' }, h("span", { key: '966269a053c75d9b5823aac6cfd953f6af12037d', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: '7bbb1e96bc7f760a031aed746512e62f57d25168' }, "/"), h("span", { key: '34704adb2d76b37580174dd5f1b4858bfb9c5673', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: 'd44ad14a942e530a7395bffdf00b8aefae01410a', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '35e2d16eebeb9881912a86751e066e30d87af43c', name: "top-bar" })))), h("form", { key: '71f0424708b74ba30cbeda7c770af1665f891d82', id: "ls-editor-form" }, h("ls-left-bar", { key: 'de7e11b70eedec465fe70c63c5210da6be0b9651', mode: this.mode, selected: this.selected, manager: this.manager, signer: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, recipients: this._recipients, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, displayTable: this.displayTable, selectedDataItems: this.selectedDataItems, busy: this.isMutating, onManagerChange: e => this.handleManagerChange(e.detail), onClearSelected: () => {
+        return (h(Host, { key: '1c9984bf147503f2979dc5591f140514f3a38d9f' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: '7d33135c3fdf99a71d72f25b5c28e49ecc3867be', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: '8990a520c84835b97b4d3cd4ea84a6f94968c45b', size: 200, colour: "var(--primary-60)" })), h("div", { key: '29641895ac2d52d69183a07123d27e6566c17d97', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '7bef6ef95e5d3e8792118288ad69d64ae6c883b3', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: '2c92baf059816aa925265f3a4c284d819ebb02e6' }))), this.error && (h("div", { key: 'ba8f19052b333c14077ba661b47141eedd751cc3', class: "ls-dv-error-state" }, h("div", { key: 'e7f5b45617ea473575c3999e610e8ac9d9a3e662', class: "ls-dv-error-card" }, h("ls-icon", { key: 'a0d262e3b0ac53362ff51476268a8046840b1069', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: 'e5b119fba5d291231791f9956d8304a3bebf3b05', class: "ls-dv-error-title" }, this.errorTitle), h("p", { key: 'e260583526bdc4ad7f7cb28601af606a50ee5037', class: "ls-dv-error-message" }, this.error)))), h("div", { key: 'ab6eae0fb397f32330b3bfb3c17f8297b0e14bdc', class: "ls-dv-page-header" }, h("div", { key: 'ac7d6391d6dc3e0c59550032c959ef10672f93e1', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '3100fd24301ab2781ab3bbe63f3654d4475c4726', name: "left-button" })), h("div", { key: '3948a22df5ee5f8c1dde92645407ae6095a947c3', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: '06eb1fc89813e466a4752d355d21f55a3880c5f3', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '7f3d54c519be843dcf5cd903ac85f8b5ff3017f5' }, h("span", { key: '626fef0097d482620b136eaba0f5a833d5e13ba5', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: '53ea6ffbb0302a460980e332cee7e5540bed390d' }, "/"), h("span", { key: 'f2df918d17814b9ad977eb4865ac42b27ab67772', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '8cdd65e6001ecb5b44a7b67849d44e358a7e5730', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '40bb1ee712a356a4bfeac8da94e7fd8463a05285', name: "top-bar" })))), h("form", { key: '7f5299608155174f9db6625ca4d36678c8de4e62', id: "ls-editor-form" }, h("ls-left-bar", { key: '77e10b47bac609bc88e80c2f18c7e347329a31a3', mode: this.mode, selected: this.selected, manager: this.manager, signer: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, recipients: this._recipients, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, displayTable: this.displayTable, selectedDataItems: this.selectedDataItems, busy: this.isMutating, onManagerChange: e => this.handleManagerChange(e.detail), onClearSelected: () => {
                 this.unselect();
                 const toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
                 if (toolbar)
                     toolbar.dataItem = [];
-            } }, h("slot", { key: '09b76362906455e7f2800d5eeda24239c7d66204', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: 'd9952f2c1ab6f538fe56c7f681454b2c5d4cc3a7', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode, signer: this.signer, selected: this.selected, pageNum: this.pageNum }), h("div", { key: 'fd45db30d22b72823a1af10c03e3ac3850a25905', id: "ls-mid-area" }, h("div", { key: 'a2ec46d3c757ebad9e0ac5f0551cd4406df1769b', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, h("div", { key: 'c7bc32dc9d94538a6748731b34baf5854710560c', id: "ls-document-frame" }, h("canvas", { key: '8ef7cf95e4a1d7af72b192145b9c3d903f6003a7', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '7e3136049c51a669d0cb67f7e5488c8919d04397', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: '9db49b87d852f8c4fad8a5f7a4f6f4be51de7673', id: "ls-box-selector" }), h("div", { key: '78ac1341ad5566d3690d53bdc2c8033eac98846d', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: 'e6e094f06b86652e01c446ad27926f62be3ec976', class: "ls-dv-select-menu-position", selected: this.selected, pageNum: this.pageNum, editor: this })), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: 'cf246a8c1fe0f503f4dd85d718894c57a28653ba', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), h("ls-statusbar", { key: '1b97b555c0a70384fbc19e75925ad1aa41a5454b', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (h("div", { key: 'b2b47d37d48397113c819dd7cb83a4b84fed3856', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: '97c19c08301eec03acf1835f9989cd593b7ddda0', validationErrors: this.validationErrors }), h("slot", { key: '85e2631a12ead7acf4a91279113f2cdb9d802f1b', name: "next-button" })))))), h("ls-tooltip", { key: '7738b8f3b82efabd0ac0de579bc6c9615880cf11', tooltipId: "ls-dv-tooltip" })));
+            } }, h("slot", { key: '0f1fa9523db6632cdd035684f091b8e45567bb83', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: '83744e49b7872db1c2d73ea5aa8c5d63c9081519', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode, signer: this.signer, selected: this.selected, pageNum: this.pageNum }), h("div", { key: '886d632ca40c9bbecc176cf64e197c92cb1795ee', id: "ls-mid-area" }, h("div", { key: '5af07dd82b20bcc0e28e8c7e64a570b2cd5a0bf7', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, h("div", { key: '3873b725f4a85956bd2191e92c18ce9f5c8d4756', id: "ls-document-frame" }, h("canvas", { key: 'ba49a53daecf0bba5dc836f6247059374656ed54', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '6fdc6a2ddf91b8146689e708cffd70197f358d50', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: '71247cc36b357ee37ebfb44c5e32bf63b0db9c75', id: "ls-box-selector" }), h("div", { key: '08a521f79281736b46a3a8f7fc5f56bfd7cae6f4', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: '73529d16cbc7acec207429d0e2f04fcbb12851b5', class: "ls-dv-select-menu-position", selected: this.selected, pageNum: this.pageNum, editor: this })), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: 'b73febb91ce6ecb8b2bbdf7ebeac096819adc2f6', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), h("ls-statusbar", { key: '823577c9cc7ec7b87dab69ae131afddc0ffb4de8', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode, canUndo: canUndo(), canRedo: canRedo() }), this.mode === 'editor' && (h("div", { key: 'b0a35c6102836f109c99f786181cdecbbc7f3b7f', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: '8fa7669d0451d5a1a6736a537d8c4544656d4198', validationErrors: this.validationErrors }), h("slot", { key: '217e3a0a9ffd3ea623181529c558773315fa02ab', name: "next-button" })))))), h("ls-tooltip", { key: '1932ad5cd7739438055a03b30398fc17045216df', tooltipId: "ls-dv-tooltip" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -1611,6 +1657,9 @@ export class LsDocumentViewer {
     static get elementRef() { return "component"; }
     static get watchers() {
         return [{
+                "propName": "templateid",
+                "methodName": "templateIdChanged"
+            }, {
                 "propName": "language",
                 "methodName": "languageChanged"
             }, {