legalesign-document-viewer 1.0.0 → 1.0.2

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-DFeU0FNc.js');
 var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
-var i18n = require('./i18n-Cm3SP-DJ.js');
+var i18n = require('./i18n-e8JieHV6.js');
 var clsx = require('./clsx-BtxeOLZW.js');
-var editorUtils = require('./editorUtils-ClBh8Wv8.js');
+var editorUtils = require('./editorUtils-CRCLbYrX.js');
 var index$1 = require('./index-D4CLu1QR.js');
 var defaultFieldLabels = require('./defaultFieldLabels-BUxtUsF1.js');
 var defaultFieldIcons = require('./defaultFieldIcons-CQbunrYl.js');
@@ -147,7 +147,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',
@@ -247,6 +247,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) {
@@ -292,13 +296,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;
@@ -353,6 +363,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') {
@@ -367,8 +384,10 @@ const LsEditorField = class {
         this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
         this.update.emit([{ action: 'delete', data: this.dataItem }]);
     };
-    componentDidLoad() {
+    componentWillLoad() {
         this.valueError = editorUtils.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) {
@@ -467,35 +486,45 @@ const LsEditorField = class {
             ? 'var(--red-50, #FF5C56)'
             : defaultPalette.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 (index.h(index.Host, { key: '8e9426287de57ff4921ce7e898a869398adde655', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: 'c560675018f1867fb2df40f44b95ccc220cf6257', class: {
+        return (index.h(index.Host, { key: '69d421bcf112299e4454b1f0d7e19f023c24eba3', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '2132f3425a824952bc1c0a94df36c5ec5d543a53', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (index.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' && (index.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' && (index.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' && (index.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() ? (index.h("input", { id: "editing-input", class: "ls-dv-date-field-input", type: "date", style: { color: `${defaultPalette.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 ? (index.h("input", { id: "editing-input", class: "ls-dv-date-field-input ls-dv-date-field-active", type: "date", "aria-label": i18n.dvI18n.t('toolbox.date'), style: { color: `${defaultPalette.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;
                 index$1.forceCloseDatePicker(input);
-            } })) : (index.h("textarea", { id: "editing-input", class: this.isEditing ? 'ls-dv-editor-field-editable' : 'ls-dv-hidden-field', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.dataItem?.value, placeholder: i18n.dvI18n.t(this.getFieldTypeKey()), rows: 1, onInput: e => {
+            }, onBlur: () => {
+                this.isEditing = false;
+            }, ref: el => {
+                if (el) {
+                    requestAnimationFrame(() => {
+                        el.focus();
+                        el.showPicker?.();
+                    });
+                }
+            } })) : null) : (index.h("textarea", { id: "editing-input", class: this.isEditing ? 'ls-dv-editor-field-editable' : 'ls-dv-hidden-field', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.dataItem?.value, placeholder: i18n.dvI18n.t(this.getFieldTypeKey()), rows: 1, onInput: e => {
                 const el = e.target;
                 el.style.height = 'auto';
                 el.style.height = el.scrollHeight + 'px';
@@ -508,9 +537,9 @@ const LsEditorField = class {
                         el.style.height = el.scrollHeight + 'px';
                     });
                 }
-            } })), index.h("div", { key: 'd7ee15ab42dcc2226f1dbe48b00965b04749b9fe', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, index.h("span", { key: '12a7f963f4a7553d087577ebcec3701d75af0d92', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
+            } })), index.h("div", { key: 'e9fa09079c0a79d48689e250eac9d0920c61b679', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, index.h("span", { key: '4bb8e6d406a70926c0ad037f6d22a91c7532a4eb', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
             ? this.getCheckboxSymbol()
-            : this.dataItem?.value || i18n.dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (index.h("div", { key: '7fb009c332e4bad62c59a5369dfe6b485a9b7fd5', style: {
+            : this.dataItem?.value || i18n.dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (index.h("div", { key: '14f10072270d2155b5db94c3ffeaa7867259a6b5', style: {
                 position: 'absolute',
                 background: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -522,7 +551,7 @@ const LsEditorField = class {
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (index.h("p", { key: '3b6017817f8d3129acb427a564a41fe202ca1f70', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (index.h("p", { key: 'de3107a8e0529f9878b084a9b9ca78cc88117199', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -533,7 +562,7 @@ const LsEditorField = class {
                 textOverflow: 'ellipsis',
                 maxWidth: `${10 * zoomValue}rem`,
                 fontFamily: 'sans-serif',
-            } }, i18n.dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (index.h("div", { key: '19a9fde506d26a3e4d75f38d8d4ad0d5d126b458', class: "resize-handles" }, index.h("div", { key: '900a3de272a7ccd81383747564ac6fc944a1ea2a', class: "resize-handle handle-e" }), index.h("div", { key: '97b0e302ba3c06e0332864d6587a1f5c5ca5346a', class: "resize-handle handle-s" }), index.h("div", { key: '7ea01bf7b7a88dac5a0706928f28d3953cebb012', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (index.h("button", { key: '266be9a46d26ef058853dd966d298d2d26f96fe0', class: 'ls-dv-x-button', style: {
+            } }, i18n.dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (index.h("div", { key: '7634c594ac826f92c4ac4358583e50e7ea82ef11', class: "resize-handles" }, index.h("div", { key: 'b0ff296db4fbc7f6c6d5d42369961b45e7fddf6d', class: "resize-handle handle-e" }), index.h("div", { key: '0915ee6760657bf8acd4512f4fa56c689239f99e', class: "resize-handle handle-s" }), index.h("div", { key: '49e9a7ed9cf23fdf155b23cbab370b26c5231274', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (index.h("button", { key: 'ce655a363c3bdc85c7a7015b981ed13630f49e16', class: 'ls-dv-x-button', style: {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -542,7 +571,7 @@ const LsEditorField = class {
                 lineHeight: `${0.75 * zoomValue}rem`,
                 fontSize: `${0.75 * zoomValue}rem`,
                 ...(this.dataItem?.formElementType === 'checkbox' ? { transform: `translate(75%, -75%)` } : {}),
-            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: 'b01ecd2b0b553512cd83c326444d35bb2c0e8496', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
+            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: '7fe51c2ef42fd9cfdbb9c19849e2d5b53a58ab9a', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
     }
     static get watchers() { return {
         "dataItem": ["dataItemChanged", "watchDataItemHandler"],
@@ -564,6 +593,7 @@ const LsFieldContent = class {
     roles = [];
     showValidationTypes = true;
     readonly = false;
+    filtertoolbox = null;
     valueError = null;
     isDirty = false;
     watchDataItemHandler() {
@@ -576,6 +606,12 @@ const LsFieldContent = class {
             this.valueError = editorUtils.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
@@ -830,7 +866,7 @@ const LsFieldContent = class {
         this.alterImmediate({ validation: newValidation, value: newValue });
     }
     render() {
-        return (index.h(index.Host, { key: '24e25c7e75895b689f66926eca49bb4c8437e393' }, this.roles?.length > 0 && (index.h("ls-props-section", { key: 'da86a313b1b239f71127ecc210b4c2012e850ef7', sectionTitle: i18n.dvI18n.t('fieldproperties.assignee'), sectionDescription: i18n.dvI18n.t('fieldproperties.assigneedescription') }, index.h("ls-assignee-select", { key: 'd1ab6dbdf9dc56114f773ec0ab7da2d0f3aa07ea', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? i18n.dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), index.h("ls-props-section", { key: 'ba62d50d6992a4213a7faca419180bc30075c706', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldtype'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldtypedescription') }, index.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' && (index.h("ls-props-section", { key: 'f89d42643f948d354580a6fa52ebcb77c767aed4', sectionTitle: i18n.dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: i18n.dvI18n.t('fieldproperties.requiredfielddescription') }, index.h("ls-toggle", { key: '4c4373a255fa33ce36387ed1c1628dfffb40e6ea', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), index.h("ls-props-section", { key: 'eceb3a195dcea6fab9d93eb0a14127fe60161576', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldlabeldescription') }, index.h("ls-formfield", { key: 'a24598ad95ea5e0acebfdb06404839bf1aebbca2', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: defaultFieldLabels.getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: '2771a770073ce41c87bd90c31694c1536ccc3ba2', sectionTitle: i18n.dvI18n.t('fieldproperties.value'), sectionDescription: i18n.dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (index.h("div", { class: "ls-dv-date-input-wrapper" }, index.h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
+        return (index.h(index.Host, { key: '00f5e6bc3dd6711643e5b0fe25f662d70c3d4b92' }, this.roles?.length > 0 && (index.h("ls-props-section", { key: '283e02c52f71c5093156e15e1bac5f5057bd0e1f', sectionTitle: i18n.dvI18n.t('fieldproperties.assignee'), sectionDescription: i18n.dvI18n.t('fieldproperties.assigneedescription') }, index.h("ls-assignee-select", { key: '84713e819a93cbb464970ee97c5d2488793cb30e', signer: this.dataItem?.signer, roles: this.roles, disabled: this.readonly, disabledSenderReason: this.getSenderDisabledReason(), disabledApproverReason: this.isSignatureType() ? i18n.dvI18n.t('fieldproperties.signaturecannotapproversingle') : '', onAssigneeChange: ev => this.handleReassign(ev.detail) }))), index.h("ls-props-section", { key: 'cd2da1fc874d8d1c37055ad5fb09594c046ba794', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldtype'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldtypedescription') }, index.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' && (index.h("ls-props-section", { key: '0b4f881aaa5eca5decfe7bf44941dfb51f816edc', sectionTitle: i18n.dvI18n.t('fieldproperties.requiredfield'), row: true, sectionDescription: i18n.dvI18n.t('fieldproperties.requiredfielddescription') }, index.h("ls-toggle", { key: '59b7177e7d28957fe276c7f1626831bd1e359c57', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alterImmediate({ optional: !ev.detail }) }))), index.h("ls-props-section", { key: '448f076b297121bab31ba05d7b338c63933f4dbc', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldlabeldescription') }, index.h("ls-formfield", { key: '34aa3ecdba9edb0b2eac092cf34456beade7e311', as: "text", name: "field-label", value: this.dataItem?.label, placeholder: defaultFieldLabels.getFieldTitleSuggestion(this.dataItem?.formElementType), disabled: this.readonly, onTextChange: e => this.alter({ label: e.detail.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: '55ad3cb8e8f86a79412c070700f077ad4a76394e', sectionTitle: i18n.dvI18n.t('fieldproperties.value'), sectionDescription: i18n.dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (index.h("div", { class: "ls-dv-date-input-wrapper" }, index.h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
                 if (this.readonly)
                     return;
                 const picker = this.component.shadowRoot.getElementById('ls-date-picker');
@@ -840,9 +876,9 @@ const LsFieldContent = class {
                 const input = e.target;
                 this.alter({ value: this.formatDateFromISO(input.value) });
                 index$1.forceCloseDatePicker(input);
-            }, disabled: this.readonly }))) : (index.h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: defaultFieldLabels.getFieldPlaceholder(this.dataItem?.formElementType), valid: !this.valueError, dirty: this.isDirty, errorText: this.valueError, disabled: this.readonly, onTextChange: e => this.handleValueChange(e.detail.value) })))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: 'c403d5eace4333aab2654063d6d04a9e42f30ccb', sectionTitle: i18n.dvI18n.t('fieldproperties.options'), sectionDescription: i18n.dvI18n.t('fieldproperties.optionsdescription') }, index.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' && (index.h("ls-props-section", { key: '5e36a97d01fd14e8615f6f51c0ca285fa24fa586', sectionTitle: i18n.dvI18n.t('fieldproperties.contentformat'), sectionDescription: i18n.dvI18n.t('fieldproperties.contentformatdescription') }, index.h("ls-input-wrapper", { key: '8b3f87cde0b2586cfe742269f2dd2408518ca33e', select: true }, index.h("select", { key: '0b26d5359020efd0f03a7d1f4a8081f7e69f4dc2', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, editorUtils.validationTypes
+            }, disabled: this.readonly }))) : (index.h("ls-formfield", { as: "text", name: "field-value", value: this.dataItem?.value, placeholder: defaultFieldLabels.getFieldPlaceholder(this.dataItem?.formElementType), valid: !this.valueError, dirty: this.isDirty, errorText: this.valueError, disabled: this.readonly, onTextChange: e => this.handleValueChange(e.detail.value) })))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: 'c033c2ec1addc298274756c32aabb464bf7f6421', sectionTitle: i18n.dvI18n.t('fieldproperties.options'), sectionDescription: i18n.dvI18n.t('fieldproperties.optionsdescription') }, index.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' && (index.h("ls-props-section", { key: '26cd86ed13d794c19d0764c261a3aeeb26baa958', sectionTitle: i18n.dvI18n.t('fieldproperties.contentformat'), sectionDescription: i18n.dvI18n.t('fieldproperties.contentformatdescription') }, index.h("ls-input-wrapper", { key: 'db3e98a1fae7280ec82aeadeafd82ee0e75a3f57', select: true }, index.h("select", { key: '7ddb1ae410ad37bb774af1c2bfd3b865d65e89e9', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, editorUtils.validationTypes
             .filter(type => type.formType === this.dataItem?.formElementType)
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (index.h("ls-props-section", { key: 'aa53736c8ff6a875a31089a567360d4b1aec9afe', sectionTitle: i18n.dvI18n.t('fieldproperties.displaystate'), sectionDescription: i18n.dvI18n.t('fieldproperties.displaystatedescription') }, index.h("div", { key: '1544e42584b5c8cc899c2db2fd1b6d65df8acabf', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (index.h("button", { key: idx, class: { 'ls-dv-checkbox-toggle-btn': true, 'ls-dv-active': idx === 0 ? this.dataItem?.value?.toString() !== 'true' : this.dataItem?.value?.toString() === 'true' }, onClick: () => !this.readonly && this.alterImmediate({ value: idx === 0 ? 'false' : 'true' }), disabled: this.readonly }, state)))))), index.h("slot", { key: '453d4fc28ceacc0e18af272b6a497502af8768b1' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), this.dataItem?.formElementType === 'checkbox' && this.getCheckboxStates().length === 2 && (index.h("ls-props-section", { key: 'bd1410e73a2f58dde724fbbf05a14d2664e5be50', sectionTitle: i18n.dvI18n.t('fieldproperties.displaystate'), sectionDescription: i18n.dvI18n.t('fieldproperties.displaystatedescription') }, index.h("div", { key: 'bec219016a0006c013e009792a471429645fd173', class: "ls-dv-checkbox-toggle" }, this.getCheckboxStates().map((state, idx) => (index.h("button", { key: idx, class: { 'ls-dv-checkbox-toggle-btn': true, 'ls-dv-active': idx === 0 ? this.dataItem?.value?.toString() !== 'true' : this.dataItem?.value?.toString() === 'true' }, onClick: () => !this.readonly && this.alterImmediate({ value: idx === 0 ? 'false' : 'true' }), disabled: this.readonly }, state)))))), index.h("slot", { key: 'e40b61c6531b30239885dcc6b3ff1f7a46e8769d' })));
     }
     static get watchers() { return {
         "dataItem": ["watchDataItemHandler"]
@@ -1109,7 +1145,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: '5ee4d83054b39ff8f15f68ce81855358982b47d6' }, index.h("div", { key: '3c093b283a9675b94476139f743458343b4f868b', class: 'ls-dv-expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: '9ad907b068024ba3b062e01487f2d9f81dc62758', name: this.expanded ? 'expand-icon' : 'collapse-icon', size: 20, solid: true }), index.h("p", { key: '71078ba34ca93acf9b7b214539621d9e543a695a' }, i18n.dvI18n.t('fieldproperties.advancedproperties'))), this.expanded && (index.h("div", { key: '31535010abc956aa04a4723bcf11dd12c503a53f', class: 'ls-dv-field-set' }, index.h("ls-props-section", { key: '82407eb2fafabc44627f5914e2788f798c908c9a', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldorder'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldorderdescription') }, index.h("input", { key: 'e5f04194d0a766749fbd4a1314c05c66320eae46', value: this.getValue('fieldOrder'), type: "number", placeholder: i18n.dvI18n.t('fieldproperties.placeholdereg1'), onInput: e => {
+        return (index.h(index.Host, { key: '5ee4d83054b39ff8f15f68ce81855358982b47d6' }, index.h("div", { key: '3c093b283a9675b94476139f743458343b4f868b', class: 'ls-dv-expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: '9ad907b068024ba3b062e01487f2d9f81dc62758', name: this.expanded ? 'expand-icon' : 'collapse-icon', size: 20, solid: true }), index.h("p", { key: '71078ba34ca93acf9b7b214539621d9e543a695a' }, i18n.dvI18n.t('fieldproperties.advancedproperties'))), this.expanded && (index.h("div", { key: '31535010abc956aa04a4723bcf11dd12c503a53f', class: 'ls-dv-field-set' }, index.h("ls-props-section", { key: '82407eb2fafabc44627f5914e2788f798c908c9a', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldorder'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldorderdescription') }, index.h("input", { key: 'e5f04194d0a766749fbd4a1314c05c66320eae46', type: "number", placeholder: i18n.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 })), index.h("ls-props-section", { key: '19166c37580711be5cbf51602e6fdfebc2e664ae', sectionTitle: i18n.dvI18n.t('fieldproperties.refname') }, index.h("input", { key: '96b43215952a905d1870dc85ad9b323634dd48a2', value: this.getValue('link'), placeholder: i18n.dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onInput: e => this.alter({ link: e.target.value }, 300), disabled: this.readonly })), index.h("ls-props-section", { key: '3310038dc7a28e863b34c778e3e1a8f7db7e941e', sectionTitle: i18n.dvI18n.t('fieldproperties.linktype'), sectionDescription: i18n.dvI18n.t('fieldproperties.linktypedescription') }, index.h("select", { key: '979ea4470288f616c3a20e0fb9279b43d7805218', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field", disabled: this.readonly }, index.h("option", { key: '36c9a9beaf18393c86ddf392bb73f0e48de5eb34', value: "0", selected: this.getValue('linkType') === '0' }, i18n.dvI18n.t('fieldproperties.linktypenoption')), index.h("option", { key: '9e652f27e8fa2d2b232e721f54e9da4bdd13fe9f', value: "1", selected: this.getValue('linkType') === '1' }, i18n.dvI18n.t('fieldproperties.linktypeoneofgroup')), index.h("option", { key: 'e1c980a85eb33f41ddea960cf67e00269a448f80', value: "2", selected: this.getValue('linkType') === '2' }, i18n.dvI18n.t('fieldproperties.linktypeaddtotal')), index.h("option", { key: '508f2e9bf1d5aa99d526312c6e2c3ac456707c60', value: "3", selected: this.getValue('linkType') === '3' }, i18n.dvI18n.t('fieldproperties.linktypeconditional')))), index.h("ls-props-section", { key: '19b6e927b0d23ac8c867f1ac664f897920eeb8f9', sectionTitle: i18n.dvI18n.t('fieldproperties.linkvalue'), sectionDescription: i18n.dvI18n.t('fieldproperties.linkvaluedescription') }, index.h("input", { key: '51e3641661d1b40e8b110029436c2a09fa46cb77', value: this.getValue('logicAction'), width: "30", placeholder: i18n.dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onChange: e => this.alter({ logicAction: e.target.value }), disabled: this.readonly }))))));
@@ -1214,6 +1250,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) {
@@ -1232,21 +1270,21 @@ const LsFieldTypeSelect = class {
     }
     render() {
         const color = defaultPalette.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
             ? i18n.dvI18n.t('fieldproperties.mixed')
             : i18n.dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text');
-        return (index.h(index.Host, { key: '0da0866eb4b6bd18343587eaf132cab26717de96' }, index.h("div", { key: '8d33ebf8335771c8bf14116b0664b9abad29b6a4', class: "ls-dv-fieldtype-dropdown" }, index.h("div", { key: '673c5287584995100ed21a9be83bc87c4a41d592', class: "ls-dv-fieldtype-header", style: {
+        return (index.h(index.Host, { key: '6bfe8fdca902983b87999b331d0ab9e4348d8119' }, index.h("div", { key: 'd9ecf1411a4b353db022651b5312d2eed8581ce4', class: "ls-dv-fieldtype-dropdown" }, index.h("div", { key: '2d39319df63a4bd49117efb6f6597ca0acf4998f', class: "ls-dv-fieldtype-header", style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, index.h("div", { key: 'b1ffa32896bfb90b500822c95dffd7cd987f98c1', class: "ls-dv-fieldtype-inner" }, index.h("div", { key: '840d54ff98e4f5f2a359b10d2533f4b5019387ea', class: "ls-dv-fieldtype-icon", style: {
+            } }, index.h("div", { key: '0dc0422afef8b56b4eb126cf51d5d74eadd0b035', class: "ls-dv-fieldtype-inner" }, index.h("div", { key: 'e293fddbf13371be97cfae330245fc70a3d90fb6', class: "ls-dv-fieldtype-icon", style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, index.h("ls-icon", { key: '9fbf4829b98dad3f1cb422421757e42fbfef25af', name: this.mixed ? 'view-grid-icon' : defaultFieldIcons.getFieldIcon(this.fieldType), size: 20 })), index.h("span", { key: '2f354830eb5cd5c17cb46259cf4946e22fe8a822', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (index.h("button", { key: '807318518989e8b33fd5b2a7e1e1383bb2ae11c9', class: "ls-dv-fieldtype-btn", onClick: e => {
+            } }, index.h("ls-icon", { key: 'd70e7c8a2166ab9a28025fdea837d4ef2548a568', name: this.mixed ? 'view-grid-icon' : defaultFieldIcons.getFieldIcon(this.fieldType), size: 20 })), index.h("span", { key: 'fdac95009c85c06097d852de5e67c881614d22db', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (index.h("button", { key: '335160180754f0e4d7f3cb92b0dbf35700aa8ffe', class: "ls-dv-fieldtype-btn", onClick: e => {
                 e.stopPropagation();
                 this.toggleDropdown();
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('fieldproperties.changefieldtype') }, index.h("ls-icon", { key: 'a45d8d4afcf003134db6f99efa68402b4b3a699e', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (index.h("div", { key: 'e3d6ef482583d3f235416287f20d77e47446d05d', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (index.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": i18n.dvI18n.t('fieldproperties.changefieldtype') }, index.h("ls-icon", { key: 'b301132f3002fb687f22afc745791e031f0130ba', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (index.h("div", { key: 'f8a2da27316feb75da093c9a6567dda9c491acc7', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (index.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) }, index.h("div", { class: "ls-dv-fieldtype-item-icon", style: {

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

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DFeU0FNc.js');
-var i18n = require('./i18n-Cm3SP-DJ.js');
+var i18n = require('./i18n-e8JieHV6.js');
 
 const lsComposeManagerCss = () => `:host{display:block}`;