legalesign-document-viewer 0.4.10 → 0.5.0

package/dist/cjs/ls-document-options_46.cjs.entry.js

@@ -64,7 +64,6 @@ const LsDocumentOptions = class {
         this.titletimer = setTimeout(() => {
             this.template = { ...this.template, ...diff };
             const diffs = [{ action: 'update', data: this.template }];
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }, delay);
     }
@@ -35174,21 +35173,19 @@ const findDimensions = (frameContainer, sourceField, pageHeight, pageWidth, zoom
     const frmDims = frameContainer.getBoundingClientRect();
     // dimensions relative to viewport
     const { height, width } = sourceField.getBoundingClientRect();
-    const zwidth = width / zoom;
-    const zheight = height / zoom;
     const top = Math.floor((sourceField.getBoundingClientRect().top - frmDims.top) / zoom);
     const left = Math.floor((sourceField.getBoundingClientRect().left - frmDims.left) / zoom);
     // Returns X, Y coordinates
     const ax = left > 0 ? left / pageWidth : 0;
     const ay = top > 0 ? top / pageHeight : 0;
-    const bx = (left + zwidth) / pageWidth;
-    const by = (top + zheight) / pageHeight;
+    const bx = (left + (width / zoom)) / pageWidth;
+    const by = (top + (height / zoom)) / pageHeight;
     // Return with calculated styles that try to place it as it would appear on legacy signing page
     return {
         top,
         left,
-        height,
-        width,
+        height: Math.round(height / zoom),
+        width: Math.round(width / zoom),
         ax,
         ay,
         bx,
@@ -35374,7 +35371,6 @@ function alter(diffFn) {
         return { action: 'update', data: diffFn(c.dataItem) };
     });
     this.mutate.emit(diffs);
-    this.update.emit(diffs);
 }
 function debounce$1(func, timeout = 300) {
     let timer;
@@ -35385,7 +35381,7 @@ function debounce$1(func, timeout = 300) {
         }, timeout);
     };
 }
-// if a mutation has created a new id then update the dataitem with OLD id to the new one
+// After a mutation ensure that the new data is stored in fields and template
 function matchData(data) {
     const newObj = data.result;
     const prefix = atob(data.obj.id).substring(0, 3);
@@ -35594,9 +35590,6 @@ function keyDown(ev) {
             this.mutate.emit(arr.map(s => {
                 return { action: 'delete', data: s.dataItem };
             }));
-            this.update.emit(arr.map(s => {
-                return { action: 'delete', data: s.dataItem };
-            }));
         }
         else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {
             const arr = Array.from(this.selected);
@@ -35610,7 +35603,6 @@ function keyDown(ev) {
                 return { action: 'create', data: newItem, select: 'clear' };
             });
             this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));
-            this.update.emit(createdItems);
         }
         else if (ev.key === 'Escape') {
             console.log('Clearing selection');
@@ -35741,7 +35733,7 @@ function mouseMove(event) {
         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 }))
+                if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom }))
                     break;
                 this.hitField.style.top = this.startMouse.top + movedY + 'px';
                 this.hitField.style.height = this.startMouse.height - movedY + 'px';
@@ -35752,7 +35744,7 @@ function mouseMove(event) {
                 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 }))
+                if (outOfBounds({ ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom }))
                     break;
                 this.hitField.style.height = this.startMouse.height + movedY + 'px';
                 if (scale) {
@@ -35762,17 +35754,17 @@ function mouseMove(event) {
                 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 }))
+                if (outOfBounds({ ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom }))
                     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 };
+                this.hitField.dataItem = { ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom, height };
                 break;
             case 'w':
-                if (outOfBounds({ ...this.hitField.dataItem, left: this.startMouse.left + movedX, width: this.startMouse.width - movedX }))
+                if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom }))
                     break;
                 this.hitField.style.left = this.startMouse.left + movedX + 'px';
                 this.hitField.style.width = this.startMouse.width - movedX + 'px';
@@ -35813,8 +35805,8 @@ function mouseMove(event) {
             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.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 = this.startLocations[i].left + movedX + 'px';
                     this.selected[i].style.top = this.startLocations[i].top + movedY + 'px';
                 }
@@ -35853,7 +35845,7 @@ function mouseClick(e) {
             // 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),
+                ...findDimensions(divFrame, fx, fx.dataItem.pageDimensions.height, fx.dataItem.pageDimensions.width, this.zoom),
             };
             // TODO:: out of bounds handler (UNDO)
             // update the data in the html element
@@ -40241,7 +40233,6 @@ const LsDocumentViewer = class {
         this.pageChange = index.createEvent(this, "pageChange", 7);
         this.selectFields = index.createEvent(this, "selectFields", 7);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     get component() { return index.getElement(this); }
     isPageRendering;
@@ -40401,13 +40392,13 @@ const LsDocumentViewer = class {
     selectFields;
     // Send an external event to be processed
     mutate;
-    // Send an internal event to be processed
-    update;
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
         if (this.token && this.adapter)
-            event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
+            event.detail.forEach(me => this.adapter.handleEvent(me, this.token)
+                .then(result => matchData.bind(this)(result))
+                .then(() => this.syncChange(me)));
     }
     handleFieldTypeSelected(event) {
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
@@ -40417,11 +40408,6 @@ const LsDocumentViewer = class {
         this.fieldTypeSelected = event.detail;
     }
     // Updates are internal event between LS controls not to be confused with mutate
-    updateHandler(event) {
-        if (event.detail)
-            event.detail.forEach(fx => this.syncChange(fx));
-    }
-    // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
         const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
         const parent = this._template.roles.find(r => r.id === event.detail.parent);
@@ -40441,7 +40427,6 @@ const LsDocumentViewer = class {
                 },
             },
         ];
-        this.update.emit(data);
         this.mutate.emit(data);
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -40674,7 +40659,6 @@ const LsDocumentViewer = class {
                 this.selected = Array.from(fields).filter(fx => fx.selected);
             }
             else if (update.action === 'delete') {
-                console.log('Deleting field via syncChange', update.data);
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                 if (!fi)
                     return;
@@ -40780,7 +40764,7 @@ const LsDocumentViewer = class {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (index.h(index.Host, { key: '868e5839c2093b1b0e2ca126fd5b1a6ade5165b0' }, index.h(index.h.Fragment, null, this.isLoading && index.h("ls-page-loader", { key: 'f9ccc5ab71135246caf9905842863d2cad6f61b6' }), index.h("div", { key: '2d0e6c0a892b0df8f8b82b8838f48205fe57dfda', class: "page-header" }, index.h("div", { key: '17720d0486d7674dafd681701f705a6c5cefc802', class: 'left-slot-wrapper' }, index.h("slot", { key: 'ee04537b58ccd6b14cff617cb57d7069805f776c', name: "left-button" })), index.h("div", { key: 'f829c4cd146e924d5d48e6449d30178f9957e7db', class: 'right-slot-wrapper' }, index.h("slot", { key: '081b0037d3865e78271994ebce81c83942cf1d76', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: '3667fe03422e7d4100e51f600a89718631dd6920' }, index.h("span", { key: '65e60cd936d7a31742332c1aaf897e11f7519d13', class: "header-text-1" }, "Template Creation"), index.h("span", { key: 'c4ceaba10b9e6325c190b32433598671bcafa012' }, "/"), index.h("span", { key: '1ee7afec9ec1791af557b99dbe745f88cbb8db06', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: 'bf2516e00f2b07e823906cc10edb70275b7bebe4', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("span", { key: '94abf7bcf876339afba7994d85e48514c2073e69', class: "header-text-1" }, "Compose"), " ", index.h("span", { key: 'b00585e269ae956fd45aca6b0ab1741a3a3bcdcd' }, "/"), " ", index.h("ls-title-input", { key: 'b4300df223f19ad06e779ebd9d5b35aa7d75cb75', template: this._template })))), this.mode === 'editor' && (index.h("div", { key: 'dd81b1a20596e3a955389b6e876321f67a1c695c', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '82de75ddd3ddc47a31a67e474b45e73d6d97fb62', validationErrors: this.validationErrors }))), index.h("form", { key: '4b47c5dd6740468d32b49931142a594f2c091029', id: "ls-editor-form" }, this.mode !== 'preview' ? (index.h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (index.h("ls-feature-column", { mode: this.mode, onManage: manager => {
+        return (index.h(index.Host, { key: '592c7144dc4fd461a0d3b8e227db8e4048467c9f' }, index.h(index.h.Fragment, null, this.isLoading && index.h("ls-page-loader", { key: '113947587a6fe8e00d89ed00edde9afc8be74593' }), index.h("div", { key: '677507d66bd4838f83b23b3709a150f3d84f29bd', class: "page-header" }, index.h("div", { key: '22a111c262260ccba582b3d67e3821e26600b6d9', class: 'left-slot-wrapper' }, index.h("slot", { key: '6cbdd90b06fe4932945be175c34d30425315fa0f', name: "left-button" })), index.h("div", { key: '69fc0abcc276a7df62c64f8110be565fcf64543f', class: 'right-slot-wrapper' }, index.h("slot", { key: '5fcd702fb09f97d0e3ad7c36c1964a4f76511c56', name: "right-button" })), this.mode === 'editor' && (index.h("div", { key: '26c37fb4933d625f83b4e2e79c64fc404a2bca83' }, index.h("span", { key: 'ff58207753e287214f7b54301067812ac7a1864f', class: "header-text-1" }, "Template Creation"), index.h("span", { key: '91f36b80b04d9dd46ebc04250f28c1e0a9ae340a' }, "/"), index.h("span", { key: 'f0b3432388b7924e8c7e88d088ec8882e74da179', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (index.h("div", { key: '174d1395ed9283ccfff0e7054d922d1a099d6ac6', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, index.h("span", { key: 'e45eede718f3acfbf2597e207ac84cda4f3d93f5', class: "header-text-1" }, "Compose"), " ", index.h("span", { key: '18f911514cf2b4c5058cb49de8b93cfc9d7319a3' }, "/"), " ", index.h("ls-title-input", { key: '71f7afcfed3fa23b92a81a22211578e5a1ae0837', template: this._template })))), this.mode === 'editor' && (index.h("div", { key: '44e9e1b2e8e9a8d8d3bfe49075bd9c27272d0bfd', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '15ab405d7eddf10eba6adc64f2ca9460ae05f3bc', validationErrors: this.validationErrors }))), index.h("form", { key: '38a29a27b4fac98b46fcff7748e1225bc44b2220', id: "ls-editor-form" }, this.mode !== 'preview' ? (index.h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (index.h("ls-feature-column", { mode: this.mode, onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -40791,7 +40775,6 @@ const LsDocumentViewer = class {
                 }
                 else if (manager.detail === 'validation') {
                     var validationManager = this.component.shadowRoot.getElementById('ls-validation-manager');
-                    console.log(validationManager);
                     validationManager.validationErrors = this.validationErrors;
                 }
                 this.manager = manager.detail;
@@ -40799,7 +40782,7 @@ const LsDocumentViewer = class {
             this._recipients.map(recipient => (index.h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))))), !this.displayTable && (index.h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, index.h("ls-icon", { name: "x", size: "1.25rem" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), this.selected.length > 0 && index.h("ls-toolbar", { key: '6e35179336337d805786da6949a38fb8bae66a2b', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: 'acbdff7e6ae94ac87e8b639218078860474f30ee', id: "ls-mid-area" }, index.h("div", { key: '3124125b9717481915d341ff60b6a9e19c0408c4', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '8cdf8b2b217a59e6b1ddfbdc3b1cb41c8a52f013', id: "ls-document-frame" }, index.h("canvas", { key: '7b70e383cd1dea52a05e061f1cbd6533b8161a21', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'bb76bf679eb545950935315d7bdd5445ef5018a7', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '89a2c765733293159007e3ea77e13df296c136b5', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'fdcca67071018e732d363c477e1222d1a25d4f7c', editor: this, page: this.pageNum, pageCount: this.pageCount })))), index.h("ls-tooltip", { key: '3dc86980350380030cd5c414ead089bb1f6b5834', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, index.h("ls-icon", { name: "x", size: "1.25rem" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), this.selected.length > 0 && index.h("ls-toolbar", { key: 'a88185257ac871dc06d0cdfb469ce707f5181e4d', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '45e36f82ccbc164030b88b77d5e5bee3d492adbd', id: "ls-mid-area" }, index.h("div", { key: 'ccfb67c4439afa826187684cb5607aa578d7e2c7', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '8db690eef40e7681d55a741dd73b5baf04746b65', id: "ls-document-frame" }, index.h("canvas", { key: 'b3c5a5dd0628bc64ed4778331d55f9e21379b030', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ad39cdc485dc2338cd1a0d352d80b86c9c21aa02', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '50f7fd13fa475862059e0068282dd679b019f53a', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '21e4863029cf8b59ad3f902a5dc9c2658aa1cefe', editor: this, page: this.pageNum, pageCount: this.pageCount })))), index.h("ls-tooltip", { key: 'd55c2e32d2b66bd63aa0fa20873e753736a7aff2', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -41161,7 +41144,6 @@ const LsEditorField = class {
         this.labeltimer = setTimeout(() => {
             const diffs = [{ action: 'update', data }];
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }, delay);
     }
     hexToRgba(hex, alpha) {
@@ -41176,10 +41158,10 @@ const LsEditorField = class {
             ? { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid`, boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' }
             : { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` };
         const zoomValue = parseFloat(this.zoom) || 1;
-        return (index.h(index.Host, { key: 'ee8bc802908d06d9cce6a1408353cade70328bde', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '9b41c4cf8e31bc92eaa49b41abc890b355ae1031', class: {
+        return (index.h(index.Host, { key: '89a2f93e5353a2660bb262af4830b6911bd7ee64', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '95decbf8fee094a5ac8e7f3e7314374b659b6579', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && index.h("ls-icon", { key: 'a5b4e075c4f8c6f41db3246590d33dbb69e1213a', name: "required", size: `${0.75 * zoomValue}rem`, class: "required-icon", customStyle: { position: 'absolute', verticalAlign: 'top', top: `${0.125 * zoomValue}rem`, right: `${0.125 * zoomValue}rem` } }), index.h("input", { key: '5e897ffb87aaf66f83f52a79f3bb1f8c97aff93d', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), index.h("div", { key: 'c66811189cbf828b1112631691fe9d807a981d8f', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}` } }, (this.dataItem.value.length && this.dataItem.value) || this.dataItem?.formElementType), (this.floatingActive || this.selected) && this.dataItem?.label && (index.h("div", { key: '2d16a53bdd4ec75fa653964c7ccbd522b1ac0ac0', style: {
+            } }, !this.dataItem?.optional && index.h("ls-icon", { key: '14b5c38881517f955428bf35d31f4282aae1e286', name: "required", size: `${0.75 * zoomValue}rem`, class: "required-icon", customStyle: { position: 'absolute', verticalAlign: 'top', top: `${0.125 * zoomValue}rem`, right: `${0.125 * zoomValue}rem` } }), index.h("input", { key: '404b2803acd1c74cfd8a8853623dad2c3ca74b20', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), index.h("div", { key: 'bb8c8de6ac5c3bce79b6bbf7df9a86da5084c572', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}` } }, (this.dataItem.value.length && this.dataItem.value) || this.dataItem?.formElementType), (this.floatingActive || this.selected) && this.dataItem?.label && (index.h("div", { key: '21ebed73fd616a3655d55c10e3625592bdc6de64', style: {
                 position: 'absolute',
                 background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -41190,7 +41172,7 @@ const LsEditorField = class {
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (index.h("p", { key: '0a0185ed50071d53c4e084e31cc9583ae0e0874e', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (index.h("p", { key: 'e14e6cce83af912df7de7464dca48f8a55c2867f', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -41198,9 +41180,9 @@ const LsEditorField = class {
                 left: '0',
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, "Assigned to: ", this.assignee)), this.floatingActive && (index.h("button", { key: '49944bf86dd0f00136c7752c3344d80afe4bffc1', class: 'x-button', style: {
+            } }, "Assigned to: ", this.assignee)), this.floatingActive && (index.h("button", { key: '5e4ed8ed5bd08c555f203708544d24ac6a847f2d', class: 'x-button', style: {
                 padding: `${0.125 * zoomValue}rem`,
-            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: '9901ddb43f944d30659608c7e7e2c8fdae307a4d', name: "x", size: `${0.625 * zoomValue}rem` }))))));
+            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: 'c63cbfd8a4c71b8dfc6693a5bdd339e37414774a', name: "x", size: `${0.625 * zoomValue}rem` }))))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -41307,7 +41289,6 @@ const LsFieldAlignment = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     right() {
         const rightmost = this.dataItem.reduce((rightmost, current) => {
@@ -41328,7 +41309,6 @@ const LsFieldAlignment = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     center() {
         const addcentres = this.dataItem.reduce((total, current) => {
@@ -41353,7 +41333,6 @@ const LsFieldAlignment = class {
         console.log(diffs);
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     top() {
         const topmost = this.dataItem.reduce((most, current) => {
@@ -41387,7 +41366,6 @@ const LsFieldAlignment = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     bottom() {
         const lowest = this.dataItem.reduce((acc, current) => {
@@ -41407,15 +41385,14 @@ const LsFieldAlignment = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (index.h(index.Host, { key: '63398a2ccc1bc4cbd98d2858c2e2557cc7b37890' }, index.h("div", { key: '9e18ed6648be04c04c8d31a2141c282f95405e0b', class: 'ls-field-properties-section' }, index.h("div", { key: 'cdc65651627eab57be294950db80971aac9ab633', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ea997551b75b54f994a2b099369926183dfb164c', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: 'fef2f6130de37727e29ffbdd8e6c1d39347758ea', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: '58f910381243daf9987373ca73cb850643457fae', class: 'multi-button-group-row' }, index.h("div", { key: 'a928ef05dc1a41bf172854be6de6e43d754ff215', class: 'button-group' }, index.h("button", { key: '0fd393359c52d53fc5acf0148cf45c35ff9a787f', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, index.h("ls-icon", { key: 'eb751025f62ce1482974e5244d36560ef6d652e2', name: "field-alignment-left" })), index.h("button", { key: '2ea4e049759d7bab322b09bf37006c9aca7d550a', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, index.h("ls-icon", { key: '12e1e084e55992e5e8dcb3c616d354e813db4bc2', name: "field-alignment-centre" })), index.h("button", { key: '50820a4dbb9fe2ee520e6bfd18cd5c3c8798e485', onClick: () => {
+        return (index.h(index.Host, { key: '400db25c25a36e1c2556bb4ec06724864b9bf83d' }, index.h("div", { key: '47e10979f5e40df74c8ee295f2e0f3c24f026215', class: 'ls-field-properties-section' }, index.h("div", { key: '9c101afb5812f8958f420f9e3f2b180085156f0c', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'd2f6af742ae404699954d0a038e98553ca6de830', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '1ad0db4521681851ad7d2ea04b54714033f8983e', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: 'c8aa1676673aa7dd6272fe215c2b932c3cf7b31e', class: 'multi-button-group-row' }, index.h("div", { key: '0fdba69a2964a55718efd5d7c0c8084fbb3f3c5b', class: 'button-group' }, index.h("button", { key: 'bce8132bc2b3d2c932312b5f5ce7202936ba0372', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, index.h("ls-icon", { key: '4ecde43b70300205a93860415001744d24e9e31f', name: "field-alignment-left" })), index.h("button", { key: 'd7b62d1433ab7d98573774b2e8ba11dfc933f09e', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, index.h("ls-icon", { key: '88af50eb18c0e5c9759c38785374a080e0c68889', name: "field-alignment-centre" })), index.h("button", { key: 'f6567ecc6bcf13c853a92985a6c8892fbf9e2360', onClick: () => {
                 this.right();
-            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, index.h("ls-icon", { key: '020ce69f599c1dd7ca53f00b48dd605c0c85da08', name: "field-alignment-right" }))), index.h("div", { key: '6b89b279eb02636d907dccc34c14a346850d774e', class: 'button-group' }, index.h("button", { key: '49a49d4ec2b27337b8e094926cdef9961c13d848', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, index.h("ls-icon", { key: '1821a377171df23e2fa3d62204370023e03231eb', name: "field-alignment-top" })), index.h("button", { key: '03f2aac11c4c379782e3ec9b557ad9f76a8bb756', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, index.h("ls-icon", { key: 'df0d8013b46142216c431b5b13d3f329cf3f2bd2', name: "field-alignment-middle" })), index.h("button", { key: '122cdaa9caf98cc3d0bd06ed4cefb670c6095053', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, index.h("ls-icon", { key: 'a516854348931f5c64a52f3fc4ee9b902378c916', name: "field-alignment-bottom" }))))), index.h("slot", { key: 'a21b40bc260e0516f212908b6fdf37984f1e6303' }), index.h("ls-tooltip", { key: 'd2b66a3db33c6bb4b092a306326d9881c51eb05e', id: "ls-tooltip-master" })));
+            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, index.h("ls-icon", { key: 'b4a316f3b22d598206e53b0aadc152af935a6c92', name: "field-alignment-right" }))), index.h("div", { key: 'ee1b1aaa94d60b6f8599c48cd41485699eaf8ec1', class: 'button-group' }, index.h("button", { key: '0533eb85453764ca44a586c7d189d09b9222fd03', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, index.h("ls-icon", { key: '6baca0ef2df8e60749ca46f26fa614675aaabdaa', name: "field-alignment-top" })), index.h("button", { key: '1e2ef35fbe0f0b520091e40c3120ea6112f9b8b7', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, index.h("ls-icon", { key: 'b91876a9aec1e5c3f528ee679ac468298e8922f4', name: "field-alignment-middle" })), index.h("button", { key: 'ef6d7f773708d14ba4621ca900204dda6b5fb016', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, index.h("ls-icon", { key: 'b35d93c535bb179901af3c0a1fbb25a69bde5579', name: "field-alignment-bottom" }))))), index.h("slot", { key: 'be48e72ff93e6490eae685759d20d21cc0944745' }), index.h("ls-tooltip", { key: '8fe30e3b47397e4d9bdab32cce7629450bf4123e', id: "ls-tooltip-master" })));
     }
 };
 LsFieldAlignment.style = lsFieldAlignmentCss();
@@ -41447,7 +41424,6 @@ const LsFieldContent = class {
         this.labeltimer = setTimeout(() => {
             const diffs = [{ action: 'update', data }];
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }, delay);
     }
     supportsValue() {
@@ -41455,9 +41431,9 @@ const LsFieldContent = class {
         return !typesWithValue.includes(this.dataItem?.elementType);
     }
     render() {
-        return (index.h(index.Host, { key: '734ec935c3012ca203927537a917e43bbf51bd29' }, index.h("ls-props-section", { key: '8e9b9f1cc340517f3b7f3255dc87e8801d73b5ec', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: '9b01edd6f83f4a060d00bb780322ce138fb7dea4', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '3e3995526461f108576b7d22cbb1b2846d995e27', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: 'bec526155b82b50a64f9b1b5b74aadb7e3c6abad', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: '1575b64c8c8381205c13c3fe70a32b97699b595f', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: '320dd9b0427f7ca277134c1d0739a82a5e155f27', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: 'aa879cb5deca3ce965dc998116966ef77e118a89', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, index.h("input", { key: 'd6c22af8098d61cc7af5e8abb9e23b9d046771d6', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: '2ef0f7da035529ce618803d0c6b74b447b922555', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: 'ce22a03c08f2d1f98feb0125912e053ef62c7226', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (index.h("ls-props-section", { key: '0f6e53e8261eb4c6b8db6fd5f828a42724f27ffd', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: '3005c64a70fd13264666ad5e4e014000d820c630', select: true }, index.h("select", { key: 'f319bc0e3d1987ff3bebe363051c6756cb1b56cf', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (index.h(index.Host, { key: '3aa145da2c93db6900ba96388d86c72472686aa3' }, index.h("ls-props-section", { key: '4d08885c91a113e3c58b79046abc18e0b57ac1e4', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: '166c7438df51abd4ee13952444a9e0996dd3d1ac', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '7a8f379af5a5bcfd3317dcd143129e493e963b08', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: '48ff9c0929d5cc38303b33423c8af14ef41d402a', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: '589a7bf1ff07a9c0cccfc347d0d8e2ccd4292629', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: 'bfd8071a1f1f54b9b1c1ee7a44b29c126b8f481b', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (index.h("ls-props-section", { key: '1fc16d46a133d7f8724b7e89fec0430908a5d440', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, index.h("input", { key: '5c891526edb6a685222cfbc8f322a089e7cd5279', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: '681316a7a8e67745fd9bf1735dc5d282ce62e756', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: 'c919685a5b466e8ff6fd4d7ee4dbbcf9c66bfcee', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (index.h("ls-props-section", { key: '21d860e34e7a1715a5618b375c57c979acfb5dcb', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: 'e4cc5533901b4a0842ea97bb6a97f4f55816d1cb', select: true }, index.h("select", { key: '4875147dbdcfdeadf4485f2b283bed89fe43c083', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
             .filter(type => type.formType === this.dataItem?.elementType)
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: 'c8983032bdf7d1ec86416810de22445987bd75b5' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: 'de3eef5f0ea1297b43c3e92851935552f1fdcef9' })));
     }
 };
 LsFieldContent.style = lsFieldContentCss();
@@ -41496,32 +41472,30 @@ const LsFieldDimensions = class {
             });
             this.dataItem = diffs.map(d => d.data);
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }
         else {
             const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
             this.dataItem = singleDiff.data;
             this.mutate.emit([singleDiff]);
-            this.update.emit([singleDiff]);
         }
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (index.h(index.Host, { key: 'a8a6d6e6564a06a006db88e6ef836eefb52547f6' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '934e5a504bdcf6a15c77c816787d381ba3dfec1a', class: 'ls-field-properties-section' }, index.h("div", { key: 'a9be6f39c294e09995a1e733776acf8120f950be', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cea338d1dae11abfa3b408e904aebd55d80acc9b', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: 'eda8caa2e3d69d57cbe9c7fa6b0056c16726baec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '91fa351bd9f997172f318a597ba340c17baba29f', class: 'input-row' }, index.h("div", { key: '459a717701dd8be278433b3638e7fd96e95c6dc2', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, index.h("ls-icon", { key: '7a6c3dc0c40b7bde03b69c665a0e707967b07641', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'bc5cf4662ea81a501700a63c424ed5fcbf7e5dcf', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: 'dc35b892fff0f244b1963272a2c867888eac97ff', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, index.h("ls-icon", { key: '8c7d0e66054bc54bed027a25c6cdb4bd28263460', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '2d084bc7a2bb0666bf2925c42817f9d01bac7cd5', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: 'b8d18d8be187eac912d7b52ac9a31f935d6b85d2', class: 'field-set' }, index.h("div", { key: 'adce02171dad9a7dee22bfa1de2b4baf21dd4868', class: 'ls-field-properties-section' }, index.h("div", { key: '16fa2253cfa8ec487329ce9b96895285fbfb3347', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'a429a31c69781290b903ff58e4c2ce53e5622bf6', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: 'a60d109f591cf286bb3b477e83de91d6bce94f17', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'e9484b8491e6d438562dad0ce3f434f01653499a', class: 'input-row' }, index.h("div", { key: '7a7ac0fc9f30725f6d876b7dc3d5f7411ff10760', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, index.h("ls-icon", { key: 'a31fea1c5d5addb366e18c39e86b7e3dd4e764f5', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '9ff7bebc397770df98dcef808694737ac2cd35de', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", min: 5, max: this.dataItem.pageDimensions.width - this.dataItem.width, value: this.dataItem?.width, onChange: e => {
+        return (index.h(index.Host, { key: 'd003ec4d22c43fdc9ff1b7d5c42847cb5d21fa58' }, this.isMultiple(this.dataItem) && (index.h("div", { key: 'c97175dfa0099066e8fd997fb7c732916a45dcad', class: 'ls-field-properties-section' }, index.h("div", { key: 'ff4bbd9b97f2035521472682e323bd6539453138', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'a6ce84a435637f5844483a6199c3a7d1f0ffe5fa', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: 'f7b6c29969724037862c0ce90bc4c19b5d8a0b8d', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '81cbc0cbe5a8d35cb1313b39fde5c42d268fabdc', class: 'input-row' }, index.h("div", { key: 'eaa01d8a7992511edd9f4cf45048069e37ab1701', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, index.h("ls-icon", { key: 'd8993e0e168487aa14bebb340961940249961367', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '7b769e44b527c088c4f62bae3259e755da0c7d88', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '17e100d57b703c0fbc401006e021df4049f55049', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, index.h("ls-icon", { key: '0cfc394ae203d751300160247e31d6e27ea943f7', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '619218eb16ea31fa460c31cc717edc1d74b94c19', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '9b7fd1db9c1ee0cd5e501190dab54c076e4d7bf0', class: 'field-set' }, index.h("div", { key: 'bdfea8edc67c3ccd17d9a59d6f9a8cf0a06fccba', class: 'ls-field-properties-section' }, index.h("div", { key: '3aa013fdf3dbdbd3631042a9159ab337054e9062', class: 'ls-field-properties-section-text' }, index.h("p", { key: '83d1f77ddecc1b06aa1a3e6e320babde8d64fb0f', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '702d3ea7ab57828852e701d21fa45d07506a9ddb', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '836c4e59244430a6e3f914a912b1fe699a79e1f1', class: 'input-row' }, index.h("div", { key: 'a893194799297e84bddd5726c5e86d61824532a5', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, index.h("ls-icon", { key: '3dcbee06779a17a700d515973698b7041e7592f9', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'd7f64794d2880e9f0f444d8a98d5d7bd21c122cb', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", min: 5, max: this.dataItem.pageDimensions.width - this.dataItem.width, value: this.dataItem?.width, onChange: e => {
                 const di = this.getDataItem();
                 if (parseInt(e.target.value) > di.pageDimensions.width - di.left) {
                     return;
                 }
                 this.alter({ width: e.target.value });
-            } })), index.h("div", { key: 'dc457de5d2fe2d5d9c50ee0df889e78b8f096f86', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, index.h("ls-icon", { key: 'c8ab1bf03ac858db6e0f6953847dfb25b5ef4d6f', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '19f430ce0b7c8b3c987c4c5093c6a476f3706328', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => {
+            } })), index.h("div", { key: '1956af6a1d388ca243b9f2b18d687d067a856513', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, index.h("ls-icon", { key: '9971388d6ac1441ed86730a8448c5b1187a7cbcd', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '9162dadc492c6fc63e26ee85ab218bf7f6a4e0b2', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => {
                 const di = this.getDataItem();
                 if (parseInt(e.target.value) > di.pageDimensions.height - di.top) {
                     return;
                 }
                 this.alter({ height: e.target.value });
-            } })))), index.h("div", { key: 'cd60c7d571808994ff1133402f06df4e6c4e4565', class: 'ls-field-properties-section' }, index.h("div", { key: 'c68403eb936e469949df52bdd07fe113327cb5ab', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'db378ca35f8370e92caaf6d47237dc8ec3f2d805', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '6a44db4b4d20129cb9a2fc543d238cc37908addf', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'e3b53cdcd65f871c27c3504e7ca7b254ce55fb6c', class: 'button-group' }, index.h("button", { key: '1603c2bf1f7ae55b8d5e081c2187d0ce022c01ff', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, index.h("ls-icon", { key: 'fe5674a6238589d825aecd553b10649a84a0f824', name: "field-scale" })), index.h("button", { key: '3c079c5e0e959a52ee6948e116159c6743adba1b', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, index.h("ls-icon", { key: '0856e4910e355a6fa4e7f03f94665b278af32d48', name: "field-match-width" })), index.h("button", { key: '6b59beeba0f64fac6c2633a460d4af6181ba2ff5', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, index.h("ls-icon", { key: '16a643fc9be0e79cd4f618b10971ed10592d1b9a', name: "field-match-height" })))))), index.h("ls-tooltip", { key: '262c907c27db759563af51413069fcc6a970571a', id: "ls-tooltip-master" })));
+            } })))), index.h("div", { key: '9e75e3ef36f663c4a2fdddcb3e2c208ddf6e656f', class: 'ls-field-properties-section' }, index.h("div", { key: 'a8c072b8487a51da788c06357ba3dc9e1303166c', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c0dfd34d92f34c4477987a4d2e038dc8110cff31', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'ff3b7ed6b10c183adb2a71a4d52c78054ed226f0', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'c165300dbd7e39554d7cbdf0df050b91dd0696c1', class: 'button-group' }, index.h("button", { key: '37c07a694dc7bf78a944746f6cdcae8a9f0ad310', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, index.h("ls-icon", { key: '0c1732003117b1ba1baa92dc940e1975ad44a857', name: "field-scale" })), index.h("button", { key: 'de2248e7f9ed41276fe394bec2e55a114861ccd8', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, index.h("ls-icon", { key: '08748b6107dbd25162dc15c45ff0686bf90e8d13', name: "field-match-width" })), index.h("button", { key: 'ffabf838749929cdc4795aed33618ecaf00f34f5', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, index.h("ls-icon", { key: '595cafe4a70003633c037b8da411d151df287fd6', name: "field-match-height" })))))), index.h("ls-tooltip", { key: '1729af7c643432890b18d5f68fc7561494100c14', id: "ls-tooltip-master" })));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss();
@@ -41532,11 +41506,9 @@ const LsFieldDistribute = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     dataItem;
     mutate;
-    update;
     get component() { return index.getElement(this); }
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
@@ -41547,7 +41519,6 @@ const LsFieldDistribute = class {
         });
         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');
@@ -41568,7 +41539,7 @@ const LsFieldDistribute = class {
             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
+            return outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false
                 && index !== 0
                 && index !== sorted.length - 1;
         });
@@ -41583,7 +41554,6 @@ const LsFieldDistribute = class {
         });
         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);
@@ -41607,7 +41577,6 @@ const LsFieldDistribute = class {
         });
         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);
@@ -41632,7 +41601,6 @@ const LsFieldDistribute = class {
         });
         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');
@@ -41666,21 +41634,20 @@ const LsFieldDistribute = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (index.h(index.Host, { key: 'c06b2987d2456ac90d5743e333d1094f06b23c65' }, index.h("div", { key: '8e78a3f2769b356591d86849e35afbb4537ce4ca', class: 'ls-field-properties-section' }, index.h("div", { key: '29329178494ef3a1482508c48a3bdc67e7f48d0f', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'b94e6ff800bef85868f44ea69f3b03227168e199', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '68be3703df94c04966d290125551997ea64705ef', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '65f35f606f0954a356020c35afa468630ebd4c79', class: 'button-group' }, index.h("button", { key: '0d54769aa654920c206255ccae116ef1e9166229', onClick: () => {
+        return (index.h(index.Host, { key: '9183c6d98eba74df69f024a583940a25c0f7547c' }, index.h("div", { key: 'efe9718b9b662956d0cf829d687df3d558cdad31', class: 'ls-field-properties-section' }, index.h("div", { key: '24e5a2d203432ee0b0894a517870a19e6081b9dc', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ced15352bbbdd00133d20de812fede32e1c281d6', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'a08ae1961bfbc738b1359b7c938ff80ece5ef4fe', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'a720baf91f2917458c47a0c8a2cc91bda6d9d92d', class: 'button-group' }, index.h("button", { key: 'e2303f2c8324e126ae5d8c5e3db65c6c04498ccc', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, index.h("ls-icon", { key: '56dfda0e142e0dc28a86d8b9968344f86ecbbda9', name: "field-distribute-vertically" })), index.h("button", { key: '29253e7bfa3fb37c87a8b05edaf0178765eafc09', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, index.h("ls-icon", { key: 'b3def31389be531f8d93b7a4aba31da1972573e1', name: "field-distribute-vertically" })), index.h("button", { key: 'fcfd3704ac035ee406b1b5579e9b6dfbf8f7eec0', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, index.h("ls-icon", { key: 'ec6fe592e480488aab562788be6092d6c629313b', name: "field-distribute-horizontally" })))), index.h("div", { key: '2fd6de11f133e3a997cd2b8ac6c7be0c88c0eb2f', class: 'ls-field-properties-section' }, index.h("div", { key: '33b91c5f23ce5b0a91b3366b90b4efa8df80c683', class: 'ls-field-properties-section-text' }, index.h("p", { key: '0eca395004eadae20e0c354a07cd9a3cb0fe5f66', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: 'eb665ca6f80066a0b7875a087d06aa899c48f90d', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: 'e94ce80fdd7091c84722bf022bdf2942a96c19b4', class: 'input-row' }, index.h("div", { key: '77fac09300ea6d03447b84ba8c53332c16ca8412', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, index.h("ls-icon", { key: '119c87513c2993b22c984a0fb002ff67068c5e74', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: 'df3b3cb5ce81f09ad54ae30afeb4712838ddcdd6', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, index.h("ls-icon", { key: 'a8fe7f099ef6002e6459d6e0e85c3abb301f4d58', name: "field-distribute-horizontally" })))), index.h("div", { key: '2371a9653b583f97ad1df8a45a4145291b20ac21', class: 'ls-field-properties-section' }, index.h("div", { key: 'a6b4714f995ba5017e0cfb894a40c828676a764d', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'efa830b42e36555694cd413c7faf85e9c81e4ff2', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: 'dfd54671699a6b8840b867a9a9635639a9b801aa', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '7a970651367e27007aaa57af06a1918efbc06889', class: 'input-row' }, index.h("div", { key: '4494e7585a4f4a41cccd5db632f917946e53a5f7', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, index.h("ls-icon", { key: 'c4cf75483efe34297a283693413ea91a70dc3965', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '0480f8f9b0227599fc31658e8799ee999712d37f', 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 })), index.h("div", { key: '0342792227c10946f906f961ff9a316c017f7dc0', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, index.h("ls-icon", { key: 'f2f3f13ecb113f7b4ab3bd41365859cd86f35f4f', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: 'd79f7fb2f7b07fbbe2c2198a162734f5b996148b', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+            }, value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: 'c793ffb33e2892914bb546b8643628dce38f209a', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, index.h("ls-icon", { key: '726eda22cf535a5d760df8d5c2443e2a8d20c7f7', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: 'd064bf24692fb0a6cdb4de546f9166115565b5d5', 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 })))), index.h("ls-tooltip", { key: '2c64922f26291845477b4d49456e9aa149368473', id: "ls-tooltip-master" }), index.h("slot", { key: '85aa5cc253055d868acfcef263d8d5f76d0fee03' })));
+            }, value: '', size: 4, min: 0, max: 9999 })))), index.h("ls-tooltip", { key: 'c699c7d28bc03981a8fdcd9960ce2b81bc7ed2f7', id: "ls-tooltip-master" }), index.h("slot", { key: 'e2bdf922af96349adfc40efba97dccb434a850eb' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss();
@@ -41702,22 +41669,33 @@ const LsFieldFooter = class {
     mutate;
     update;
     selectFields;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getItems() {
+        if (this.isSingle(this.dataItem)) {
+            return [this.dataItem];
+        }
+        return this.dataItem;
+    }
     deleteField = () => {
-        this.update.emit([{ action: 'delete', data: this.dataItem }]);
-        this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
+        this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di }; }));
     };
     duplicateField = () => {
-        const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };
-        const newTop = this.dataItem.top + this.dataItem.height;
-        if (newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {
-            newItem.top = newTop;
-        }
-        this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);
-        this.mutate.emit([{ action: 'create', data: newItem }]);
-        // this.selectFields.emit([newItem]);
+        this.getItems().forEach(current => {
+            const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };
+            const newTop = current.top + current.height;
+            if (newTop + current.height < current.pageDimensions.height) {
+                newItem.top = newTop;
+            }
+            this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        });
     };
     render() {
-        return (index.h(index.Host, { key: 'ad5bcbff8ba0e0e8c485029195401793a3d44947' }, index.h("div", { key: '5122544f2c7bcd02af2acbff8da7dd466e74d813', class: 'button-footer' }, index.h("button", { key: '7f82dfccee2e4d673305f5863534b80a1ad4e358', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: 'b30334400042a8fc7881d2a05ced2f397cd61a4e', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), index.h("button", { key: '43be4c1016e2f7e50ceb40546e92933099be5400', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: 'dbbc47115c04eb8f29dcb10a60178d55c256242c', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), index.h("slot", { key: 'da837305b7587c89e70abbb31563b1a5c161086e' })));
+        return (index.h(index.Host, { key: 'b304511650fb8ab792ee4112ce4eb6ecabfad7b1' }, index.h("div", { key: 'ffb272b2be2e33164600f4751d91df4aabe6a37d', class: 'button-footer' }, index.h("button", { key: '4186e5559318e08134f5d3d3eef95be7dd277583', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '421a920a74da3f785236ca4051df988bada70e2d', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), index.h("button", { key: 'd7f34ff31f29b11d3d1801bdf4d88fe23e8d5c9d', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '91abcc24bf4bea621252a5982442d38a7a36644d', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), index.h("slot", { key: 'df560039d19466975b12468042f2bfd0a3b81b6f' })));
     }
 };
 LsFieldFooter.style = lsFieldFooterCss();
@@ -41728,11 +41706,9 @@ const LsFieldFormat = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     dataItem;
     mutate;
-    update;
     get component() { return index.getElement(this); }
     handleKeyDown = (event) => {
         event.stopPropagation();
@@ -41761,7 +41737,6 @@ const LsFieldFormat = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
@@ -41776,31 +41751,31 @@ const LsFieldFormat = class {
         return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
     };
     render() {
-        return (index.h(index.Host, { key: 'f09669b903371ee341bcad9d0c690c73564796fc', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: 'c88a63694f4c7badef501d1d6e6065e1e2f8b0c1', class: 'ls-field-format-bar' }, index.h("div", { key: '14b3550fa16813865c4640bf789ec59de23f9841', class: "input-wrapper", "data-tooltip": "Font Family" }, index.h("ls-icon", { key: 'cb1c66047558d46587d5ed10858e5de853930d2f', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '467779af8ae5de655a3f94eaa1d93401c8c21b6e', id: "ls-toolbar-font-select", onChange: input => {
+        return (index.h(index.Host, { key: '2febff4877dec0adfb5d71c5f98064739e1cb048', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '40ecbca3f11893001206f172fdcc095dcbb8cc80', class: 'ls-field-format-bar' }, index.h("div", { key: '50365c3d96ece24129314ed7362a12732c90adf8', class: "input-wrapper", "data-tooltip": "Font Family" }, index.h("ls-icon", { key: '7abb18b79ce54cd10d03ae2b6bf7755210c87e75', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '10dc6add8b33c982dec5807a711bb9c6bab69d65', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: 'ab2adc71db5cb0304d3ef0e88cd39f9c3b0695ff', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), index.h("option", { key: 'b87685950342e18f67136c15b626ecddf594f9f1', value: "arial" }, "Arial"), index.h("option", { key: '23c3c6f267862f66649517e165fbd3b4168fb12b', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'd5df1c563bff199141bb1e3abe57aeaac20e680a', value: "courier" }, "Courier"), index.h("option", { key: 'd9e693b2a601ae8373e7bed6f6f63b5176f0f53f', value: "helvetica" }, "Helvetica"), index.h("option", { key: '53ff1c000a0a20c574ae4a0efe783a297a5a3e9e', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '56b5f263672aabc30b7a4fecdaf0b29dd645e239', id: "selectorIcon", name: "selector" })), index.h("div", { key: '1fe61ed2c6e16e2c9a58c1a349a7991dfed9bc5b', class: "input-wrapper", "data-tooltip": "Font Size" }, index.h("ls-icon", { key: '80a2dfae58c432af9860811270ef14887ef1dba9', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '5b662354c0bfaa6cdc9d6c085f2732b238a9a675', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '095097496e0a5570943ad483b628e35aae980ae7', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), index.h("option", { key: 'bdec564e84e8856ba2a76a954c8619e265ace754', value: "arial" }, "Arial"), index.h("option", { key: 'fbd43ae7332189f128c56f92eb2533733680cd80', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'd0335e99d771789f722aaadf4230ccc31ea8a5df', value: "courier" }, "Courier"), index.h("option", { key: 'd9cc11757352ab6be9878b88b1c549c791c82779', value: "helvetica" }, "Helvetica"), index.h("option", { key: '3375f3d30fddd0d7de6b5b7f2ab9febd23166680', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '5188818c50510b4cc8da9bd7c98cde7f5b505642', id: "selectorIcon", name: "selector" })), index.h("div", { key: '4db7c26767369994c1d95100fc5f21751efd84b0', class: "input-wrapper", "data-tooltip": "Font Size" }, index.h("ls-icon", { key: 'e8c0eee85932d18bc845769e1e8ef6d5747cc347', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'a3d24673e0a2dec7b6b1d54002c4cfd7015323d0', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), index.h("div", { key: 'bdc70a6f70ac24ede3e375da95a31b09fc6e0cab', class: 'button-group' }, index.h("button", { key: '93bd2e0f321a7630e4a5203c607b9ae97896820a', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: '118011caf609420d103dca5aedec499d0303eeda', class: 'button-group' }, index.h("button", { key: '5eed2838a98ede95838bf3133f8642b6ff60aecb', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip": "Align Text Left" }, index.h("ls-icon", { key: '75ceda811a343eb024c8eacfa863d7d1ec0fa538', name: "menu-alt-2" })), index.h("button", { key: '1fbfcfdfe4b60992ad507f87c281bde9e1cfb6ac', onClick: () => {
+            }, "data-tooltip": "Align Text Left" }, index.h("ls-icon", { key: 'a06ba7d34c0ae7f44b02434b5deb1258d55f5a83', name: "menu-alt-2" })), index.h("button", { key: 'b9e6efe9f6320301386f64b8b1256eea01a142ab', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip": "Align Text Center" }, index.h("ls-icon", { key: '225df89a538e7e67c4bc95a309afd5167b67b6ce', name: "menu-alt-5" })), index.h("button", { key: 'b8cbc695c18f0a556ab6a83e00b2cf0da78ce8f5', onClick: () => {
+            }, "data-tooltip": "Align Text Center" }, index.h("ls-icon", { key: 'bd8a286ea76add2e60093a245869d40785b6e2d4', name: "menu-alt-5" })), index.h("button", { key: '81cb6def72ee8d51e455291f93d349dc5eed4315', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip": "Align Text Right" }, index.h("ls-icon", { key: 'd3d569ce70e69c8425449549b6563eb1d966de18', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '93cea0ccee515f28a1464bb86847998866ff28c9', class: 'ls-field-format-bar' }, index.h("div", { key: '8bf4b19264ec43d4880c0f1afd49bc0e95653ccb', class: "input-wrapper", "data-tooltip": "Font Family" }, index.h("ls-icon", { key: '00fc36a118fed88906b6dc6f10d4c5b572c9415a', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '631f24095b4735af86670d4464dc0dfe82722160', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '1ec3611079e764e9e052fafa18ed73bd2879a3b2', id: "ls-toolbar-font-select", onChange: input => {
+            }, "data-tooltip": "Align Text Right" }, index.h("ls-icon", { key: 'f11af16c93bad521bba0e1b4c0f4d5343e42d853', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '642496b309e0ea729063daa7f90d665a4b79e622', class: 'ls-field-format-bar' }, index.h("div", { key: '058d36a9258d3a839aecfd6e6a263fc3fa86d637', class: "input-wrapper", "data-tooltip": "Font Family" }, index.h("ls-icon", { key: '757aecdbe113df3391046735295e94eb762bfa7a', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '7dbc085ec4583952acc129d7bf90d0454a9593db', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '7bd9b7527286ff946aeef9ef6822f63efbfb51d9', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: 'b4e20742209d89cf2f81724e56cf4e271b242efe', value: "arial" }, "Arial"), index.h("option", { key: '90e07a1b1642602cb82a17d55c47fa151dd042cc', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'a1be70434a95b0032f7e0bd742a5493f4191e552', value: "courier" }, "Courier"), index.h("option", { key: 'cf58305e89c6cd764563564b4b8c4c97d3148837', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'aee06cd107c49e5efccdc188439e51b341aef443', value: "verdana" }, "Verdana"))), index.h("div", { key: 'd96af2693b5160f090877ae272235e6e4c199be0', class: "input-wrapper", "data-tooltip": "Font Size" }, index.h("ls-icon", { key: '054ac7cfdca186932b67186e1af9b4fc207ac8af', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '25e2bc4275d0f94a09b1dcccb62521c2aa2c33c2', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '8360b7525a706d83fbb71c6360d720ecc7665c9f', value: "arial" }, "Arial"), index.h("option", { key: 'bb4b4aba366ed7b28cd30c8d09f6955443f21547', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '1a25159c21514bbf65bccb351d366a8d8ddc4d6c', value: "courier" }, "Courier"), index.h("option", { key: 'f63e8cb76ea72af5ad5d2e947cbc34ef13cbf818', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'f5c81a38eacce8c0e059a7b53d7c8b8b7f24524d', value: "verdana" }, "Verdana"))), index.h("div", { key: '9dd75e7f634664d54f227f8a14c02776ae77baa6', class: "input-wrapper", "data-tooltip": "Font Size" }, index.h("ls-icon", { key: '68b63c5e021facce3e62cd1e8dc6b61f28fb5be2', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '444572a1f8620c21e03570c5efbbde5938fb0882', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), index.h("div", { key: 'e7b8af56e32c8cc09e5090391c164edab53de5a6', class: 'button-group' }, index.h("button", { key: 'abf70e78272b06353a074b093f0a316bb4bb4188', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: '1e44265fe1d9584b064dd80cd1c99efd631ee05b', class: 'button-group' }, index.h("button", { key: '9eb6dcba91bc226f8e8b0096fb8e3195058710ff', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip": "Align Text Left" }, index.h("ls-icon", { key: 'f7dd25decd2cd245141f8e00cc79096c283323ac', name: "menu-alt-2" })), index.h("button", { key: '5c68ddd64a36d8a8b486db63fa4831522a021c8d', onClick: () => {
+            }, "data-tooltip": "Align Text Left" }, index.h("ls-icon", { key: '20414ba17f91b462979b78017d8af7180a33c34b', name: "menu-alt-2" })), index.h("button", { key: '6321ba075e9059a2c1ef3a4b052783686b265f03', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip": "Align Text Center" }, index.h("ls-icon", { key: '023ad09061b00186dca7da21df38a5a478cdeed1', name: "menu-alt-5" })), index.h("button", { key: 'db06134b4512dbdb1d8de66975e6aca1496a24c4', onClick: () => {
+            }, "data-tooltip": "Align Text Center" }, index.h("ls-icon", { key: '55cfc3f4653c6ca86d5fd7dbfe57c1076363552b', name: "menu-alt-5" })), index.h("button", { key: '35f0b7b03c2293f48f84bb011833be7514de46f7', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip": "Align Text Right" }, index.h("ls-icon", { key: 'ddc4dfb005babf7dfe1d7cf9cc95d8ccd80c9031', name: "menu-alt-3" }))))), index.h("ls-tooltip", { key: 'd1f71302cf1ad18577e416d6cbca86a1c442c4c8', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Align Text Right" }, index.h("ls-icon", { key: '1d389afb29a9f96cb0ffe16bf129b3e5e7e153e9', name: "menu-alt-3" }))))), index.h("ls-tooltip", { key: '1453c1f8b125c9caf780bdcfb378878fd2cbbe27', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
         "dataItem": ["selectFieldsHandler"]
@@ -41814,12 +41789,10 @@ const LsFieldPlacement = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     get component() { return index.getElement(this); }
     dataItem;
     mutate;
-    update;
     isSingle(dt) {
         return dt.length === undefined;
     }
@@ -41844,13 +41817,11 @@ const LsFieldPlacement = class {
             });
             this.dataItem = diffs.map(d => d.data);
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }
         else {
             const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
             this.dataItem = singleDiff.data;
             this.mutate.emit([singleDiff]);
-            this.update.emit([singleDiff]);
         }
     }
     center() {
@@ -41869,7 +41840,7 @@ const LsFieldPlacement = class {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (index.h(index.Host, { key: '2891a22cc782d26e8019f621139dbb9cfa7912ae' }, this.isMultiple(this.dataItem) && (index.h("div", { key: 'fca4cfba664c7dcc850247145a19155359778fd6', class: 'ls-field-properties-section' }, index.h("div", { key: '6840302fca04a9512675d308a0faf89f588e4c92', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f148990ba318730ecd8f63dc2a1e07dbfe2e0758', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: 'b6e3392804efacfa479b8352fe9220aa202386ac', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '7c23a0dc256c248870b945337ff3699ee34faca3', class: 'input-row' }, index.h("div", { key: 'eb3c8491792b11452959601a11d0bb45576112ce', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e0ef76fb7b4209ea9fca1f69ca063d9db54cab3e', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '366b808ac6308e7a4c753473db2a906bfb81fe5c', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'cc27cf6674efd760f0bf72ba0879750bd3ec58d5', class: 'input-wrapper' }, index.h("ls-icon", { key: '215d388859634b7ba8bae7772bc2f123bf5072e4', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '2679e4e35dcb2529dceab7628e51a06ebf2cb084', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '36051ca4885a6f000e62b98e93a8cee9275cec56', class: 'field-set' }, index.h("div", { key: '71f569f20e1cc8a1afdd07979d277cb046832d02', class: 'ls-field-properties-section' }, index.h("div", { key: 'c3221f6b321a2fe37bb5950bfed9c17d89b4ec06', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cac50315a0bf1e69fcda4836b294aded0b9c5b38', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '57d46a199248986056fa2283a3f983f788ca015f', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: '600507c665204c312ec88d7dae69f1fd943492e0', class: 'multi-button-group-row' }, index.h("div", { key: 'bddd2f75ef7695d6f8e8eaebdd8cee1bf3e6f838', class: 'button-group' }, index.h("button", { key: '00e1849e66a0852577a94889839efe43c1b1c81a', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, index.h("ls-icon", { key: '9f54b7db1137cef47089564d53e36b3e95a130ee', name: "field-alignment-left" })), index.h("button", { key: 'c32102532ba8914bfe3ef7345d9a542f5fb3a61b', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, index.h("ls-icon", { key: 'b4c4383eadcef61117f3b048bd2b3178b3c0a038', name: "field-alignment-centre" })), index.h("button", { key: 'bb859c7f759609101af575a282c5f64dabe69c09', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, index.h("ls-icon", { key: '688b723605ec157fae2b659bd4d88b08fd897353', name: "field-alignment-right" }))), index.h("div", { key: 'ed944060fff8351aaa7fd42649cd6447a3961004', class: 'button-group' }, index.h("button", { key: '808bc6db4bd34934b4aa2f6b7fe47bc561041d7c', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, index.h("ls-icon", { key: '7215638df9c08fac87e730b9db6963bdaabb6679', name: "field-alignment-top" })), index.h("button", { key: '740fb0baef8a931ff8f9e3998a048e57e1f73868', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, index.h("ls-icon", { key: '75151df5e47d9a6f2bdccfcc9de925fd19e7274d', name: "field-alignment-middle" })), index.h("button", { key: 'd92b4595a17ce95ed97d116a8ec1f1ac848cf45e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, index.h("ls-icon", { key: '4b46bcab1783eae38c8135cb435123ebf635678b', name: "field-alignment-bottom" }))))), index.h("div", { key: '3ab3f3ba7a84f9e10590b3e74441f11115fcfcca', class: 'ls-field-properties-section' }, index.h("div", { key: '2d2bc1642911a36943f543aaea4e1113f6d90468', class: 'ls-field-properties-section-text' }, index.h("p", { key: '2716c6bd177cee3a74b57f27fceb802f99d00153', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '12b0116cf566e8fbd8c716ce30ff50547f075eeb', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '7c9d57d5988ac74a052d1e8b48891b9e49689f18', class: 'input-row' }, index.h("div", { key: '80f2dc6d84b2460f9119a4ad6c38cd23754b3f95', class: 'input-wrapper' }, index.h("ls-icon", { key: 'b5ce0258e81146a5e69ee892db47026af0e4b857', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'e1364c47bb93b6486e6a43e1c8375646cc90b19e', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'd1785c7797954a99563205073b080fecd91ae9cd', class: 'input-wrapper' }, index.h("ls-icon", { key: '1c4a39e9dbf1b538c1c5330799d73749421efe40', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '1577cc2f618217940a68522e511be25906f93af1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), index.h("div", { key: 'e07c33f5a5a0076f9e9d4762280deda6acb70c13', class: 'ls-field-properties-section' }, index.h("div", { key: '2164bb922476bb458aadb653ddf56811afd6bada', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'deb4e93fe9730ad60df1ead15d6fd1125e5f1c7b', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '85be0bf98871e745aeab85a7b3d5e7c7679bbbc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '5ea831b28aac09f5379e9fb227f6331ccb496682', class: 'button-group' }, index.h("button", { key: '8ed8a6be64facd93648d027fde2916a67f42c29c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, index.h("ls-icon", { key: '136027ff733b7a222ecbe244bd0fb36ff3652427', name: "field-distribute-vertically" })), index.h("button", { key: '3408c19d67284f7ea72d73281315be8d8d233f5e', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, index.h("ls-icon", { key: '0360b37978f388df95806681c652f535e0eeafdb', name: "field-distribute-horizontally" })))), index.h("div", { key: '44bcfa853a0eaa54b06923d31706d2fa9734e866', class: 'ls-field-properties-section' }, index.h("div", { key: '7d5949bcc965f4ed677fb6296f541587ad2d78f0', class: 'ls-field-properties-section-text' }, index.h("p", { key: '4c19bf6ad558044ccd57f959b95cfaf9137d80fe', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '293c1c62bbf46e56b2ab4cbe95926c8baec55a9c', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: 'c27747a77cce6f8e59f297c68e58c0ad3844a4a7', class: 'input-row' }, index.h("div", { key: '26961c543f14fe3cc3fab27264c1900e85540e95', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, index.h("ls-icon", { key: '960ecb65e5729f20baa8e6c3ca091ee8e64d880b', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '43057c9c211ab5e6b9d6c0df9867cc6a64b2729b', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '5ffd08a406bac946193b108a8ff7cf215b0d1d1a', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, index.h("ls-icon", { key: '84979d224cbeead196f6e06cd1e1ec0de3b92fb4', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '1f1b03545533e57fad828649407e14ede6f41fbe', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), index.h("ls-tooltip", { key: 'f04cdce03dae2e63bec8d9588eff9f2e15ad16ff', id: "ls-tooltip-master" })));
+        return (index.h(index.Host, { key: 'c634a96d87d02843dbe72f677aa6e7b14694f581' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '044ff815e3f26547f78bb2482e7e47b796066b3e', class: 'ls-field-properties-section' }, index.h("div", { key: 'cf68b63b5038dc0dcd7b415b14753772768cb20e', class: 'ls-field-properties-section-text' }, index.h("p", { key: '309b54d667bcfcd0d82fd0601836d9020bc1c549', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '933ef9c922d40f5ec67369d2935c7470fc7a1d98', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'fad7b3df23e164bc0ac188e795a4cd5c34b21035', class: 'input-row' }, index.h("div", { key: '42bd70ecfbeee0532ab121ed3313450c65b2ec8b', class: 'input-wrapper' }, index.h("ls-icon", { key: '4bf6f52036de2c329cd3d1ad286fa01a4ec8f990', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'd81850eb0e5b7a7f95c36625a77a1410cd880ce7', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '9ac1ceae38f27ccd59da01eda945fceedd267c0d', class: 'input-wrapper' }, index.h("ls-icon", { key: 'd967fac0657315ad403ef0068beab8d69df89cd7', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '58250555187ab6fab6e646c5b491e02126eb1d94', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '5eb0b5f2e221377d12cb9c4dae3e62dfa375f56a', class: 'field-set' }, index.h("div", { key: '074e855bae1efabd0608f679b17f744c29d2c13c', class: 'ls-field-properties-section' }, index.h("div", { key: 'bbb011ac0c0e891254a356fcb27768a5f12ac551', class: 'ls-field-properties-section-text' }, index.h("p", { key: '6bf7a08225bf1ea325781fd9e5ad353d268a93d3', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '28e764426c670d4d77ade31d225acf06e948fb96', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: '5279c5a19011d2e3e10027d5ed252fe14b3c78a7', class: 'multi-button-group-row' }, index.h("div", { key: '8e89191e1f792dd1ee2aaee7b36730232d573c4e', class: 'button-group' }, index.h("button", { key: '3b3f60acb8a82eb8a551d52fae1e7c9162fefc2e', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, index.h("ls-icon", { key: '4e228bb4c09c9b00bab056bb496c12572f6b151a', name: "field-alignment-left" })), index.h("button", { key: '7a05f93a649be5f222c498edbbb93e32b725537c', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, index.h("ls-icon", { key: 'b7a1d02377861f25d78f2d69586a5cf5b021ac5e', name: "field-alignment-centre" })), index.h("button", { key: 'ad8bc98aa32bea2be3da0d8374a5c8fd84448378', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, index.h("ls-icon", { key: '7ea2cb0d65a64050cac2e06746a3044567f8ef30', name: "field-alignment-right" }))), index.h("div", { key: '276a46d5023fb0581c68b995f1ba990049b1707f', class: 'button-group' }, index.h("button", { key: '639559ce5ed812963a3c44e10d3afcc3f0b8ddd2', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, index.h("ls-icon", { key: '699da10bf15c17cb15c4557aad53fbb8fed66852', name: "field-alignment-top" })), index.h("button", { key: '1b39193438fa81f8a49a8f312762060614de60df', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, index.h("ls-icon", { key: 'ce845282439d102477a1a05910cd6bd15775942a', name: "field-alignment-middle" })), index.h("button", { key: 'b162767b02693c5961dfc84fafdcfb85912ea09e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, index.h("ls-icon", { key: '4ace10a21e3264b4236ff3618d4db5129bc6329a', name: "field-alignment-bottom" }))))), index.h("div", { key: 'e5f446913a0790e9e048c1343507b64c17572790', class: 'ls-field-properties-section' }, index.h("div", { key: '75d1af4c23dd81ee0c4db9cd92752c8d27cde953', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'edb2296be70eb3daebb56266e421592957b6c37b', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '6315f4791e5a5ad707dba570417308e65b4e9a9e', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '2c9dfe5c74dcad282fd216d3e300571722204a2a', class: 'input-row' }, index.h("div", { key: '6562ff2e2d84f36f709b69fd2f5b09eba8f36bc8', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e845b49ad34a27e84bbeb33ab8bcd87d80fdda29', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'ff42359ab105d12a8a6580972e0c974714c64a87', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '7e6d15ebe386d96d0f13b555f3bdf917e1fd0831', class: 'input-wrapper' }, index.h("ls-icon", { key: 'a98e37e9fa71467ab4d13cbd8d38357311f1f225', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'ad3c14a161a8f7624f6afe122f65f0140db17391', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), index.h("div", { key: 'cbe1a006c7963f3848f86321f5938426c8a6f066', class: 'ls-field-properties-section' }, index.h("div", { key: '661acc6cbc0a5e51bed406e20746e0b290af3768', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'a0d739ef2e67b863340f091322f233594938a1b6', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '1991851f81de9de4431fd61d84e6b51eb484f96b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '8d44dfaf9fb36a3353e678fcda20d6e521bedcc0', class: 'button-group' }, index.h("button", { key: '169c38f14e14d0a7e35742a878ff992f1203265c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, index.h("ls-icon", { key: '602ffcf4bc0abc0f78b841071833387a3b3db2ea', name: "field-distribute-vertically" })), index.h("button", { key: '81cbf088282c93b47e5aa367ce38fbea83a86b28', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, index.h("ls-icon", { key: '9b45920bd267d4b846475d3cd5196c27310d3482', name: "field-distribute-horizontally" })))), index.h("div", { key: '7ee0dbb4a04f2c85231c7a1e2abea068158dc679', class: 'ls-field-properties-section' }, index.h("div", { key: 'c9ad0439b1497431f6b6de46aad5edeee84842eb', class: 'ls-field-properties-section-text' }, index.h("p", { key: '50de6dcd1cad58aa989030b37aeb0e997963db05', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '7add4b16b05b484c4033309286ad1eae9770de45', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '529a5c5a0f098f4f46a0025836ec75cf5553336a', class: 'input-row' }, index.h("div", { key: '2784028e38a8bcac7e0527b8fe2a727a35204056', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, index.h("ls-icon", { key: '1daf9dba08891570496a039667a007d7b0f6c113', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '8fbba7e8ac95e7b060003d735021a3fcfe4ee1fe', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: 'dafd6d4add86fb81ef89b57c1761dd685577924b', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, index.h("ls-icon", { key: '45e20ce1cb261cfbaa3566bf407affb6d2630dd0', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: 'a8711242e79a07b3a31eb53464304607dbb45607', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), index.h("ls-tooltip", { key: 'e852290e234a73d02f5307dab93b5c94ff401c83', id: "ls-tooltip-master" })));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss();
@@ -41929,12 +41900,10 @@ const LsFieldPropertiesAdvanced = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     dataItem;
     expanded = false;
     mutate;
-    update;
     isSingle(dt) {
         return dt.length === undefined;
     }
@@ -41960,7 +41929,6 @@ const LsFieldPropertiesAdvanced = class {
             diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
         }
         if (bounceDelay === 0) {
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }
         else {
@@ -41972,7 +41940,6 @@ const LsFieldPropertiesAdvanced = class {
         if (this.titletimer)
             clearTimeout(this.titletimer);
         this.titletimer = setTimeout(() => {
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }, delay);
     }
@@ -41986,10 +41953,10 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: 'adc2b87c39dbe48a990e310d319488193fa4363f' }, index.h("div", { key: 'afe76dc7c97f20a5d02c468749efc624f8a5bd2f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'd90e8d469d9e4243f28fbb98725be48589546193', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), index.h("p", { key: 'd856a8c15b922468197d35e4b6aee05530a08699' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '005a9eee056ecfa5c580a719cc80515795dddefc', class: 'field-set' }, index.h("ls-props-section", { key: 'ffc3a6ce7ba2b75d4b1dfaf92e2a75a451f55988', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '0c0486fa164da4f0b38bebbd18d94dd53ebd9181', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+        return (index.h(index.Host, { key: 'e9ac5dd173d35533caa4cd5db2f49b39839619ba' }, index.h("div", { key: 'af379f38f2482561d4f9ad20261ba2283b902084', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'a512c02d85d63df763ba2fe7c20ef235f1c1ff5e', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), index.h("p", { key: '4e5fd01f51c5afe298712e0335b3aba3aa1d703c' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '1bf64e8cad73f6a2c1eaae417b33199d050b3313', class: 'field-set' }, index.h("ls-props-section", { key: '909312980807fd6ca0919147e6e4739f0b3ec44e', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '4f970be565a2a38076def87d0c1b21db197ba9ba', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
                 console.log(e);
                 this.alter({ fieldOrder: e.target.value }, 100);
-            }, onChange: () => { console.log('onchange'); } })), index.h("ls-props-section", { key: 'ba15bc93246434122c4fb2643b2219f3b7d34d83', sectionTitle: "Ref. Name" }, index.h("input", { key: 'f6863eb4dda557936717be368a3bb97aa66a743a', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), index.h("ls-props-section", { key: '92abbd7166def72c7022722c1ce974176715002f', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '7bdcb137b35ec05b952cb20794e18805ec044285', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: 'f2d2fc0434936e4bff0f73cec02b7b691374530f', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: 'e2b51d08c8919fce07fb9c59cf8d00d7b79faa9e', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '6d490150eaab50b67ffc5cd0f598d72da8367d1b', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: 'c08d94ebd13055167b1e1e5ae914007213cbabfc', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '22170d401110443ff1559b3b937a6e64e01ffec1', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '3f561f9faf0924e8c4bc853dcc0cbcb41211a358', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+            }, onChange: () => { console.log('onchange'); } })), index.h("ls-props-section", { key: 'd8aebb59d99983d424b4aceb9f1c9c7993a73f74', sectionTitle: "Ref. Name" }, index.h("input", { key: 'd685a14ca825dc2937199d9796406ff1c3e3c170', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), index.h("ls-props-section", { key: 'b8f6177da6587e0cde03e4e337241aa90bba900d', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: 'c5da59c1417b54ee5df7569fb5ba1f3fe7ccdbe5', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '710d749eb5e84d8366b020d2ef941e4325aa84e7', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '44f2fb1516921a1b9b52597e64106ace62bd5093', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '85797cf5c3e386a6d5666c786c9df90b4634dd4f', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '4d6280c6fb0b674ece811c9b211ce9ad21262b64', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '72897363a045674a9653588cf5a0903ede05eff2', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: 'b3a0bfd715ea6d402072e828baf20022b562992c', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss();
@@ -42176,7 +42143,7 @@ const LsFieldPropertiesMultiple = class {
                 border: `1px solid ${defaultRolePalette[this.allSignersSame().signer % 100].s60}`,
                 color: defaultRolePalette[this.allSignersSame().signer % 100].s60,
                 background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
-            } }, index.h("ls-icon", { key: '7bdd33ecf47ff7f282031091f06d7cde704819da', name: getFieldIcon(this.allElementsSame().elementType), size: "1.25rem" })), index.h("p", { key: 'b1d773176ea02bd27d46cea0c5b997ebe5c575fc', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: '398a8ddf0fdb5466baf13d3185746d4515bf8de6', class: 'ls-field-properties-section row' }, index.h("div", { key: '2777add4b21cefd15d430f0a64cd4888e53569ca', class: 'ls-field-properties-section-text' }, index.h("p", { key: '91672c9039cc267bbfe5b6c82ec1b415028d16ba', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: 'e1581cbd990fd085f9164abf3ecaae4f608eaf70', onValueChange: (ev) => this.alter({ optional: !ev.detail }), checked: !this.allFieldsOptional().optional, indeterminate: this.allFieldsOptional().isSame === false })), index.h("div", { key: '654f98a2b3fdbfc1f75ebbc6fdcd4924c34d0f77', class: 'ls-field-properties-section' }, index.h("div", { key: 'c8379e6ac365ee97c77a2fc62f52691386e9e9fc', class: 'ls-field-properties-section-text' }, index.h("p", { key: '927458b6483aca60507bb384c6b8183e64fa0560', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '6c26748b388121507b19d8a83fdaf82f5f461bbb', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '23309345964c6cabdf7342b669eebec4b3506363', value: this.allLabelsSame().label, onInput: (e) => this.alter({ label: e.target.value }), width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '81fb6ba5642271ef254e73acc510ac757f647e6c', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c24eefb1f599624eaa6b6fee9b9c938a99f697f8', dataItem: this.dataItem }), index.h("ls-field-size", { key: '6fd636331dd35bf6b02ea2769c88864773a67ae6', dataItem: this.dataItem })), index.h("div", { key: '88875c4d8fe159a136ad39429be909f4cd25d620', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '8e9601b8157a65ed12dcde1e5a76f9234b111137', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '349b804d481e72abb977b0b35ed475c679be70cc', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: 'c0611739c68d01c64e9b74c2ff0e8a48758b4730', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'bda746f14ab32d2c11921d34f1189ccd0d3d8b55' }), index.h("slot", { key: '973a8f1004677bd0cd27c2574acdf06718d7199b' })));
+            } }, index.h("ls-icon", { key: '7bdd33ecf47ff7f282031091f06d7cde704819da', name: getFieldIcon(this.allElementsSame().elementType), size: "1.25rem" })), index.h("p", { key: 'b1d773176ea02bd27d46cea0c5b997ebe5c575fc', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: '398a8ddf0fdb5466baf13d3185746d4515bf8de6', class: 'ls-field-properties-section row' }, index.h("div", { key: '2777add4b21cefd15d430f0a64cd4888e53569ca', class: 'ls-field-properties-section-text' }, index.h("p", { key: '91672c9039cc267bbfe5b6c82ec1b415028d16ba', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: 'e1581cbd990fd085f9164abf3ecaae4f608eaf70', onValueChange: (ev) => this.alter({ optional: !ev.detail }), checked: !this.allFieldsOptional().optional, indeterminate: this.allFieldsOptional().isSame === false })), index.h("div", { key: '654f98a2b3fdbfc1f75ebbc6fdcd4924c34d0f77', class: 'ls-field-properties-section' }, index.h("div", { key: 'c8379e6ac365ee97c77a2fc62f52691386e9e9fc', class: 'ls-field-properties-section-text' }, index.h("p", { key: '927458b6483aca60507bb384c6b8183e64fa0560', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '6c26748b388121507b19d8a83fdaf82f5f461bbb', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '23309345964c6cabdf7342b669eebec4b3506363', value: this.allLabelsSame().label, onInput: (e) => this.alter({ label: e.target.value }), width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '81fb6ba5642271ef254e73acc510ac757f647e6c', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c24eefb1f599624eaa6b6fee9b9c938a99f697f8', dataItem: this.dataItem }), index.h("ls-field-size", { key: '6fd636331dd35bf6b02ea2769c88864773a67ae6', dataItem: this.dataItem })), index.h("div", { key: '88875c4d8fe159a136ad39429be909f4cd25d620', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '8e9601b8157a65ed12dcde1e5a76f9234b111137', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '349b804d481e72abb977b0b35ed475c679be70cc', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: 'c0611739c68d01c64e9b74c2ff0e8a48758b4730', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'ac9eb4498ff3fe01a637f6efe793f1ed3fc8bc1e', dataItem: this.dataItem }), index.h("slot", { key: 'c7325b861d666c153aa043980901761a90f74a23' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss();
@@ -42226,12 +42193,10 @@ const LsFieldSize = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     get component() { return index.getElement(this); }
     dataItem;
     mutate;
-    update;
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
@@ -42240,13 +42205,12 @@ const LsFieldSize = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (index.h(index.Host, { key: '1cabd4d6ece5981e2e50933fa93d19b113cd6bca' }, index.h("div", { key: 'faabdbcb881e7724694750df2de7151d7a8990ac', class: 'ls-field-properties-section' }, index.h("div", { key: '14cd8bae67637aadb831dee0c2373e280dd26199', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3a2f88d275b7b7932d7816d692ef768ac24d3774', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'e88a8518e89b06f7b446b387fd063ccf15f23f86', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'e7bb74bd8e58ee30d14736a52925ea8a144dc54f', class: 'button-group' }, index.h("button", { key: 'ff0c8337a67047633e50e9f3133a9611dc005e2e', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, index.h("ls-icon", { key: 'c4618753082d4e2212a273fece998e8bd51f6688', name: "field-scale" })), index.h("button", { key: 'd88b13b511c417036b7cbac398bc8f1627cb6d26', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, index.h("ls-icon", { key: 'ee4cbf6e84d12685d3ef7516557d6ffe5214524c', name: "field-match-width" })), index.h("button", { key: 'a16e991225c105f124afc5c65960a8b8e595867e', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, index.h("ls-icon", { key: 'cbc94846ea2c09a47800e0f7e073be43c8ed2230', name: "field-match-height" })))), index.h("slot", { key: 'cc0e771946fe9cbd33d19a0c0fee3e025fc4870d' }), index.h("ls-tooltip", { key: '9f8b2d85bc49f41b85a34b30763088f804e5e5df', id: "ls-tooltip-master" })));
+        return (index.h(index.Host, { key: 'dbe299779d6c711ab4c573046c0a28c85a031c00' }, index.h("div", { key: 'fc9be902cb356590f7c620625f1f47fabb2cf67c', class: 'ls-field-properties-section' }, index.h("div", { key: '5f1ddddb7199cea1285d0ea4d1bf9a59a20ae6d9', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'b19c54d239899f6185962b59e9c92294fe0afa54', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'fc2b7c80220327a722e4086f9a5039aa80cb4860', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '167632c88d912240869b9701870e90eb48e69fd4', class: 'button-group' }, index.h("button", { key: '8e70a0edde1bc68f61f5425d08e5e8640195bf23', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, index.h("ls-icon", { key: 'faa63bf4691da3cebcddae34b3677e141ff4db9a', name: "field-scale" })), index.h("button", { key: 'fc352bd9467fd9aea4f8cf6c5add70f858d53988', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, index.h("ls-icon", { key: '3a477a26e144a72081bfb0522a84dcee77a396c9', name: "field-match-width" })), index.h("button", { key: '1c9af90f2e4936a3b1f72dbde18a258b8ec6fce3', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, index.h("ls-icon", { key: 'e09a2f40e7bc67276fe72b2f79a841509d565818', name: "field-match-height" })))), index.h("slot", { key: 'adf05acf2c42816ba4afc209dd28a7020f4ef70d' }), index.h("ls-tooltip", { key: 'f9216b38ca5b304c81ea41fb24ef63b956a8712d', id: "ls-tooltip-master" })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss();
@@ -50948,7 +50912,6 @@ const LsParticipantCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
         this.opened = index.createEvent(this, "opened", 7);
         this.addParticipant = index.createEvent(this, "addParticipant", 7);
     }
@@ -50958,7 +50921,6 @@ const LsParticipantCard = class {
     editable = false;
     template;
     mutate;
-    update;
     opened;
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
@@ -50974,15 +50936,12 @@ const LsParticipantCard = class {
         this.labeltimer = setTimeout(() => {
             const diffs = [{ action: 'update', data }];
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }, delay);
     }
     deleteHandler(role) {
-        this.update.emit([{ action: 'delete', data: role }]);
         this.mutate.emit([{ action: 'delete', data: role }]);
     }
     swapHandler(role1, role2) {
-        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
         this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
     modeHandler(_editable) {
@@ -51002,36 +50961,36 @@ const LsParticipantCard = class {
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
         const child = this.template.roles.find(r => r.signerParent === this.signer.id);
-        return (index.h(index.Host, { key: '566dadf0ccdcd48bb8e84d23c1feb07992c7138b' }, index.h("div", { key: '6b46022f975c0387f9a7c2218cdc590fe70acea9', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
+        return (index.h(index.Host, { key: '6544ccd5c1f82dbf34c009cfebd4971e5296dafe' }, index.h("div", { key: '94c77eb16f286db1d9f8d2ef7a221bf04803ba25', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
                 marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
             }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
                 this.editable = true;
-            } }, index.h("div", { key: 'bbeb8181d6fd53b2aa58b259d20f3936b4c2d637', class: 'participant-card-inner' }, index.h("div", { key: '144afaef4217215b305129a0a7a5ee5fb56d1c2c', class: 'participant-card-top-items' }, index.h("div", { key: 'eac90e844ac71a8da3be8514c7d6312551159b05', class: 'role-label', style: {
+            } }, index.h("div", { key: '210f95f85e9c270924fbeddb018f5fa1c21b72cc', class: 'participant-card-inner' }, index.h("div", { key: '137f2a79ce29db51973ec1bdbebc6e9fe28d3abb', class: 'participant-card-top-items' }, index.h("div", { key: '8874fe0285e86cf57e3c10e2848f909ca9afa87b', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: '235ec0fae5d6239960875d2c6233767425c2451d', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), (this.signer?.ordinal || '')), index.h("div", { key: '1f107046c82ec315f38bf23f9eecef8a03a5d0da', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: 'f612e40da907cb2c8781478d531a380bdb8e45bf', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: 'a06597041afdee46ec2953b8908819ce17e642f3', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), (this.signer?.ordinal || '')), index.h("div", { key: '719fde9663b77fcd59a480c7549ab807111e6ca6', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: '988f376f318682781f5a462216bb9b95445478db', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index - 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            }, "data-tooltip": "Move Up" }, index.h("ls-icon", { key: '6e636228b83b418175f0ff9d421481ee21bdc5dc', name: "arrow-up", size: "1.125rem" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: '0af3434f272caeef661bcd7e7fc4a4e5f6a0247b', class: "innerButton", onClick: () => {
+            }, "data-tooltip": "Move Up" }, index.h("ls-icon", { key: '0d63c5756bc03f707048bf12c051fedf48efbfba', name: "arrow-up", size: "1.125rem" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: '69a89fda199b1059bff753e4914e32f11aa9e0f3', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index + 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            }, "data-tooltip": "Move Down" }, index.h("ls-icon", { key: '96ccf7537631af83a033569e950576e8da3098f4', name: "arrow-down", size: "1.125rem" }))), index.h("div", { key: '1621650800fbe8bb6fa99a59a572c3b6d492b4dd', class: "innerButton", onClick: () => {
+            }, "data-tooltip": "Move Down" }, index.h("ls-icon", { key: '8709b37acbffc8fb0044e437827c8cf549dba129', name: "arrow-down", size: "1.125rem" }))), index.h("div", { key: 'f92fee2c1179c0bafb1d2e03b88dfab22ec7411b', class: "innerButton", onClick: () => {
                 this.editable = !this.editable;
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: '240e497042c41d35e311c5315653ae2b52e2808b', name: this.editable ? 'check' : 'pencil-alt', size: "1.125rem", "data-tooltip": this.editable ? "Save Changes" : "Edit Participant" })), index.h("div", { key: 'a08fc82ffe319408ada2d59a96d106cc0da89f49', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '0a06776685d90355af3e6a619e2bfe8e34e95196', name: this.editable ? 'check' : 'pencil-alt', size: "1.125rem", "data-tooltip": this.editable ? "Save Changes" : "Edit Participant" })), index.h("div", { key: '396f7f5c35c35d6def57a3562c86680d8fb004df', class: "innerButton", onClick: () => {
                 this.deleteHandler(this.signer);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            }, "data-tooltip": "Delete Participant", "data-tooltip-placement": "top-end" }, index.h("ls-icon", { key: '62ebf9e23a55d0243a51249c4599bc03ead62807', name: "trash", size: "1.125rem" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, index.h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (index.h("ls-input-wrapper", { leadingIcon: "eye" }, index.h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), index.h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+            }, "data-tooltip": "Delete Participant", "data-tooltip-placement": "top-end" }, index.h("ls-icon", { key: 'b08c1a184b9f3e7bc13713d19de94ad1dbe89254', name: "trash", size: "1.125rem" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, index.h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (index.h("ls-input-wrapper", { leadingIcon: "eye" }, index.h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), index.h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editable = false;
             } }), this.signer?.roleType === 'SIGNER' && !child ? (index.h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, index.h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (index.h("button", { class: 'destructive', onClick: () => {
@@ -51046,7 +51005,7 @@ const LsParticipantCard = class {
             } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (index.h("div", { class: 'role-label fields', style: {
                 background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle", size: "1rem", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: 'e448c77938303f5ff85d190183c67cc74d1e081b' }), index.h("ls-tooltip", { key: 'baf26e5fdec56dcae46a7988d690f36b6bdfe459', id: "ls-tooltip-master" })));
+            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle", size: "1rem", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: '7a6f8bd6073c0d6c5ef72fe60f0316e89f9ca6eb' }), index.h("ls-tooltip", { key: '57ee7a3ab8577a205ac07ededa3e71c93b2fa832', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -51406,13 +51365,11 @@ const LsTitleInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate", 7);
-        this.update = index.createEvent(this, "update", 7);
     }
     get component() { return index.getElement(this); }
     template;
     editTitle = false;
     mutate;
-    update;
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     // NOTE this alter is debounced to account for typing
@@ -51426,12 +51383,11 @@ const LsTitleInput = class {
         this.titletimer = setTimeout(() => {
             this.template = { ...this.template, ...diff };
             const diffs = [{ action: 'update', data: this.template }];
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }, delay);
     }
     render() {
-        return (index.h(index.Host, { key: '48cae0d9c9d29f199cdabb4ab274bdfaef0891d1' }, this.editTitle ? (index.h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
+        return (index.h(index.Host, { key: 'df0dddae77292b9d87eeca2b53137055abd1b732' }, this.editTitle ? (index.h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
                 e.preventDefault();
                 this.alter({ title: e.target.value });
             }, onKeyUp: e => {
@@ -51507,10 +51463,9 @@ const LsToolbar = class {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'bafb88d0050349a95e68e5c2424c6ef4cb60dd31' }, (this.dataItem && this.dataItem.length > 1) ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), index.h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("ls-tooltip", { key: '4cf0e3dd34be8dfff87525ebe0c87d106d49335d', id: "ls-tooltip-master" }), index.h("slot", { key: '2eaa4c5de2ed24e5405a4e85821b59e934b77db4' })));
+        return (index.h(index.Host, { key: '55d84a2c19190fb4149d658151ccdb369b32da84' }, (this.dataItem && this.dataItem.length > 1) ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), index.h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("ls-tooltip", { key: 'c700f50c2fe2829bc653a5a8c791f642ce966a8f', id: "ls-tooltip-master" }), index.h("slot", { key: '09a19a62da326c4131cdbddced63de71106da892' })));
     }
 };
 LsToolbar.style = lsToolbarCss();