legalesign-document-viewer 0.9.21 → 0.9.23

package/dist/components/{p-DCdDskfL.js → p-DS_FPOrD.js}

@@ -1,10 +1,104 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BrykT5-C.js';
-import { d as dvI18n } from './p-Dx1cMyvL.js';
-import { f as findDimensions, r as recalculateCoordinates, h as findIn, d as defineCustomElement$3, o as oob } from './p-DckVC3o2.js';
-import { F as FIELD_DEFAULTS, D as DEFAULT_FONT_SIZE, a as DEFAULT_FONT_NAME } from './p-B3gB_457.js';
-import { d as defineCustomElement$2 } from './p-CSPLGKKp.js';
-import { d as defineCustomElement$1 } from './p-dHMolk9H.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-BtjCijn4.js';
+import { f as findDimensions, r as recalculateCoordinates, h as findIn, d as defineCustomElement$3, o as oob } from './p-pPhflIHp.js';
+import { D as DEFAULT_FONT_SIZE, F as FIELD_DEFAULTS, a as DEFAULT_FONT_NAME } from './p-B3gB_457.js';
+import { d as defaultRolePalette } from './p-BKrsDBDB.js';
+import { d as defineCustomElement$2 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
 
+const SNAP_THRESHOLD = 8; // pixels proximity to trigger snap
+/**
+ * Calculate snap positions for a dragging field against existing fields.
+ * Snaps any outer edge (left/right/top/bottom) of the moving field to any
+ * outer edge of every other field on the same page.
+ * All values are in zoomed pixel coordinates relative to the document frame.
+ */
+function calculateSnap(dragLeft, dragTop, dragWidth, dragHeight, fields, currentPage, excludeIds) {
+    const result = { x: null, y: null, guides: [] };
+    const dragRight = dragLeft + dragWidth;
+    const dragBottom = dragTop + dragHeight;
+    let closestDx = SNAP_THRESHOLD + 1;
+    let closestDy = SNAP_THRESHOLD + 1;
+    for (const field of fields) {
+        if (field.dataItem?.page !== currentPage)
+            continue;
+        if (excludeIds && excludeIds.includes(field.dataItem?.id))
+            continue;
+        const fLeft = field.offsetLeft;
+        const fTop = field.offsetTop;
+        const fRight = fLeft + field.offsetWidth;
+        const fBottom = fTop + field.offsetHeight;
+        // X-axis: any dragged edge to any target edge
+        const xPairs = [
+            { dragEdge: dragLeft, targetEdge: fLeft },
+            { dragEdge: dragLeft, targetEdge: fRight },
+            { dragEdge: dragRight, targetEdge: fLeft },
+            { dragEdge: dragRight, targetEdge: fRight },
+        ];
+        for (const { dragEdge, targetEdge } of xPairs) {
+            const dist = Math.abs(dragEdge - targetEdge);
+            if (dist < closestDx) {
+                closestDx = dist;
+                result.x = dragLeft + (targetEdge - dragEdge);
+                result.guides = result.guides.filter(g => g.orientation !== 'v');
+                result.guides.push({ orientation: 'v', position: targetEdge });
+            }
+        }
+        // Y-axis: any dragged edge to any target edge
+        const yPairs = [
+            { dragEdge: dragTop, targetEdge: fTop },
+            { dragEdge: dragTop, targetEdge: fBottom },
+            { dragEdge: dragBottom, targetEdge: fTop },
+            { dragEdge: dragBottom, targetEdge: fBottom },
+        ];
+        for (const { dragEdge, targetEdge } of yPairs) {
+            const dist = Math.abs(dragEdge - targetEdge);
+            if (dist < closestDy) {
+                closestDy = dist;
+                result.y = dragTop + (targetEdge - dragEdge);
+                result.guides = result.guides.filter(g => g.orientation !== 'h');
+                result.guides.push({ orientation: 'h', position: targetEdge });
+            }
+        }
+    }
+    if (closestDx > SNAP_THRESHOLD) {
+        result.x = null;
+        result.guides = result.guides.filter(g => g.orientation !== 'v');
+    }
+    if (closestDy > SNAP_THRESHOLD) {
+        result.y = null;
+        result.guides = result.guides.filter(g => g.orientation !== 'h');
+    }
+    return result;
+}
+
+function updateSelectionBox() {
+    var box = this.component.shadowRoot.getElementById('ls-box-selector');
+    if (!this.selected || this.selected.length < 2) {
+        box.style.visibility = 'hidden';
+        return;
+    }
+    let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
+    this.selected.forEach(f => {
+        const left = f.offsetLeft;
+        const top = f.offsetTop;
+        const right = left + f.offsetWidth;
+        const bottom = top + f.offsetHeight;
+        if (left < minLeft)
+            minLeft = left;
+        if (top < minTop)
+            minTop = top;
+        if (right > maxRight)
+            maxRight = right;
+        if (bottom > maxBottom)
+            maxBottom = bottom;
+    });
+    box.style.left = minLeft + 'px';
+    box.style.top = minTop + 'px';
+    box.style.width = (maxRight - minLeft) + 'px';
+    box.style.height = (maxBottom - minTop) + 'px';
+    box.style.visibility = 'visible';
+}
 let mousetimer = null;
 function debounce(data, delay) {
     if (mousetimer)
@@ -16,6 +110,16 @@ function debounce(data, delay) {
 function mouseDown(e) {
     if (e.offsetX < 0 || e.offsetY < 0)
         return;
+    if (this._isToolboxDragging)
+        return;
+    // Disable mouse interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
+    // Ignore events originating from outside the document frame
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    if (!frame || !e.composedPath().includes(frame))
+        return;
     // console.log('mousedown', e);
     // Find if this was
     // - a hit on a field edge RESIZE
@@ -126,6 +230,7 @@ function mouseDown(e) {
         this.selectFields.emit([]);
         this.selected = [];
         this.component.style.cursor = 'crosshair';
+        updateSelectionBox.bind(this)();
     }
 }
 function outOfBounds(futureField) {
@@ -137,6 +242,12 @@ function outOfBounds(futureField) {
 }
 function mouseMove(event) {
     event.preventDefault();
+    if (this._isToolboxDragging)
+        return;
+    // Disable mouse move interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     // We have the mouse held down on a field edge to resize it.
     if (this.hitField && this.edgeSide && this.startMouse && event.buttons === 1) {
         const movedX = event.screenX - this.startMouse.x;
@@ -257,21 +368,45 @@ function mouseMove(event) {
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
+        document.body.style.userSelect = 'none';
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         box.style.visibility = 'hidden';
+        // Dismiss any open date picker when moving fields
+        if (this.selected?.length) {
+            this.selected.forEach(f => {
+                const input = f.shadowRoot?.getElementById('editing-input');
+                if (input)
+                    input.blur();
+            });
+        }
         // Move one or more selected items
         const movedX = event.screenX - this.startMouse.x;
         const movedY = event.screenY - this.startMouse.y;
         if (this.selected?.length) {
+            // Calculate snap based on the primary (first) selected field
+            const primaryLeft = this.startLocations[0].left + movedX;
+            const primaryTop = this.startLocations[0].top + movedY;
+            const primaryWidth = this.startLocations[0].width;
+            const primaryHeight = this.startLocations[0].height;
+            const allFields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const excludeIds = this.selected.map(s => s.dataItem.id);
+            const snap = calculateSnap(primaryLeft, primaryTop, primaryWidth, primaryHeight, allFields, this.pageNum, excludeIds);
+            // Apply snap offset to all selected fields
+            const snapOffsetX = snap.x !== null ? snap.x - primaryLeft : 0;
+            const snapOffsetY = snap.y !== null ? snap.y - primaryTop : 0;
             for (let i = 0; i < this.selected.length; i++) {
-                if (this.startLocations[i].left + movedX >= 0 &&
-                    this.startLocations[i].top + movedY >= 0 &&
-                    this.startLocations[i].left + movedX <= (this.pageDimensions[this.pageNum - 1].width - this.selected[i].dataItem.width) * this.zoom &&
-                    this.startLocations[i].top + movedY <= (this.pageDimensions[this.pageNum - 1].height - this.selected[i].dataItem.height) * this.zoom) {
-                    this.selected[i].style.left = Math.round(this.startLocations[i].left + movedX) + 'px';
-                    this.selected[i].style.top = Math.round(this.startLocations[i].top + movedY) + 'px';
+                const newLeft = this.startLocations[i].left + movedX + snapOffsetX;
+                const newTop = this.startLocations[i].top + movedY + snapOffsetY;
+                if (newLeft >= 0 &&
+                    newTop >= 0 &&
+                    newLeft <= (this.pageDimensions[this.pageNum - 1].width - this.selected[i].dataItem.width) * this.zoom &&
+                    newTop <= (this.pageDimensions[this.pageNum - 1].height - this.selected[i].dataItem.height) * this.zoom) {
+                    this.selected[i].style.left = Math.round(newLeft) + 'px';
+                    this.selected[i].style.top = Math.round(newTop) + 'px';
                 }
             }
+            showSnapGuides.bind(this)(snap.guides);
+            updateSelectionBox.bind(this)();
         }
     }
 }
@@ -279,7 +414,8 @@ function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
-    // console.log('mouse up');
+    document.body.style.userSelect = '';
+    clearSnapGuides.bind(this)();
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox && this.isBoxing) {
         this.isBoxing = false;
@@ -290,9 +426,14 @@ function mouseUp(event) {
         const found = findIn(fields, box, true, event.shiftKey);
         this.selected = Array.from(found);
         this.selectFields.emit(found.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
 }
 function mouseClick(e) {
+    // Disable click interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     // check we're not moving fields
     if (this.isMoving) {
         // End dragging fields
@@ -315,6 +456,7 @@ function mouseClick(e) {
             return { action: 'update', data: delta };
         }));
         this.selectFields.emit(selected.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
     else {
         // reset the selection box location
@@ -333,63 +475,229 @@ function mouseClick(e) {
         });
         this.selected = Array.from(fields).filter(fx => fx.selected);
         this.selectFields.emit(this.selected.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
 }
-function mouseDrop(event) {
-    event.preventDefault();
-    try {
-        const data = JSON.parse(event.dataTransfer.getData('application/json'));
-        // Unselect all current selected items
-        this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(f => (f.selected = false));
-        var frame = this.component.shadowRoot.getElementById('ls-document-frame');
-        // Make a new API compatible id for a template element (prefix 'ele')
-        const id = btoa('ele' + crypto.randomUUID());
-        const top = event.offsetY / this.zoom + frame.scrollTop;
-        const left = event.offsetX / this.zoom + frame.scrollLeft;
-        // TODO: Put these defaults somewhere sensible
-        const newData = {
-            action: 'create',
-            data: {
-                id,
-                value: '',
-                formElementType: data.formElementType,
-                elementType: data.elementType,
-                validation: data.validation,
-                substantive: false,
-                top,
-                left,
-                hideBorder: false,
-                height: data.defaultHeight,
-                width: data.defaultWidth,
-                pageDimensions: this.pageDimensions[this.pageNum - 1],
-                fontName: this.fontFamily,
-                fontSize: this.fontSize,
-                align: 'left',
-                signer: this.signer,
-                page: this.pageNum,
-                mapTo: null,
-                label: '',
-                helpText: null,
-                logicGroup: null,
-                optional: false,
-                options: null,
-                logicAction: null,
-                labelExtra: null,
-                fieldOrder: null,
-                ax: left > 0 ? left / this.pageDimensions[this.pageNum - 1].width : 0,
-                ay: top > 0 ? top / this.pageDimensions[this.pageNum - 1].height : 0,
-                bx: (left + data.defaultWidth) / this.pageDimensions[this.pageNum - 1].width,
-                by: (top + data.defaultHeight) / this.pageDimensions[this.pageNum - 1].height,
-                templateId: this._template.id,
-            },
-        };
-        this.mutate.emit([newData]);
+function showSnapGuides(guides) {
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    let container = this.component.shadowRoot.getElementById('ls-snap-guides');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'ls-snap-guides';
+        container.style.position = 'absolute';
+        container.style.top = '0';
+        container.style.left = '0';
+        container.style.width = '100%';
+        container.style.height = '100%';
+        container.style.pointerEvents = 'none';
+        container.style.zIndex = '9999';
+        frame.appendChild(container);
     }
-    catch (e) {
-        console.error(e);
+    container.innerHTML = '';
+    for (const guide of guides) {
+        const line = document.createElement('div');
+        line.style.position = 'absolute';
+        line.style.backgroundColor = 'transparent';
+        if (guide.orientation === 'v') {
+            line.style.left = guide.position + 'px';
+            line.style.top = '0';
+            line.style.width = '0';
+            line.style.height = '100%';
+            line.style.borderLeft = '1px dashed var(--gray-50, #c8c9cc)';
+        }
+        else {
+            line.style.top = guide.position + 'px';
+            line.style.left = '0';
+            line.style.width = '100%';
+            line.style.height = '0';
+            line.style.borderTop = '1px dashed var(--gray-50, #c8c9cc)';
+        }
+        container.appendChild(line);
+    }
+}
+function clearSnapGuides() {
+    const container = this.component.shadowRoot.getElementById('ls-snap-guides');
+    if (container)
+        container.innerHTML = '';
+}
+function toolboxDragStart(fieldData) {
+    // Cancel any existing toolbox drag
+    if (this._cancelToolboxDrag) {
+        this._cancelToolboxDrag();
     }
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    const zoom = this.zoom;
+    this._isToolboxDragging = true;
+    const startTime = Date.now();
+    // Prevent text selection during drag
+    document.body.style.userSelect = 'none';
+    // Create ghost preview element matching the original drag image style
+    const ghost = document.createElement('div');
+    ghost.id = 'ls-toolbox-ghost';
+    ghost.style.position = 'fixed';
+    ghost.style.width = fieldData.defaultWidth * zoom + 'px';
+    ghost.style.height = fieldData.defaultHeight * zoom + 'px';
+    ghost.style.border = `2px dashed ${defaultRolePalette[this.signer % 100].s60}`;
+    const s20 = defaultRolePalette[this.signer % 100].s20.replace('#', '');
+    const r = parseInt(s20.substring(0, 2), 16);
+    const g = parseInt(s20.substring(2, 4), 16);
+    const b = parseInt(s20.substring(4, 6), 16);
+    ghost.style.background = `rgba(${r},${g},${b},0.5)`;
+    ghost.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+    ghost.style.pointerEvents = 'none';
+    ghost.style.zIndex = '10000';
+    ghost.style.visibility = 'hidden';
+    ghost.style.boxSizing = 'border-box';
+    ghost.style.fontFamily = 'var(--font-family, IBM Plex Sans, sans-serif)';
+    ghost.style.fontSize = Math.round(DEFAULT_FONT_SIZE * zoom) + 'px';
+    ghost.style.color = defaultRolePalette[this.signer % 100].s100;
+    ghost.style.overflow = 'hidden';
+    ghost.style.whiteSpace = 'nowrap';
+    ghost.style.display = 'flex';
+    ghost.style.alignItems = 'center';
+    ghost.style.textTransform = 'capitalize';
+    ghost.innerHTML = fieldData.formElementType;
+    this.component.shadowRoot.appendChild(ghost);
+    // Info chip at bottom of screen
+    const chip = document.createElement('div');
+    chip.id = 'ls-esc-chip';
+    chip.style.position = 'fixed';
+    chip.style.bottom = '1.5rem';
+    chip.style.left = '50%';
+    chip.style.transform = 'translateX(-50%)';
+    chip.style.padding = '0.375rem 0.75rem';
+    chip.style.borderRadius = '0.625rem';
+    chip.style.background = 'var(--gray-100, #1f2937)';
+    chip.style.color = 'white';
+    chip.style.fontSize = '0.75rem';
+    chip.style.fontFamily = 'var(--font-family, IBM Plex Sans, sans-serif)';
+    chip.style.pointerEvents = 'none';
+    chip.style.zIndex = '10000';
+    chip.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
+    chip.textContent = 'Press Esc to cancel field placement';
+    this.component.shadowRoot.appendChild(chip);
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        const dragWidth = fieldData.defaultWidth * zoom;
+        const dragHeight = fieldData.defaultHeight * zoom;
+        ghost.style.visibility = 'visible';
+        const frameRect = frame.getBoundingClientRect();
+        const isOverFrame = e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
+            e.clientY >= frameRect.top && e.clientY <= frameRect.bottom;
+        if (isOverFrame) {
+            ghost.style.opacity = '1';
+            const x = e.clientX - frameRect.left + frame.scrollLeft;
+            const y = e.clientY - frameRect.top + frame.scrollTop;
+            let left = x - dragWidth / 2;
+            let top = y - dragHeight / 2;
+            const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const snap = calculateSnap(left, top, dragWidth, dragHeight, fields, this.pageNum);
+            ghost.style.left = (snap.x !== null ? snap.x + frameRect.left - frame.scrollLeft : e.clientX - dragWidth / 2) + 'px';
+            ghost.style.top = (snap.y !== null ? snap.y + frameRect.top - frame.scrollTop : e.clientY - dragHeight / 2) + 'px';
+            showSnapGuides.bind(this)(snap.guides);
+        }
+        else {
+            ghost.style.opacity = '0.5';
+            ghost.style.left = (e.clientX - dragWidth / 2) + 'px';
+            ghost.style.top = (e.clientY - dragHeight / 2) + 'px';
+            clearSnapGuides.bind(this)();
+        }
+    };
+    const cleanup = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('keydown', onKeyDown);
+        ghost.remove();
+        chip.remove();
+        clearSnapGuides.bind(this)();
+        document.body.style.userSelect = '';
+        this._isToolboxDragging = false;
+        this._cancelToolboxDrag = null;
+    };
+    const onMouseUp = (e) => {
+        // Ignore mouseup if it's from the same click that started the drag
+        if (Date.now() - startTime < 100)
+            return;
+        const frameRect = frame.getBoundingClientRect();
+        const shouldPlace = e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
+            e.clientY >= frameRect.top && e.clientY <= frameRect.bottom;
+        cleanup();
+        if (shouldPlace) {
+            const dragWidth = fieldData.defaultWidth * zoom;
+            const dragHeight = fieldData.defaultHeight * zoom;
+            const x = e.clientX - frameRect.left + frame.scrollLeft;
+            const y = e.clientY - frameRect.top + frame.scrollTop;
+            let left = x - dragWidth / 2;
+            let top = y - dragHeight / 2;
+            const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const snap = calculateSnap(left, top, dragWidth, dragHeight, fields, this.pageNum);
+            if (snap.x !== null)
+                left = snap.x;
+            if (snap.y !== null)
+                top = snap.y;
+            const finalTop = top / zoom;
+            const finalLeft = left / zoom;
+            // Check if field fits on page - constrain to page boundaries
+            const pageWidth = this.pageDimensions[this.pageNum - 1].width;
+            const pageHeight = this.pageDimensions[this.pageNum - 1].height;
+            const constrainedLeft = Math.max(0, Math.min(finalLeft, pageWidth - fieldData.defaultWidth));
+            const constrainedTop = Math.max(0, Math.min(finalTop, pageHeight - fieldData.defaultHeight));
+            this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(f => (f.selected = false));
+            const id = btoa('ele' + crypto.randomUUID());
+            const newData = {
+                action: 'create',
+                data: {
+                    id,
+                    value: '',
+                    formElementType: fieldData.formElementType,
+                    elementType: fieldData.elementType,
+                    validation: fieldData.validation,
+                    substantive: false,
+                    top: constrainedTop,
+                    left: constrainedLeft,
+                    hideBorder: false,
+                    height: fieldData.defaultHeight,
+                    width: fieldData.defaultWidth,
+                    pageDimensions: this.pageDimensions[this.pageNum - 1],
+                    fontName: this.fontFamily,
+                    fontSize: this.fontSize,
+                    align: 'left',
+                    signer: this.signer,
+                    page: this.pageNum,
+                    mapTo: null,
+                    label: '',
+                    helpText: null,
+                    logicGroup: null,
+                    optional: false,
+                    options: null,
+                    logicAction: null,
+                    labelExtra: null,
+                    fieldOrder: null,
+                    ax: constrainedLeft > 0 ? constrainedLeft / this.pageDimensions[this.pageNum - 1].width : 0,
+                    ay: constrainedTop > 0 ? constrainedTop / this.pageDimensions[this.pageNum - 1].height : 0,
+                    bx: (constrainedLeft + fieldData.defaultWidth) / this.pageDimensions[this.pageNum - 1].width,
+                    by: (constrainedTop + fieldData.defaultHeight) / this.pageDimensions[this.pageNum - 1].height,
+                    templateId: this._template.id,
+                },
+            };
+            this.mutate.emit([newData]);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            cleanup();
+        }
+    };
+    this._cancelToolboxDrag = cleanup;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('keydown', onKeyDown);
 }
 function mouseDoubleClick(event) {
+    // Disable double-click field creation in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     console.log('double click', this.fieldTypeSelected, this.signer);
     try {
         let data = this.fieldTypeSelected;
@@ -596,15 +904,15 @@ const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribu
     componentDidLoad() {
     }
     render() {
-        return (h(Host, { key: '525f94669a4e8bec578065204afcb492e2b07b24' }, h("div", { key: '2015776e33b5042c77bbe3f1bf10c3bbb40ab773', class: 'ls-dv-field-properties-section' }, h("div", { key: 'b5f32886e70dc739d8a1ae0b80a325426c363060', class: 'ls-dv-field-properties-section-text' }, h("p", { key: 'd51c61b51808fae833621e619fc52038fed9df1d', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.distribution')), h("p", { key: '3c13e60348db49de078e666ad6842b5a8f8f1a0c', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.distributiondescription'))), h("div", { key: '68a1b5c7eae513136a9d7ebd281f79b77a435943', class: 'ls-dv-button-group' }, h("button", { key: 'd2a5f1714aa5996185aa87141b4995064518adb7', onClick: () => {
+        return (h(Host, { key: '01f6d96ded943892c29ddb3cd152709d0acb8a41' }, h("div", { key: '4531214ce93eb47527fcfe377788d04015eda282', class: 'ls-dv-field-properties-section' }, h("div", { key: '19cd9102d7bd24ba22b980b866cd6552fae989ba', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '4a859b97e94e4237d85dc7519cb861f10801e3f8', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.distribution')), h("p", { key: '8fe8b7fc7ada7cbbfb57467191a095f9f4831214', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.distributiondescription'))), h("div", { key: '830f37df2b90bdc5f89283541bbe9aaa1c0039fb', class: 'ls-dv-button-group' }, h("button", { key: '7e5f857cb785fd77aa7ffac1068b92e6cc9021e2', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": dvI18n.t('alignment.distributevertically'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributevertically') }, h("ls-icon", { key: 'f2896d86bceddac5d9ad33b1b5c40b485025d136', name: "field-distribute-vertically-icon" })), h("button", { key: '9ce79600052b2a1b46cd5571cefc6a30981e827d', onClick: () => {
+            }, "aria-label": dvI18n.t('alignment.distributevertically'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributevertically') }, h("ls-icon", { key: '77b9d390708d9865da130bbf4ae1d80a45df9e66', name: "field-distribute-vertically-icon" })), h("button", { key: '0bc938ac4f7f7b07a6f95aefe291fb489bc22bd2', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": dvI18n.t('alignment.distributehorizontally'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributehorizontally') }, h("ls-icon", { key: '99f3c22b1ebd868a29d5778ff39df2f9cd142c71', name: "field-distribute-horizontally-icon" })))), h("div", { key: 'f4b3f30aa5f1b0f8450bb15d134f65ad1127dce0', class: 'ls-dv-field-properties-section' }, h("div", { key: '0aa0a20f8d99353d7da87d0a3db0db033fae516d', class: 'ls-dv-field-properties-section-text' }, h("p", { key: 'e837016d6762891bec096affde218016f7b49a19', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.gap')), h("p", { key: 'f9c8ab7d90ee998e49a66c968ebe2caec035dd4c', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.gapdescription'))), h("div", { key: 'fb68bc991dd3391aacd8ffdc80ccba724869d579', class: 'ls-dv-input-row' }, h("div", { key: 'a01e264f35ef61dad7c0a9389b42adacaa101c45', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.setverticalgap') }, h("ls-icon", { key: 'b4d7c1dbef7eb1426c35380fdd79744aa5b7b2fc', id: "selectLeadingIcon", name: "field-distribute-vertically-icon" }), h("input", { key: 'cf0752776caa4363cf12f621032838525772d1d3', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+            }, "aria-label": dvI18n.t('alignment.distributehorizontally'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.distributehorizontally') }, h("ls-icon", { key: '27673bc2e7baf89f6b15e957c46b31ef55d4251c', name: "field-distribute-horizontally-icon" })))), h("div", { key: '18cb50b579c8c9b8a74374af11a88096a5f321ec', class: 'ls-dv-field-properties-section' }, h("div", { key: 'f11ef74f047bd2736ce5b377ebbd19c32faf3672', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '412fed2372e3ff501f5fee7d02101a5c2cc1258a', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.gap')), h("p", { key: 'c1893b487c3d18aeb54c09243c93ab6bbc72d38c', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.gapdescription'))), h("div", { key: 'ae325d1ba7f08014303a366fc8c3bbe54f745897', class: 'ls-dv-input-row' }, h("div", { key: 'c28f8c175007c08e7f97c7e35cad74c35d2bd030', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.setverticalgap') }, h("ls-icon", { key: 'ffc7e80802c1b6492b7a5f6af98d494b8fa4fe48', id: "selectLeadingIcon", name: "field-distribute-vertically-icon" }), h("input", { key: '3db6d88ba85133bd2c201fd79a759ff01e1f2e7e', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
                 this.gapVertical(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4 })), h("div", { key: '01f7d983b206c08c2ea6f6d309026183e9acc14c', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.sethorizontalgap') }, h("ls-icon", { key: '2687730a4d1a93008f544dd67cbcf1eeb779a1b4', id: "selectLeadingIcon", name: "field-distribute-horizontally-icon" }), h("input", { key: 'eb0e383f10139e3a61a11d11779619bc6b0f3151', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+            }, min: 0, max: 9999, value: '', size: 4 })), h("div", { key: '6cba1c88553fe6e02bb667eddf9837d1cb4806e7', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('placement.sethorizontalgap') }, h("ls-icon", { key: '815738561c5cee9c40860d972f1f8f91b2d1d736', id: "selectLeadingIcon", name: "field-distribute-horizontally-icon" }), h("input", { key: '101c0bf2bfd69ebd98da777b44927e14f2945045', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
                 this.gapHorizontal(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4 })))), h("ls-tooltip", { key: '4742d373587b7a87c04bdebcf85cf6994ca913da', tooltipId: "ls-dv-tooltip" }), h("slot", { key: '02b3d216a56c86ab988e4395f02cb025a135a5f9' })));
+            }, min: 0, max: 9999, value: '', size: 4 })))), h("ls-tooltip", { key: '8c7da9b8b16f4eb2d8f9ede0a29dda3646d9321d', tooltipId: "ls-dv-tooltip" }), h("slot", { key: '356d2b38a3fceedb514f737b82c844af7509f3d4' })));
     }
     static get style() { return lsFieldDistributeCss(); }
 }, [769, "ls-field-distribute", {
@@ -640,7 +948,7 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { LsFieldDistribute as L, mouseDown as a, mouseMove as b, mouseUp as c, defineCustomElement as d, mouseDoubleClick as e, mouseDrop as f, mouseClick as m };
-//# sourceMappingURL=p-DCdDskfL.js.map
+export { LsFieldDistribute as L, mouseDown as a, mouseMove as b, mouseUp as c, defineCustomElement as d, mouseDoubleClick as e, mouseClick as m, toolboxDragStart as t, updateSelectionBox as u };
+//# sourceMappingURL=p-DS_FPOrD.js.map
 
-//# sourceMappingURL=p-DCdDskfL.js.map
+//# sourceMappingURL=p-DS_FPOrD.js.map