legalesign-document-viewer 1.0.0 → 1.0.2

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CItPoq74.js';
 import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
-import { d as dvI18n } from './i18n-Dbp-hj8N.js';
+import { d as dvI18n } from './i18n-WVWIAGo_.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
-import { h as validateFieldValue, g as getInputType, i as validationTypes } from './editorUtils-BZZzuy9j.js';
+import { h as validateFieldValue, g as getInputType, i as validationTypes } from './editorUtils-DcBt3fOj.js';
 import { f as forceCloseDatePicker } from './index-Bo8LVmEA.js';
 import { g as getDefaultValidationForType, a as getFieldPlaceholder, b as getFieldTitleSuggestion } from './defaultFieldLabels-GlbzVGpj.js';
 import { g as getFieldIcon } from './defaultFieldIcons-C5wLu85H.js';
@@ -145,7 +145,7 @@ const LsCheckboxInput = class {
 };
 LsCheckboxInput.style = lsCheckboxInputCss();
 
-const lsEditorFieldCss = () => `:host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;box-sizing:content-box;isolation:isolate;min-height:16px}:host .ls-editor-field{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.ls-dv-editor-field-editable{font-family:inherit;font-size:inherit;color:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;margin:0;margin-top:auto;padding:0px 0px 0px 0px;min-width:2em;width:calc(100% - 13px);max-height:100%}.ls-dv-editor-field-editable:focus{outline:none}.ls-dv-editor-field-draggable{display:flex;align-items:flex-end;font-family:inherit;font-size:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;min-width:2px;height:100%;width:calc(100% - 13px);margin-top:auto}.ls-dv-hidden-field{display:none}.ls-dv-date-field-input{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;top:0;left:0}input,textarea{all:unset;color:inherit}textarea{resize:none;overflow:hidden;word-break:break-all;white-space:pre-wrap}textarea::placeholder{color:inherit;opacity:0.5}.ls-dv-draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.ls-dv-editing-input{caret-color:rgb(15, 23, 42);caret-shape:auto;height:100%;width:100%}.ls-dv-required-icon{color:var(--red-60, #f64a44)}.ls-dv-x-button{all:unset;cursor:pointer;transform:translate(55%, -55%);position:absolute;color:white;background:var(--gray-80, #6f7176);border-radius:50%;top:0;right:0}.ls-dv-x-button:hover{background:var(--gray-90, #5e6066)}.resize-handles{pointer-events:none}.resize-handle{position:absolute;background:var(--field-border-color);border-radius:1px}.handle-e{width:4px;height:16px;right:0px;top:50%;transform:translateY(-50%)}.handle-s{width:16px;height:4px;bottom:0px;left:50%;transform:translateX(-50%)}.handle-se{width:6px;height:6px;right:0px;bottom:0px}`;
+const lsEditorFieldCss = () => `:host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate;min-height:16px}:host .ls-editor-field{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.ls-dv-editor-field-editable{font-family:inherit;font-size:inherit;color:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;margin:0;margin-top:auto;padding:0px 0px 0px 0px;min-width:2em;width:calc(100% - 13px);max-height:100%}.ls-dv-editor-field-editable:focus{outline:none}.ls-dv-editor-field-draggable{display:flex;align-items:flex-end;font-family:inherit;font-size:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;min-width:2px;height:100%;width:calc(100% - 13px);margin-top:auto}.ls-dv-hidden-field{display:none}.ls-dv-date-field-input{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;top:0.5rem;left:0}.ls-dv-date-field-active{pointer-events:auto}input,textarea{all:unset;color:inherit}textarea{resize:none;overflow:hidden;word-break:break-all;white-space:pre-wrap}textarea::placeholder{color:inherit;opacity:0.5}.ls-dv-draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.ls-dv-editing-input{caret-color:rgb(15, 23, 42);caret-shape:auto;height:100%;width:100%}.ls-dv-required-icon{color:var(--red-60, #f64a44)}.ls-dv-x-button{all:unset;cursor:pointer;transform:translate(55%, -55%);position:absolute;color:white;background:var(--gray-80, #6f7176);border-radius:50%;top:0;right:0}.ls-dv-x-button:hover{background:var(--gray-90, #5e6066)}.resize-handles{pointer-events:none}.resize-handle{position:absolute;background:var(--field-border-color);border-radius:1px}.handle-e{width:4px;height:16px;right:0px;top:50%;transform:translateY(-50%)}.handle-s{width:16px;height:4px;bottom:0px;left:50%;transform:translateX(-50%)}.handle-se{width:6px;height:6px;right:0px;bottom:0px}`;
 
 const fieldTypeKeyMap$1 = {
     'signature': 'toolbox.signature',
@@ -245,6 +245,10 @@ const LsEditorField = class {
             }));
             return;
         }
+        // Let Delete/Backspace propagate for date fields (no text to edit)
+        if ((e.key === 'Delete' || e.key === 'Backspace') && this.isDateField()) {
+            return;
+        }
         e.stopPropagation();
     }
     handleMouseMove(e) {
@@ -290,13 +294,19 @@ const LsEditorField = class {
         }
     }
     handleDoubleClick(e) {
-        if (this.readonly || LsEditorField.NO_EDIT_TYPES.includes(this.dataItem.formElementType)) {
+        if (this.readonly) {
             e.preventDefault();
             e.stopPropagation();
             return;
         }
-        // Date fields use selection to open picker, skip dblclick
+        // Date fields open the picker on double-click
         if (this.isDateField()) {
+            this.isEditing = true;
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (LsEditorField.NO_EDIT_TYPES.includes(this.dataItem.formElementType)) {
             e.preventDefault();
             e.stopPropagation();
             return;
@@ -351,6 +361,13 @@ const LsEditorField = class {
             this.component.style.background = 'rgba(255,255,255,0.5)';
             this.component.style.boxShadow = 'none';
             this.isEditing = false;
+            // Flush pending debounced mutate so validation fires immediately
+            if (this.labeltimer) {
+                clearTimeout(this.labeltimer);
+                this.labeltimer = null;
+            }
+            // Always emit mutate on deselect to catch pending changes from ls-field-content
+            this.mutate.emit([{ action: 'update', data: this.dataItem }]);
             // Force close date picker (Safari ignores blur)
             const input = this.component.shadowRoot?.getElementById('editing-input');
             if (input && input.type === 'date') {
@@ -365,8 +382,10 @@ const LsEditorField = class {
         this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
         this.update.emit([{ action: 'delete', data: this.dataItem }]);
     };
-    componentDidLoad() {
+    componentWillLoad() {
         this.valueError = validateFieldValue(this.dataItem?.formElementType, this.dataItem?.validation, this.dataItem?.value, this.dataItem?.options);
+    }
+    componentDidLoad() {
         this.sizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
                 if (entry.contentRect) {
@@ -465,35 +484,45 @@ const LsEditorField = class {
             ? 'var(--red-50, #FF5C56)'
             : defaultRolePalette[this.dataItem?.signer % 100].s60;
         const hostStyle = this.floatingActive && !this.readonly
-            ? { border: `2px ${borderColor} ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'}`, boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '--field-border-color': borderColor }
-            : { border: `2px ${borderColor} ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'}`, '--field-border-color': borderColor };
+            ? { outline: `2px ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'} ${borderColor}`, outlineOffset: '-2px', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '--field-border-color': borderColor }
+            : { outline: `2px ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'} ${borderColor}`, outlineOffset: '-2px', '--field-border-color': borderColor };
         const zoomValue = parseFloat(this.zoom) || 1;
         // const topOffset = (this.dataItem.height ?? 1) + 4;
         const topOffset = 24;
-        return (h(Host, { key: '8e9426287de57ff4921ce7e898a869398adde655', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'c560675018f1867fb2df40f44b95ccc220cf6257', class: {
+        return (h(Host, { key: '69d421bcf112299e4454b1f0d7e19f023c24eba3', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '2132f3425a824952bc1c0a94df36c5ec5d543a53', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (h("ls-icon", { key: 'fb0916d5a15194ce902ea5fc5da35a41edf4a8a5', name: "required-icon", size: Math.round(12 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (h("ls-icon", { key: '0febe96c93a9336d91662187290a4e829db46d12', 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' && (h("ls-icon", { key: '0b68f4f83a918629e85f5ed62b3b95001d7d6a38', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } })), !this.dataItem?.optional && this.dataItem?.formElementType === 'checkbox' && (h("ls-icon", { key: '7bd57a9fa64c996a872a4a02628f015d55293a7d', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
                 position: 'absolute',
                 top: `-${3 * zoomValue}px`,
                 right: `-${3 * zoomValue}px`,
                 lineHeight: '1',
                 fontSize: `${0.5 * zoomValue}rem`,
-            } })), this.isDateField() ? (h("input", { id: "editing-input", class: "ls-dv-date-field-input", type: "date", style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.toISODate(this.dataItem?.value), checked: this.dataItem?.value ? true : false, onInput: e => {
+            } })), this.isDateField() ? (this.isEditing ? (h("input", { id: "editing-input", class: "ls-dv-date-field-input ls-dv-date-field-active", type: "date", "aria-label": dvI18n.t('toolbox.date'), style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.toISODate(this.dataItem?.value), onInput: e => {
                 const val = e.target.value;
                 this.alter({ value: this.formatDateFromISO(val) });
             }, onChange: e => {
                 const input = e.target;
                 this.alter({ value: this.formatDateFromISO(input.value) });
+                this.isEditing = false;
                 forceCloseDatePicker(input);
-            } })) : (h("textarea", { id: "editing-input", class: this.isEditing ? 'ls-dv-editor-field-editable' : 'ls-dv-hidden-field', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.dataItem?.value, placeholder: dvI18n.t(this.getFieldTypeKey()), rows: 1, onInput: e => {
+            }, onBlur: () => {
+                this.isEditing = false;
+            }, ref: el => {
+                if (el) {
+                    requestAnimationFrame(() => {
+                        el.focus();
+                        el.showPicker?.();
+                    });
+                }
+            } })) : null) : (h("textarea", { id: "editing-input", class: this.isEditing ? 'ls-dv-editor-field-editable' : 'ls-dv-hidden-field', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.dataItem?.value, placeholder: dvI18n.t(this.getFieldTypeKey()), rows: 1, onInput: e => {
                 const el = e.target;
                 el.style.height = 'auto';
                 el.style.height = el.scrollHeight + 'px';
@@ -506,9 +535,9 @@ const LsEditorField = class {
                         el.style.height = el.scrollHeight + 'px';
                     });
                 }
-            } })), h("div", { key: 'd7ee15ab42dcc2226f1dbe48b00965b04749b9fe', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, h("span", { key: '12a7f963f4a7553d087577ebcec3701d75af0d92', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
+            } })), h("div", { key: 'e9fa09079c0a79d48689e250eac9d0920c61b679', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, h("span", { key: '4bb8e6d406a70926c0ad037f6d22a91c7532a4eb', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
             ? this.getCheckboxSymbol()
-            : this.dataItem?.value || dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (h("div", { key: '7fb009c332e4bad62c59a5369dfe6b485a9b7fd5', style: {
+            : this.dataItem?.value || dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (h("div", { key: '14f10072270d2155b5db94c3ffeaa7867259a6b5', style: {
                 position: 'absolute',
                 background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -520,7 +549,7 @@ const LsEditorField = class {
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (h("p", { key: '3b6017817f8d3129acb427a564a41fe202ca1f70', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (h("p", { key: 'de3107a8e0529f9878b084a9b9ca78cc88117199', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -531,7 +560,7 @@ const LsEditorField = class {
                 textOverflow: 'ellipsis',
                 maxWidth: `${10 * zoomValue}rem`,
                 fontFamily: 'sans-serif',
-            } }, dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (h("div", { key: '19a9fde506d26a3e4d75f38d8d4ad0d5d126b458', class: "resize-handles" }, h("div", { key: '900a3de272a7ccd81383747564ac6fc944a1ea2a', class: "resize-handle handle-e" }), h("div", { key: '97b0e302ba3c06e0332864d6587a1f5c5ca5346a', class: "resize-handle handle-s" }), h("div", { key: '7ea01bf7b7a88dac5a0706928f28d3953cebb012', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (h("button", { key: '266be9a46d26ef058853dd966d298d2d26f96fe0', class: 'ls-dv-x-button', style: {
+            } }, dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (h("div", { key: '7634c594ac826f92c4ac4358583e50e7ea82ef11', class: "resize-handles" }, h("div", { key: 'b0ff296db4fbc7f6c6d5d42369961b45e7fddf6d', class: "resize-handle handle-e" }), h("div", { key: '0915ee6760657bf8acd4512f4fa56c689239f99e', class: "resize-handle handle-s" }), h("div", { key: '49e9a7ed9cf23fdf155b23cbab370b26c5231274', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (h("button", { key: 'ce655a363c3bdc85c7a7015b981ed13630f49e16', class: 'ls-dv-x-button', style: {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -540,7 +569,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() }, h("ls-icon", { key: 'b01ecd2b0b553512cd83c326444d35bb2c0e8496', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
+            }, onClick: () => this.deleteField() }, h("ls-icon", { key: '7fe51c2ef42fd9cfdbb9c19849e2d5b53a58ab9a', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
     }
     static get watchers() { return {
         "dataItem": ["dataItemChanged", "watchDataItemHandler"],
@@ -562,6 +591,7 @@ const LsFieldContent = class {
     roles = [];
     showValidationTypes = true;
     readonly = false;
+    filtertoolbox = null;
     valueError = null;
     isDirty = false;
     watchDataItemHandler() {
@@ -574,6 +604,12 @@ const LsFieldContent = class {
             this.valueError = validateFieldValue(this.dataItem?.formElementType, this.dataItem?.validation, this.dataItem?.value, this.dataItem?.options);
         }
     }
+    disconnectedCallback() {
+        if (this.labeltimer) {
+            clearTimeout(this.labeltimer);
+            this.labeltimer = null;
+        }
+    }
     mutate;
     update;
     // Send one or more mutations up the chain
@@ -828,7 +864,7 @@ const LsFieldContent = class {
         this.alterImmediate({ validation: newValidation, value: newValue });
     }
     render() {
-        return (h(Host, { key: '24e25c7e75895b689f66926eca49bb4c8437e393' }, this.roles?.length > 0 && (h("ls-props-section", { key: 'da86a313b1b239f71127ecc210b4c2012e850ef7', sectionTitle: dvI18n.t('fieldproperties.assignee'), sectionDescription: dvI18n.t('fieldproperties.assigneedescription') }, h("ls-assignee-select", { key: 'd1ab6dbdf9dc56114f773ec0ab7da2d0f3aa07ea', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), h("ls-props-section", { key: 'ba62d50d6992a4213a7faca419180bc30075c706', sectionTitle: dvI18n.t('fieldproperties.fieldtype'), sectionDescription: dvI18n.t('fieldproperties.fieldtypedescription') }, h("ls-field-type-select", { key: 'd7c5c76d6ef1c1116f30d2cca18bf397853adfd4', fieldType: this.dataItem?.formElementType, assignee: this.dataItem?.signer, roles: this.roles, roleTypes: [this.getRoleType()], disabled: this.readonly, onFieldTypeChange: ev => this.handleFieldTypeChange(ev.detail) })), this.dataItem?.formElementType !== 'signature' && (h("ls-props-section", { key: 'f89d42643f948d354580a6fa52ebcb77c767aed4', sectionTitle: dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: dvI18n.t('fieldproperties.requiredfielddescription') }, h("ls-toggle", { key: '4c4373a255fa33ce36387ed1c1628dfffb40e6ea', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), h("ls-props-section", { key: 'eceb3a195dcea6fab9d93eb0a14127fe60161576', sectionTitle: dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: dvI18n.t('fieldproperties.fieldlabeldescription') }, h("ls-formfield", { key: 'a24598ad95ea5e0acebfdb06404839bf1aebbca2', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (h("ls-props-section", { key: '2771a770073ce41c87bd90c31694c1536ccc3ba2', sectionTitle: dvI18n.t('fieldproperties.value'), sectionDescription: dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (h("div", { class: "ls-dv-date-input-wrapper" }, h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
+        return (h(Host, { key: '00f5e6bc3dd6711643e5b0fe25f662d70c3d4b92' }, this.roles?.length > 0 && (h("ls-props-section", { key: '283e02c52f71c5093156e15e1bac5f5057bd0e1f', sectionTitle: dvI18n.t('fieldproperties.assignee'), sectionDescription: dvI18n.t('fieldproperties.assigneedescription') }, h("ls-assignee-select", { key: '84713e819a93cbb464970ee97c5d2488793cb30e', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), h("ls-props-section", { key: 'cd2da1fc874d8d1c37055ad5fb09594c046ba794', sectionTitle: dvI18n.t('fieldproperties.fieldtype'), sectionDescription: dvI18n.t('fieldproperties.fieldtypedescription') }, h("ls-field-type-select", { key: '2ec05e8faf63ce2d5a07dec45ae7c349728e032f', 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' && (h("ls-props-section", { key: '0b4f881aaa5eca5decfe7bf44941dfb51f816edc', sectionTitle: dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: dvI18n.t('fieldproperties.requiredfielddescription') }, h("ls-toggle", { key: '59b7177e7d28957fe276c7f1626831bd1e359c57', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), h("ls-props-section", { key: '448f076b297121bab31ba05d7b338c63933f4dbc', sectionTitle: dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: dvI18n.t('fieldproperties.fieldlabeldescription') }, h("ls-formfield", { key: '34aa3ecdba9edb0b2eac092cf34456beade7e311', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (h("ls-props-section", { key: '55ad3cb8e8f86a79412c070700f077ad4a76394e', sectionTitle: dvI18n.t('fieldproperties.value'), sectionDescription: dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (h("div", { class: "ls-dv-date-input-wrapper" }, 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');
@@ -838,9 +874,9 @@ const LsFieldContent = class {
                 const input = e.target;
                 this.alter({ value: this.formatDateFromISO(input.value) });
                 forceCloseDatePicker(input);
-            }, disabled: this.readonly }))) : (h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: 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 && (h("ls-props-section", { key: 'c403d5eace4333aab2654063d6d04a9e42f30ccb', sectionTitle: dvI18n.t('fieldproperties.options'), sectionDescription: dvI18n.t('fieldproperties.optionsdescription') }, h("textarea", { key: 'c40ef764e1d99fab798f10183cf34931ef9e49c5', 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' && (h("ls-props-section", { key: '5e36a97d01fd14e8615f6f51c0ca285fa24fa586', sectionTitle: dvI18n.t('fieldproperties.contentformat'), sectionDescription: dvI18n.t('fieldproperties.contentformatdescription') }, h("ls-input-wrapper", { key: '8b3f87cde0b2586cfe742269f2dd2408518ca33e', select: true }, h("select", { key: '0b26d5359020efd0f03a7d1f4a8081f7e69f4dc2', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, validationTypes
+            }, disabled: this.readonly }))) : (h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: 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 && (h("ls-props-section", { key: 'c033c2ec1addc298274756c32aabb464bf7f6421', sectionTitle: dvI18n.t('fieldproperties.options'), sectionDescription: dvI18n.t('fieldproperties.optionsdescription') }, h("textarea", { key: '939e98509967a53cafaecf7fc66a7b8b297ccad0', 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' && (h("ls-props-section", { key: '26cd86ed13d794c19d0764c261a3aeeb26baa958', sectionTitle: dvI18n.t('fieldproperties.contentformat'), sectionDescription: dvI18n.t('fieldproperties.contentformatdescription') }, h("ls-input-wrapper", { key: 'db3e98a1fae7280ec82aeadeafd82ee0e75a3f57', select: true }, h("select", { key: '7ddb1ae410ad37bb774af1c2bfd3b865d65e89e9', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, validationTypes
             .filter(type => type.formType === this.dataItem?.formElementType)
-            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (h("ls-props-section", { key: 'aa53736c8ff6a875a31089a567360d4b1aec9afe', sectionTitle: dvI18n.t('fieldproperties.displaystate'), sectionDescription: dvI18n.t('fieldproperties.displaystatedescription') }, h("div", { key: '1544e42584b5c8cc899c2db2fd1b6d65df8acabf', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (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)))))), h("slot", { key: '453d4fc28ceacc0e18af272b6a497502af8768b1' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (h("ls-props-section", { key: 'bd1410e73a2f58dde724fbbf05a14d2664e5be50', sectionTitle: dvI18n.t('fieldproperties.displaystate'), sectionDescription: dvI18n.t('fieldproperties.displaystatedescription') }, h("div", { key: 'bec219016a0006c013e009792a471429645fd173', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (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)))))), h("slot", { key: 'e40b61c6531b30239885dcc6b3ff1f7a46e8769d' })));
     }
     static get watchers() { return {
         "dataItem": ["watchDataItemHandler"]
@@ -1107,7 +1143,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (h(Host, { key: '5ee4d83054b39ff8f15f68ce81855358982b47d6' }, h("div", { key: '3c093b283a9675b94476139f743458343b4f868b', class: 'ls-dv-expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: '9ad907b068024ba3b062e01487f2d9f81dc62758', name: this.expanded ? 'expand-icon' : 'collapse-icon', size: 20, solid: true }), h("p", { key: '71078ba34ca93acf9b7b214539621d9e543a695a' }, dvI18n.t('fieldproperties.advancedproperties'))), this.expanded && (h("div", { key: '31535010abc956aa04a4723bcf11dd12c503a53f', class: 'ls-dv-field-set' }, h("ls-props-section", { key: '82407eb2fafabc44627f5914e2788f798c908c9a', sectionTitle: dvI18n.t('fieldproperties.fieldorder'), sectionDescription: dvI18n.t('fieldproperties.fieldorderdescription') }, h("input", { key: 'e5f04194d0a766749fbd4a1314c05c66320eae46', value: this.getValue('fieldOrder'), type: "number", placeholder: dvI18n.t('fieldproperties.placeholdereg1'), onInput: e => {
+        return (h(Host, { key: '5ee4d83054b39ff8f15f68ce81855358982b47d6' }, h("div", { key: '3c093b283a9675b94476139f743458343b4f868b', class: 'ls-dv-expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: '9ad907b068024ba3b062e01487f2d9f81dc62758', name: this.expanded ? 'expand-icon' : 'collapse-icon', size: 20, solid: true }), h("p", { key: '71078ba34ca93acf9b7b214539621d9e543a695a' }, dvI18n.t('fieldproperties.advancedproperties'))), this.expanded && (h("div", { key: '31535010abc956aa04a4723bcf11dd12c503a53f', class: 'ls-dv-field-set' }, h("ls-props-section", { key: '82407eb2fafabc44627f5914e2788f798c908c9a', sectionTitle: dvI18n.t('fieldproperties.fieldorder'), sectionDescription: dvI18n.t('fieldproperties.fieldorderdescription') }, h("input", { key: 'e5f04194d0a766749fbd4a1314c05c66320eae46', type: "number", placeholder: dvI18n.t('fieldproperties.placeholdereg1'), value: this.getValue('fieldOrder'), onInput: e => {
                 console.log(e);
                 this.alter({ fieldOrder: e.target.value }, 100);
             }, onChange: () => { console.log('onchange'); }, disabled: this.readonly })), h("ls-props-section", { key: '19166c37580711be5cbf51602e6fdfebc2e664ae', sectionTitle: dvI18n.t('fieldproperties.refname') }, h("input", { key: '96b43215952a905d1870dc85ad9b323634dd48a2', value: this.getValue('link'), placeholder: dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onInput: e => this.alter({ link: e.target.value }, 300), disabled: this.readonly })), h("ls-props-section", { key: '3310038dc7a28e863b34c778e3e1a8f7db7e941e', sectionTitle: dvI18n.t('fieldproperties.linktype'), sectionDescription: dvI18n.t('fieldproperties.linktypedescription') }, h("select", { key: '979ea4470288f616c3a20e0fb9279b43d7805218', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field", disabled: this.readonly }, h("option", { key: '36c9a9beaf18393c86ddf392bb73f0e48de5eb34', value: "0", selected: this.getValue('linkType') === '0' }, dvI18n.t('fieldproperties.linktypenoption')), h("option", { key: '9e652f27e8fa2d2b232e721f54e9da4bdd13fe9f', value: "1", selected: this.getValue('linkType') === '1' }, dvI18n.t('fieldproperties.linktypeoneofgroup')), h("option", { key: 'e1c980a85eb33f41ddea960cf67e00269a448f80', value: "2", selected: this.getValue('linkType') === '2' }, dvI18n.t('fieldproperties.linktypeaddtotal')), h("option", { key: '508f2e9bf1d5aa99d526312c6e2c3ac456707c60', value: "3", selected: this.getValue('linkType') === '3' }, dvI18n.t('fieldproperties.linktypeconditional')))), h("ls-props-section", { key: '19b6e927b0d23ac8c867f1ac664f897920eeb8f9', sectionTitle: dvI18n.t('fieldproperties.linkvalue'), sectionDescription: dvI18n.t('fieldproperties.linkvaluedescription') }, h("input", { key: '51e3641661d1b40e8b110029436c2a09fa46cb77', value: this.getValue('logicAction'), width: "30", placeholder: dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onChange: e => this.alter({ logicAction: e.target.value }), disabled: this.readonly }))))));
@@ -1212,6 +1248,8 @@ const LsFieldTypeSelect = class {
     disabled = false;
     /** Show mixed state when multi-select has different field types */
     mixed = false;
+    /** Pipe-delimited filter for allowed field types */
+    filtertoolbox = null;
     isOpen = false;
     fieldTypeChange;
     handleWindowClick(event) {
@@ -1230,21 +1268,21 @@ const LsFieldTypeSelect = class {
     }
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        const validTypes = getValidFieldTypes(this.roleTypes);
+        const validTypes = getValidFieldTypes(this.roleTypes).filter(t => this.filtertoolbox === null || this.filtertoolbox.split('|').includes(t));
         const displayLabel = this.mixed
             ? dvI18n.t('fieldproperties.mixed')
             : dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text');
-        return (h(Host, { key: '0da0866eb4b6bd18343587eaf132cab26717de96' }, h("div", { key: '8d33ebf8335771c8bf14116b0664b9abad29b6a4', class: "ls-dv-fieldtype-dropdown" }, h("div", { key: '673c5287584995100ed21a9be83bc87c4a41d592', class: "ls-dv-fieldtype-header", style: {
+        return (h(Host, { key: '6bfe8fdca902983b87999b331d0ab9e4348d8119' }, h("div", { key: 'd9ecf1411a4b353db022651b5312d2eed8581ce4', class: "ls-dv-fieldtype-dropdown" }, h("div", { key: '2d39319df63a4bd49117efb6f6597ca0acf4998f', class: "ls-dv-fieldtype-header", style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, h("div", { key: 'b1ffa32896bfb90b500822c95dffd7cd987f98c1', class: "ls-dv-fieldtype-inner" }, h("div", { key: '840d54ff98e4f5f2a359b10d2533f4b5019387ea', class: "ls-dv-fieldtype-icon", style: {
+            } }, h("div", { key: '0dc0422afef8b56b4eb126cf51d5d74eadd0b035', class: "ls-dv-fieldtype-inner" }, h("div", { key: 'e293fddbf13371be97cfae330245fc70a3d90fb6', class: "ls-dv-fieldtype-icon", style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, h("ls-icon", { key: '9fbf4829b98dad3f1cb422421757e42fbfef25af', name: this.mixed ? 'view-grid-icon' : getFieldIcon(this.fieldType), size: 20 })), h("span", { key: '2f354830eb5cd5c17cb46259cf4946e22fe8a822', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (h("button", { key: '807318518989e8b33fd5b2a7e1e1383bb2ae11c9', class: "ls-dv-fieldtype-btn", onClick: e => {
+            } }, h("ls-icon", { key: 'd70e7c8a2166ab9a28025fdea837d4ef2548a568', name: this.mixed ? 'view-grid-icon' : getFieldIcon(this.fieldType), size: 20 })), h("span", { key: 'fdac95009c85c06097d852de5e67c881614d22db', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (h("button", { key: '335160180754f0e4d7f3cb92b0dbf35700aa8ffe', class: "ls-dv-fieldtype-btn", onClick: e => {
                 e.stopPropagation();
                 this.toggleDropdown();
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('fieldproperties.changefieldtype') }, h("ls-icon", { key: 'a45d8d4afcf003134db6f99efa68402b4b3a699e', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (h("div", { key: 'e3d6ef482583d3f235416287f20d77e47446d05d', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (h("div", { class: `ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`, style: {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('fieldproperties.changefieldtype') }, h("ls-icon", { key: 'b301132f3002fb687f22afc745791e031f0130ba', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (h("div", { key: 'f8a2da27316feb75da093c9a6567dda9c491acc7', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (h("div", { class: `ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`, style: {
                 '--background-selected': color.s10,
                 '--check-icon-selected': color.s50,
             }, onClick: () => this.selectFieldType(type) }, h("div", { class: "ls-dv-fieldtype-item-icon", style: {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-CItPoq74.js';
-import { d as dvI18n } from './i18n-Dbp-hj8N.js';
+import { d as dvI18n } from './i18n-WVWIAGo_.js';
 import { F as FIELD_DEFAULTS } from './fieldDefaults-04cXI5GQ.js';
 import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
 import { a as undo, r as redo } from './history-xqZBqrca.js';
@@ -130,7 +130,7 @@ const LsLeftBar = class {
         return (h("div", { class: "ls-dv-field-properties-outer" }, h("div", { class: "ls-dv-properties-header" }, h("div", { class: "ls-dv-properties-header-icon" }, h("ls-icon", { name: "pre-filled-content-icon" })), h("h1", { class: "ls-dv-properties-header-title" }, dvI18n.t('viewer.fieldproperties')), h("button", { class: "ls-dv-tertiary-grey", onClick: e => {
                 this.clearSelected.emit();
                 e.preventDefault();
-            }, style: { borderRadius: '0.75rem' }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('viewer.closepropertiespanel') }, h("ls-icon", { name: "x-icon", size: 20 }))), h("ls-field-properties", { id: "my-field-panel", dataItem: this.selectedDataItems, template: this.template, readonly: this.template?.locked || false })));
+            }, style: { borderRadius: '0.75rem' }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('viewer.closepropertiespanel') }, h("ls-icon", { name: "x-icon", size: 20 }))), h("ls-field-properties", { id: "my-field-panel", dataItem: this.selectedDataItems, template: this.template, readonly: this.template?.locked || false, filtertoolbox: this.filtertoolbox })));
     }
     renderToolbox() {
         return (h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'ls-dv-toolbox' : 'ls-dv-hidden' }, h("div", { class: "ls-dv-editor-infobox" }, h("h2", { class: "ls-dv-toolbox-section-title" }, dvI18n.t('toolbox.title')), h("p", { class: "ls-dv-toolbox-section-description" }, dvI18n.t('toolbox.description'))), h("div", { class: "ls-dv-fields-box" }, this.signer > 0 && this.showTool('signature') && !this.checkType('APPROVER') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: dvI18n.t('toolbox.signature'), defaultHeight: FIELD_DEFAULTS['signature'].defaultHeight, defaultWidth: FIELD_DEFAULTS['signature'].defaultWidth, validation: 0, icon: "signature-icon", tooltip: dvI18n.t('toolbox.signaturetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'signature' })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "admin", formElementType: "auto sign", label: dvI18n.t('toolbox.autosign'), defaultHeight: FIELD_DEFAULTS['auto sign'].defaultHeight, defaultWidth: FIELD_DEFAULTS['auto sign'].defaultWidth, validation: 3000, icon: "auto-sign-icon", tooltip: dvI18n.t('toolbox.autosigntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'auto sign' })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: dvI18n.t('toolbox.text'), defaultHeight: FIELD_DEFAULTS['text'].defaultHeight, defaultWidth: FIELD_DEFAULTS['text'].defaultWidth, validation: 0, icon: "text-icon", tooltip: dvI18n.t('toolbox.texttooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'text' })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "signing date", label: dvI18n.t('toolbox.signingdate'), defaultHeight: FIELD_DEFAULTS['signing date'].defaultHeight, defaultWidth: FIELD_DEFAULTS['signing date'].defaultWidth, validation: 32, icon: "auto-date-icon", tooltip: dvI18n.t('toolbox.signingdatetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'signing date' })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "date", label: dvI18n.t('toolbox.date'), defaultHeight: FIELD_DEFAULTS['date'].defaultHeight, defaultWidth: FIELD_DEFAULTS['date'].defaultWidth, validation: 4, icon: "calender-icon", tooltip: dvI18n.t('toolbox.datetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'date' })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "text", formElementType: "email", label: dvI18n.t('toolbox.email'), defaultHeight: FIELD_DEFAULTS['email'].defaultHeight, defaultWidth: FIELD_DEFAULTS['email'].defaultWidth, validation: 1, icon: "at-symbol-icon", tooltip: dvI18n.t('toolbox.emailtooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'email' })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: dvI18n.t('toolbox.initials'), defaultHeight: FIELD_DEFAULTS['initials'].defaultHeight, defaultWidth: FIELD_DEFAULTS['initials'].defaultWidth, validation: 2000, icon: "initials-icon", tooltip: dvI18n.t('toolbox.initialstooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'initials' })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "text", formElementType: "number", label: dvI18n.t('toolbox.number'), defaultHeight: FIELD_DEFAULTS['number'].defaultHeight, defaultWidth: FIELD_DEFAULTS['number'].defaultWidth, validation: 50, icon: "hashtag-icon", tooltip: dvI18n.t('toolbox.numbertooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'number' })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "text", formElementType: "dropdown", label: dvI18n.t('toolbox.dropdown'), defaultHeight: FIELD_DEFAULTS['dropdown'].defaultHeight, defaultWidth: FIELD_DEFAULTS['dropdown'].defaultWidth, validation: 20, icon: "dropdown-icon", tooltip: dvI18n.t('toolbox.dropdowntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'dropdown' })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "text", formElementType: "checkbox", label: dvI18n.t('toolbox.checkbox'), defaultHeight: FIELD_DEFAULTS['checkbox'].defaultHeight, defaultWidth: FIELD_DEFAULTS['checkbox'].defaultWidth, validation: 25, icon: "check-icon", tooltip: dvI18n.t('toolbox.checkboxtooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'checkbox' })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "text", formElementType: "regular expression", label: dvI18n.t('toolbox.regex'), defaultHeight: FIELD_DEFAULTS['regular expression'].defaultHeight, defaultWidth: FIELD_DEFAULTS['regular expression'].defaultWidth, validation: 93, icon: "code-icon", tooltip: dvI18n.t('toolbox.regextooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'regular expression' })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "text", formElementType: "file", label: dvI18n.t('toolbox.file'), defaultHeight: FIELD_DEFAULTS['file'].defaultHeight, defaultWidth: FIELD_DEFAULTS['file'].defaultWidth, validation: 74, icon: "upload-icon", tooltip: dvI18n.t('toolbox.filetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'file' })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "text", formElementType: "drawn field", label: dvI18n.t('toolbox.drawn'), defaultHeight: FIELD_DEFAULTS['drawn field'].defaultHeight, defaultWidth: FIELD_DEFAULTS['drawn field'].defaultWidth, validation: 90, icon: "pencil-icon", tooltip: dvI18n.t('toolbox.drawntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'drawn field' })))));
@@ -364,7 +364,7 @@ const LsSelectMenu = class {
 };
 LsSelectMenu.style = lsSelectMenuCss();
 
-const version = "1.0.0";
+const version = "1.0.2";
 
 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}`;
 
@@ -570,7 +570,7 @@ const LsStatusbar = class {
         this.editor._skipHistory = true;
         this.editor.mutate.emit(mutations);
     }
-    componentDidLoad() {
+    componentWillLoad() {
         this.zoom = this.editor.zoom;
     }
     onPageChange() {
@@ -597,9 +597,9 @@ const LsStatusbar = class {
     }
     render() {
         const isPreview = this.mode === 'preview';
-        return (h(Host, { key: '850570e660ef855096890b61f723a3af0b85696f', class: { 'ls-dv-statusbar-preview': isPreview } }, !isPreview && (h("div", { key: '7d90b8f8a626fd40759faa7b80af526d476c00ca', class: 'ls-dv-controls-bar' }, h("div", { key: 'f90005dfe6db383c5f3a86eb80ba22fd50fd6d75', class: 'ls-dv-status-bar-section' }, h("button", { key: '4cf22bf1a4e168dd6c371623ec43ed0f239fdea5', onClick: () => this.applyUndo(), id: "undo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.undo') }, h("ls-icon", { key: '1026f930072884021150e19335d067b5c28f0897', name: "undo-icon", size: 18 })), h("button", { key: 'd55a9b5f8fa65656d9324c400c9cbf99b3aa62c7', onClick: () => this.applyRedo(), id: "redo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.redo') }, h("ls-icon", { key: '85cb9286773456cd84b8c6e4fcc29d6464b987d5', name: "redo-icon", style: { transform: "scale(-1, 1)", marginLeft: '0.25rem' }, size: 18 }))))), h("div", { key: '0bdd29778024891b709e729fd3469889d514f557', class: { 'ls-dv-controls-bar': true, 'ls-dv-page-nav': true } }, h("div", { key: 'd4b1c2e7dd3c9d786b926c4b040e15ed13ceee91', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: 'ec19faf5bbff50593d7ce72e886831dd479de505', onClick: () => {
+        return (h(Host, { key: '7035c4cdf76ac09b909a098d635dd075d7d9388d', class: { 'ls-dv-statusbar-preview': isPreview } }, !isPreview && (h("div", { key: '845fe27459a05b96b06c4025c2f8090b75fee027', class: 'ls-dv-controls-bar' }, h("div", { key: 'fd7e683e2e96e3da8cab7ba9626e9c64c70d62ad', class: 'ls-dv-status-bar-section' }, h("button", { key: 'b015f095a886f8fd41318df2ad1ac9cb4e82ee7c', onClick: () => this.applyUndo(), id: "undo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.undo') }, h("ls-icon", { key: '8ff999de40c5acd0c1cd8dab5858ae8c0b85af99', name: "undo-icon", size: 18 })), h("button", { key: '5019459ef97755347a26d2dd6bc1c5d46fed1506', onClick: () => this.applyRedo(), id: "redo-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.redo') }, h("ls-icon", { key: '750526932ff82720ee62b3727b35717621031d1b', name: "redo-icon", style: { transform: "scale(-1, 1)", marginLeft: '0.25rem' }, size: 18 }))))), h("div", { key: 'a1f56781157ad515423a25bcb02c7513a501a26e', class: { 'ls-dv-controls-bar': true, 'ls-dv-page-nav': true } }, h("div", { key: '4b2825b2d93deb7d9976c1f67312053d8fbd6b71', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '19128a07beda58b596a4d838793888074d53cc50', onClick: () => {
                 this.editor.pagePrev();
-            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === 1 ? dvI18n.t('statusbar.nopreviouspage') : dvI18n.t('statusbar.previouspage') }, h("ls-icon", { key: '2b7ab49333a3319861c27167ec8907a7b9037fea', name: "chevron-left-icon" })), h("button", { key: 'a2cae9287b7ea7a1a79867efe352c113b74531a1', 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 ? dvI18n.t('statusbar.nopreviouspage') : dvI18n.t('statusbar.previouspage') }, h("ls-icon", { key: 'cd90982d3f1b3f1aabc9f9079a6c065cf60cce59', name: "chevron-left-icon" })), h("button", { key: '570e47ef8164220b2d9aba31e2952c8036c6f99d', 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));
@@ -607,13 +607,13 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.pageMenuClickHandler, true);
                 }
-            } }, this.page, " / ", this.pageCount), this.showPageMenu && (h("div", { key: 'e22d8f4e2966760be7d223b72c736baab67f6a5b', id: "ls-page-menu", class: "ls-dv-zoom-menu ls-dv-page-menu" }, Array.from({ length: this.pageCount }, (_, i) => i + 1).map(p => (h("button", { class: { 'ls-dv-zoom-menu-item': true, 'active': this.page === p }, onClick: () => {
+            } }, this.page, " / ", this.pageCount), this.showPageMenu && (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 => (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 && h("ls-icon", { name: "check-icon", size: 14 })))))), h("button", { key: '6e50c102a63cca9895c4801824ad409542912e76', onClick: () => {
+            } }, p, this.page === p && h("ls-icon", { name: "check-icon", size: 14 })))))), h("button", { key: '7b92c7db1a2470124a797af3b69d53d78254080d', 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 ? dvI18n.t('statusbar.nonextpage') : dvI18n.t('statusbar.nextpage') }, h("ls-icon", { key: 'cdcbb710b1e4dd1eb3d4690097f6d2c434472141', name: "chevron-right-icon" })))), h("div", { key: 'e032f6f6853a184f781d5058e3b30d1c3278b945', class: 'ls-dv-status-bar-group' }, h("div", { key: 'a6484a12bee7abade0d6037e8ca1ce081476fb31', class: 'ls-dv-controls-bar', style: { position: 'relative' } }, h("div", { key: 'b1e9ebc51f79716d5ffed89ba42fab3f8d730b4f', class: 'ls-dv-status-bar-section' }, h("button", { key: '976841fb8fb4c51f5a0837272370e79192cb8098', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.zoomout') }, h("ls-icon", { key: 'ba6b1b3e13036e69f0532c1fb4588e775cd05015', name: "zoom-out-icon" })), h("button", { key: '2f5d208fef0bdf6cdd97e6ee881d3ba19b52df35', 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 ? dvI18n.t('statusbar.nonextpage') : dvI18n.t('statusbar.nextpage') }, h("ls-icon", { key: 'bda8988bbd778bbc16f75d2d7299987d9e550753', name: "chevron-right-icon" })))), h("div", { key: '88ad63ca844b8c7ca543fc9cad995eec8ae4cb91', class: 'ls-dv-status-bar-group' }, h("div", { key: '72f15c5e488a8b0e7cb214e01ac53dcb220fe592', class: 'ls-dv-controls-bar', style: { position: 'relative' } }, h("div", { key: '5e3dae4cd7ebf60b57e99995b75a4380729ded88', class: 'ls-dv-status-bar-section' }, 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": dvI18n.t('statusbar.zoomout') }, h("ls-icon", { key: '9ce1369ee910dfd32745f729e7dcc6208641867b', name: "zoom-out-icon" })), h("button", { key: '453fb7ba30e350a151d2b66d0a79c70736f56d3a', 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));
@@ -621,11 +621,11 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.zoomMenuClickHandler, true);
                 }
-            } }, Math.round(this.zoom * 100), "%"), this.showZoomMenu && (h("div", { key: '90076b8cd6a8c1e6b103aa45f4577a131248d3a0', 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 => (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 && (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 => (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) && h("ls-icon", { name: "check-icon", size: 14 })))))), h("button", { key: '733ac987c5ab28d41ac8e3f10bfcbf084f651b9d', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.zoomin') }, h("ls-icon", { key: '20bf794a5f087254695c17a848797edf4475f929', name: "zoom-in-icon" }))), !isPreview && (h("div", { key: '1b9515ede8e034de75b0bd359b42e22de7ad93c4', class: 'ls-dv-status-bar-section' }, h("button", { key: '63fce59dceebe2a1e87f605c8802accfa9ce3fb8', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitwidth') }, h("ls-icon", { key: 'e3e4e32202f93561d07d15c6fb18bd4fa1f1685f', name: "fit-width-icon" })), h("button", { key: '898496c9c3cddb30210bf2584c76d2976413fa06', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitheight') }, h("ls-icon", { key: 'c0ef64496ddcdb2948078f4ec5f82f1e00931cd8', name: "fit-height-icon" })))), h("div", { key: 'a76d39b64f9d1c738c397a6be38ed6c9ada904e4', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 ? { display: 'none' } : {} }, h("button", { key: '8b4d4f848bd62c81d9704d12e791c83052ebe960', onClick: () => {
+            } }, Math.round(level * 100), "%", Math.round(this.zoom * 100) === Math.round(level * 100) && h("ls-icon", { name: "check-icon", size: 14 })))))), 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": dvI18n.t('statusbar.zoomin') }, h("ls-icon", { key: '068c11f60c6f720f35edb708e576c4aa2ea088a2', name: "zoom-in-icon" }))), !isPreview && (h("div", { key: '836b1aeba9b7889ea5179abb85efab92aab47bf6', class: 'ls-dv-status-bar-section' }, h("button", { key: '307f97758525ea29151c6e35e4f303b9da6dd226', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitwidth') }, h("ls-icon", { key: '42ceb3d52ad6d31c38dc473317aa6b23af22bcc9', name: "fit-width-icon" })), h("button", { key: 'ee95d25f126735b2795813f2399eac7edf5c0420', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitheight') }, h("ls-icon", { key: '04ddc66e1fbcadc80d63e2afd3ade9faf8eac8bc', name: "fit-height-icon" })))), h("div", { key: '50e0ea122a95e934f85cd33b1cf0df1eaaecaac3', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 ? { display: 'none' } : {} }, h("button", { key: '59293ddd95468c0f01849de3fdb75ba8664b572c', onClick: () => {
                 this.showThumbnails = !this.showThumbnails;
                 if (this.showThumbnails) {
                     requestAnimationFrame(() => {
@@ -638,7 +638,7 @@ const LsStatusbar = class {
                 else {
                     document.removeEventListener('click', this.outsideClickHandler);
                 }
-            }, id: "page-thumbnails-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.pagethumbnails') }, h("ls-icon", { key: '90aba253916c9b40c5d61c7eb16ca0499d1efdb2', name: !this.showThumbnails ? 'side-panel-open-right-icon' : 'side-panel-close-right-icon', size: 18 }))), this.showThumbnails && (h("div", { key: 'f33b0a1f6f00c778a92945471a37dd64358b6b45', class: "ls-dv-thumbnail-popover" }, h("div", { key: 'c7d208e0602b456a41d54f579b4251e2105bd54e', id: "ls-thumbnail-container", class: "ls-dv-thumbnail-grid" })))), !isPreview && h("ls-helper-bar", { key: 'f05f84ad369b42a7171e1729c1ba1c6e6fea46cc' }), h("span", { key: 'b06f80c9afab9eb05f34d889432d8bd4e1e8ef74', class: "ls-dv-version" }, "v", version), h("ls-tooltip", { key: 'a50352b2b7dc18e40528a1dde95d73cb38f79f5e', tooltipId: "ls-dv-tooltip" }), h("slot", { key: 'a6494641b9941c09a8b03c58297df284929bb501' }))));
+            }, id: "page-thumbnails-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.pagethumbnails') }, h("ls-icon", { key: '57f1da537f3909bc72933d7f9e5bd61495ab0f18', name: !this.showThumbnails ? 'side-panel-open-right-icon' : 'side-panel-close-right-icon', size: 18 }))), this.showThumbnails && (h("div", { key: 'e6936f45285b825ed96b56e9316754082558b757', class: "ls-dv-thumbnail-popover" }, h("div", { key: 'edfd8ba1e8108c0aa9252aa78c7b6a268ba7e006', id: "ls-thumbnail-container", class: "ls-dv-thumbnail-grid" })))), !isPreview && h("ls-helper-bar", { key: 'c883f32c7a33b3f08006e972ce0d9698f04e8a4f' }), h("span", { key: '613689fe8f313f61a0cd104479c0e22d1105346d', class: "ls-dv-version" }, "v", version), h("ls-tooltip", { key: '7a4e67c40ed2e46dea34444ba9a36a165816e809', tooltipId: "ls-dv-tooltip" }), h("slot", { key: '8f3dbe04c66ff9192f62e8f16a3bf5c5adb9fe1e' }))));
     }
     static get watchers() { return {
         "page": ["onPageChange"]

package/dist/esm/ls-compose-manager.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-CItPoq74.js';
-import { d as dvI18n } from './i18n-Dbp-hj8N.js';
+import { d as dvI18n } from './i18n-WVWIAGo_.js';
 
 const lsComposeManagerCss = () => `:host{display:block}`;
 

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CItPoq74.js';
-import { d as dvI18n } from './i18n-Dbp-hj8N.js';
-import { o as oob, m as moveField, u as updateTemplate, r as recalculateCoordinates, s as syncRoles, b as matchData, g as getInputType, v as validate, c as getApiType, d as addField, e as getTemplate } from './editorUtils-BZZzuy9j.js';
+import { d as dvI18n } from './i18n-WVWIAGo_.js';
+import { o as oob, m as moveField, u as updateTemplate, r as recalculateCoordinates, s as syncRoles, b as matchData, v as validate, g as getInputType, c as getApiType, d as addField, e as getTemplate } from './editorUtils-DcBt3fOj.js';
 import { D as DEFAULT_FONT_SIZE$1, a as DEFAULT_FONT_NAME, F as FIELD_DEFAULTS } from './fieldDefaults-04cXI5GQ.js';
-import { c as copySelected, a as cutSelected, p as pasteClipboard, u as updateSelectionBox, t as toolboxDragStart, m as mouseClick, b as mouseDown, d as mouseMove, e as mouseUp, f as mouseDoubleClick } from './mouseHandlers-B8kiiTmD.js';
+import { c as copySelected, a as cutSelected, p as pasteClipboard, u as updateSelectionBox, t as toolboxDragStart, m as mouseClick, b as mouseDown, d as mouseMove, e as mouseUp, f as mouseDoubleClick } from './mouseHandlers-CUHWhJed.js';
 import { r as redo, a as undo, b as recordMutations } from './history-xqZBqrca.js';
 import './defaultPalette-CwCWCxsI.js';
 
@@ -30469,7 +30469,7 @@ async function checkWitness(defaultExperience) {
     await Promise.all(witActions);
 }
 
-const lsDocumentViewerCss = () => `@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}ls-editor-field{box-sizing:content-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:column;width:100%;height:100vh;position:relative;overflow:hidden;container-type:size;font-family:var(--font-family, "IBM Plex Sans", sans-serif);font-size:var(--text-sm);margin:0px;padding:0px}:host *{scrollbar-width:none}:host *::-webkit-scrollbar{display:none}.ls-dv-left-slot-wrapper{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);z-index:2000}slot{justify-content:center;align-items:center;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.ls-dv-right-slot-wrapper{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);z-index:2000}.ls-dv-validation-tag-wrapper{position:absolute;top:1rem;right:1rem;z-index:2000;display:flex;width:100%;align-items:center;justify-content:center;padding:0.375rem;gap:0.5rem;width:fit-content;border-radius:1.25rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #ffffff);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.ls-dv-page-loader{position:absolute;display:flex;top:0;left:0;align-items:center;justify-content:center;background-color:rgba(251, 251, 251, 0.3);backdrop-filter:blur(2px);height:100%;width:100%;z-index:4000}.ls-dv-custom-loader-slot{position:absolute;top:0;left:0;height:100%;width:100%;z-index:3999}#pdf-canvas{top:0px;left:0px;width:6.25rem;height:6.25rem;box-shadow:0 0.5rem 2rem 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;overflow:hidden}.ls-dv-document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100%;overflow:scroll;padding:5rem 23.75rem 2rem 23.75rem;position:relative;user-select:none;-webkit-user-select:none}.ls-dv-document-frame-wrapper--preview{align-items:center;padding:2rem}.ls-dv-select-menu-position{position:absolute;top:0;left:calc(100% + 0.5rem);z-index:999}.ls-dv-select-menu-floating{z-index:999;pointer-events:auto}#ls-document-frame{position:relative;height:98cqh;margin-right:auto;margin-left:auto}.ls-dv-prev-button{position:relative;bottom:1.875rem}.ls-dv-next-button{position:relative;bottom:1.875rem}.ls-dv-field-box{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:color-mix(in srgb, var(--primary-20, #c7ddff) 20%, transparent);border:1px dashed var(--primary-50, #5185ff)}#ls-drag-selector{position:absolute;visibility:hidden;background-color:color-mix(in srgb, var(--primary-20, #c7ddff) 20%, transparent);border:1px dashed var(--primary-50, #5185ff)}#ls-editor-form{display:flex;width:100%;height:calc(100cqh - 2.25rem);min-height:0;position:relative;overflow:hidden;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.ls-dv-hidden{visibility:hidden;display:none;width:0px}.ls-dv-page-header{position:relative;display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.ls-dv-header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.ls-dv-header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.ls-dv-expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6f7176);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}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)}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}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].ls-dv-indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type=checkbox]:checked::after{content:"";position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type=checkbox].ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type=checkbox]:checked:hover,input[type=checkbox].ls-dv-indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type=checkbox]:hover{border:1px solid #9ca3af}input[type=checkbox]:focus,input[type=checkbox]:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type=checkbox]:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type=checkbox]:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:var(--primary-60, #4456f6)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);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-error-state{position:absolute;display:flex;top:0;left:0;align-items:center;justify-content:center;height:100%;width:100%;z-index:4000;background-color:var(--gray-10, #f7f8fa)}.ls-dv-error-card{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2rem;border-radius:0.75rem;background:white;box-shadow:0 0.25rem 1rem rgba(0, 0, 0, 0.08);max-width:24rem;text-align:center;color:var(--gray-80, #6f7176)}.ls-dv-error-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-weight:600;line-height:1.5rem}.ls-dv-error-message{color:var(--gray-80, #6f7176);font-size:0.875rem;line-height:1.25rem}`;
+const lsDocumentViewerCss = () => `*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:column;width:100%;height:100vh;position:relative;overflow:hidden;container-type:size;font-family:var(--font-family, "IBM Plex Sans", sans-serif);font-size:var(--text-sm);margin:0px;padding:0px}:host *{scrollbar-width:none}:host *::-webkit-scrollbar{display:none}.ls-dv-left-slot-wrapper{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);z-index:2000}slot{justify-content:center;align-items:center;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.ls-dv-right-slot-wrapper{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);z-index:2000}.ls-dv-validation-tag-wrapper{position:absolute;top:1rem;right:1rem;z-index:2000;display:flex;width:100%;align-items:center;justify-content:center;padding:0.375rem;gap:0.5rem;width:fit-content;border-radius:1.25rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #ffffff);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.ls-dv-page-loader{position:absolute;display:flex;top:0;left:0;align-items:center;justify-content:center;background-color:rgba(251, 251, 251, 0.3);backdrop-filter:blur(2px);height:100%;width:100%;z-index:4000}.ls-dv-custom-loader-slot{position:absolute;top:0;left:0;height:100%;width:100%;z-index:3999}#pdf-canvas{top:0px;left:0px;width:6.25rem;height:6.25rem;box-shadow:0 0.5rem 2rem 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;overflow:hidden}.ls-dv-document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100%;overflow:scroll;padding:5rem 23.75rem 2rem 23.75rem;position:relative;user-select:none;-webkit-user-select:none}.ls-dv-document-frame-wrapper--preview{align-items:center;padding:2rem}.ls-dv-select-menu-position{position:absolute;top:0;left:calc(100% + 0.5rem);z-index:999}.ls-dv-select-menu-floating{z-index:999;pointer-events:auto}#ls-document-frame{position:relative;height:98cqh;margin-right:auto;margin-left:auto}.ls-dv-prev-button{position:relative;bottom:1.875rem}.ls-dv-next-button{position:relative;bottom:1.875rem}.ls-dv-field-box{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:color-mix(in srgb, var(--primary-20, #c7ddff) 20%, transparent);border:1px dashed var(--primary-50, #5185ff)}#ls-drag-selector{position:absolute;visibility:hidden;background-color:color-mix(in srgb, var(--primary-20, #c7ddff) 20%, transparent);border:1px dashed var(--primary-50, #5185ff)}#ls-editor-form{display:flex;width:100%;height:calc(100cqh - 2.25rem);min-height:0;position:relative;overflow:hidden;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.ls-dv-hidden{visibility:hidden;display:none;width:0px}.ls-dv-page-header{position:relative;display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.ls-dv-header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.ls-dv-header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.ls-dv-expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6f7176);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}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)}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}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].ls-dv-indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type=checkbox]:checked::after{content:"";position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type=checkbox].ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type=checkbox]:checked:hover,input[type=checkbox].ls-dv-indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type=checkbox]:hover{border:1px solid #9ca3af}input[type=checkbox]:focus,input[type=checkbox]:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type=checkbox]:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type=checkbox]:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:var(--primary-60, #4456f6)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);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-error-state{position:absolute;display:flex;top:0;left:0;align-items:center;justify-content:center;height:100%;width:100%;z-index:4000;background-color:var(--gray-10, #f7f8fa)}.ls-dv-error-card{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2rem;border-radius:0.75rem;background:white;box-shadow:0 0.25rem 1rem rgba(0, 0, 0, 0.08);max-width:24rem;text-align:center;color:var(--gray-80, #6f7176)}.ls-dv-error-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-weight:600;line-height:1.5rem}.ls-dv-error-message{color:var(--gray-80, #6f7176);font-size:0.875rem;line-height:1.25rem}`;
 
 // Polyfill URL.parse for older browsers (used by pdfjs-dist)
 if (typeof URL.parse !== 'function') {
@@ -30788,7 +30788,12 @@ const LsDocumentViewer = class {
                 }
                 matchData.bind(this)(result);
             })
-                .then(() => this.syncChange(me)));
+                .then(() => this.syncChange(me))
+                .catch(() => {
+                // Revalidate against current template state on API failure
+                this.validationErrors = validate.bind(this)(this._template);
+                this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
+            }));
             Promise.all(promises).finally(() => {
                 requestAnimationFrame(() => {
                     this.isMutating = false;
@@ -30800,6 +30805,7 @@ const LsDocumentViewer = class {
         const details = event.detail;
         if (!details || !Array.isArray(details) || details.length === 0)
             return;
+        event.stopPropagation();
         const source = event.target;
         const isFromEditorField = source?.tagName === 'LS-EDITOR-FIELD';
         for (const detail of details) {
@@ -30821,6 +30827,19 @@ const LsDocumentViewer = class {
                 }
             }
         }
+        // Optimistic validation: run validate against a temp template with the updated element
+        const optimisticTemplate = {
+            ...this._template,
+            elementConnection: {
+                ...this._template.elementConnection,
+                templateElements: this._template.elementConnection.templateElements.map(el => {
+                    const updated = details.find(d => d.action === 'update' && d.data?.id === el.id);
+                    return updated ? { ...el, ...updated.data } : el;
+                }),
+            },
+        };
+        this.validationErrors = validate.bind(this)(optimisticTemplate);
+        this.validate.emit({ valid: this.validationErrors.length === 0, errors: this.validationErrors });
     }
     handleFieldTypeSelected(event) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -31354,12 +31373,12 @@ const LsDocumentViewer = class {
             return false;
     }
     render() {
-        return (h(Host, { key: '41e672088615bee6f6737cb80eff4ee35b173467' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: 'f29dc2072c23799b34d1ddee1827a582d8681a37', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: 'a281c5e92a6b7f0fb8940bc3715ecb5f2869c186', size: 200, colour: "var(--primary-60)" })), h("div", { key: '16aba0dac77d23ea8761400f59edfd37f0f7c081', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '5bae3038d8cb3287315750bbf1b62b739f7531b9', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: 'f73ef0e29aed7fd77259d28f521a9db644a33c74' }))), this.error && (h("div", { key: '623fe0925069b6d46e9f88bf59eb0765c7146b26', class: "ls-dv-error-state" }, h("div", { key: 'df454ea032270dff63e8b942c9b695e2c0d1855e', class: "ls-dv-error-card" }, h("ls-icon", { key: '7a8e1c4e98b384b5cf99582a98f6a579939cd075', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: '3fd349bd710b71504530622b556f8b6ee15ac093', class: "ls-dv-error-title" }, this.errorTitle), h("p", { key: 'f236120e11304f019dd6538177e6dfdd2520d8fe', class: "ls-dv-error-message" }, this.error)))), h("div", { key: 'b751f6a1df03c3c5d0f758cb25b4854b7c5e6b45', class: "ls-dv-page-header" }, h("div", { key: '1b3fb6792b6e0c4ccf692ed9ecf0c88754039d2a', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '4fba280f158e162dff7895c695faeaf51652eba3', name: "left-button" })), h("div", { key: '594df0aaa106b27b1c3145077a914ded552641b9', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: '0574656c0701aebd03608bb3cf5b922a129c9321', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '4e50bf9b0f232b76841706933c879dfcebd9e6e8' }, h("span", { key: '43aa31c1e03fd422f38b4e2e32f137067188eaf9', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: 'e83720b695e2ee7415d90b7028e8a10378c840bf' }, "/"), h("span", { key: '6eb71539ea44ffbf9969e8fe2ad02ba6ede78c4f', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '20aba0aeabe295f8b4774c13d94c9dc1a049a58a', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '5c02b5c7feb8f61ca4e9a17a12eb1d627e389439', name: "top-bar" })))), h("form", { key: 'd2a745066e9f20cf2a934f6ee2ccf28f1350b02d', id: "ls-editor-form" }, h("ls-left-bar", { key: '5c272efb8f035cb44be637a8813d307a2ec8c7a8', mode: this.mode, selected: this.selected, manager: this.manager, signer: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, recipients: this._recipients, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, displayTable: this.displayTable, selectedDataItems: this.selectedDataItems, busy: this.isMutating, onManagerChange: e => this.handleManagerChange(e.detail), onClearSelected: () => {
+        return (h(Host, { key: '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: () => {
                 this.unselect();
                 const toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
                 if (toolbar)
                     toolbar.dataItem = [];
-            } }, h("slot", { key: '212da412ab70117a08259e53c5ab1d3391a36bab', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: 'b0bbfcaea77e480826e48eb4ca1ec7e94dd73b80', 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: '338b5189ac5ebef752e6148b227f97e1af32fe5a', id: "ls-mid-area" }, h("div", { key: '9e9783aa5f9460103208ae739ed9c13d4a9a82a9', class: { 'ls-dv-document-frame-wrapper': true, 'ls-dv-document-frame-wrapper--preview': this.mode === 'preview' }, id: "document-frame-wrapper" }, h("div", { key: 'c3adae01095c64df979ed0b42273bcfeb726ccb3', id: "ls-document-frame" }, h("canvas", { key: '0065d1cea2c6a1260e0bad58c85af917497148c1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '00c3a6e99cba57dbf7ddd135879b326741399dc0', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: 'b80f50fc1c914dc98cea6dacc17479268331f032', id: "ls-box-selector" }), h("div", { key: 'f41210934ca5cfc3d7317bf08f2bd190529e8229', id: "ls-drag-selector" }), this.mode !== 'preview' && !this._template?.locked && !this.isLoading && this._template?.elementConnection?.templateElements?.length > 0 && (h("ls-select-menu", { key: 'f6e4e0f23a1588f33f86d69a355a0bc39268985f', 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: '6feeeff4b2b0876fdcb72a9042f9aafe29d3441c', class: "ls-dv-select-menu-floating", selected: this.selected, pageNum: this.pageNum, editor: this, floating: true })))), h("ls-statusbar", { key: '732d065b7a2ddb9cb00bd9d06968689d0b8f00cc', editor: this, page: this.pageNum, pageCount: this.pageCount, mode: this.mode }), this.mode === 'editor' && (h("div", { key: 'bb356f7ad189d899f60c5b126703df1dbc31871c', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: 'f3e66fc7762ba7427ae5d6d67dc514c14d303888', validationErrors: this.validationErrors }), h("slot", { key: 'be31427187414cb3d33f30b769446889f0bff990', name: "next-button" })))))), h("ls-tooltip", { key: 'a1ee3e98fae872db295fb358bbc45334e4376e44', tooltipId: "ls-dv-tooltip" })));
+            } }, 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" })));
     }
     static get watchers() { return {
         "language": ["languageChanged"],