legalesign-document-viewer 0.4.8 → 0.4.10

package/dist/components/p-DR6nQwpS.js

@@ -0,0 +1,579 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { f as findDimensions, r as recalculateCoordinates, h as findIn, d as defineCustomElement$3, o as oob } from './p-CYmYmhQR.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$2 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
+
+let mousetimer = null;
+function debounce(data, delay) {
+    if (mousetimer)
+        clearTimeout(mousetimer);
+    mousetimer = setTimeout(() => {
+        this.mutate.emit([data]);
+    }, delay);
+}
+function mouseDown(e) {
+    if (e.offsetX < 0 || e.offsetY < 0)
+        return;
+    // console.log('mousedown', e);
+    // Find if this was
+    // - a hit on a field edge RESIZE
+    // - a hit on the middle of a field MOVE
+    // - a hit on the background document SELECTMULTIPLE with a box
+    this.hitField = null;
+    const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+    fields.forEach(f => {
+        const { left, top, height, width, bottom, right } = f.getBoundingClientRect();
+        const fdims = { left: f.offsetLeft, top: f.offsetTop, height, width, x: e.screenX, y: e.screenY };
+        this.startMouse = fdims;
+        // west edge
+        if (Math.abs(e.clientX - left) < 5 && e.clientY >= top && e.clientY <= bottom) {
+            this.edgeSide = 'w';
+            this.hitField = f;
+            // right / east edge
+        }
+        else if (Math.abs(e.clientX - right) < 5 && e.clientY >= top && e.clientY <= bottom) {
+            this.edgeSide = 'e';
+            this.hitField = f;
+            // north edge
+        }
+        else if (Math.abs(e.clientY - top) < 5 && e.clientX >= left && e.clientX <= right) {
+            this.edgeSide = 'n';
+            this.hitField = f;
+            // south edge
+        }
+        else if (Math.abs(e.clientY - bottom) < 5 && e.clientX >= left && e.clientX <= right) {
+            this.edgeSide = 's';
+            this.hitField = f;
+        }
+        else if (e.clientY <= bottom && e.clientY >= top && e.clientX >= left && e.clientX <= right) {
+            this.edgeSide = null;
+            this.hitField = f;
+        }
+    });
+    if (this.hitField && e.shiftKey === false) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [this.hitField];
+            this.selectFields.emit([this.hitField.dataItem]);
+        }
+        const { height, width } = this.hitField.getBoundingClientRect();
+        const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
+        this.startMouse = fdims;
+        this.startLocations = this.selected.map(f => {
+            const { height, width } = f.getBoundingClientRect();
+            const beHtml = f;
+            return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
+        });
+        this.selectionBox = null;
+    }
+    else if (this.hitField && e.shiftKey === true) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [...this.selected, this.hitField];
+            this.selectFields.emit([...this.selected.map(si => si.dataItem), this.hitField.dataItem]);
+        }
+        const { height, width } = this.hitField.getBoundingClientRect();
+        const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
+        this.startMouse = fdims;
+        this.startLocations = this.selected.map(f => {
+            const { height, width } = f.getBoundingClientRect();
+            const beHtml = f;
+            return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
+        });
+        this.selectionBox = null;
+    }
+    else {
+        // move down on empty space, start a selection box
+        this.startLocations = null;
+        this.startMouse = null;
+        this.selectionBox = { x: e.clientX, y: e.clientY };
+        // console.log('empty space reset selected', this.selectionBox);
+        this.unselect();
+        this.selectFields.emit([]);
+        this.selected = [];
+        this.component.style.cursor = 'crosshair';
+    }
+}
+function outOfBounds(futureField) {
+    return (futureField.height <= 5 ||
+        futureField.left < 0 ||
+        futureField.top < 0 ||
+        futureField.left + futureField.width >= futureField.pageDimensions.width ||
+        futureField.top + futureField.height >= futureField.pageDimensions.height);
+}
+function mouseMove(event) {
+    event.preventDefault();
+    // 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;
+        const movedY = event.screenY - this.startMouse.y;
+        var width = this.hitField.dataItem.width;
+        var height = this.hitField.dataItem.height;
+        var scale = this.hitField.dataItem.formElementType === 'signature' && this._template.fixSignatureScale;
+        switch (this.edgeSide) {
+            case 'n':
+                if (outOfBounds({ ...this.hitField.dataItem, top: this.startMouse.top + movedY, height: this.startMouse.height - movedY }))
+                    break;
+                this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                if (scale) {
+                    width = (this.startMouse.height - movedY) * 3.8;
+                    this.hitField.style.width = width + 'px';
+                }
+                this.hitField.dataItem = { ...this.hitField.dataItem, top: this.startMouse.top + movedY, height: this.startMouse.height - movedY, width };
+                break;
+            case 's':
+                if (outOfBounds({ ...this.hitField.dataItem, height: this.startMouse.height + movedY }))
+                    break;
+                this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                if (scale) {
+                    width = (this.startMouse.height + movedY) * 3.8;
+                    this.hitField.style.width = width + 'px';
+                }
+                this.hitField.dataItem = { ...this.hitField.dataItem, height: this.startMouse.height + movedY, width };
+                break;
+            case 'e':
+                if (outOfBounds({ ...this.hitField.dataItem, width: this.startMouse.width + movedX }))
+                    break;
+                this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                if (scale) {
+                    height = Math.round((this.startMouse.width + movedX) / 3.8);
+                    this.hitField.style.height = height + 'px';
+                }
+                this.hitField.dataItem = { ...this.hitField.dataItem, width: this.startMouse.width + movedX, height };
+                break;
+            case 'w':
+                if (outOfBounds({ ...this.hitField.dataItem, left: this.startMouse.left + movedX, width: this.startMouse.width - movedX }))
+                    break;
+                this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                if (scale) {
+                    height = Math.round((this.startMouse.width - movedX) / 3.8);
+                    this.hitField.style.height = height + 'px';
+                }
+                this.hitField.dataItem = { ...this.hitField.dataItem, left: this.startMouse.left + movedX, width: this.startMouse.width - movedX, height };
+                break;
+        }
+        debounce.bind(this)({ action: 'update', data: recalculateCoordinates(this.hitField.dataItem) }, 700);
+    }
+    else if (this.selectionBox && event.buttons === 1) {
+        this.isBoxing = true;
+        // draw the multiple selection box
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        var frame = this.component.shadowRoot.getElementById('ls-document-frame');
+        var leftOffset = frame.getBoundingClientRect().left;
+        var topOffset = frame.getBoundingClientRect().top;
+        const movedX = event.clientX - this.selectionBox.x;
+        const movedY = event.clientY - this.selectionBox.y;
+        // allow for the frame to be scrolled
+        box.style.visibility = 'visible';
+        box.style.left = (this.selectionBox.x > event.clientX ? event.clientX : this.selectionBox.x) - leftOffset + frame.scrollLeft + 'px';
+        box.style.top = (this.selectionBox.y > event.clientY ? event.clientY : this.selectionBox.y) - topOffset + frame.scrollTop + 'px';
+        box.style.width = Math.abs(movedX) + 'px';
+        box.style.height = Math.abs(movedY) + 'px';
+        // Move one or more selected items
+    }
+    else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
+        this.isMoving = true;
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // Move one or more selected items
+        const movedX = event.screenX - this.startMouse.x;
+        const movedY = event.screenY - this.startMouse.y;
+        if (this.selected?.length) {
+            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.startLocations[i].top + movedY <= this.pageDimensions[this.pageNum - 1].height - this.selected[i].dataItem.height) {
+                    this.selected[i].style.left = this.startLocations[i].left + movedX + 'px';
+                    this.selected[i].style.top = this.startLocations[i].top + movedY + 'px';
+                }
+            }
+        }
+    }
+}
+function mouseUp(event) {
+    this.edgeSide = null;
+    this.startMouse = null;
+    this.component.style.cursor = 'auto';
+    // console.log('mouse up');
+    // find what was inside the selection box emit the select event and change their style
+    if (this.selectionBox && this.isBoxing) {
+        this.isBoxing = false;
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        var fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        box.style.visibility = 'hidden';
+        this.selectionBox = null;
+        const found = findIn(fields, box, true, event.shiftKey);
+        this.selected = Array.from(found);
+        this.selectFields.emit(found.map(fx => fx.dataItem));
+    }
+}
+function mouseClick(e) {
+    // check we're not moving fields
+    if (this.isMoving) {
+        // End dragging fields
+        this.isMoving = false;
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        const divFrame = this.component.shadowRoot.getElementById('ls-document-frame');
+        const selected = Array.from(fields).filter(fx => fx.selected);
+        this.mutate.emit(Array.from(fields)
+            .filter(fx => fx.selected)
+            .map(fx => {
+            // Calculate new positions and update the dataItem on the control
+            const delta = {
+                ...fx.dataItem,
+                ...findDimensions(divFrame, fx, this.pageDimensions[this.pageNum - 1].height, this.pageDimensions[this.pageNum - 1].width, this.zoom),
+            };
+            // TODO:: out of bounds handler (UNDO)
+            // update the data in the html element
+            fx.dataItem = delta;
+            // send an update event to be processed
+            return { action: 'update', data: delta };
+        }));
+        this.selectFields.emit(selected.map(fx => fx.dataItem));
+    }
+    else {
+        // reset the selection box location
+        this.selectionBox = { x: e.clientX, y: e.clientY };
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(f => {
+            const { left, top, bottom, right } = f.getBoundingClientRect();
+            if (e.clientY <= bottom && e.clientY >= top && e.clientX >= left && e.clientX <= right) {
+                this.edgeSide = null;
+                this.hitField = f;
+                // check if this is a shift click to add to the current selection
+                if (!e.shiftKey)
+                    fields.forEach(ft => (ft.selected = false));
+                f.selected = true;
+            }
+        });
+        this.selected = Array.from(fields).filter(fx => fx.selected);
+        this.selectFields.emit(this.selected.map(fx => fx.dataItem));
+    }
+}
+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,
+            },
+        };
+        console.log(newData);
+        this.mutate.emit([newData]);
+        this.update.emit([newData]);
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+function mouseDoubleClick(event) {
+    console.log('double click');
+    try {
+        const data = this.fieldTypeSelected;
+        // 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: 'arial',
+                fontSize: 10,
+                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,
+            },
+        };
+        console.log(newData);
+        this.mutate.emit([newData]);
+        this.update.emit([newData]);
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+
+const lsFieldDistributeCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:2.813rem;max-height:1.125rem;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);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)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldDistribute = /*@__PURE__*/ proxyCustomElement(class LsFieldDistribute extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    dataItem;
+    mutate;
+    update;
+    get component() { return this; }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    distributeHorizontal() {
+        var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
+        const sorted = this.dataItem.sort((a, b) => a.left - b.left);
+        if (sorted.length < 3)
+            return;
+        var avgspace = 0;
+        const leftmost = sorted[0].left + sorted[0].width / 2;
+        const rightmost = sorted.reduce((acc, cur) => {
+            return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;
+        }, leftmost);
+        // find total width between centre first and centre last
+        const totalWidth = rightmost - leftmost;
+        if (spacing.value !== '') {
+            avgspace = parseInt(spacing.value);
+        }
+        else {
+            avgspace = Math.floor(totalWidth / (sorted.length - 1));
+        }
+        const filtered = sorted.filter((c, index) => {
+            return outOfBounds({ ...c, left: Math.floor(leftmost - (c.width / 2) + avgspace * index) }) === false
+                && index !== 0
+                && index !== sorted.length - 1;
+        });
+        const diffs = filtered.map((c, index) => {
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    gapVertical(spacing) {
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].top;
+        const diffs = sorted.map(c => {
+            const newTop = buffer;
+            buffer = buffer + c.height + spacing;
+            const target = {
+                ...c,
+                top: newTop,
+            };
+            return {
+                action: 'update',
+                data: oob(target)
+                    ? {
+                        ...c,
+                        left: c.pageDimensions.height - c.height - 1,
+                    }
+                    : target,
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    gapHorizontal(spacing) {
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].left;
+        const diffs = sorted.map(c => {
+            const newLeft = buffer;
+            buffer = buffer + c.width + spacing;
+            const target = {
+                ...c,
+                left: newLeft,
+            };
+            console.log(target, oob(target));
+            return {
+                action: 'update',
+                data: oob(target)
+                    ? {
+                        ...c,
+                        left: c.pageDimensions.width - c.width - 1,
+                    }
+                    : target,
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    distributeVertical() {
+        var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
+        var avgspace = 0;
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        const topmost = sorted[0].top + sorted[0].height / 2;
+        const bottommost = sorted.reduce((acc, cur) => {
+            return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;
+        }, topmost);
+        // find total width between centre first and centre last
+        const totalHeight = bottommost - topmost;
+        if (spacing.value !== '') {
+            avgspace = parseInt(spacing.value);
+        }
+        else {
+            avgspace = Math.floor(totalHeight / (sorted.length - 1));
+        }
+        const filtered = sorted.filter((c, index) => {
+            return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false
+                && index !== 0
+                && index !== sorted.length - 1;
+        });
+        const diffs = filtered.map((c, index) => {
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: 'c06b2987d2456ac90d5743e333d1094f06b23c65' }, h("div", { key: '8e78a3f2769b356591d86849e35afbb4537ce4ca', class: 'ls-field-properties-section' }, h("div", { key: '29329178494ef3a1482508c48a3bdc67e7f48d0f', class: 'ls-field-properties-section-text' }, h("p", { key: 'b94e6ff800bef85868f44ea69f3b03227168e199', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '68be3703df94c04966d290125551997ea64705ef', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '65f35f606f0954a356020c35afa468630ebd4c79', class: 'button-group' }, h("button", { key: '0d54769aa654920c206255ccae116ef1e9166229', onClick: () => {
+                this.distributeVertical();
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: '56dfda0e142e0dc28a86d8b9968344f86ecbbda9', name: "field-distribute-vertically" })), h("button", { key: '29253e7bfa3fb37c87a8b05edaf0178765eafc09', onClick: () => {
+                this.distributeHorizontal();
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, h("ls-icon", { key: 'ec6fe592e480488aab562788be6092d6c629313b', name: "field-distribute-horizontally" })))), h("div", { key: '2fd6de11f133e3a997cd2b8ac6c7be0c88c0eb2f', class: 'ls-field-properties-section' }, h("div", { key: '33b91c5f23ce5b0a91b3366b90b4efa8df80c683', class: 'ls-field-properties-section-text' }, h("p", { key: '0eca395004eadae20e0c354a07cd9a3cb0fe5f66', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'eb665ca6f80066a0b7875a087d06aa899c48f90d', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: 'e94ce80fdd7091c84722bf022bdf2942a96c19b4', class: 'input-row' }, h("div", { key: '77fac09300ea6d03447b84ba8c53332c16ca8412', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: '119c87513c2993b22c984a0fb002ff67068c5e74', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: 'df3b3cb5ce81f09ad54ae30afeb4712838ddcdd6', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+                this.gapVertical(parseInt(e.target.value));
+            }, value: '', size: 4, min: 0, max: 9999 })), h("div", { key: '0342792227c10946f906f961ff9a316c017f7dc0', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: 'f2f3f13ecb113f7b4ab3bd41365859cd86f35f4f', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'd79f7fb2f7b07fbbe2c2198a162734f5b996148b', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+                this.gapHorizontal(parseInt(e.target.value));
+            }, value: '', size: 4, min: 0, max: 9999 })))), h("ls-tooltip", { key: '2c64922f26291845477b4d49456e9aa149368473', id: "ls-tooltip-master" }), h("slot", { key: '85aa5cc253055d868acfcef263d8d5f76d0fee03' })));
+    }
+    static get style() { return lsFieldDistributeCss(); }
+}, [769, "ls-field-distribute", {
+        "dataItem": [1040]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-distribute", "ls-editor-field", "ls-icon", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-distribute":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldDistribute);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+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-DR6nQwpS.js.map
+
+//# sourceMappingURL=p-DR6nQwpS.js.map