legalesign-document-viewer 1.0.4 → 1.0.6

package/dist/cjs/ls-assignee-select_21.cjs.entry.js

@@ -4,11 +4,11 @@ var index = require('./index-DFeU0FNc.js');
 var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
 var i18n = require('./i18n-e8JieHV6.js');
 var clsx = require('./clsx-BtxeOLZW.js');
-var editorUtils = require('./editorUtils-CRCLbYrX.js');
+var editorUtils = require('./editorUtils-CskM29uR.js');
 var index$1 = require('./index-D4CLu1QR.js');
 var defaultFieldLabels = require('./defaultFieldLabels-BUxtUsF1.js');
 var defaultFieldIcons = require('./defaultFieldIcons-CQbunrYl.js');
-require('./history-BBZQuObJ.js');
+require('./history-C8Dy_82r.js');
 
 const lsAssigneeSelectCss = () => `:host{display:block;width:100%}*{margin:0}.ls-dv-assignee-dropdown{position:relative;width:100%}.ls-dv-assignee-header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;padding-left:0.75rem;border-radius:0.75rem;border:1px solid var(--gray-40, #d8d9dc);background:var(--gray-10, #f7f8fa);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);position:relative}.ls-dv-assignee-header.ls-dv-disabled{cursor:not-allowed;opacity:0.7}.ls-dv-leading-icon{color:var(--gray-80, #6f7176);flex-shrink:0}.ls-dv-assignee-name{flex:1;font-size:var(--text-sm);font-weight:400;color:var(--gray-100, #45484d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family)}.ls-dv-reassign-btn{all:unset;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:0.625rem;border:1px solid var(--gray-40, #d8d9dc);background:var(--white, #ffffff);color:var(--gray-80, #6f7176);cursor:pointer;flex-shrink:0}.ls-dv-reassign-btn:hover{border-color:var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-assignee-list{position:absolute;top:calc(100% + 0.25rem);left:0;right:0;display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:100;max-height:15rem;overflow-y:auto}.ls-dv-assignee-item{display:flex;padding:0.5rem 0.75rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;border-radius:0.75rem;cursor:pointer}.ls-dv-assignee-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-assignee-item.ls-dv-item-disabled{opacity:0.4;cursor:not-allowed}.ls-dv-assignee-item.ls-dv-item-disabled:hover{background:transparent}.ls-dv-assignee-item.ls-dv-selected,.ls-dv-assignee-item.ls-dv-selected:hover{background:var(--background-selected, var(--gray-10, #f7f8fa))}.ls-dv-role-icon{display:flex;padding:0.375rem;border-radius:0.5rem;flex-shrink:0}.ls-dv-role-text{display:flex;flex-direction:column;flex:1;min-width:0}.ls-dv-role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-weight:500;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-role-type{color:var(--gray-70, #939599);font-size:0.75rem;font-weight:400;line-height:1rem}.ls-dv-check-icon{color:var(--gray-40, #d8d9dc);flex-shrink:0}.ls-dv-assignee-item.ls-dv-selected .ls-dv-check-icon{color:var(--check-icon-selected)}.ls-dv-assignee-item.ls-dv-selected .ls-dv-role-name{color:var(--role-name-selected)}.ls-dv-assignee-item.ls-dv-selected .ls-dv-role-type{color:var(--role-type-selected)}`;
 
@@ -234,17 +234,8 @@ const LsEditorField = class {
             if (this.labeltimer) {
                 clearTimeout(this.labeltimer);
                 this.labeltimer = null;
-                // Revert to the last committed value by re-reading from the DOM
-                // The textarea will update on next render via dataItem binding
-                return;
             }
-            // No pending debounce — dispatch to document for history undo/redo
-            document.dispatchEvent(new KeyboardEvent('keydown', {
-                key: e.key,
-                ctrlKey: e.ctrlKey,
-                metaKey: e.metaKey,
-                shiftKey: e.shiftKey,
-            }));
+            // Don't stopPropagation — let the event reach the document-level keydown handler
             return;
         }
         // Let Delete/Backspace propagate for date fields (no text to edit)
@@ -490,17 +481,17 @@ const LsEditorField = class {
         const zoomValue = parseFloat(this.zoom) || 1;
         // const topOffset = (this.dataItem.height ?? 1) + 4;
         const topOffset = 24;
-        return (index.h(index.Host, { key: '54b2b5d2a4fec1614db4ce5f78ee4265116bd5bf', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '277ca567690c7b291b54767149f95b4e35c11753', class: {
+        return (index.h(index.Host, { key: 'cac174dae3845620103d7a22e737e6acc1043b15', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '4b410d9dea0722699001f51c3eb456983d491cbb', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (index.h("ls-icon", { key: '59bd4868cb35fd5d840ae016c611aa6dbf4fe1e9', name: "required-icon", size: Math.round(12 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (index.h("ls-icon", { key: '999ddf46b79570f7a450eda0ccc726962f6a9277', name: "required-icon", size: Math.round(12 * zoomValue), class: "ls-dv-required-icon", customStyle: {
                 position: 'absolute',
                 top: '50%',
                 right: `${0.25 * zoomValue}rem`,
                 transform: 'translateY(-50%)',
                 lineHeight: '1',
                 fontSize: `${0.75 * zoomValue}rem`,
-            } })), !this.dataItem?.optional && this.dataItem?.formElementType === 'checkbox' && (index.h("ls-icon", { key: 'ada6ea6538aada55f494cc42fa00b4ad314f2669', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } })), !this.dataItem?.optional && this.dataItem?.formElementType === 'checkbox' && (index.h("ls-icon", { key: '1cd62d4d80944136a4c71beeb66c2009b73ca92f', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
                 position: 'absolute',
                 top: `-${3 * zoomValue}px`,
                 right: `-${3 * zoomValue}px`,
@@ -536,9 +527,9 @@ const LsEditorField = class {
                         el.style.height = el.scrollHeight + 'px';
                     });
                 }
-            } })), index.h("div", { key: '76f3ee0992d70fecdf110123ab35f5475d8db4c5', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, index.h("span", { key: '58c335b13c931ea8e2d1b93a01db8f56b24e69d3', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
+            } })), index.h("div", { key: '86a01beedeb9230aa71132890666f64ea0d335cc', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, index.h("span", { key: 'f2f0c0f899b5ba6fa6d9fa11aae8b22a20dbac10', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
             ? this.getCheckboxSymbol()
-            : this.dataItem?.value || i18n.dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (index.h("div", { key: '7283bf755ba7644417afee50b850a13424de720f', style: {
+            : this.dataItem?.value || i18n.dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (index.h("div", { key: '44e1f06dc15f847334f2c8c6ca8b63402eb63eae', style: {
                 position: 'absolute',
                 background: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -550,7 +541,7 @@ const LsEditorField = class {
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (index.h("p", { key: 'fa0208b23483ccb84d9a0caf0e4038a5a01eab65', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (index.h("p", { key: '1eb6a43f5b613fda172fb57a22e2a484ffc96d96', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -561,7 +552,7 @@ const LsEditorField = class {
                 textOverflow: 'ellipsis',
                 maxWidth: `${10 * zoomValue}rem`,
                 fontFamily: 'sans-serif',
-            } }, i18n.dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (index.h("div", { key: '54226ebc66b66994dfd72292c8c12f2f083de9dc', class: "resize-handles" }, index.h("div", { key: '57ea62a0aa4bed988e088a0d115b7b052701c448', class: "resize-handle handle-e" }), index.h("div", { key: '2db81e248326f803865acb961925148a27572b6f', class: "resize-handle handle-s" }), index.h("div", { key: 'b0a897c77d04cdeb72126fe05ee9bc61379d7334', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (index.h("button", { key: '1d799ee58fa6d0a25f25a444150142fe55826c39', class: 'ls-dv-x-button', style: {
+            } }, i18n.dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (index.h("div", { key: '3d33360b58f717443f50c9c609b12ed99b456c10', class: "resize-handles" }, index.h("div", { key: '2feb2a1b13d760e89c9350c86e37fce9e46108d8', class: "resize-handle handle-e" }), index.h("div", { key: '755b440eb2dc580ae6a755870639dc6bee193987', class: "resize-handle handle-s" }), index.h("div", { key: '47d752af9587193ee1660ac1da78a66bb696a781', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (index.h("button", { key: 'c35c8a5e0daae718a799b973c8f923183f618fe7', class: 'ls-dv-x-button', style: {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -570,7 +561,7 @@ const LsEditorField = class {
                 lineHeight: `${0.75 * zoomValue}rem`,
                 fontSize: `${0.75 * zoomValue}rem`,
                 ...(this.dataItem?.formElementType === 'checkbox' ? { transform: `translate(75%, -75%)` } : {}),
-            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: '8fd929efead106447078aa415a2bec604d1bacce', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
+            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: '62a713c4e4030e83ea521eea67f506c2769dfa65', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
     }
     static get watchers() { return {
         "dataItem": ["dataItemChanged", "watchDataItemHandler"],
@@ -640,19 +631,13 @@ const LsFieldContent = class {
         const isMod = e.ctrlKey || e.metaKey;
         if (isMod && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
             e.preventDefault();
-            e.stopPropagation();
             // Cancel any pending debounce (discard uncommitted changes)
             if (this.labeltimer) {
                 clearTimeout(this.labeltimer);
                 this.labeltimer = null;
             }
-            // Dispatch to document so our undo/redo handler picks it up
-            document.dispatchEvent(new KeyboardEvent('keydown', {
-                key: e.key,
-                ctrlKey: e.ctrlKey,
-                metaKey: e.metaKey,
-                shiftKey: e.shiftKey,
-            }));
+            // Don't stopPropagation — let the event reach the document-level keydown handler
+            return;
         }
     }
     handleValueChange(value) {
@@ -870,7 +855,7 @@ const LsFieldContent = class {
         this.alterImmediate({ validation: newValidation, value: newValue });
     }
     render() {
-        return (index.h(index.Host, { key: '77d2477ad29db3342739508eb567e04ad9cd4555' }, this.roles?.length > 0 && (index.h("ls-props-section", { key: '7770a050e6c78b3643cd0b16d39affbf63272eaf', sectionTitle: i18n.dvI18n.t('fieldproperties.assignee'), sectionDescription: i18n.dvI18n.t('fieldproperties.assigneedescription') }, index.h("ls-assignee-select", { key: '3cf7d48eff5b48843d4c3182217c64b84119cb0c', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? i18n.dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), index.h("ls-props-section", { key: '56952bf5cd2b6b4413078bc78b38d15e71eb8c5a', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldtype'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldtypedescription') }, index.h("ls-field-type-select", { key: 'a239160aa3899cf8168011b562ecb6f49b2d1795', fieldType: this.dataItem?.formElementType, assignee: this.dataItem?.signer, roles: this.roles, roleTypes: [this.getRoleType()], disabled: this.readonly, filtertoolbox: this.filtertoolbox, onFieldTypeChange: ev => this.handleFieldTypeChange(ev.detail) })), this.dataItem?.formElementType !== 'signature' && (index.h("ls-props-section", { key: 'fbe001f3fccbefa4a7f9e1771e81f54eb1b59dd0', sectionTitle: i18n.dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: i18n.dvI18n.t('fieldproperties.requiredfielddescription') }, index.h("ls-toggle", { key: '4717bec4884d240cce83bcf4703590f536f8261f', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), index.h("ls-props-section", { key: '4f9cc491f46ca2aed2fc1db000dacaa80d16478a', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldlabeldescription') }, index.h("ls-formfield", { key: '8d22325b9240c019744589e39bf77d5ec01d56df', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: defaultFieldLabels.getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: '8dc887afd9d6cfe1f04c4eb73efd23e7b5f6beb3', sectionTitle: i18n.dvI18n.t('fieldproperties.value'), sectionDescription: i18n.dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (index.h("div", { class: "ls-dv-date-input-wrapper" }, index.h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
+        return (index.h(index.Host, { key: 'f2695d6b0be7a1f227e4ec0a402c8d30b230957f' }, this.roles?.length > 0 && (index.h("ls-props-section", { key: '90aa78e28c9248ab72427067edde3c4dced1d4d1', sectionTitle: i18n.dvI18n.t('fieldproperties.assignee'), sectionDescription: i18n.dvI18n.t('fieldproperties.assigneedescription') }, index.h("ls-assignee-select", { key: '3eae837f63bca4fa50f087920e81fdd274f0ac50', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? i18n.dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), index.h("ls-props-section", { key: 'dd02103fdeb7aa059a70285f17606e9bc2475038', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldtype'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldtypedescription') }, index.h("ls-field-type-select", { key: '1315446ded6cb4f6eeebde98138259c0fc49ac87', fieldType: this.dataItem?.formElementType, assignee: this.dataItem?.signer, roles: this.roles, roleTypes: [this.getRoleType()], disabled: this.readonly, filtertoolbox: this.filtertoolbox, onFieldTypeChange: ev => this.handleFieldTypeChange(ev.detail) })), this.dataItem?.formElementType !== 'signature' && (index.h("ls-props-section", { key: 'a9335a5e678251b47a561660c57ac90dc1db4a78', sectionTitle: i18n.dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: i18n.dvI18n.t('fieldproperties.requiredfielddescription') }, index.h("ls-toggle", { key: '2d6ad9045ed62d17dfc38b8d2998cd1ff90d8187', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), index.h("ls-props-section", { key: '6f4b480cea21715d2cf72583541296284406573a', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldlabeldescription') }, index.h("ls-formfield", { key: '66a33605ec7344089b17a3ec6117d654496e8ad3', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: defaultFieldLabels.getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: '3e6af27f381635c6bc2235ee9e33b18c79f0e42e', sectionTitle: i18n.dvI18n.t('fieldproperties.value'), sectionDescription: i18n.dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (index.h("div", { class: "ls-dv-date-input-wrapper" }, index.h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
                 if (this.readonly)
                     return;
                 const picker = this.component.shadowRoot.getElementById('ls-date-picker');
@@ -880,9 +865,9 @@ const LsFieldContent = class {
                 const input = e.target;
                 this.alter({ value: this.formatDateFromISO(input.value) });
                 index$1.forceCloseDatePicker(input);
-            }, disabled: this.readonly }))) : (index.h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: defaultFieldLabels.getFieldPlaceholder(this.dataItem?.formElementType), valid: !this.valueError, dirty: this.isDirty, errorText: this.valueError, disabled: this.readonly, onTextChange: e => this.handleValueChange(e.detail.value) })))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: 'a5a5e24cba2cba332e129f83eb6de145f6327471', sectionTitle: i18n.dvI18n.t('fieldproperties.options'), sectionDescription: i18n.dvI18n.t('fieldproperties.optionsdescription') }, index.h("textarea", { key: '800c102d060381f75cbe725864354d8e4a208b19', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }), disabled: this.readonly }))), this.showValidationTypes && this.dataItem?.formElementType !== 'drawn field' && this.dataItem?.formElementType !== 'regular expression' && this.dataItem?.formElementType !== 'initials' && (index.h("ls-props-section", { key: '76cdf0e1f569f226237c0b47ebdc88217e59df49', sectionTitle: i18n.dvI18n.t('fieldproperties.contentformat'), sectionDescription: i18n.dvI18n.t('fieldproperties.contentformatdescription') }, index.h("ls-input-wrapper", { key: 'b13ebdaae79d2730548e6cb90a644c145d6c7774', select: true }, index.h("select", { key: '2ba6462fa988f7b64749dada680cfeae5e6953f9', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, editorUtils.validationTypes
+            }, disabled: this.readonly }))) : (index.h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: defaultFieldLabels.getFieldPlaceholder(this.dataItem?.formElementType), valid: !this.valueError, dirty: this.isDirty, errorText: this.valueError, disabled: this.readonly, onTextChange: e => this.handleValueChange(e.detail.value) })))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: '163081bd7416239c1b85971f1c4178724fcc7ca5', sectionTitle: i18n.dvI18n.t('fieldproperties.options'), sectionDescription: i18n.dvI18n.t('fieldproperties.optionsdescription') }, index.h("textarea", { key: '8c07efb5fa1153628ada1d28ee63142f8690a67d', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }), disabled: this.readonly }))), this.showValidationTypes && this.dataItem?.formElementType !== 'drawn field' && this.dataItem?.formElementType !== 'regular expression' && this.dataItem?.formElementType !== 'initials' && (index.h("ls-props-section", { key: '776f6727b350957116a0f1bb7c3c80db0fc9c0b7', sectionTitle: i18n.dvI18n.t('fieldproperties.contentformat'), sectionDescription: i18n.dvI18n.t('fieldproperties.contentformatdescription') }, index.h("ls-input-wrapper", { key: '25a49f7b0f46803e322c7e4c0e76130882611e91', select: true }, index.h("select", { key: 'dcd4417138a42d0c008e85577c5734d7e46738eb', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, editorUtils.validationTypes
             .filter(type => type.formType === this.dataItem?.formElementType)
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (index.h("ls-props-section", { key: '7f34362c07748a019185f1bc3e563157d1443fd8', sectionTitle: i18n.dvI18n.t('fieldproperties.displaystate'), sectionDescription: i18n.dvI18n.t('fieldproperties.displaystatedescription') }, index.h("div", { key: 'db6fe65a48ea67207c67f551cc2602eb378e6261', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (index.h("button", { key: idx, class: { 'ls-dv-checkbox-toggle-btn': true, 'ls-dv-active': idx === 0 ? this.dataItem?.value?.toString() !== 'true' : this.dataItem?.value?.toString() === 'true' }, onClick: () => !this.readonly && this.alterImmediate({ value: idx === 0 ? 'false' : 'true' }), disabled: this.readonly }, state)))))), index.h("slot", { key: 'bb7e9cbbf3ca90270bb4d2742c5c9de1f4a12a04' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (index.h("ls-props-section", { key: '340af765731696c7a8f13392f28e696a83f7bf7d', sectionTitle: i18n.dvI18n.t('fieldproperties.displaystate'), sectionDescription: i18n.dvI18n.t('fieldproperties.displaystatedescription') }, index.h("div", { key: 'edcefae0f0e8e0eaaa63943ea2bb78fa52ef7253', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (index.h("button", { key: idx, class: { 'ls-dv-checkbox-toggle-btn': true, 'ls-dv-active': idx === 0 ? this.dataItem?.value?.toString() !== 'true' : this.dataItem?.value?.toString() === 'true' }, onClick: () => !this.readonly && this.alterImmediate({ value: idx === 0 ? 'false' : 'true' }), disabled: this.readonly }, state)))))), index.h("slot", { key: 'df7013168408522a2bd12a7b52b68d1927287b41' })));
     }
     static get watchers() { return {
         "dataItem": ["watchDataItemHandler"]

package/dist/cjs/ls-compose-loader_7.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-DFeU0FNc.js');
 var i18n = require('./i18n-e8JieHV6.js');
 var fieldDefaults = require('./fieldDefaults-BZtB5J2S.js');
 var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
-var history = require('./history-BBZQuObJ.js');
+var history = require('./history-C8Dy_82r.js');
 
 const lsComposeLoaderCss = () => `:host{position:absolute;display:flex;top:0;left:0;height:100%;width:100%;z-index:3000}:host>*{box-sizing:border-box;margin:0;padding:0}.ls-dv-compose-loader{display:flex;flex-direction:column;background:var(--gray-10, #f7f8fa);width:100%;height:100%}.ls-dv-compose-loader__header{border-bottom:1px solid var(--gray-20, #edeff2);pointer-events:none;height:2rem;background:white;display:flex;align-items:center;justify-content:center}.ls-dv-compose-loader__header-skeleton{width:10rem;height:0.75rem;background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%);border-radius:0.625rem;animation:pulse 1.5s infinite}.ls-dv-compose-loader__header-bar{padding:1rem;display:flex;align-items:center}.ls-dv-compose-loader__header-title{font-weight:bold;font-size:1.1rem}.ls-dv-compose-loader__header-docname{margin-left:1rem;color:var(--gray-100, #45484d)}.ls-dv-compose-loader__main{display:flex;padding:1rem;gap:1.5rem;height:calc(100% - 2.375rem);position:relative}.ls-dv-compose-loader__sidebar{position:absolute;height:100%;width:19rem}.ls-dv-compose-loader__card{display:flex;flex-direction:column;gap:0.75rem;padding:1rem;background:var(--white, #ffffff);border-radius:1.5rem;border:1px solid var(--gray-30, #e0e2e5);width:100%;height:100%;max-height:calc(100% - 2rem);overflow:hidden}.ls-dv-compose-loader__skeleton,.ls-dv-compose-loader__icon-skeleton{background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%);border-radius:0.625rem;animation:pulse 1.5s infinite}.ls-dv-skeleton-title{width:12.5rem;min-height:1.25rem}.ls-dv-skeleton-line--blue,.ls-dv-skeleton-line--green,.ls-dv-skeleton-line--gray,.ls-dv-skeleton-line{width:12.5rem;height:0.75rem}.ls-dv-skeleton-short--blue,.ls-dv-skeleton-short--green,.ls-dv-skeleton-short--gray,.ls-dv-skeleton-short{width:5rem;height:0.75rem}.ls-dv-skeleton-medium{width:4rem;height:0.75rem}.ls-dv-skeleton-icon{width:1rem;height:1rem}.ls-dv-skeleton-btn{width:7rem;height:0.75rem;background:linear-gradient(90deg, var(white) 25%, transparent 100%)}.ls-dv-skeleton-btn-icon{width:1rem;height:1rem;background:linear-gradient(90deg, var(white) 25%, transparent 100%)}.ls-dv-skeleton-line--blue,.ls-dv-skeleton-short--blue{background:linear-gradient(90deg, var(--blue-50, #78a3fa) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--blue{background:linear-gradient(90deg, var(--blue-30, #bed4fa) 25%, transparent 100%)}.ls-dv-skeleton-line--green,.ls-dv-skeleton-short--green{background:linear-gradient(90deg, var(--green-50, #57e5b1) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--green{background:linear-gradient(90deg, var(--green-30, #9df5d4) 25%, transparent 100%)}.ls-dv-skeleton-line--gray,.ls-dv-skeleton-short--gray{background:linear-gradient(90deg, var(--gray-50, #c8c9cc) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--gray{background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-group{display:flex;flex-direction:column;gap:0.5rem}.ls-dv-compose-loader__section{display:flex;flex-direction:column;gap:0.75rem;border:1px solid var(--gray-30, #e0e2e5);padding:0.75rem;border-radius:1.5rem;background:var(--gray-10, #f7f8fa);margin-top:0.25rem;box-shadow:0 1px 2px rgba(0, 0, 0, 0.03)}.ls-dv-compose-loader__section--blue{border-color:var(--blue-30, #bed4fa);background:var(--blue-10, #f0f6ff)}.ls-dv-compose-loader__section--green{border-color:var(--green-30, #9df5d4);background:var(--green-10, #effff9)}.ls-dv-compose-loader__skeleton-box--green,.ls-dv-compose-loader__skeleton-box--blue,.ls-dv-compose-loader__skeleton-box--gray{display:flex;align-items:center;width:5rem;height:1.15rem;border-radius:0.375rem}.ls-dv-compose-loader__row{display:flex;gap:0.75rem;background:var(--white, #ffffff);border:1px solid var(--gray-20, #edeff2);padding:0.5rem 1rem 0.5rem 0.5rem;border-radius:0.625rem;align-items:center}.ls-dv-compose-loader__icon-skeleton--blue{display:flex;align-items:center;justify-content:center;min-width:2.375rem;min-height:2.375rem;background:var(--blue-10, #f0f6ff);border:1px solid var(--blue-30, #bed4fa);border-radius:0.625rem}.ls-dv-compose-loader__icon--blue{width:1.25rem;height:1.25rem;background:linear-gradient(90deg, var(--blue-30, #bed4fa) 25%, transparent 100%);border-radius:0.625rem}.ls-dv-compose-loader__icon-skeleton--green{display:flex;align-items:center;justify-content:center;min-width:2.375rem;min-height:2.375rem;background:var(--green-10, #effff9);border:1px solid var(--green-30, #9df5d4);border-radius:0.625rem}.ls-dv-compose-loader__icon--green{width:1.25rem;height:1.25rem;background:linear-gradient(90deg, var(--green-30, #9df5d4) 25%, transparent 100%);border-radius:0.625rem}.ls-dv-compose-loader__row-content{display:flex;width:100%;align-items:center;justify-content:space-between}.ls-dv-compose-loader__preview{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.ls-dv-compose-loader__preview-box{background:var(--white, #ffffff);border:1px solid var(--gray-30, #e0e2e5);aspect-ratio:1/1.414;height:100%;margin-top:7rem;min-width:40vw;box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.ls-dv-compose-loader__button{position:absolute;top:1rem;right:1rem;border-radius:1rem;padding:0.25rem;background:var(--white, #ffffff)}.ls-dv-compose-loader__action-btn{border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:0.75rem;border:none;background:var(--primary-60, #4456f6);cursor:not-allowed}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}`;
 
@@ -366,7 +366,7 @@ const LsSelectMenu = class {
 };
 LsSelectMenu.style = lsSelectMenuCss();
 
-const version = "1.0.4";
+const version = "1.0.6";
 
 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:block}:host(.ls-dv-statusbar-preview) .ls-dv-version{bottom:-1.25rem;margin-right:0.5rem}`;
 
@@ -390,6 +390,8 @@ const LsStatusbar = class {
      * {LsDocumentViewer}
      */
     editor;
+    canUndo = false;
+    canRedo = false;
     /**
      * The viewer mode.
      * {'preview' | 'editor' | 'compose'}
@@ -563,14 +565,14 @@ const LsStatusbar = class {
         if (!mutations)
             return;
         this.editor._skipHistory = true;
-        this.editor.mutate.emit(mutations);
+        this.editor.mutateHandler(new CustomEvent('mutate', { detail: mutations }));
     }
     applyRedo() {
         const mutations = history.redo();
         if (!mutations)
             return;
         this.editor._skipHistory = true;
-        this.editor.mutate.emit(mutations);
+        this.editor.mutateHandler(new CustomEvent('mutate', { detail: mutations }));
     }
     componentWillLoad() {
         this.zoom = this.editor.zoom;
@@ -599,9 +601,9 @@ const LsStatusbar = class {
     }
     render() {
         const isPreview = this.mode === 'preview';
-        return (index.h(index.Host, { key: '7035c4cdf76ac09b909a098d635dd075d7d9388d', class: { 'ls-dv-statusbar-preview': isPreview } }, !isPreview && (index.h("div", { key: '845fe27459a05b96b06c4025c2f8090b75fee027', class: 'ls-dv-controls-bar' }, index.h("div", { key: 'fd7e683e2e96e3da8cab7ba9626e9c64c70d62ad', class: 'ls-dv-status-bar-section' }, index.h("button", { key: 'b015f095a886f8fd41318df2ad1ac9cb4e82ee7c', onClick: () => this.applyUndo(), id: "undo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.undo') }, index.h("ls-icon", { key: '8ff999de40c5acd0c1cd8dab5858ae8c0b85af99', name: "undo-icon", size: 18 })), index.h("button", { key: '5019459ef97755347a26d2dd6bc1c5d46fed1506', onClick: () => this.applyRedo(), id: "redo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.redo') }, index.h("ls-icon", { key: '750526932ff82720ee62b3727b35717621031d1b', name: "redo-icon", style: { transform: "scale(-1, 1)", marginLeft: '0.25rem' }, size: 18 }))))), index.h("div", { key: 'a1f56781157ad515423a25bcb02c7513a501a26e', class: { 'ls-dv-controls-bar': true, 'ls-dv-page-nav': true } }, index.h("div", { key: '4b2825b2d93deb7d9976c1f67312053d8fbd6b71', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, index.h("button", { key: '19128a07beda58b596a4d838793888074d53cc50', onClick: () => {
+        return (index.h(index.Host, { key: '18ccc02a34ad30d1ecec33c3ad967b8224ba4994', class: { 'ls-dv-statusbar-preview': isPreview } }, !isPreview && (index.h("div", { key: 'b9d5bb97994a209e65a81576a67a50d8e5ef3524', class: 'ls-dv-controls-bar' }, index.h("div", { key: '8e058a4ea295561d1f4becf989af38e18376f09a', class: 'ls-dv-status-bar-section' }, index.h("button", { key: 'bbbc73f66594d7c868f947f8aab7ac3f02f3d2f6', onClick: () => this.applyUndo(), disabled: !this.canUndo, id: "undo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.undo') }, index.h("ls-icon", { key: 'ecf1675a45114131a79d834ae9aa3c5e179edc48', name: "undo-icon", size: 18 })), index.h("button", { key: 'f3bb9d84e8591988c067008cb81b5630f105e792', onClick: () => this.applyRedo(), disabled: !this.canRedo, id: "redo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.redo') }, index.h("ls-icon", { key: '96845aaf86d0ee3234a5806ec40964f35b67ab1a', name: "redo-icon", style: { transform: "scale(-1, 1)", marginLeft: '0.25rem' }, size: 18 }))))), index.h("div", { key: '503c0ea4eda6202f87c929def2e496a159a37aa1', class: { 'ls-dv-controls-bar': true, 'ls-dv-page-nav': true } }, index.h("div", { key: '8ac7bc2c067ae5c2074c0e9e882da6dff125c6e5', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, index.h("button", { key: '485a17228d9332c22138f561a7a7dcc43cb7cef7', onClick: () => {
                 this.editor.pagePrev();
-            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === 1 ? i18n.dvI18n.t('statusbar.nopreviouspage') : i18n.dvI18n.t('statusbar.previouspage') }, index.h("ls-icon", { key: 'cd90982d3f1b3f1aabc9f9079a6c065cf60cce59', name: "chevron-left-icon" })), index.h("button", { key: '570e47ef8164220b2d9aba31e2952c8036c6f99d', id: "page-level-btn", class: "ls-dv-zoom-level-btn", onClick: () => {
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === 1 ? i18n.dvI18n.t('statusbar.nopreviouspage') : i18n.dvI18n.t('statusbar.previouspage') }, index.h("ls-icon", { key: 'df602dae238984d08801f4365b866002dca86969', name: "chevron-left-icon" })), index.h("button", { key: '32eef5c295eb562f5780c03756bba3690d4ae9e5', id: "page-level-btn", class: "ls-dv-zoom-level-btn", onClick: () => {
                 this.showPageMenu = !this.showPageMenu;
                 if (this.showPageMenu) {
                     requestAnimationFrame(() => document.addEventListener('click', this.pageMenuClickHandler, true));
@@ -609,13 +611,13 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.pageMenuClickHandler, true);
                 }
-            } }, this.page, " / ", this.pageCount), this.showPageMenu && (index.h("div", { key: '4db0e3d7f8dcc4bb079523abcc6811fd59a9d698', id: "ls-page-menu", class: "ls-dv-zoom-menu ls-dv-page-menu" }, Array.from({ length: this.pageCount }, (_, i) => i + 1).map(p => (index.h("button", { class: { 'ls-dv-zoom-menu-item': true, 'active': this.page === p }, onClick: () => {
+            } }, this.page, " / ", this.pageCount), this.showPageMenu && (index.h("div", { key: 'f8fe0d9e3d67b364092b9f12300f9e03ec7c6aad', id: "ls-page-menu", class: "ls-dv-zoom-menu ls-dv-page-menu" }, Array.from({ length: this.pageCount }, (_, i) => i + 1).map(p => (index.h("button", { class: { 'ls-dv-zoom-menu-item': true, 'active': this.page === p }, onClick: () => {
                 this.goToPage(p);
                 this.showPageMenu = false;
                 document.removeEventListener('click', this.pageMenuClickHandler, true);
-            } }, p, this.page === p && index.h("ls-icon", { name: "check-icon", size: 14 })))))), index.h("button", { key: '7b92c7db1a2470124a797af3b69d53d78254080d', onClick: () => {
+            } }, p, this.page === p && index.h("ls-icon", { name: "check-icon", size: 14 })))))), index.h("button", { key: '6093169c96a12306aba655b311696e99065d2697', onClick: () => {
                 this.editor.pageNext();
-            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === this.pageCount ? i18n.dvI18n.t('statusbar.nonextpage') : i18n.dvI18n.t('statusbar.nextpage') }, index.h("ls-icon", { key: 'bda8988bbd778bbc16f75d2d7299987d9e550753', name: "chevron-right-icon" })))), index.h("div", { key: '88ad63ca844b8c7ca543fc9cad995eec8ae4cb91', class: 'ls-dv-status-bar-group' }, index.h("div", { key: '72f15c5e488a8b0e7cb214e01ac53dcb220fe592', class: 'ls-dv-controls-bar', style: { position: 'relative' } }, index.h("div", { key: '5e3dae4cd7ebf60b57e99995b75a4380729ded88', class: 'ls-dv-status-bar-section' }, index.h("button", { key: 'f2e8c3af825e08bc4fb16750e41ef423e6aff93b', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.zoomout') }, index.h("ls-icon", { key: '9ce1369ee910dfd32745f729e7dcc6208641867b', name: "zoom-out-icon" })), index.h("button", { key: '453fb7ba30e350a151d2b66d0a79c70736f56d3a', id: "zoom-level-btn", class: "ls-dv-zoom-level-btn", onClick: () => {
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === this.pageCount ? i18n.dvI18n.t('statusbar.nonextpage') : i18n.dvI18n.t('statusbar.nextpage') }, index.h("ls-icon", { key: '08f8e556677ef1efebd0b7b6e72983ae6cedecf4', name: "chevron-right-icon" })))), index.h("div", { key: '54214796ad12fdcd1e3361f84ed8d39ab05c56fc', class: 'ls-dv-status-bar-group' }, index.h("div", { key: 'f271c0049806dbe810afd00c928b5d7377376955', class: 'ls-dv-controls-bar', style: { position: 'relative' } }, index.h("div", { key: 'f2afc562cea8029131cd63522eb6a353b23d09b5', class: 'ls-dv-status-bar-section' }, index.h("button", { key: '549f1c0d525684dc93f21531e5a4988e138c2206', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.zoomout') }, index.h("ls-icon", { key: '5a206f88c6418038493eb6e6eef27f627f55e061', name: "zoom-out-icon" })), index.h("button", { key: '19e4203f02d5a0b9bbbd107bcd32ed40d7a5fb19', id: "zoom-level-btn", class: "ls-dv-zoom-level-btn", onClick: () => {
                 this.showZoomMenu = !this.showZoomMenu;
                 if (this.showZoomMenu) {
                     requestAnimationFrame(() => document.addEventListener('click', this.zoomMenuClickHandler, true));
@@ -623,11 +625,11 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.zoomMenuClickHandler, true);
                 }
-            } }, Math.round(this.zoom * 100), "%"), this.showZoomMenu && (index.h("div", { key: 'f0f85d4c6a5c5abb0082e86be9fdbd4d12a12fb3', id: "ls-zoom-menu", class: "ls-dv-zoom-menu" }, [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5, 0.25].map(level => (index.h("button", { class: { 'ls-dv-zoom-menu-item': true, 'active': Math.round(this.zoom * 100) === Math.round(level * 100) }, onClick: () => {
+            } }, Math.round(this.zoom * 100), "%"), this.showZoomMenu && (index.h("div", { key: 'be8a4d0e048d49eaf8e65edd886d96f7e7f17aff', id: "ls-zoom-menu", class: "ls-dv-zoom-menu" }, [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5, 0.25].map(level => (index.h("button", { class: { 'ls-dv-zoom-menu-item': true, 'active': Math.round(this.zoom * 100) === Math.round(level * 100) }, onClick: () => {
                 this.setZoom(level);
                 this.showZoomMenu = false;
                 document.removeEventListener('click', this.zoomMenuClickHandler, true);
-            } }, Math.round(level * 100), "%", Math.round(this.zoom * 100) === Math.round(level * 100) && index.h("ls-icon", { name: "check-icon", size: 14 })))))), index.h("button", { key: 'a38a804049f94cba70d971abf0f58e0d9d43b18f', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.zoomin') }, index.h("ls-icon", { key: '068c11f60c6f720f35edb708e576c4aa2ea088a2', name: "zoom-in-icon" }))), !isPreview && (index.h("div", { key: '836b1aeba9b7889ea5179abb85efab92aab47bf6', class: 'ls-dv-status-bar-section' }, index.h("button", { key: '307f97758525ea29151c6e35e4f303b9da6dd226', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.fitwidth') }, index.h("ls-icon", { key: '42ceb3d52ad6d31c38dc473317aa6b23af22bcc9', name: "fit-width-icon" })), index.h("button", { key: 'ee95d25f126735b2795813f2399eac7edf5c0420', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.fitheight') }, index.h("ls-icon", { key: '04ddc66e1fbcadc80d63e2afd3ade9faf8eac8bc', name: "fit-height-icon" })))), index.h("div", { key: '50e0ea122a95e934f85cd33b1cf0df1eaaecaac3', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 ? { display: 'none' } : {} }, index.h("button", { key: '59293ddd95468c0f01849de3fdb75ba8664b572c', onClick: () => {
+            } }, Math.round(level * 100), "%", Math.round(this.zoom * 100) === Math.round(level * 100) && index.h("ls-icon", { name: "check-icon", size: 14 })))))), index.h("button", { key: '28384af43c2b6ed5db0f893cf4fa5f88c36332a4', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.zoomin') }, index.h("ls-icon", { key: '97540f2c59fd5e3228ced46b895837f05c95fbcb', name: "zoom-in-icon" }))), !isPreview && (index.h("div", { key: '30f5236f017a1ff8b61d33f91ea9031eebde36a6', class: 'ls-dv-status-bar-section' }, index.h("button", { key: '4b7c04149439b2cddcd0cf474e2d9b57efa9bc76', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.fitwidth') }, index.h("ls-icon", { key: 'dd765543163aaad0deb4300066333dac43a85206', name: "fit-width-icon" })), index.h("button", { key: '571cb22457f5848917e97226f74e120395a40ccd', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.fitheight') }, index.h("ls-icon", { key: 'ef4cdbf95a3110b0e20d438c5870f32cf786e535', name: "fit-height-icon" })))), index.h("div", { key: '8f27158a751d07a53ae0f8afe6ad51344a497a03', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 ? { display: 'none' } : {} }, index.h("button", { key: 'f09978de659a2defbd0be5c4de99337d7fc59c0a', onClick: () => {
                 this.showThumbnails = !this.showThumbnails;
                 if (this.showThumbnails) {
                     requestAnimationFrame(() => {
@@ -640,7 +642,7 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.outsideClickHandler);
                 }
-            }, id: "page-thumbnails-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.pagethumbnails') }, index.h("ls-icon", { key: '57f1da537f3909bc72933d7f9e5bd61495ab0f18', name: !this.showThumbnails ? 'side-panel-open-right-icon' : 'side-panel-close-right-icon', size: 18 }))), this.showThumbnails && (index.h("div", { key: 'e6936f45285b825ed96b56e9316754082558b757', class: "ls-dv-thumbnail-popover" }, index.h("div", { key: 'edfd8ba1e8108c0aa9252aa78c7b6a268ba7e006', id: "ls-thumbnail-container", class: "ls-dv-thumbnail-grid" })))), !isPreview && index.h("ls-helper-bar", { key: 'c883f32c7a33b3f08006e972ce0d9698f04e8a4f' }), index.h("span", { key: '613689fe8f313f61a0cd104479c0e22d1105346d', class: "ls-dv-version" }, "v", version), index.h("ls-tooltip", { key: '7a4e67c40ed2e46dea34444ba9a36a165816e809', tooltipId: "ls-dv-tooltip" }), index.h("slot", { key: '8f3dbe04c66ff9192f62e8f16a3bf5c5adb9fe1e' }))));
+            }, id: "page-thumbnails-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('statusbar.pagethumbnails') }, index.h("ls-icon", { key: '6b324a39ffbe36972aaa09d92191cfaace18ca42', name: !this.showThumbnails ? 'side-panel-open-right-icon' : 'side-panel-close-right-icon', size: 18 }))), this.showThumbnails && (index.h("div", { key: '9aa2b3535ad900e5ba758457631d57fd5d6c38fe', class: "ls-dv-thumbnail-popover" }, index.h("div", { key: '90a1ca58218f2873e3a4309b77fda5bfc2787b82', id: "ls-thumbnail-container", class: "ls-dv-thumbnail-grid" })))), !isPreview && index.h("ls-helper-bar", { key: '47782efbb75ccbd0b762f294906f6475e952b801' }), index.h("span", { key: '1d6a5f8c19234bab666afc6a3f1e7a16d0d097ca', class: "ls-dv-version" }, "v", version), index.h("ls-tooltip", { key: 'ac89e817031ff7d4285b2d4627e49def6ddd1daf', tooltipId: "ls-dv-tooltip" }), index.h("slot", { key: 'e69df05d6946068a5daaf3cb4eb95ae4f58aa427' }))));
     }
     static get watchers() { return {
         "page": ["onPageChange"]

package/dist/cjs/ls-document-viewer.cjs.entry.js

@@ -2,10 +2,10 @@
 
 var index = require('./index-DFeU0FNc.js');
 var i18n = require('./i18n-e8JieHV6.js');
-var editorUtils = require('./editorUtils-CRCLbYrX.js');
+var editorUtils = require('./editorUtils-CskM29uR.js');
 var fieldDefaults = require('./fieldDefaults-BZtB5J2S.js');
-var mouseHandlers = require('./mouseHandlers-BvqJ2tsu.js');
-var history = require('./history-BBZQuObJ.js');
+var mouseHandlers = require('./mouseHandlers-DvI94o4n.js');
+var history = require('./history-C8Dy_82r.js');
 require('./defaultPalette-Dt4FmPno.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -26116,16 +26116,15 @@ function applyUndo() {
     const mutations = history.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 = history.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) {
@@ -30486,6 +30485,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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -30554,6 +30555,10 @@ const LsDocumentViewer = class {
      * {string}
      */
     templateid;
+    templateIdChanged() {
+        if (this.token && this._initialized)
+            this.reload();
+    }
     /**
      * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
@@ -30698,6 +30703,7 @@ const LsDocumentViewer = class {
     addParticipant;
     adapter;
     _skipHistory = false;
+    _loadGeneration = 0;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
         if (this.token && this.adapter) {
@@ -30724,11 +30730,15 @@ const LsDocumentViewer = class {
             }
             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') {
@@ -31215,6 +31225,7 @@ const LsDocumentViewer = class {
         this.validationErrors = editorUtils.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');
@@ -31232,7 +31243,12 @@ const LsDocumentViewer = class {
             document.addEventListener('mousemove', mouseHandlers.mouseMove.bind(this));
             document.addEventListener('mouseup', mouseHandlers.mouseUp.bind(this));
             dropTarget.addEventListener('dblclick', mouseHandlers.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) => {
@@ -31257,6 +31273,7 @@ const LsDocumentViewer = class {
             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) {
@@ -31286,6 +31303,8 @@ const LsDocumentViewer = class {
     }
     async load() {
         this.isLoading = true;
+        this._loadGeneration++;
+        history.clearHistory();
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -31354,6 +31373,32 @@ const LsDocumentViewer = class {
             }
         }
     }
+    async reload() {
+        this.isLoading = true;
+        this._loadGeneration++;
+        history.clearHistory();
+        try {
+            this.adapter = new LsDocumentAdapter(this.endpoint);
+            const result = (await this.adapter.execute(this.token, editorUtils.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 = editorUtils.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) {
             i18n.dvI18n.changeLanguage(this.language);
@@ -31380,14 +31425,15 @@ const LsDocumentViewer = class {
             return false;
     }
     render() {
-        return (index.h(index.Host, { key: '64ffe7f6df08c90f01216ea526d50e9748353331' }, index.h(index.h.Fragment, null, this.isLoading && (index.h(index.h.Fragment, null, index.h("div", { key: '7249b7eca35aa61359ff2ae7ec089618b5eedcf0', class: 'ls-dv-page-loader' }, index.h("ls-loading-logo", { key: '31c7a6a18cc853505d6eaeffa8e60e3a38457c16', size: 200, colour: "var(--primary-60)" })), index.h("div", { key: 'eb31717f54a456ba88649a1de5d808ebe861434b', class: 'ls-dv-custom-loader-slot' }, index.h("slot", { key: '71ace12966bb5b1ae111022ec411419e0f606bda', name: "custom-loader" })), this.mode === 'compose' && index.h("ls-compose-loader", { key: 'f908df60d0a6458771d4bf2ef359c611f57d29b0' }))), this.error && (index.h("div", { key: 'a23ffd75efeb9b8e55ebf282041e566fcc6a3d2a', class: "ls-dv-error-state" }, index.h("div", { key: '757f34427379b54dab8ca1f40a5756269ecc495e', class: "ls-dv-error-card" }, index.h("ls-icon", { key: 'cf0dda55abc866ccbae77f94e8420c0c87a8e8f2', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), index.h("p", { key: '0bdb4c380b2757483101433d63aad0489fd28c99', class: "ls-dv-error-title" }, this.errorTitle), index.h("p", { key: 'd7a4c75cbab37d803124a4452d52456d1eef2807', class: "ls-dv-error-message" }, this.error)))), index.h("div", { key: '58341edacec17b878965de800d06033b269542b2', class: "ls-dv-page-header" }, index.h("div", { key: 'abd7f012d872ca69a60f574f1597e1b5745e07e5', class: 'ls-dv-left-slot-wrapper' }, index.h("slot", { key: '92a0abf30a28053bb80777fb2daed32a1bd742e0', name: "left-button" })), index.h("div", { key: '537d946b90e459ddf9613a3d665049a3f4f4b0df', class: 'ls-dv-right-slot-wrapper' }, index.h("slot", { key: 'bac5456f966980b755c674aa501ffadac93d1c21', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: '2f860bcad3a032fc904a6efdff8ca1950e9bf6e0' }, index.h("span", { key: '966269a053c75d9b5823aac6cfd953f6af12037d', class: "ls-dv-header-text-1" }, i18n.dvI18n.t('viewer.templatecreation')), index.h("span", { key: '7bbb1e96bc7f760a031aed746512e62f57d25168' }, "/"), index.h("span", { key: '34704adb2d76b37580174dd5f1b4858bfb9c5673', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: 'd44ad14a942e530a7395bffdf00b8aefae01410a', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("slot", { key: '35e2d16eebeb9881912a86751e066e30d87af43c', name: "top-bar" })))), index.h("form", { key: '71f0424708b74ba30cbeda7c770af1665f891d82', id: "ls-editor-form" }, index.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 (index.h(index.Host, { key: '1c9984bf147503f2979dc5591f140514f3a38d9f' }, index.h(index.h.Fragment, null, this.isLoading && (index.h(index.h.Fragment, null, index.h("div", { key: '7d33135c3fdf99a71d72f25b5c28e49ecc3867be', class: 'ls-dv-page-loader' }, index.h("ls-loading-logo", { key: '8990a520c84835b97b4d3cd4ea84a6f94968c45b', size: 200, colour: "var(--primary-60)" })), index.h("div", { key: '29641895ac2d52d69183a07123d27e6566c17d97', class: 'ls-dv-custom-loader-slot' }, index.h("slot", { key: '7bef6ef95e5d3e8792118288ad69d64ae6c883b3', name: "custom-loader" })), this.mode === 'compose' && index.h("ls-compose-loader", { key: '2c92baf059816aa925265f3a4c284d819ebb02e6' }))), this.error && (index.h("div", { key: 'ba8f19052b333c14077ba661b47141eedd751cc3', class: "ls-dv-error-state" }, index.h("div", { key: 'e7f5b45617ea473575c3999e610e8ac9d9a3e662', class: "ls-dv-error-card" }, index.h("ls-icon", { key: 'a0d262e3b0ac53362ff51476268a8046840b1069', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), index.h("p", { key: 'e5b119fba5d291231791f9956d8304a3bebf3b05', class: "ls-dv-error-title" }, this.errorTitle), index.h("p", { key: 'e260583526bdc4ad7f7cb28601af606a50ee5037', class: "ls-dv-error-message" }, this.error)))), index.h("div", { key: 'ab6eae0fb397f32330b3bfb3c17f8297b0e14bdc', class: "ls-dv-page-header" }, index.h("div", { key: 'ac7d6391d6dc3e0c59550032c959ef10672f93e1', class: 'ls-dv-left-slot-wrapper' }, index.h("slot", { key: '3100fd24301ab2781ab3bbe63f3654d4475c4726', name: "left-button" })), index.h("div", { key: '3948a22df5ee5f8c1dde92645407ae6095a947c3', class: 'ls-dv-right-slot-wrapper' }, index.h("slot", { key: '06eb1fc89813e466a4752d355d21f55a3880c5f3', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: '7f3d54c519be843dcf5cd903ac85f8b5ff3017f5' }, index.h("span", { key: '626fef0097d482620b136eaba0f5a833d5e13ba5', class: "ls-dv-header-text-1" }, i18n.dvI18n.t('viewer.templatecreation')), index.h("span", { key: '53ea6ffbb0302a460980e332cee7e5540bed390d' }, "/"), index.h("span", { key: 'f2df918d17814b9ad977eb4865ac42b27ab67772', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: '8cdd65e6001ecb5b44a7b67849d44e358a7e5730', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("slot", { key: '40bb1ee712a356a4bfeac8da94e7fd8463a05285', name: "top-bar" })))), index.h("form", { key: '7f5299608155174f9db6625ca4d36678c8de4e62', id: "ls-editor-form" }, index.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 = [];
-            } }, index.h("slot", { key: '09b76362906455e7f2800d5eeda24239c7d66204', name: "recipient-panel", slot: "recipient-panel" })), index.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 }), index.h("div", { key: 'fd45db30d22b72823a1af10c03e3ac3850a25905', id: "ls-mid-area" }, index.h("div", { key: 'a2ec46d3c757ebad9e0ac5f0551cd4406df1769b', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, index.h("div", { key: 'c7bc32dc9d94538a6748731b34baf5854710560c', id: "ls-document-frame" }, index.h("canvas", { key: '8ef7cf95e4a1d7af72b192145b9c3d903f6003a7', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), index.h("ls-editor-table", { key: '7e3136049c51a669d0cb67f7e5488c8919d04397', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), index.h("div", { key: '9db49b87d852f8c4fad8a5f7a4f6f4be51de7673', id: "ls-box-selector" }), index.h("div", { key: '78ac1341ad5566d3690d53bdc2c8033eac98846d', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (index.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 && (index.h("ls-select-menu", { key: 'cf246a8c1fe0f503f4dd85d718894c57a28653ba', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), index.h("ls-statusbar", { key: '1b97b555c0a70384fbc19e75925ad1aa41a5454b', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (index.h("div", { key: 'b2b47d37d48397113c819dd7cb83a4b84fed3856', class: 'ls-dv-validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '97c19c08301eec03acf1835f9989cd593b7ddda0', validationErrors: this.validationErrors }), index.h("slot", { key: '85e2631a12ead7acf4a91279113f2cdb9d802f1b', name: "next-button" })))))), index.h("ls-tooltip", { key: '7738b8f3b82efabd0ac0de579bc6c9615880cf11', tooltipId: "ls-dv-tooltip" })));
+            } }, index.h("slot", { key: '0f1fa9523db6632cdd035684f091b8e45567bb83', name: "recipient-panel", slot: "recipient-panel" })), index.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 }), index.h("div", { key: '886d632ca40c9bbecc176cf64e197c92cb1795ee', id: "ls-mid-area" }, index.h("div", { key: '5af07dd82b20bcc0e28e8c7e64a570b2cd5a0bf7', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, index.h("div", { key: '3873b725f4a85956bd2191e92c18ce9f5c8d4756', id: "ls-document-frame" }, index.h("canvas", { key: 'ba49a53daecf0bba5dc836f6247059374656ed54', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), index.h("ls-editor-table", { key: '6fdc6a2ddf91b8146689e708cffd70197f358d50', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), index.h("div", { key: '71247cc36b357ee37ebfb44c5e32bf63b0db9c75', id: "ls-box-selector" }), index.h("div", { key: '08a521f79281736b46a3a8f7fc5f56bfd7cae6f4', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (index.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 && (index.h("ls-select-menu", { key: 'b73febb91ce6ecb8b2bbdf7ebeac096819adc2f6', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), index.h("ls-statusbar", { key: '823577c9cc7ec7b87dab69ae131afddc0ffb4de8', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode, canUndo: history.canUndo(), canRedo: history.canRedo() }), this.mode === 'editor' && (index.h("div", { key: 'b0a35c6102836f109c99f786181cdecbbc7f3b7f', class: 'ls-dv-validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '8fa7669d0451d5a1a6736a537d8c4544656d4198', validationErrors: this.validationErrors }), index.h("slot", { key: '217e3a0a9ffd3ea623181529c558773315fa02ab', name: "next-button" })))))), index.h("ls-tooltip", { key: '1932ad5cd7739438055a03b30398fc17045216df', tooltipId: "ls-dv-tooltip" })));
     }
     static get watchers() { return {
+        "templateid": ["templateIdChanged"],
         "language": ["languageChanged"],
         "mode": ["modeHandler"],
         "_template": ["templateLockedHandler"],