legalesign-document-viewer 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -366,7 +366,7 @@ const LsSelectMenu = class {
366
366
  };
367
367
  LsSelectMenu.style = lsSelectMenuCss();
368
368
 
369
- const version = "1.0.1";
369
+ const version = "1.0.2";
370
370
 
371
371
  const lsStatusbarCss = () => `:host{position:absolute;z-index:1000;left:23.625rem;right:0.5rem;bottom:1rem;display:flex;flex-direction:row;gap:0.5rem;align-items:end;justify-content:space-between;height:2.25rem;overflow:visible}:host(.ls-dv-statusbar-preview){left:0;right:0;justify-content:center}.ls-dv-status-bar-group{display:flex;flex-direction:row;gap:0.5rem;align-items:end}.ls-dv-controls-bar{display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1.125rem;height:fit-content}.ls-dv-page-nav{margin-left:-6rem;position:relative}:host(.ls-dv-statusbar-preview) .ls-dv-page-nav{margin-left:0}*{margin:0;padding:0;box-sizing:border-box}.ls-dv-status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.625rem;padding:0 0.625rem;height:2.25rem}.ls-dv-controls-bar>:not(:nth-child(1)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.625rem}button:disabled{color:var(--gray-40, #d8d9dc);cursor:not-allowed}input[type=range]{-webkit-appearance:none;width:100%;height:0.5rem;background:var(--gray-20, #edeff2);border-radius:0.25rem;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border:none;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}input[type=range]::-webkit-slider-runnable-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}span{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-has-leading-icon{padding-left:2.5rem}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6f7176);text-transform:capitalize}button.ls-dv-tertiary-grey:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}.ls-dv-zoom-level-btn{font-family:var(--font-family);font-size:var(--text-sm);font-weight:400;color:var(--gray-80, #6f7176);padding:0.25rem 0.375rem;border-radius:0.25rem;margin:0 -0.25rem}.ls-dv-zoom-level-btn:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-zoom-menu{position:absolute;width:6rem;bottom:3rem;left:1rem;background:white;border:1px solid var(--gray-30, #e0e2e5);border-radius:1rem;box-shadow:0px 4px 24px rgba(0, 0, 0, 0.12);padding:0.25rem;z-index:1001;display:flex;flex-direction:column;gap:0.25rem}.ls-dv-page-menu{left:auto;max-height:60cqh;overflow-y:auto}.ls-dv-zoom-menu-item{position:relative;font-family:var(--font-family);font-size:var(--text-sm);font-weight:400;color:var(--gray-80, #6f7176);padding:0.375rem 0.625rem;border-radius:0.825rem;display:flex;align-items:center;justify-content:space-between}.ls-dv-zoom-menu-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-zoom-menu-item.active{font-weight:500;color:var(--primary-70, #2134dc);background:var(--primary-10, #eff4ff)}.ls-dv-thumbnail-popover{position:absolute;bottom:3rem;right:-3rem;background:white;border:1px solid var(--gray-30, #e0e2e5);border-radius:1.75rem;box-shadow:0px 8px 24px rgba(0, 0, 0, 0.15);padding:0.75rem;z-index:1001;max-height:80cqh;overflow:hidden;display:flex;flex-direction:column}.ls-dv-thumbnail-grid{background:var(--gray-10, #f7f8fa);padding:0.75rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:1rem;overflow-y:auto;max-height:100%}.ls-dv-thumbnail-wrapper{display:flex;flex-direction:column;align-items:center;gap:0.25rem;cursor:pointer}.ls-dv-thumbnail-wrapper>span:last-child{font-size:var(--text-xs, 0.75rem);color:var(--gray-80, #6f7176);font-weight:500}.ls-dv-thumbnail{border:1px solid var(--gray-30, #e0e2e5);border-radius:0.5rem;cursor:pointer;transition:border-color 0.15s}.ls-dv-thumbnail:hover{border-color:var(--primary-40, #79adfc);box-shadow:0 0 0 2px rgba(163, 180, 249, 0.3)}.ls-dv-thumbnail.active{border-color:var(--primary-60, #4456f6);outline:0.25rem solid var(--primary-30, #9dc3fc);box-shadow:var(--shadow-md)}.ls-dv-thumbnail-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:0.25rem}.ls-dv-thumbnail-dot{width:0.5rem;height:0.5rem;border-radius:50%;display:inline-block;border:2px solid var(--dot-color-60);background-color:var(--dot-color-40);cursor:pointer;transition:background-color 0.15s, border-color 0.15s}.ls-dv-thumbnail-dot:hover{background-color:var(--dot-color-60);border-color:var(--dot-color-70)}.ls-dv-version{position:absolute;bottom:100%;right:0;color:var(--gray-50, #afb0b2);font-size:0.625rem;padding-bottom:0.25rem;display:none}:host(.ls-dv-statusbar-preview) .ls-dv-version{display:block;bottom:-1.25rem;right:-0.5rem}`;
372
372
 
@@ -30791,7 +30791,12 @@ const LsDocumentViewer = class {
30791
30791
  }
30792
30792
  editorUtils.matchData.bind(this)(result);
30793
30793
  })
30794
- .then(() => this.syncChange(me)));
30794
+ .then(() => this.syncChange(me))
30795
+ .catch(() => {
30796
+ // Revalidate against current template state on API failure
30797
+ this.validationErrors = editorUtils.validate.bind(this)(this._template);
30798
+ this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
30799
+ }));
30795
30800
  Promise.all(promises).finally(() => {
30796
30801
  requestAnimationFrame(() => {
30797
30802
  this.isMutating = false;
@@ -30825,6 +30830,19 @@ const LsDocumentViewer = class {
30825
30830
  }
30826
30831
  }
30827
30832
  }
30833
+ // Optimistic validation: run validate against a temp template with the updated element
30834
+ const optimisticTemplate = {
30835
+ ...this._template,
30836
+ elementConnection: {
30837
+ ...this._template.elementConnection,
30838
+ templateElements: this._template.elementConnection.templateElements.map(el => {
30839
+ const updated = details.find(d => d.action === 'update' && d.data?.id === el.id);
30840
+ return updated ? { ...el, ...updated.data } : el;
30841
+ }),
30842
+ },
30843
+ };
30844
+ this.validationErrors = editorUtils.validate.bind(this)(optimisticTemplate);
30845
+ this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
30828
30846
  }
30829
30847
  handleFieldTypeSelected(event) {
30830
30848
  const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -31358,12 +31376,12 @@ const LsDocumentViewer = class {
31358
31376
  return false;
31359
31377
  }
31360
31378
  render() {
31361
- return (index.h(index.Host, { key: '860cd3fd7e20869384201d6ca1d8fe17d5638141' }, index.h(index.h.Fragment, null, this.isLoading && (index.h(index.h.Fragment, null, index.h("div", { key: 'b543e09d6b34e2127eaa9451c6abb53101077131', class: 'ls-dv-page-loader' }, index.h("ls-loading-logo", { key: 'a62b12fd4514dd46dfbde408a9b6d76ba9d4465f', size: 200, colour: "var(--primary-60)" })), index.h("div", { key: '8c17f0fbab08d3c347cda885eb21aab179c9b1d3', class: 'ls-dv-custom-loader-slot' }, index.h("slot", { key: '4bf044a2d0f8daef3fec53c9d5d71f434a105f53', name: "custom-loader" })), this.mode === 'compose' && index.h("ls-compose-loader", { key: '29162cdf93d3868c8e56f7c292fd7b025ab713e5' }))), this.error && (index.h("div", { key: '346bc38cfd1ef9734d2c38d563abbd8112402218', class: "ls-dv-error-state" }, index.h("div", { key: '5bd9a7b89d0f862529926a80558d452aa8421981', class: "ls-dv-error-card" }, index.h("ls-icon", { key: '7043cf0749ad888043e66427782f4a90a8978b53', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), index.h("p", { key: '0775d103d12c28b8c95322ab98a6d6adebaa59ff', class: "ls-dv-error-title" }, this.errorTitle), index.h("p", { key: '1edb7c8c8c7ab1acf5271a9d8cda3c8a27e42739', class: "ls-dv-error-message" }, this.error)))), index.h("div", { key: 'a0e3d21e7de86d4423f4230989879f6a36df67d0', class: "ls-dv-page-header" }, index.h("div", { key: 'cd7f76a0fec9a60732c476562ed8e6e312c4b873', class: 'ls-dv-left-slot-wrapper' }, index.h("slot", { key: '73e33dfd81af6c7dd83ed8575a33bc89bf8d7838', name: "left-button" })), index.h("div", { key: '40827dbe7a4ca60282decd71c5f90085a05327bd', class: 'ls-dv-right-slot-wrapper' }, index.h("slot", { key: 'ea5c16102e3214a30bb08d2c67a264d7278dbadf', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: 'dc8e8a4d140d1a90e5cbc5d3e010f1696db60c2e' }, index.h("span", { key: '98f5de4a80ea7139f4e8e8c4eb1d7aad4c61678f', class: "ls-dv-header-text-1" }, i18n.dvI18n.t('viewer.templatecreation')), index.h("span", { key: '4419f356598f25ab81a95f2e8b0d7600388bd774' }, "/"), index.h("span", { key: 'd277f171dc721460a30b603d119666937dfe1e49', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: '0cb45f674738b7416107f63b2409546d543d09a1', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("slot", { key: '7b44d20a1fb7e6e17e5cb02b72c78d0900731add', name: "top-bar" })))), index.h("form", { key: '953cbb0445b52accdec5b1be92df3708ca076175', id: "ls-editor-form" }, index.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: () => {
31379
+ return (index.h(index.Host, { key: '4d4c75a54c91e7273c430d8c2b282baa73df1e00' }, index.h(index.h.Fragment, null, this.isLoading && (index.h(index.h.Fragment, null, index.h("div", { key: '16fddb4381e60acd21ccb788f7384d462c9842f4', class: 'ls-dv-page-loader' }, index.h("ls-loading-logo", { key: '06f725f8d84b42705fc4ddd3fd30cd1b0080f0b6', size: 200, colour: "var(--primary-60)" })), index.h("div", { key: '4111150eb3477de0f4009ed9a1804e1e64462912', class: 'ls-dv-custom-loader-slot' }, index.h("slot", { key: '78000f2316bce8a385b569e01ff8f588d77b37a2', name: "custom-loader" })), this.mode === 'compose' && index.h("ls-compose-loader", { key: 'f4db44ff52abffca9e085e165e6efd8cd5cae9ad' }))), this.error && (index.h("div", { key: '1dba9f3d2b69fbcc148bd788260bbd5bbf0833eb', class: "ls-dv-error-state" }, index.h("div", { key: '58c86e02e48c7114aa3dce362716591638ac1cb0', class: "ls-dv-error-card" }, index.h("ls-icon", { key: '340716a3374fcb4001079280ca02d0c9ff7f449b', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), index.h("p", { key: '52948097994a8a4f838303b851a5b0e2470cb2de', class: "ls-dv-error-title" }, this.errorTitle), index.h("p", { key: '75d191ca2ff7fe750dd0fe330cdde575971f95b2', class: "ls-dv-error-message" }, this.error)))), index.h("div", { key: 'f5ff447ed5f8b0609aec7adc244c2fa1ee78f6e5', class: "ls-dv-page-header" }, index.h("div", { key: 'a01d517df7980287605cf8efc2aa4e6668c59173', class: 'ls-dv-left-slot-wrapper' }, index.h("slot", { key: '8aacd47986783c01bf8c1d593ce5bd1142facfc5', name: "left-button" })), index.h("div", { key: 'b9e9245183f497757d3684ab25bd52279b2d0bf0', class: 'ls-dv-right-slot-wrapper' }, index.h("slot", { key: '7ce7e1b8449cee24a8fa6f99645b98f1ec67f4f3', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: '7ae7ab56697b25a04fadb171be58efa32124a480' }, index.h("span", { key: '7653b69dd162c49a0d87fe4584204f759bde97fc', class: "ls-dv-header-text-1" }, i18n.dvI18n.t('viewer.templatecreation')), index.h("span", { key: '91225711049bfbb4bfd42b1c3ba4fffbfb8913b7' }, "/"), index.h("span", { key: 'f4fcda04089ccdf5cc86999ba399a5017ea461e3', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: '6bfa21d0e4c80395e1e6477074cdc0d989f12a1d', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("slot", { key: '2a749c7fbd2f89e2bdba59b3a627be3decca9b1e', name: "top-bar" })))), index.h("form", { key: '436b84d724bef775dbe8e60abcfd3b1b6223b915', id: "ls-editor-form" }, index.h("ls-left-bar", { key: 'ee19abe6108dbae2ee8348a4a98ccb74c5ae72d4', 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: () => {
31362
31380
  this.unselect();
31363
31381
  const toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
31364
31382
  if (toolbar)
31365
31383
  toolbar.dataItem = [];
31366
- } }, index.h("slot", { key: '1cba234c80522e520b72a97be5ca13401ecfdb46', name: "recipient-panel", slot: "recipient-panel" })), index.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 }), index.h("div", { key: 'a8f49c80504596b13efc1d011f7512e238e088fe', id: "ls-mid-area" }, index.h("div", { key: '83ea2d2cb6f16e945ce74cf00b8a390b93a6138a', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, index.h("div", { key: '27403196c0d0e3239c7cc2f7557de11e2fac89e7', id: "ls-document-frame" }, index.h("canvas", { key: '12cdbc91cee0737d591467103bb799d83dd62a26', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), index.h("ls-editor-table", { key: '150abecd949e8e344faf2db3b4f6c760eae95bbf', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), index.h("div", { key: '0ce247fe481228dfcf46e1d05970d2f6e8cdf4fe', id: "ls-box-selector" }), index.h("div", { key: 'b9be890d750a90b603bf72caae3a9d176382c69e', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (index.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 && (index.h("ls-select-menu", { key: '582b78b270ed8f794658af9647d93fef2fb6b0a3', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), index.h("ls-statusbar", { key: 'c2c0a7542db9101428faa59a4369dd0913df432f', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (index.h("div", { key: '57eabe80828180fd028d20d89e923a35a262a1b9', class: 'ls-dv-validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '3e5094b053dabc1e9b19326cbb07a9caf630aaaf', validationErrors: this.validationErrors }), index.h("slot", { key: 'bf6bc50cd88394f79676a13a1f3c3e5148f10a19', name: "next-button" })))))), index.h("ls-tooltip", { key: 'b787041d5d5b1a3e7d6e10020ff61ce5c262a2e7', tooltipId: "ls-dv-tooltip" })));
31384
+ } }, index.h("slot", { key: '7da43061411b20834f28e6149bd1508d227ae4b9', name: "recipient-panel", slot: "recipient-panel" })), index.h("ls-toolbar", { key: 'fb6b389c2c3d75eac4ff2b802ee0bd0728a7c7e1', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode, signer: this.signer, selected: this.selected, pageNum: this.pageNum }), index.h("div", { key: 'd8bd7fd6b6fcc26887376c8762589a8cec26b8dc', id: "ls-mid-area" }, index.h("div", { key: '808c838b658d92d451592decf4b8113311e8d6cd', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, index.h("div", { key: '2a3332e5d99adf1727527f297dadc1de7efbb9c0', id: "ls-document-frame" }, index.h("canvas", { key: 'de67fd9855263650465fb7c1f818bccb2d594d55', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), index.h("ls-editor-table", { key: '9ab1d398e33a5e8e9743017b95b700a7b625d6ba', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), index.h("div", { key: 'ed7c0ace0a6b2defdee1dd2479bf3c53af89bb4a', id: "ls-box-selector" }), index.h("div", { key: '2f862b72b295be46c2220dc159150b3531db20f0', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (index.h("ls-select-menu", { key: '6d8417c85f3dd9119089408b7735f50075e0048f', 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 && (index.h("ls-select-menu", { key: 'c57c5e3c6a199426a3d1884aebca895adf6be195', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), index.h("ls-statusbar", { key: 'f5987ae88a446e19a54c051ed7b0d420ce62e739', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (index.h("div", { key: '37f5e0db9b1a55b1d8bde72de1dcaec584b99b8c', class: 'ls-dv-validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '9494671b07d6542111b42c05908a5f1c150daa83', validationErrors: this.validationErrors }), index.h("slot", { key: '80e799322771024181781da6cf268ff0986cdfef', name: "next-button" })))))), index.h("ls-tooltip", { key: 'e13794838bb1484beb2c0b4bee1647b66e144042', tooltipId: "ls-dv-tooltip" })));
31367
31385
  }
31368
31386
  static get watchers() { return {
31369
31387
  "language": ["languageChanged"],
@@ -326,7 +326,12 @@ export class LsDocumentViewer {
326
326
  }
327
327
  matchData.bind(this)(result);
328
328
  })
329
- .then(() => this.syncChange(me)));
329
+ .then(() => this.syncChange(me))
330
+ .catch(() => {
331
+ // Revalidate against current template state on API failure
332
+ this.validationErrors = validate.bind(this)(this._template);
333
+ this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
334
+ }));
330
335
  Promise.all(promises).finally(() => {
331
336
  requestAnimationFrame(() => {
332
337
  this.isMutating = false;
@@ -360,6 +365,19 @@ export class LsDocumentViewer {
360
365
  }
361
366
  }
362
367
  }
368
+ // Optimistic validation: run validate against a temp template with the updated element
369
+ const optimisticTemplate = {
370
+ ...this._template,
371
+ elementConnection: {
372
+ ...this._template.elementConnection,
373
+ templateElements: this._template.elementConnection.templateElements.map(el => {
374
+ const updated = details.find(d => d.action === 'update' && d.data?.id === el.id);
375
+ return updated ? { ...el, ...updated.data } : el;
376
+ }),
377
+ },
378
+ };
379
+ this.validationErrors = validate.bind(this)(optimisticTemplate);
380
+ this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
363
381
  }
364
382
  handleFieldTypeSelected(event) {
365
383
  const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -899,12 +917,12 @@ export class LsDocumentViewer {
899
917
  return false;
900
918
  }
901
919
  render() {
902
- 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: () => {
920
+ return (h(Host, { key: '4d4c75a54c91e7273c430d8c2b282baa73df1e00' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: '16fddb4381e60acd21ccb788f7384d462c9842f4', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: '06f725f8d84b42705fc4ddd3fd30cd1b0080f0b6', size: 200, colour: "var(--primary-60)" })), h("div", { key: '4111150eb3477de0f4009ed9a1804e1e64462912', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '78000f2316bce8a385b569e01ff8f588d77b37a2', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: 'f4db44ff52abffca9e085e165e6efd8cd5cae9ad' }))), this.error && (h("div", { key: '1dba9f3d2b69fbcc148bd788260bbd5bbf0833eb', class: "ls-dv-error-state" }, h("div", { key: '58c86e02e48c7114aa3dce362716591638ac1cb0', class: "ls-dv-error-card" }, h("ls-icon", { key: '340716a3374fcb4001079280ca02d0c9ff7f449b', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: '52948097994a8a4f838303b851a5b0e2470cb2de', class: "ls-dv-error-title" }, this.errorTitle), h("p", { key: '75d191ca2ff7fe750dd0fe330cdde575971f95b2', class: "ls-dv-error-message" }, this.error)))), h("div", { key: 'f5ff447ed5f8b0609aec7adc244c2fa1ee78f6e5', class: "ls-dv-page-header" }, h("div", { key: 'a01d517df7980287605cf8efc2aa4e6668c59173', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '8aacd47986783c01bf8c1d593ce5bd1142facfc5', name: "left-button" })), h("div", { key: 'b9e9245183f497757d3684ab25bd52279b2d0bf0', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: '7ce7e1b8449cee24a8fa6f99645b98f1ec67f4f3', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '7ae7ab56697b25a04fadb171be58efa32124a480' }, h("span", { key: '7653b69dd162c49a0d87fe4584204f759bde97fc', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: '91225711049bfbb4bfd42b1c3ba4fffbfb8913b7' }, "/"), h("span", { key: 'f4fcda04089ccdf5cc86999ba399a5017ea461e3', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '6bfa21d0e4c80395e1e6477074cdc0d989f12a1d', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '2a749c7fbd2f89e2bdba59b3a627be3decca9b1e', name: "top-bar" })))), h("form", { key: '436b84d724bef775dbe8e60abcfd3b1b6223b915', id: "ls-editor-form" }, h("ls-left-bar", { key: 'ee19abe6108dbae2ee8348a4a98ccb74c5ae72d4', 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: () => {
903
921
  this.unselect();
904
922
  const toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
905
923
  if (toolbar)
906
924
  toolbar.dataItem = [];
907
- } }, 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" })));
925
+ } }, h("slot", { key: '7da43061411b20834f28e6149bd1508d227ae4b9', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: 'fb6b389c2c3d75eac4ff2b802ee0bd0728a7c7e1', 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: 'd8bd7fd6b6fcc26887376c8762589a8cec26b8dc', id: "ls-mid-area" }, h("div", { key: '808c838b658d92d451592decf4b8113311e8d6cd', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, h("div", { key: '2a3332e5d99adf1727527f297dadc1de7efbb9c0', id: "ls-document-frame" }, h("canvas", { key: 'de67fd9855263650465fb7c1f818bccb2d594d55', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '9ab1d398e33a5e8e9743017b95b700a7b625d6ba', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: 'ed7c0ace0a6b2defdee1dd2479bf3c53af89bb4a', id: "ls-box-selector" }), h("div", { key: '2f862b72b295be46c2220dc159150b3531db20f0', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: '6d8417c85f3dd9119089408b7735f50075e0048f', 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: 'c57c5e3c6a199426a3d1884aebca895adf6be195', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), h("ls-statusbar", { key: 'f5987ae88a446e19a54c051ed7b0d420ce62e739', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (h("div", { key: '37f5e0db9b1a55b1d8bde72de1dcaec584b99b8c', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: '9494671b07d6542111b42c05908a5f1c150daa83', validationErrors: this.validationErrors }), h("slot", { key: '80e799322771024181781da6cf268ff0986cdfef', name: "next-button" })))))), h("ls-tooltip", { key: 'e13794838bb1484beb2c0b4bee1647b66e144042', tooltipId: "ls-dv-tooltip" })));
908
926
  }
909
927
  static get is() { return "ls-document-viewer"; }
910
928
  static get encapsulation() { return "shadow"; }