legalesign-document-viewer 1.0.1 → 1.0.3

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

@@ -1,36 +1,36 @@
 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, g as getInputType, e as validate, h as getApiType, i as addField, j as getTemplate } from './p-CvMzUIlC.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 { 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-BbLFuN1Q.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 { 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';
 import { d as defineCustomElement$X } from './p-PwhF9_IW.js';
 import { d as defineCustomElement$W } from './p-BQEJKfz8.js';
-import { d as defineCustomElement$V } from './p-CxWGojFs.js';
+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-DNx0Ngpa.js';
+import { d as defineCustomElement$Q } from './p-VFHHgnl2.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$L } from './p-Dab8K5mi.js';
-import { d as defineCustomElement$K } from './p-CbORhuHl.js';
+import { d as defineCustomElement$K } from './p-Ce1yNs3F.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-CeO915wm.js';
+import { d as defineCustomElement$H } from './p-DVfpfKI7.js';
 import { d as defineCustomElement$G } from './p-C1SFI6sR.js';
-import { d as defineCustomElement$F } from './p-CmsA9-sZ.js';
-import { d as defineCustomElement$E } from './p-fd9JyL4S.js';
-import { d as defineCustomElement$D } from './p-D1yC5psL.js';
-import { d as defineCustomElement$C } from './p-CgqKV0xf.js';
-import { d as defineCustomElement$B } from './p-1ayYzye1.js';
-import { d as defineCustomElement$A } from './p-BEhTmCBW.js';
-import { d as defineCustomElement$z } from './p-8hWonZD4.js';
-import { d as defineCustomElement$y } from './p-Dy-dPxzq.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$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-C3xBvNXU.js';
+import { d as defineCustomElement$o } from './p-Cwf28UAj.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,7 +54,7 @@ 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-B3BVu9QD.js';
+import { d as defineCustomElement$a } from './p-BCwakozA.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';
@@ -30850,7 +30850,12 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 }
                 matchData.bind(this)(result);
             })
-                .then(() => this.syncChange(me)));
+                .then(() => this.syncChange(me))
+                .catch(() => {
+                // Revalidate against current template state on API failure
+                this.validationErrors = validate.bind(this)(this._template);
+                this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
+            }));
             Promise.all(promises).finally(() => {
                 requestAnimationFrame(() => {
                     this.isMutating = false;
@@ -30884,6 +30889,19 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 }
             }
         }
+        // Optimistic validation: run validate against a temp template with the updated element
+        const optimisticTemplate = {
+            ...this._template,
+            elementConnection: {
+                ...this._template.elementConnection,
+                templateElements: this._template.elementConnection.templateElements.map(el => {
+                    const updated = details.find(d => d.action === 'update' && d.data?.id === el.id);
+                    return updated ? { ...el, ...updated.data } : el;
+                }),
+            },
+        };
+        this.validationErrors = validate.bind(this)(optimisticTemplate);
+        this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
     }
     handleFieldTypeSelected(event) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -31275,6 +31293,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
             document.addEventListener('keydown', keyDown.bind(this));
         }
+        // Listen for flushed mutations from destroyed sidebar components
+        document.addEventListener('ls-flush-mutate', ((e) => {
+            this.mutate.emit(e.detail);
+        }));
         // Pinch-to-zoom (trackpad) and Ctrl/Cmd+scroll zoom
         const wrapper = this.component.shadowRoot.getElementById('document-frame-wrapper');
         wrapper.addEventListener('wheel', (e) => {
@@ -31417,12 +31439,12 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             return false;
     }
     render() {
-        return (h(Host, { key: '860cd3fd7e20869384201d6ca1d8fe17d5638141' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: 'b543e09d6b34e2127eaa9451c6abb53101077131', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: 'a62b12fd4514dd46dfbde408a9b6d76ba9d4465f', size: 200, colour: "var(--primary-60)" })), h("div", { key: '8c17f0fbab08d3c347cda885eb21aab179c9b1d3', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '4bf044a2d0f8daef3fec53c9d5d71f434a105f53', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: '29162cdf93d3868c8e56f7c292fd7b025ab713e5' }))), this.error && (h("div", { key: '346bc38cfd1ef9734d2c38d563abbd8112402218', class: "ls-dv-error-state" }, h("div", { key: '5bd9a7b89d0f862529926a80558d452aa8421981', class: "ls-dv-error-card" }, h("ls-icon", { key: '7043cf0749ad888043e66427782f4a90a8978b53', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: '0775d103d12c28b8c95322ab98a6d6adebaa59ff', class: "ls-dv-error-title" }, this.errorTitle), h("p", { key: '1edb7c8c8c7ab1acf5271a9d8cda3c8a27e42739', class: "ls-dv-error-message" }, this.error)))), h("div", { key: 'a0e3d21e7de86d4423f4230989879f6a36df67d0', class: "ls-dv-page-header" }, h("div", { key: 'cd7f76a0fec9a60732c476562ed8e6e312c4b873', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '73e33dfd81af6c7dd83ed8575a33bc89bf8d7838', name: "left-button" })), h("div", { key: '40827dbe7a4ca60282decd71c5f90085a05327bd', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: 'ea5c16102e3214a30bb08d2c67a264d7278dbadf', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'dc8e8a4d140d1a90e5cbc5d3e010f1696db60c2e' }, h("span", { key: '98f5de4a80ea7139f4e8e8c4eb1d7aad4c61678f', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: '4419f356598f25ab81a95f2e8b0d7600388bd774' }, "/"), h("span", { key: 'd277f171dc721460a30b603d119666937dfe1e49', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '0cb45f674738b7416107f63b2409546d543d09a1', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '7b44d20a1fb7e6e17e5cb02b72c78d0900731add', name: "top-bar" })))), h("form", { key: '953cbb0445b52accdec5b1be92df3708ca076175', id: "ls-editor-form" }, h("ls-left-bar", { key: '30869afb5260ecc4b17da3c85ec52eb9e69ca0da', 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: '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: () => {
                 this.unselect();
                 const toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
                 if (toolbar)
                     toolbar.dataItem = [];
-            } }, h("slot", { key: '1cba234c80522e520b72a97be5ca13401ecfdb46', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: '6058bad4036b41dc01a088a33e81f099b068048f', 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: 'a8f49c80504596b13efc1d011f7512e238e088fe', id: "ls-mid-area" }, h("div", { key: '83ea2d2cb6f16e945ce74cf00b8a390b93a6138a', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, h("div", { key: '27403196c0d0e3239c7cc2f7557de11e2fac89e7', id: "ls-document-frame" }, h("canvas", { key: '12cdbc91cee0737d591467103bb799d83dd62a26', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '150abecd949e8e344faf2db3b4f6c760eae95bbf', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: '0ce247fe481228dfcf46e1d05970d2f6e8cdf4fe', id: "ls-box-selector" }), h("div", { key: 'b9be890d750a90b603bf72caae3a9d176382c69e', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: '508851cee2bd2c5f51169e1bd3171f94839bc2b3', 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: '582b78b270ed8f794658af9647d93fef2fb6b0a3', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), h("ls-statusbar", { key: 'c2c0a7542db9101428faa59a4369dd0913df432f', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (h("div", { key: '57eabe80828180fd028d20d89e923a35a262a1b9', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: '3e5094b053dabc1e9b19326cbb07a9caf630aaaf', validationErrors: this.validationErrors }), h("slot", { key: 'bf6bc50cd88394f79676a13a1f3c3e5148f10a19', name: "next-button" })))))), h("ls-tooltip", { key: 'b787041d5d5b1a3e7d6e10020ff61ce5c262a2e7', tooltipId: "ls-dv-tooltip" })));
+            } }, 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" })));
     }
     static get watchers() { return {
         "language": ["languageChanged"],