legalesign-document-viewer 0.9.21 → 0.9.22

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

@@ -1,10 +1,19 @@
-import { alter, oob } from "./editorUtils";
+import { oob } from "./editorUtils";
+import { moveField } from "./editorCalculator";
+import { updateSelectionBox } from "./mouseHandlers";
+// Buffer for batching rapid key presses
+let mutationBuffer = null;
+let mutationTimer = null;
+const BUFFER_DELAY = 300; // milliseconds
 export function keyDown(ev) {
+    // Disable keyboard controls in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     if (this.selected && this.selected?.length > 0) {
-        // utils need binding to the context
-        const altbound = alter.bind(this);
         if (ev.key === 'ArrowDown') {
-            altbound(original => {
+            ev.preventDefault();
+            bufferedAlter.bind(this)(() => original => {
                 const alterElement = {
                     ...original,
                     top: original.top + 1,
@@ -15,7 +24,8 @@ export function keyDown(ev) {
             });
         }
         else if (ev.key === 'ArrowUp') {
-            altbound(original => {
+            ev.preventDefault();
+            bufferedAlter.bind(this)(() => original => {
                 const alterElement = {
                     ...original,
                     top: original.top - 1,
@@ -26,7 +36,8 @@ export function keyDown(ev) {
             });
         }
         else if (ev.key === 'ArrowRight') {
-            altbound(original => {
+            ev.preventDefault();
+            bufferedAlter.bind(this)(() => original => {
                 const alterElement = {
                     ...original,
                     left: original.left + 1,
@@ -37,7 +48,8 @@ export function keyDown(ev) {
             });
         }
         else if (ev.key === 'ArrowLeft') {
-            altbound(original => {
+            ev.preventDefault();
+            bufferedAlter.bind(this)(() => original => {
                 const alterElement = {
                     ...original,
                     left: original.left - 1,
@@ -73,4 +85,36 @@ export function keyDown(ev) {
         }
     }
 }
+// Buffered version of alter that batches rapid key presses
+function bufferedAlter(diffFnFactory) {
+    // Clear existing timer
+    if (mutationTimer) {
+        clearTimeout(mutationTimer);
+    }
+    // Apply the transformation immediately to the UI
+    const diffFn = diffFnFactory();
+    this.selected.forEach(field => {
+        const updatedItem = diffFn(field.dataItem);
+        // Update the dataItem in place
+        Object.assign(field.dataItem, updatedItem);
+        // Update the visual position using moveField
+        moveField.bind(this)(field, updatedItem);
+    });
+    // Update the selection box to match the new field positions
+    updateSelectionBox.bind(this)();
+    // Store the latest state for batched mutation
+    mutationBuffer = this.selected.map(c => c.dataItem);
+    // Set timer to emit mutation after delay
+    mutationTimer = setTimeout(() => {
+        if (mutationBuffer) {
+            const diffs = mutationBuffer.map(item => ({
+                action: 'update',
+                data: item,
+            }));
+            this.mutate.emit(diffs);
+            mutationBuffer = null;
+        }
+        mutationTimer = null;
+    }, BUFFER_DELAY);
+}
 //# sourceMappingURL=keyHandlers.js.map

package/dist/collection/components/ls-document-viewer/keyHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,UAAU,OAAO,CAAC,EAAiB;IACvC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;QAC/C,oCAAoC;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAElC,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClB,MAAM,YAAY,GAAG;oBACnB,GAAG,QAAQ;oBACX,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC;oBACrB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;oBACnB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;iBACpB,CAAC;gBAEF,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClB,MAAM,YAAY,GAAG;oBACnB,GAAG,QAAQ;oBACX,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC;oBACrB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;oBACnB,EAAE,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC;iBACrB,CAAC;gBAEF,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClB,MAAM,YAAY,GAAG;oBACnB,GAAG,QAAQ;oBACX,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAG,CAAC;oBACvB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;oBACnB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;iBACpB,CAAC;gBAEF,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClB,MAAM,YAAY,GAAG;oBACnB,GAAG,QAAQ;oBACX,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAG,CAAC;oBACvB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;oBACnB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;iBACpB,CAAC;gBACF,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACzD,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;YACzD,IAAI,CAAC,MAAM,CAAC,IAAI,CACd,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBACV,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChD,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;YACjE,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;YACzD,MAAM,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC/B,MAAM,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;gBACzE,MAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAClD,sBAAsB;gBACtB,IAAI,MAAM,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;oBAClE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;gBACvB,CAAC;gBACD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC9D,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACtF,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;YAClC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { alter, oob } from './editorUtils';\n\nexport function keyDown(ev: KeyboardEvent) {\n  if (this.selected && this.selected?.length > 0) {\n    // utils need binding to the context\n    const altbound = alter.bind(this);\n\n    if (ev.key === 'ArrowDown') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete' || ev.key === 'Backspace') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n"]}
+{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { oob } from './editorUtils';\nimport { moveField } from './editorCalculator';\nimport { updateSelectionBox } from './mouseHandlers';\n\n// Buffer for batching rapid key presses\nlet mutationBuffer = null;\nlet mutationTimer = null;\nconst BUFFER_DELAY = 300; // milliseconds\n\nexport function keyDown(ev: KeyboardEvent) {\n  // Disable keyboard controls in preview mode\n  if (this.mode === 'preview') {\n    return;\n  }\n  \n  if (this.selected && this.selected?.length > 0) {\n    if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      ev.preventDefault();\n      bufferedAlter.bind(this)(() => original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete' || ev.key === 'Backspace') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n\n// Buffered version of alter that batches rapid key presses\nfunction bufferedAlter(diffFnFactory) {\n  // Clear existing timer\n  if (mutationTimer) {\n    clearTimeout(mutationTimer);\n  }\n\n  // Apply the transformation immediately to the UI\n  const diffFn = diffFnFactory();\n  this.selected.forEach(field => {\n    const updatedItem = diffFn(field.dataItem);\n    // Update the dataItem in place\n    Object.assign(field.dataItem, updatedItem);\n    // Update the visual position using moveField\n    moveField.bind(this)(field, updatedItem);\n  });\n\n  // Update the selection box to match the new field positions\n  updateSelectionBox.bind(this)();\n\n  // Store the latest state for batched mutation\n  mutationBuffer = this.selected.map(c => c.dataItem);\n\n  // Set timer to emit mutation after delay\n  mutationTimer = setTimeout(() => {\n    if (mutationBuffer) {\n      const diffs = mutationBuffer.map(item => ({\n        action: 'update',\n        data: item,\n      }));\n      this.mutate.emit(diffs);\n      mutationBuffer = null;\n    }\n    mutationTimer = null;\n  }, BUFFER_DELAY);\n}\n"]}

package/dist/collection/components/ls-document-viewer/ls-document-viewer.css

@@ -79,6 +79,8 @@ h6 {
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+  font-family: var(--font-family, "IBM Plex Sans", sans-serif);
+  font-size: var(--text-sm);
   margin: 0px;
   padding: 0px;
 }
@@ -115,10 +117,20 @@ slot {
 
 .ls-dv-validation-tag-wrapper {
   position: absolute;
-  top: 50%;
+  top: 1rem;
   right: 1rem;
-  transform: translateY(-50%);
   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 {
@@ -202,8 +214,8 @@ slot {
 #ls-box-selector {
   position: absolute;
   visibility: hidden;
-  background-color: transparent;
-  border: 1px rgba(71, 71, 71, 0.716) dashed;
+  background-color: color-mix(in srgb, var(--primary-20, #c7ddff) 20%, transparent);
+  border: 1px dashed var(--primary-50, #5185ff);
 }
 
 #ls-editor-form {

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

@@ -2,10 +2,11 @@ import { Host, h } from "@stencil/core";
 import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
 import { dvI18n } from "../../i18n/i18n";
 import { addField, moveField } from "./editorCalculator";
-import { DEFAULT_FONT_SIZE, DEFAULT_FONT_NAME } from "../../constants/fieldDefaults";
+import { DEFAULT_FONT_SIZE, DEFAULT_FONT_NAME, FIELD_DEFAULTS } from "../../constants/fieldDefaults";
 import { keyDown } from "./keyHandlers";
-import { mouseClick, mouseDoubleClick, mouseDown, mouseDrop, mouseMove, mouseUp } from "./mouseHandlers";
-import { getApiType, matchData } from "./editorUtils";
+import { mouseClick, mouseDoubleClick, mouseDown, mouseMove, mouseUp, toolboxDragStart } from "./mouseHandlers";
+import { getApiType, getInputType, matchData } from "./editorUtils";
+import { updateSelectionBox } from "./mouseHandlers";
 import { LsDocumentAdapter } from "./adapter/LsDocumentAdapter";
 import { getTemplate } from "./adapter/templateActions";
 import { getGroupData } from "./adapter/groupActions";
@@ -40,6 +41,10 @@ export class LsDocumentViewer {
     startLocations;
     // @ts-ignore
     startMouse;
+    // @ts-ignore
+    _isToolboxDragging = false;
+    // @ts-ignore
+    _cancelToolboxDrag = null;
     //
     // --- Properties / Inputs --- //
     //
@@ -134,6 +139,13 @@ export class LsDocumentViewer {
             this.showstatusbar = true;
             this.readonly = false;
         }
+        // Update readonly attribute on all existing fields
+        const fields = this.component.shadowRoot?.querySelectorAll('ls-editor-field');
+        if (fields) {
+            fields.forEach(field => {
+                field.setAttribute('readonly', String(_newMode === 'preview'));
+            });
+        }
     }
     zoomChanged(newZoom) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
@@ -222,6 +234,9 @@ export class LsDocumentViewer {
         });
         this.fieldTypeSelected = event.detail;
     }
+    handleToolboxDragStart(event) {
+        toolboxDragStart.bind(this)(event.detail);
+    }
     // generate a new role on the template
     addParticpantHandler(event) {
         const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
@@ -261,28 +276,25 @@ export class LsDocumentViewer {
         const { signerIndex, fieldType } = event.detail;
         // Update the active signer
         this.signer = signerIndex;
-        console.log('Selecting field for placement:', event.detail);
-        // Find and select the matching toolbox field
-        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
-        fields.forEach(element => {
-            const isMatch = element.formElementType === fieldType;
-            element.isSelected = isMatch;
-            if (isMatch) {
-                // Trigger the field selection event
-                this.fieldTypeSelected = {
-                    label: element.label,
-                    formElementType: element.formElementType,
-                    elementType: element.elementType,
-                    validation: element.validation,
-                    defaultHeight: element.defaultHeight,
-                    defaultWidth: element.defaultWidth,
-                };
-            }
-        });
+        // Build the field data directly from defaults
+        const defaults = FIELD_DEFAULTS[fieldType] || FIELD_DEFAULTS['signature'];
+        this.fieldTypeSelected = {
+            label: fieldType,
+            formElementType: fieldType,
+            elementType: fieldType === 'signature' || fieldType === 'initials' ? fieldType : fieldType === 'auto sign' ? 'admin' : 'text',
+            validation: 0,
+            defaultHeight: defaults.defaultHeight,
+            defaultWidth: defaults.defaultWidth,
+        };
         // Switch to toolbox view if not already there
         if (this.manager !== 'toolbox') {
             this.manager = 'toolbox';
         }
+        // Initiate dragging for the selected field type on next tick
+        // (current mousedown/mouseup cycle needs to complete first)
+        requestAnimationFrame(() => {
+            toolboxDragStart.bind(this)(this.fieldTypeSelected);
+        });
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
@@ -304,12 +316,29 @@ export class LsDocumentViewer {
             this.selectedDataItems = event.detail;
         }
         // change style of selected fields
+        const isMulti = event.detail.length > 1;
         event.detail.forEach(fc => {
             const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
             fu.selected = true;
+            fu.multiSelected = isMulti;
         });
-        // this.selected = fields.filter(fx => fx.selected) as HTMLLsEditorFieldElement[];
-        this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
+        this.selected.forEach(s => {
+            const isSelected = event.detail.map(d => d.id).includes(s.dataItem.id);
+            s.selected = isSelected;
+            s.multiSelected = isSelected ? isMulti : false;
+        });
+        // Open date picker only when exactly one date field is selected
+        if (event.detail.length === 1) {
+            const field = this.component.shadowRoot.getElementById('ls-field-' + event.detail[0].id);
+            if (field && getInputType(event.detail[0].validation)?.inputType === 'date' && this.mode !== 'preview') {
+                requestAnimationFrame(() => {
+                    const editbox = field.shadowRoot?.getElementById('editing-input');
+                    if (editbox)
+                        editbox.showPicker();
+                });
+            }
+        }
+        updateSelectionBox.bind(this)();
         this.validationErrors = validate.bind(this)(this._template);
     }
     // Send role selection changes to bars and panels
@@ -537,13 +566,6 @@ export class LsDocumentViewer {
             document.addEventListener('mouseup', mouseUp.bind(this));
             dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
             document.addEventListener('keydown', keyDown.bind(this));
-            dropTarget.addEventListener('dragenter', event => {
-                event.preventDefault();
-            });
-            dropTarget.addEventListener('dragover', event => {
-                event.preventDefault();
-            });
-            dropTarget.addEventListener('drop', mouseDrop.bind(this));
         }
         this.generateFields();
     }
@@ -642,9 +664,9 @@ export class LsDocumentViewer {
             return false;
     }
     render() {
-        return (h(Host, { key: 'a9d331483751ce64c05c3134191eb08ddb7ddf06' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: 'c915116bf734cf566e33f3af368bc4b17560e0d9', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: '966b15ede20a8a230074cc73e39aad4aecde9395', size: 200, colour: "var(--primary-60)" })), h("div", { key: '424bbbbbf06bbd57aa6796e558e182af6ffd9ff4', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: '7d429afa5e085bc3867c8fc15f62c0350ffb31f5', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: 'fe72e6e7ec61bbb2810cb2b83af4b11590be8ed9' }))), this.error && (h("div", { key: 'db752c9609601c27addf55ca5a7a8a594dc13524', class: "ls-dv-error-state" }, h("div", { key: 'f8cf9bea15977301232104cb803e811c5aad2037', class: "ls-dv-error-card" }, h("ls-icon", { key: '460e393bc7ac0dab3905dfa70b8680775b68903f', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: 'd50a1542a8cfbec58b58a95f09341efcc0522a91', class: "ls-dv-error-title" }, dvI18n.t('viewer.autherror')), h("p", { key: '04774e5a6db6bbd7a80437a9f24bcbee616ad682', class: "ls-dv-error-message" }, this.error)))), h("div", { key: 'c82ef90f5bfdc04623e5a898615fd2cceaaccd29', class: "ls-dv-page-header" }, h("div", { key: '36e925bff58a1bc6f1fecd60c22feff6a888d8bb', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '2f8fff622cfecf513650e2846b792a9c9821aebf', name: "left-button" })), h("div", { key: 'e7f61f403ad1090be14f63e1ffa7a8614dc65ae9', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: '977ca2bb7b05c68bbcbf158aaae9d7519532eac6', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'f3537fc9ea024c15a67a5626db3651c5d5025c59' }, h("span", { key: '9c9c5e5ad149e7b59d2f7517bd83ef37d697644a', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: '5fe5dfcad466c60ff313838276e2387c065ad4df' }, "/"), h("span", { key: 'afc75e9dfdad274ee7e7d881712216690726d54c', class: "ls-dv-header-text-2" }, this._template?.title), h("div", { key: '48d40b7dce8ef3aece832b07422fe4adf273a5e2', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: 'e772a5e04fdc0dada8171411f7f4025488aa7420', validationErrors: this.validationErrors })))), this.mode === 'compose' && (h("div", { key: '423f05e4e2b01656f4d6f593b68a0067db2aac7e', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: 'a94684455cad5efda22649ee74464892911dbd2a', name: "top-bar" })))), h("form", { key: 'e3a817a8414b82f25c295125fd62e1d059e6a41b', id: "ls-editor-form" }, h("ls-left-bar", { key: '00c673406fc94b4ac2b971d5b4a3dd954460f1c2', 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: '08fbd87b6c4561f195aa1edf8e181e5470cc2d87' }, h(h.Fragment, null, this.isLoading && (h(h.Fragment, null, h("div", { key: '84723f730c1f8d1f85f7a46ff21e66de19f9682d', class: 'ls-dv-page-loader' }, h("ls-loading-logo", { key: '25a0cfa70c45ea2e6523a977e4a347887618fba4', size: 200, colour: "var(--primary-60)" })), h("div", { key: '9a198ac8130c797263801d96c68efb9fb7fd3ddc', class: 'ls-dv-custom-loader-slot' }, h("slot", { key: 'dfbb87e7433ae6b8a30ebd034785590ba80f7058', name: "custom-loader" })), this.mode === 'compose' && h("ls-compose-loader", { key: '4d6e7b55131c97cfec8663648c061bfbd6b9a58b' }))), this.error && (h("div", { key: '6275c8f33b1dcff29c625cf965025b6bb9541242', class: "ls-dv-error-state" }, h("div", { key: '862345a0959d677906aeb804a0a4a49920e53bb1', class: "ls-dv-error-card" }, h("ls-icon", { key: '9b6a579259e8555b71584d9c95dadb4e1ab5fffb', name: "exclamation-circle-icon", size: 32, style: { color: 'var(--red-60, #dc2626)' } }), h("p", { key: '03f8dbfd174ec802c5f9232cdfafadd54a2c20fc', class: "ls-dv-error-title" }, dvI18n.t('viewer.autherror')), h("p", { key: '8ad4990580deb5c4efc5801c1d9a50133b89b238', class: "ls-dv-error-message" }, this.error)))), h("div", { key: '619c8d74c0d7b98eb8e5903babe355fcbffc0957', class: "ls-dv-page-header" }, h("div", { key: 'aa5929ef1cac92f95e9d132873ab7b398d7bf828', class: 'ls-dv-left-slot-wrapper' }, h("slot", { key: '1838adb911e640a646a1a26936733d30f1425838', name: "left-button" })), h("div", { key: '8bf1497609d9488e3be8aee2cf37728e00f47ad5', class: 'ls-dv-right-slot-wrapper' }, h("slot", { key: '71c9dbf3f8526e93580d5986f8e3f790c3a4e04d', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'b3c7e20ffc0950eb9de9a61f0d3bc581019d457a' }, h("span", { key: '18d5e22bd76bbc97ed2bbf14de544c51c1e2f437', class: "ls-dv-header-text-1" }, dvI18n.t('viewer.templatecreation')), h("span", { key: 'db095639834b53a1b0a8864029c187c8d897be00' }, "/"), h("span", { key: 'cec62bdb0a75e3d833fab8a743d9764f1927fb62', class: "ls-dv-header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '6b825afdc7d7df629756e3ba2321b4e4907885fc', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("slot", { key: '6521f1a1d94ac158ed830fc9074bd2664028ddc9', name: "top-bar" })))), h("form", { key: '4addd2d72438d50b343e1a04c569c713fc7b7746', id: "ls-editor-form" }, h("ls-left-bar", { key: '0245d4c421c88e2c27da938231f0350067f9ece2', 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.selected = [];
-            } }, h("slot", { key: '890f490f7fb112a5424566432194fae879b3ae7d', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: '9ecad16a44527c4addc8c2f348fd38fd4db9fd69', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode, signer: this.signer }), h("div", { key: 'b7f5795c89607fd0af4298b5181509a8f230ba10', id: "ls-mid-area" }, h("div", { key: 'c88de8b35dc2f8734be059e4ca8fb5c9a69ea8d7', class: 'ls-dv-document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '73856de7f0ddb3c9aa621a38ac7004bfd08420e8', id: "ls-document-frame" }, h("canvas", { key: '4c6401f3e83385c469693b5f5dba44a5450cba3f', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: 'e267f966a5d22b2fb91dc7e8b562723e7847a43b', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: '0f3ed6666b9447da5eb9099c71a78cdee731b22f', id: "ls-box-selector" }))), h("ls-statusbar", { key: '05481859511b3ea07ad87f184004235486606f6b', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '760fea2de6e27455f216e8a72f1020897c2e3ab3', tooltipId: "ls-dv-tooltip" })));
+            } }, h("slot", { key: '47ae6277235475d6d31a4934198b397e3fca5381', name: "recipient-panel", slot: "recipient-panel" })), h("ls-toolbar", { key: 'feabf13e86695d7d40991af3b155f547c031de8e', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode, signer: this.signer }), h("div", { key: 'fa0fa86422a959c6dbf1a240dd8a61614744404f', id: "ls-mid-area" }, h("div", { key: 'e1b0953c0f51a6d0e7d6da949f2c419dc0f7c932', class: 'ls-dv-document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'f962a5fd149283d4a3fcb6d3dec0fee6592edd9e', id: "ls-document-frame" }, h("canvas", { key: '79d7fb11bce0a4964bd1e95c3a83f107c3f97315', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'ls-dv-hidden' : '' }), h("ls-editor-table", { key: '2deecdfd06419b3bb24400fe8108cea403d4e48b', editor: this, class: this.displayTable ? '' : 'ls-dv-hidden' }), h("div", { key: 'bdbf06867d8623d4355757878705336a99aad7b7', id: "ls-box-selector" }))), h("ls-statusbar", { key: '6c98d08d23aaa3c9a83bedbb370b1335b62855c3', editor: this, page: this.pageNum, pageCount: this.pageCount }), this.mode === 'editor' && (h("div", { key: '8e7cebf15377daebc6b2f77a30e1ed5104184a63', class: 'ls-dv-validation-tag-wrapper' }, h("ls-validation-tag", { key: 'a16504967d6b870fab437e0eb604aa344046a7f6', validationErrors: this.validationErrors }), h("slot", { key: '801d40ab83cc7095df18cfe33b2ee69adf4eade1', name: "next-button" })))))), h("ls-tooltip", { key: '363808e5fe133710cec51d5f56e5881ae1fa92ee', tooltipId: "ls-dv-tooltip" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -1345,6 +1367,12 @@ export class LsDocumentViewer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "toolboxDragStart",
+                "method": "handleToolboxDragStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "addParticipant",
                 "method": "addParticpantHandler",