legalesign-document-viewer 1.0.4 → 1.0.6

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

@@ -1,9 +1,9 @@
 import { t as transformTag, p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-DIvmRYeB.js';
 import { d as dvI18n } from './p-WVWIAGo_.js';
-import { o as oob, m as moveField, u as updateTemplate, r as recalculateCoordinates, s as syncRoles, d as defineCustomElement$U, c as matchData, e as validate, g as getInputType, h as getApiType, i as addField, j as getTemplate } from './p-CU_v-klT.js';
+import { o as oob, m as moveField, u as updateTemplate, r as recalculateCoordinates, s as syncRoles, d as defineCustomElement$U, c as matchData, e as validate, g as getInputType, h as getApiType, i as addField, j as getTemplate } from './p-BLMY8rNM.js';
 import { D as DEFAULT_FONT_SIZE$1, a as DEFAULT_FONT_NAME, F as FIELD_DEFAULTS } from './p-04cXI5GQ.js';
-import { c as copySelected, a as cutSelected, p as pasteClipboard, u as updateSelectionBox, d as defineCustomElement$O, t as toolboxDragStart, m as mouseClick, b as mouseDown, e as mouseMove, f as mouseUp, g as mouseDoubleClick } from './p-thlkOeP_.js';
-import { r as redo, u as undo, b as recordMutations } from './p-DydgLtEF.js';
+import { c as copySelected, a as cutSelected, p as pasteClipboard, u as updateSelectionBox, d as defineCustomElement$O, t as toolboxDragStart, m as mouseClick, b as mouseDown, e as mouseMove, f as mouseUp, g as mouseDoubleClick } from './p-Bi1odRMK.js';
+import { r as redo, u as undo, b as recordMutations, c as clearHistory, d as canRedo, e as canUndo } from './p-DmQNqtPP.js';
 import { d as defineCustomElement$_ } from './p-CQI0GKzS.js';
 import { d as defineCustomElement$Z } from './p-CgoyKNia.js';
 import { d as defineCustomElement$Y } from './p-pnSqPPx5.js';
@@ -13,24 +13,24 @@ import { d as defineCustomElement$V } from './p-CLklwQ7z.js';
 import { d as defineCustomElement$T } from './p-C6FqoNri.js';
 import { d as defineCustomElement$S } from './p-DWGdXqO4.js';
 import { d as defineCustomElement$R } from './p-DRDChAg6.js';
-import { d as defineCustomElement$Q } from './p-VFHHgnl2.js';
+import { d as defineCustomElement$Q } from './p-BJoHocUQ.js';
 import { d as defineCustomElement$P } from './p-DkV1l_zw.js';
 import { d as defineCustomElement$N } from './p-CSxx3aLG.js';
-import { d as defineCustomElement$M } from './p-BUAS2e6p.js';
+import { d as defineCustomElement$M } from './p--onI05IE.js';
 import { d as defineCustomElement$L } from './p-Dab8K5mi.js';
-import { d as defineCustomElement$K } from './p-Ce1yNs3F.js';
+import { d as defineCustomElement$K } from './p-B-P0RM5X.js';
 import { d as defineCustomElement$J } from './p-BgIA-QAy.js';
 import { d as defineCustomElement$I } from './p-Ce-55WxN.js';
-import { d as defineCustomElement$H } from './p-DVfpfKI7.js';
+import { d as defineCustomElement$H } from './p-ihnCvIHa.js';
 import { d as defineCustomElement$G } from './p-C1SFI6sR.js';
-import { d as defineCustomElement$F } from './p-D7o_Ls97.js';
-import { d as defineCustomElement$E } from './p-BvZKfSxt.js';
-import { d as defineCustomElement$D } from './p-DP3FTRHD.js';
-import { d as defineCustomElement$C } from './p-xSOFT8uc.js';
-import { d as defineCustomElement$B } from './p-BN_BZ9eU.js';
-import { d as defineCustomElement$A } from './p-Cue0UgwB.js';
-import { d as defineCustomElement$z } from './p-dLpaJicA.js';
-import { d as defineCustomElement$y } from './p-BzEVOvpL.js';
+import { d as defineCustomElement$F } from './p-DKz0A1Hf.js';
+import { d as defineCustomElement$E } from './p-TQAB33L1.js';
+import { d as defineCustomElement$D } from './p-CWbixCW0.js';
+import { d as defineCustomElement$C } from './p-7AZBNv_W.js';
+import { d as defineCustomElement$B } from './p-BOg59Hui.js';
+import { d as defineCustomElement$A } from './p-BRbTJsNX.js';
+import { d as defineCustomElement$z } from './p-CvU1rUiv.js';
+import { d as defineCustomElement$y } from './p-CwR2DcQ8.js';
 import { d as defineCustomElement$x } from './p-pEYsk7D-.js';
 import { d as defineCustomElement$w } from './p-DX7Kb9cb.js';
 import { d as defineCustomElement$v } from './p-CzkJGTTH.js';
@@ -40,7 +40,7 @@ import { d as defineCustomElement$s } from './p-Brq7Gduk.js';
 import { d as defineCustomElement$r } from './p-Cnnef3Aj.js';
 import { d as defineCustomElement$q } from './p-DzUG2q_b.js';
 import { d as defineCustomElement$p } from './p-CIV0VNix.js';
-import { d as defineCustomElement$o } from './p-Cwf28UAj.js';
+import { d as defineCustomElement$o } from './p-CZCkljMh.js';
 import { d as defineCustomElement$n } from './p-MzXqai7c.js';
 import { d as defineCustomElement$m } from './p-CKoM9Y6t.js';
 import { d as defineCustomElement$l } from './p-Cujzhc6S.js';
@@ -54,11 +54,11 @@ import { d as defineCustomElement$e } from './p-Qxe4qT6a.js';
 import { d as defineCustomElement$d } from './p-CgFpE1fV.js';
 import { d as defineCustomElement$c } from './p-CF40f_5M.js';
 import { d as defineCustomElement$b } from './p-Dl8z1tmj.js';
-import { d as defineCustomElement$a } from './p-Dw0UiotU.js';
+import { d as defineCustomElement$a } from './p-CXfWNJjL.js';
 import { d as defineCustomElement$9 } from './p-CM71cfRg.js';
 import { d as defineCustomElement$8 } from './p-t_ow9YJD.js';
 import { d as defineCustomElement$7 } from './p-BGf2weVY.js';
-import { d as defineCustomElement$6 } from './p-Cts0eCoL.js';
+import { d as defineCustomElement$6 } from './p-C4nAOEBk.js';
 import { d as defineCustomElement$5 } from './p-BIGiHXfV.js';
 import { d as defineCustomElement$4 } from './p-XnnsjcVC.js';
 import { d as defineCustomElement$3 } from './p-cjANxX0x.js';
@@ -26171,16 +26171,15 @@ function applyUndo() {
     const mutations = undo();
     if (!mutations)
         return;
-    // Emit with _skipHistory flag so mutateHandler doesn't record it
     this._skipHistory = true;
-    this.mutate.emit(mutations);
+    this.mutateHandler(new CustomEvent('mutate', { detail: mutations }));
 }
 function applyRedo() {
     const mutations = redo();
     if (!mutations)
         return;
     this._skipHistory = true;
-    this.mutate.emit(mutations);
+    this.mutateHandler(new CustomEvent('mutate', { detail: mutations }));
 }
 // Buffered version of alter that batches rapid key presses
 function bufferedAlter(diffFnFactory) {
@@ -30541,6 +30540,8 @@ if (typeof URL.parse !== 'function') {
     };
 }
 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;
 const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentViewer extends H {
     constructor(registerHost) {
         super();
@@ -30613,6 +30614,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      * {string}
      */
     templateid;
+    templateIdChanged() {
+        if (this.token && this._initialized)
+            this.reload();
+    }
     /**
      * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
@@ -30757,6 +30762,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     addParticipant;
     adapter;
     _skipHistory = false;
+    _loadGeneration = 0;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
         if (this.token && this.adapter) {
@@ -30783,11 +30789,15 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             }
             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') {
@@ -31274,6 +31284,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         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');
@@ -31291,7 +31302,12 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             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) => {
@@ -31316,6 +31332,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             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) {
@@ -31345,6 +31362,8 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     }
     async load() {
         this.isLoading = true;
+        this._loadGeneration++;
+        clearHistory();
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -31413,6 +31432,32 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             }
         }
     }
+    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);
@@ -31439,14 +31484,15 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             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 watchers() { return {
+        "templateid": ["templateIdChanged"],
         "language": ["languageChanged"],
         "mode": ["modeHandler"],
         "_template": ["templateLockedHandler"],
@@ -31493,6 +31539,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "unselect": [64],
         "setZoom": [64]
     }, [[0, "mutate", "mutateHandler"], [0, "update", "updateHandler"], [0, "fieldTypeSelected", "handleFieldTypeSelected"], [0, "toolboxDragStart", "handleToolboxDragStart"], [0, "addParticipant", "addParticpantHandler"], [0, "changeSigner", "updateSigner"], [0, "selectFieldForPlacement", "selectFieldForPlacement"], [0, "selectFields", "selectFieldsHandler"], [0, "roleChange", "roleHandler"]], {
+        "templateid": ["templateIdChanged"],
         "language": ["languageChanged"],
         "mode": ["modeHandler"],
         "_template": ["templateLockedHandler"],