legalesign-document-viewer 0.2.16 → 0.2.17

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

@@ -19850,7 +19850,7 @@ function addField(frame, data) {
     const node = document.createElement('ls-editor-field');
     node.setAttribute('type', data.formElementType);
     node.setAttribute('id', 'ls-field-' + data.id);
-    node.setAttribute('selected', 'selected');
+    // node.setAttribute('selected', 'selected');
     node.style.zIndex = '100';
     node.style.position = 'absolute';
     node.style.top = Math.floor(data.top * this.zoom) + 'px';
@@ -19889,16 +19889,6 @@ const findDimensions = (frameContainer, sourceField, pageHeight, pageWidth, zoom
     const ay = top > 0 ? top / pageHeight : 0;
     const bx = (left + zwidth) / pageWidth;
     const by = (top + zheight) / pageHeight;
-    console.log({
-        top,
-        left,
-        zheight,
-        zwidth,
-        ax,
-        ay,
-        bx,
-        by,
-    });
     // Return with calculated styles that try to place it as it would appear on legacy signing page
     return {
         top,
@@ -20174,11 +20164,11 @@ const validationTypes = [
     { id: 20, description: 'Dropdown List', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 91, description: 'Countries', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 92, description: 'Name prefix titles', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 24, description: '✔/✗', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 25, description: '✔/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },
-    { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
+    { id: 24, description: '✔/✗', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'checkbox' },
+    { id: 25, description: '✔/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'checkbox' },
+    { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'checkbox' },
+    { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'file' },
+    { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'file' },
     {
         id: 76,
         description: 'File: zip with PDF (for internal view, signed PDF for signer)',
@@ -20186,13 +20176,13 @@ const validationTypes = [
         defaultHeight: 16,
         defaultWidth: 200,
         typeDefault: false,
-        inputType: 'text',
+        inputType: 'file',
     },
     { id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 3000, description: 'Auto Sign', formType: 'auto sign', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 4000, description: 'Text Area', formType: 'textarea', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'readonly' },
+    { id: 4000, description: 'Text Area', formType: 'textarea', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'textarea' },
 ];
 // See validation table in database for latest values - these have to be hard coded for our HTML control - ASW
 function getInputType(validation) {
@@ -20321,9 +20311,12 @@ function mouseDown(e) {
         this.selectionBox = null;
     }
     else {
+        console.log('start mouse down reset');
         this.startLocations = null;
         this.startMouse = null;
         this.selectionBox = { x: e.clientX, y: e.clientY };
+        this.selectFields.emit([]);
+        this.selected = [];
         this.component.style.cursor = 'crosshair';
     }
 }
@@ -20356,6 +20349,7 @@ function mouseMove(event) {
         debounce.bind(this)({ action: 'update', data: recalculateCoordinates(this.hitField.dataItem) }, 700);
     }
     else if (this.selectionBox && event.buttons === 1) {
+        console.log('drawing box');
         // draw the multiple selection box
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
@@ -20387,18 +20381,17 @@ function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
+    console.log('mouse up');
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox) {
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         box.style.visibility = 'hidden';
-        findIn(fields, box, true, event.shiftKey);
-        var updatedFields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
-        this.selectFields.emit(Array.from(updatedFields)
-            .filter(fx => fx.selected)
-            .map(fx => fx.dataItem));
         this.selectionBox = null;
-        this.selected = Array.from(updatedFields).filter(fx => fx.selected);
+        const found = findIn(fields, box, true, event.shiftKey);
+        this.selected = Array.from(found);
+        console.log(found, this.selectionBox);
+        this.selectFields.emit(found.map(fx => fx.dataItem));
     }
 }
 function mouseClick(e) {
@@ -20426,6 +20419,8 @@ function mouseClick(e) {
         this.selectFields.emit(selected.map(fx => fx.dataItem));
     }
     else {
+        // reset the selection box location
+        this.selectionBox = { x: e.clientX, y: e.clientY };
         const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         fields.forEach(f => {
             const { left, top, bottom, right } = f.getBoundingClientRect();
@@ -20451,8 +20446,8 @@ function mouseDrop(event) {
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
         // Make a new API compatible id for a template element (prefix 'ele')
         const id = btoa('ele' + crypto.randomUUID());
-        const top = event.offsetY * this.zoom + frame.scrollTop;
-        const left = event.offsetX * this.zoom + frame.scrollLeft;
+        const top = event.offsetY / this.zoom + frame.scrollTop;
+        const left = event.offsetX / this.zoom + frame.scrollLeft;
         // TODO: Put these defaults somewhere sensible
         const newData = {
             action: 'create',
@@ -24578,7 +24573,6 @@ class LsDocumentAdapter {
                 break;
         }
         const result = await this.execute(accessToken, query);
-        console.log(query, result);
         return { result, obj, event };
     };
     /**
@@ -24803,7 +24797,7 @@ const LsDocumentViewer = class {
     validationErrors = [];
     status;
     groupInfo;
-    selected;
+    selected = [];
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
@@ -24896,9 +24890,8 @@ const LsDocumentViewer = class {
     // Send an internal event to be processed
     update;
     adapter;
-    // Updates are internal event between LS controls not to be confused with mutate
+    // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        console.log(event);
         if (this.token)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
@@ -24931,17 +24924,26 @@ const LsDocumentViewer = class {
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
+        const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
         // update the template with all the latest values in the 
         this._template = {
             ...this._template,
-            elementConnection: { ...this._template.elementConnection, templateElements: Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field')).map(ef => ef.dataItem) }
+            elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) }
         };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
         if (toolbar)
             toolbar.dataItem = event.detail;
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
-        if (propPanel)
+        if (propPanel) {
             propPanel.dataItem = event.detail;
+        }
+        // change style of selected fields
+        event.detail.forEach(fc => {
+            const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
+            fu.selected = true;
+        });
+        this.selected = fields.filter(fx => fx.selected);
+        this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
         this.validationErrors = validate.bind(this)(this._template);
     }
     // Send role selection changes to bars and panels
@@ -25109,7 +25111,7 @@ const LsDocumentViewer = class {
             else if (update.action === 'delete') {
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                 this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi);
-                this.selectFields.emit([]);
+                this.selected = [];
             }
             else {
                 console.warn('Unrecognised action, check Legalesign documentation. `create`, `update` and `delete` allowed.');
@@ -25160,6 +25162,7 @@ const LsDocumentViewer = class {
             this.initViewer();
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
+            this.selected = [];
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25175,7 +25178,7 @@ const LsDocumentViewer = class {
         box.scrollLeft = (box.scrollWidth - box.clientWidth) / 2;
     }
     render() {
-        return (index.h(index.Host, { key: '5db6f0b0cacffac6a67320e3efec53f7b1d7cd10' }, index.h(index.h.Fragment, null, index.h("div", { key: '83c44b41c8f2dc95be881e1037261797738f2d6b', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '390c52811c15e010a04b0583ccc14433146fe0c3', validationErrors: this.validationErrors })), index.h("div", { key: '44c190b39ca8be2896a6d33e57ea8f8e671b4e0d', class: "page-header" }, index.h("p", { key: '2e47ff8c2e967c534e2eded870a00b3beb7d20a3', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '0ae211a05e4a7914558d4e9230e46e3fa831f763' }, "/"), index.h("p", { key: '5e475b4c086963f819ce77ab678833a9f7e3ecc2', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '6031ebd35845d41e97741aed4bdc95b27b57f735', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '079c3dca9d2e77381a5065218ebc5795257b7b5f' }, index.h(index.h.Fragment, null, index.h("div", { key: '344d5e56479caaadc6f82c4de47c52f08f7d5bc1', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '2fef322510e4be2fc6fe2ec6e70664e23ed9413f', validationErrors: this.validationErrors })), index.h("div", { key: '7b581394dd4536ed8f807a7ce5375723a54b2f8d', class: "page-header" }, index.h("p", { key: '0aa1f815c4bc989764efe1969c250fc39fff1294', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'f6369aff0df03f8ba40f149d4f5d8ca227e15a6c' }, "/"), index.h("p", { key: '3b93a9acaf60c7023286e069ab8ce4a93acc1c5a', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '3f3f426a56d4020f609485b85b80851927060a61', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25185,10 +25188,10 @@ const LsDocumentViewer = class {
                     participantManager.template = this._template;
                 }
                 this.manager = manager.detail;
-            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (index.h("div", { class: this.selected && 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 => {
+            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !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();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '17bdcdfc68bfac89be78cafa3e129d9e7707577d', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '835375af974d129276149cd0436c2d6172c0d98c', id: "ls-mid-area" }, index.h("div", { key: '2603de371e8ebba4b7635e1f3fff70ce4fbbad02', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '766c7969c30dafe8d501cfec3c87c8fef7600bcf', id: "ls-document-frame" }, index.h("canvas", { key: '4b00fb5f60e545e1a1798a3e8f6e8dda21d6839a', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '91b5b0ff16e1fc2b3c27fe4d6a0194da0c3dd3ee', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '59240ef29b8466f732b0d928b4c8a6cf4deb25b4', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '520c82bb33eb66105891aece1b09f0eb80d0f2b4', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: 'b7cda4e39b0b85515f38ceb2c413b2bd3af5089b', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '19d4e788c2f1ce3d3951854af41211d5598b1dd2', id: "ls-mid-area" }, index.h("div", { key: '83161a18cdb8e0ce58d7eb571936b2715ffc43e7', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: 'ecbccb9f5bcd253caaa43a08e80957b31b970825', id: "ls-document-frame" }, index.h("canvas", { key: '53d262c1bbda820579da7c89ad63fb252a7d152d', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ed51cfcc623cfa374487ddd0692182e83620ef94', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '55856f133696700638f8fd7bd8a31ef1b5169f4a', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '3176526950bed152c446488efd5407717be0d55f', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25418,10 +25421,12 @@ const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;paddi
 const LsEditorField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate");
+        this.update = index.createEvent(this, "update");
     }
     get component() { return index.getElement(this); }
     dataItem;
-    selected;
+    selected = false;
     readonly;
     type;
     page;
@@ -25430,6 +25435,8 @@ const LsEditorField = class {
     isEdgeDragging = false;
     innerValue;
     sizeObserver;
+    mutate;
+    update;
     handleInput(e) {
         if (e.code === 'Enter') {
             this.isEditing = false;
@@ -25467,14 +25474,13 @@ const LsEditorField = class {
         this.sizeObserver.disconnect();
         this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;
         const editbox = this.component.shadowRoot.getElementById('editing-input');
-        console.log(editbox);
+        console.log(this.dataItem);
         if (editbox) {
             editbox.className = 'ls-editor-field-editable';
             editbox.focus();
         }
     }
     handleDragStart(event) {
-        console.log('dragstart ls-editor-field', event, this.type);
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
             type: this.type,
@@ -25493,10 +25499,6 @@ const LsEditorField = class {
             this.component.style.boxShadow = 'none';
         }
     }
-    onInputChange(e) {
-        // console.log("INPUT CHANGE", e);
-        this.innerValue = e.target.value;
-    }
     componentDidLoad() {
         this.sizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
@@ -25524,11 +25526,28 @@ const LsEditorField = class {
             this.component.style.boxShadow = 'none';
         }
     }
+    // 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
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 900);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }, delay);
+    }
     render() {
-        return (index.h(index.Host, { key: '5239d34cfda7e3a83d55d447a46a6bf728316fe9', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, index.h("div", { key: '59181ee2a080db4469d8d4e262ca69f27d9c3e2b', class: {
+        return (index.h(index.Host, { key: '3ad1a3a7480b3fc1394db18a60acc7af63f7df98', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, index.h("div", { key: '16fe59242c50fd50bb96d65c6b3ffa2fa47c5e54', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && index.h("ls-icon", { key: '9416fcdb2cce01b90858e16263a94efe668ffabe', name: "required", size: "12", class: "required-icon" }), index.h("input", { key: 'c92ba9a8b846b7e41d62cb4af3c501db6a2560f1', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: 'e3663eb3363123cb166c61f27dadc2744928e737', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, !this.dataItem?.optional && index.h("ls-icon", { key: '71ae4733b4c8f05d1c75bb8b5445242b35d958a0', name: "required", size: "12", class: "required-icon" }), index.h("input", { key: '1039562d2c7a854b1da63ebc3c87b76290595436', 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: 'e101d06a1b320479e047a03ccdc0c58fcdb0bfec', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.dataItem.value.length && this.dataItem.value || this.dataItem?.label || this.dataItem?.formElementType))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -25761,9 +25780,9 @@ const LsFieldContent = class {
         }, delay);
     }
     render() {
-        return (index.h(index.Host, { key: 'dda7f87a0d7df59c8cb6a0d5092bafc498c55e04' }, index.h("ls-props-section", { key: '3e319995eef4e6d7f0e9137a534752aaedad125f', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: 'fa1cc52746b28743221f8bc1034f81b2da691458', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '1772bdf3c25d7cbf80276604ec33b0517e5affb2', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: '3d2efbcc2e364780ac78df83bab1b2bf8744462a', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: 'dfe582da625828e21281af36afd6e24ea8c86c76', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: 'e920ef8623ef1c6130183c5ab2d459b4c43a4d79', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: '418bcef3f3a9de23eff0d06d59f1af21a081f2fa', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: '1184adfa1196aae25af72dae5470128083144391', 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: '42a89dad4eae8eebe6440f05b36d9727e39ca7d6', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: '36700486819a5178632afd3746f84b4e1e190789', select: true }, index.h("select", { key: '9d55d6d34fbc485afecc16aff4e0dd2b839f4cee', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (index.h(index.Host, { key: '36e48c5852682a2f976d5b30ffb7ea3bfe24d5f1' }, index.h("ls-props-section", { key: '39ecdfe604236ed2f36dd845e73e70163f5a6ecf', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: '5efb9a29fb2f783e55f483ec602fd596624e1c35', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '85003365f16c771480c03d6e08aaedf48b1824bb', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: 'ed7319e6bd551c1bc8e7d59387fe7b3e3397b7be', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: 'a6d76cd96f21fbb1f037eebd7bd57b21471940ff', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: '48b499a96bb887c88714dc69d2e87af8f1c00dd9', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), index.h("ls-props-section", { key: '2d30ed7ac29d061820ef36debad71ff9460dfb4f', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, index.h("input", { key: 'f50dde6f4df5d1fe16ed4bf907cf5bd4a4a5f0a2', 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: 'ba47cfa4d3450bfc5dd31a7c0308a905eb38b4e1', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: '6f9bc538bca775252b47a74ba4796ee1952bb1df', 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: 'e1b1ce449ccc954f869c98f20d8a64f2372bb677', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: '4276c393352923286ee12436c43c08e9f3d824e2', select: true }, index.h("select", { key: '58122cae81c4db823ebac128a9067401d312cf12', 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: '1cb573328edd690168d072bf7ad602344e9b9280' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: 'dd4076914cf2d5c2afaef4490673ef1c59154907' })));
     }
 };
 LsFieldContent.style = lsFieldContentCss;
@@ -25805,7 +25824,7 @@ const LsFieldDimensions = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f1c88cfe9c61ff4ddaa248042e13551a1ba8f19e' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '16da3de2730a3ce5c266a56b8155a3b49c9c37ee', class: 'ls-field-properties-section' }, index.h("div", { key: '511afc567befa23d01896adc8a02eb92a87e4f39', class: 'ls-field-properties-section-text' }, index.h("p", { key: '443e5ae80ab9fb455994a31c4ad963d385d71d7b', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '907f05d597390a9abd794f5472b36a112601235c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'c5670e175b4cefc51f979b81225f8c69accf0e7c', class: 'input-row' }, index.h("div", { key: 'fbd8d98f6ce8dff64a6529b0ccd5dfa3f51ee636', class: 'input-wrapper' }, index.h("ls-icon", { key: 'c3e7bc1afa7519b3126ca797478feab277572a0a', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '3d3ac9896d5ef906116d4615e10c29181ab92ac3', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '9878403ac2ff5dc8f2af2aa0c1e6fd41bcf02e87', class: 'input-wrapper' }, index.h("ls-icon", { key: '4bc9c6042047a5c16e4e854b117b7fb050641cc7', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '12f7e336415ca1db90f394bba9b58f18eaac1017', 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: '8900ccd66bf481fd10ad49a8956649ae6ecacd65', class: 'field-set' }, index.h("div", { key: 'b78d6363ee16b5ce853d4329684c591756a848be', class: 'ls-field-properties-section' }, index.h("div", { key: '775452534fd5da31c475a956680b470b55ef11a6', class: 'ls-field-properties-section-text' }, index.h("p", { key: '4872be8ed9db40953d5cc04e46415673fd3f4bb9', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '600bb95e2746548726217edfd41d5b4163e02b61', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'f67e91c6628df4eecd53ad1b128fe3198bbaf8d5', class: 'input-row' }, index.h("div", { key: '95195f2820632c63c1ea31de2ff4a6760f6c2b3e', class: 'input-wrapper' }, index.h("ls-icon", { key: '74e881a3d2ce02395216b634d7e5df394173cf81', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '364167cbc548dd96b76dcb342de7c9e7ab300f34', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '2b264b2640e7b0b91120270cade3ca93d23b30d7', class: 'input-wrapper' }, index.h("ls-icon", { key: '28117961d0cc1bcfb2b4525d92fbfad17a5ae154', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'bbdd2716d748016f37efaa24c3f3935ca2dea6a5', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), index.h("div", { key: '7f17c5f25f1cd5a51ca5f35cf343b6c659e58951', class: 'ls-field-properties-section' }, index.h("div", { key: 'e1c3ac008dea2b9330c364bf543ae94074d52e8a', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'dca6f70ea27b42e23cd18179e483b250d640982b', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'f64e05f960722f161b8e7d35774d6fa3e2d485b6', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '02867f1a603bfda72d466fe9012151d23cb80f2f', class: 'button-group' }, index.h("button", { key: '68e11a5cd45f44255c018b02457ee6a01fb2a477', disabled: true }, index.h("ls-icon", { key: '125c0bb8860bb69b1698ff02bfabeccb816aff8f', name: "field-scale" })), index.h("button", { key: '97792431d09645c4b21af9aee87b232df6ae43c7', disabled: true }, index.h("ls-icon", { key: '91cf707ebfa43eddc54147ea83c3b598344df02c', name: "field-match-width" })), index.h("button", { key: '6de341f0c96cc1a1eb8958ad63728223aea14928', disabled: true }, index.h("ls-icon", { key: '997e382c46034101981d1a37bced9ca46f5d598d', name: "field-match-height" }))))))));
+        return (index.h(index.Host, { key: '19d830f9e2acf0125befaaa5386613da819d5f0e' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '629f80415218ade978ce45a9fbeea38f136a1b33', class: 'ls-field-properties-section' }, index.h("div", { key: 'a027cc20ae591f94ed54d9e6e93b7826a87dd583', class: 'ls-field-properties-section-text' }, index.h("p", { key: '24270cee4bdecc6c06a06efb34169827dc0aa96e', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '8558ee8920871270943edbda0392c21eae948c94', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'fd8b5281f3a25de363bcbb1ff93189dbadfe7b15', class: 'input-row' }, index.h("div", { key: '6f6d9205a2b1a14c8b0618d8f097290edb43690f', class: 'input-wrapper' }, index.h("ls-icon", { key: '2eb580572a2be6ea8cc204447f760da63d06807f', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '2bc5d6f1c7f725ecb6ca82c4081ed5b42b7ee56e', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '6affcfc83bc4cde7a9fed80415c9d21495e1466c', class: 'input-wrapper' }, index.h("ls-icon", { key: '634b0e72778978116b39cf15869884bbe51eabdc', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '762fdbd4b3ff084d7d136f4536d592bf07cf8342', 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: 'aa4c66751db7f2d3dfca151edc1cb23cbfdbfce1', class: 'field-set' }, index.h("div", { key: 'b2e86370878a977450c3057d7892f96a5f3f7dcb', class: 'ls-field-properties-section' }, index.h("div", { key: 'e3c5d394149132da170e7c61b70d6739924b9f52', class: 'ls-field-properties-section-text' }, index.h("p", { key: '52f5b30d62cfc5541952be0650411df7c6d51c42', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '7b7c280d971473115859f8fb7f274b9e3a028fa1', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'ad761e6552cf41cab1abe005a084c68ead82175c', class: 'input-row' }, index.h("div", { key: '3666540cd6533c6d2698cb6b2bd722d7749f930e', class: 'input-wrapper' }, index.h("ls-icon", { key: '0d27684b779b5bcdc69bbc22402615706590c94b', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '88b451a53d36ef023545ff0b6cc59ceab85b714c', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: 'ecca70d84553d8f39cba8c4c5915761e30adf0ab', class: 'input-wrapper' }, index.h("ls-icon", { key: 'c867638bc065ae5702b3e7887cc4f0a42b9e13e3', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '44dc86a42a13de363dce31fe99151183da4411aa', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), index.h("div", { key: 'fc9f465fb17869fcdf129ddbdcc9e3a2d293ef8f', class: 'ls-field-properties-section' }, index.h("div", { key: 'ff59482f02e40b4c2b36ff8bc3e6e2bd6cf2f3e7', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ff4ab1e6fddcd3acb152986da22d0578b95379de', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'e421512109ff01779b429be7bef8d94e7aede922', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'f73d48bf4e11b750e76bdb19f7c42edd272c0825', class: 'button-group' }, index.h("button", { key: '401b1544201acb638e9370ffa11d18423adb5b4a', disabled: true }, index.h("ls-icon", { key: '54d6007197fff3ea5786af142affcc1a7a68f12e', name: "field-scale" })), index.h("button", { key: '688a49435f72a6b940f5bc1a743465d90ce70079', disabled: true }, index.h("ls-icon", { key: '5b29da650220c305d3cd4a10a36c773ffd8484e5', name: "field-match-width" })), index.h("button", { key: 'ddc295463cae884a14c3391c369af08d406ce575', disabled: true }, index.h("ls-icon", { key: 'd21cca2e51d9556c187fd8688983aef92e09c2dc', name: "field-match-height" }))))))));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss;
@@ -25901,11 +25920,11 @@ const LsFieldDistribute = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'e6fa23679e6180e22e1c84610af7746d2ef0f021' }, index.h("div", { key: 'a53280f6ed74d6bbf80218b90026deedfe1cfb06', class: 'ls-field-properties-section' }, index.h("div", { key: '1fbf6a2e1afc3b1303f831f650f3e435042ab042', class: 'ls-field-properties-section-text' }, index.h("p", { key: '713489d8eb96af760fe306321f9b2b3cec8ab672', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '853ec7401a590864de3f44ff74ee4d90381733c9', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'badb062f9637961a7afa44657db39f3ad8a6088f', class: 'button-group' }, index.h("button", { key: '8012ea3a46b77be1ad74078ad04150cf23978554', onClick: () => {
+        return (index.h(index.Host, { key: '1da6e89c29b012402fb855b09d6f89412b7fffff' }, index.h("div", { key: '13a5e1dfededc5e857f85d731fb23f59b6b8f64b', class: 'ls-field-properties-section' }, index.h("div", { key: 'af4c4a1dc679bff814e0996a56169db0d65c0a52', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'afcd55f8ea2c8000ddaba5bcd516a1926a3f103a', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'db559e60e145234f95497eca284ccf241fc5f094', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '4a8433efc339fc1a995ef964abbda61234a00f52', class: 'button-group' }, index.h("button", { key: 'd91bb4652162d97ad921ec91c9c0261f617a518f', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '519ed59a373c7a8312cad6762e914ffbe6d0a731', name: "field-distribute-vertically" })), index.h("button", { key: 'd084dd0be3c07a1c79393492e39c7ffc75e91839', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '4c7935424e784dc1fc3ebfe996101c492c8cb4de', name: "field-distribute-vertically" })), index.h("button", { key: '0ac25cb0252642f565af0e43d8e3d62c8869469d', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'b6e1134acd4def5653235b0c1e54d16752280dff', name: "field-distribute-horizontally" })))), index.h("div", { key: '25f18905ba0a2ac89d253e338e8aabf8976d919f', class: 'ls-field-properties-section' }, index.h("div", { key: 'c30ec94bcc6e2750ac7a2e22b02b147897e03ace', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c1a25764ca2ef02d144a8b2f2d423141750284aa', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: 'e016d0325f6b1519a9e55b8b1c957766f6f31345', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '6c9f27c155cb9b900f4f8502099b36b892bc27e3', class: 'input-row' }, index.h("div", { key: '475b34a1d4f0501bbc04d3e98970b73cb1ed3993', class: 'input-wrapper' }, index.h("ls-icon", { key: '0d7dd0488f6ba079946a5031263b63ec7f13b228', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '89f6342f1d89da3f684e12aefdede1f1dec5d6ad', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: 'd63e1ff2c1af4471199153fa50fd2873e5e9d4ad', class: 'input-wrapper' }, index.h("ls-icon", { key: 'ec82061140fdce46e1c6d51aebd9ba59f8d06694', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '1c377a1b75b1a26ddf035b67a4a122a4de09defb', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: '8844524faa80ee1ec6bf72e58187de1b5fb3ff15' })));
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '00d5b191557e95b6dd8f7c9866ade809c5392046', name: "field-distribute-horizontally" })))), index.h("div", { key: 'd21c0297023873f7d752163fb06557504ca3ce91', class: 'ls-field-properties-section' }, index.h("div", { key: '5d29996d6e3c25621ba760bca38a0b76a02c1099', class: 'ls-field-properties-section-text' }, index.h("p", { key: '00ab146d74a0446aad281a46fdafaae20384674c', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '968370f8ece75d442fa8b1adc2809a289653b295', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '2819ad7513258f7c3c4096f171578d5c704d3fc8', class: 'input-row' }, index.h("div", { key: 'a8d5d086e974b911490df419059a82b43cc566de', class: 'input-wrapper' }, index.h("ls-icon", { key: 'fa72a36c4da15a210ee486477b0c362741002940', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '52853aa1afe326391b735f534ff0987dab350037', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '57a5adfb1675e7fd5ab71c71ce0d239fc5777c2b', class: 'input-wrapper' }, index.h("ls-icon", { key: '6114732c75cf3499985d80b718578bd6140bd801', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '729381797b69aca62402451473b3ac2507e21a5c', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: 'ca7b442e1395376563a47d5377eb9962ace34f38' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss;
@@ -25934,7 +25953,7 @@ const LsFieldFooter = class {
         this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
     };
     render() {
-        return (index.h(index.Host, { key: '7cc58c180e1e341656bfd6101cbf333a7ed32b67' }, index.h("div", { key: '90639bb2214e8e40a5f4bc4c561fc008df22f2c4', class: 'button-footer' }, index.h("button", { key: 'b30a4478ef0fa56e4b317b548184102967dfe12d', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '50cee61d4f7025dc0069fcbab3b2d24197102779', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '70128bb3f06ca40e9589836e4d729d1a77039f03', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '283456d29066dc702d82f229d963ca0b889ad873', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '48cd609fa11d92827e397e45b60d56d925999ffc' })));
+        return (index.h(index.Host, { key: '71d3ecbf124d31efdd15641f46406cc19ef2fad9' }, index.h("div", { key: '9e44d8fa9c1b18199d49ff59f7d9e89cb596a360', class: 'button-footer' }, index.h("button", { key: '3e9fc08011e29e1efd6803f9a03b85dc1209c242', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '9a457d4bca28dcdbe708b32864a66bf690a7212c', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '05743aea386445a51c808baced5dc540f9c323a1', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '7be1455b97f1768ce615474794e0b7dd75a4ecf3', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '54a62065f104f644ab6454a801a0ed913205009e' })));
     }
 };
 LsFieldFooter.style = lsFieldFooterCss;
@@ -25963,25 +25982,25 @@ const LsFieldFormat = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '23b209dc190b9690d9e3847756d8f60ebc44f944' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '8a26eed82c32cea6948fad1edd3b861042eb9f0f', class: 'ls-field-format-bar' }, index.h("div", { key: 'c65882c61be956305a78293397e33a1140bb35e9', class: " input-wrapper" }, index.h("ls-icon", { key: 'e06ca06e4f4947e0623eacbe8da91de1e85a5afa', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '93f4469572660ba0b3fffddea87734bc25bd13bb', onChange: input => {
+        return (index.h(index.Host, { key: '9830d08c3b141b3180280179ba118f2aff5172f0' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: 'f125719127e3f8b014cff454bce8fa432dba8570', class: 'ls-field-format-bar' }, index.h("div", { key: '66e387c55b1d9ce916e6944938fbedec7b60df8c', class: " input-wrapper" }, index.h("ls-icon", { key: 'ca4b833a2507e878c35ebf5940beef0ecd2c7776', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'fcba8b29e969fac7a9acbbeb855d28eeed20ea1f', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: '35fdc672ab36db9cee13a9483974e5d12dcdb7ee', value: "arial" }, "Arial"), index.h("option", { key: 'ed3604f310d4c39582a18b73153da8b81823e553', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'd563dc86d6e484f6621516144abe80bd9e7c22db', value: "courier" }, "Courier"), index.h("option", { key: '65d2014e93b06736b811aa5ce94bb36f748158a3', value: "helvetica" }, "Helvetica"), index.h("option", { key: '26e3c6feb86c5fc32b08db3d4c1d2aaaa9312c19', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '35d747f65c336c3119b0651aa5ad74a4bd03e7d3', id: "selectorIcon", name: "selector" })), index.h("div", { key: '33e0a5ba086809556efe98816b5eee80df8d2446', class: "input-wrapper" }, index.h("ls-icon", { key: '55db08ca9ed646f19b0e4ec81c57733f1b67aa07', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '440604312f0fdf2ce74881febd38bafd0f8bcc41', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '88bcd5fe368ef3cd4a8e9e273186db12a1c5f580', class: 'button-group' }, index.h("button", { key: 'dcbfedec5baa963893c1b3a756fda7dab1ac8096', onClick: () => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '33bab119c584bbd70959f01c0a86f47a8472304c', value: "arial" }, "Arial"), index.h("option", { key: '2665a63ab41a4bab8ef59b85dd944495585aba6b', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'dc387a4e0ddd99d2344ef27feef9628286cc1cc3', value: "courier" }, "Courier"), index.h("option", { key: 'c00614f48ddea8e534b14c25880d3a7563f88558', value: "helvetica" }, "Helvetica"), index.h("option", { key: '0558b3283a7654bf6101cd3e31ff633ed4ad7c02', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '0db075666eaf2ebfba3d24cf15c8607907d568fe', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'ac4632fa34024e3576a882c257e2b633dd39ca23', class: "input-wrapper" }, index.h("ls-icon", { key: '49f56b4031bac85b8d3f240ca38b45e6016517f8', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '6f1c5fbcbe572c49d4343ea7cba63cfe15511404', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '3b7c4400dd7bb04751decbf8ad8ea49154c9094f', class: 'button-group' }, index.h("button", { key: 'd0421795af81429299836e36993534b71d094cc4', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: '5215471766ea8305d1de1075870471cd396dfb82', name: "menu-alt-2" })), index.h("button", { key: '994cc7ec78b566286739dc4a6416fc100d0c9ac8', onClick: () => {
+            } }, index.h("ls-icon", { key: '10b2b34fdf03fdab5f9938b1352a617ff1a8979d', name: "menu-alt-2" })), index.h("button", { key: '5965c9b86e64cd39a81d1334992daf63b08dcadd', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: 'ff73e43bb41460b902dc5778adf7fe448e136be1', name: "menu-alt-5" })), index.h("button", { key: '0841ca37df78b67b80760f5266a9f78db7e913e1', onClick: () => {
+            } }, index.h("ls-icon", { key: '95ada12f033106a1b5ff8381a21ab2f4751b8b2d', name: "menu-alt-5" })), index.h("button", { key: '12c263cf73c90f58f202e99eb28863b7fa44b6c3', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '1df93bc703d8c3c2d47b420e829844d3af8bb1f0', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '8c06bfe699d610eba6be4ebd353468ae9ac0e7c0', class: 'ls-field-format-bar' }, index.h("div", { key: 'b544bcbdb038c1d0721e7ddefb03a0d07c89df07', class: "input-wrapper" }, index.h("ls-icon", { key: '0a1f1f68e6d9869f0ec327f07ee1869948c1c873', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '683d9a1ce1a34c48e2b5028cb5d6105a67dc4b02', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '18ce893824dcf0f54ac24578a3d681009d15dd21', onChange: input => {
+            } }, index.h("ls-icon", { key: 'deac6371af9a07eac83385bf769af33f3ac895d7', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '4d6bb447542540466b47736e2cdd9278f5fb9166', class: 'ls-field-format-bar' }, index.h("div", { key: 'f33f4da0a2e044cdb19b67e58e458f6bea84a882', class: "input-wrapper" }, index.h("ls-icon", { key: 'f6af8ec3739e7bce77c1c87a40d02f6696a32613', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '739d045a9dd6ce8dbb4dd7b67cfe37dd9eb5e638', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'e678cccd1b544d4a271bdf099ee546e614acdb33', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: 'bf9509d7bfe87efa9a1493e139979a5374e6626c', value: "arial" }, "Arial"), index.h("option", { key: 'd02f3033f6ac1ab79545179d575f99df315f440a', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'b889f947e5b504a7a89a110dd29d07fe16917b79', value: "courier" }, "Courier"), index.h("option", { key: '4b6c22fc5369cf5c1d1001bfb56914bfe08934a9', value: "helvetica" }, "Helvetica"), index.h("option", { key: '6d511f49d42bd7d51af2d604cd153f332d8721af', value: "verdana" }, "Verdana"))), index.h("div", { key: 'cd7f43b3d874c7fb28f73d461550dd7ef2b2309f', class: "input-wrapper" }, index.h("ls-icon", { key: '103781d89d2a7af7ac7822f47b80a4481e321c7e', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '5f38cacf99d6cf51be53a63feb76e5af7234928c', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '8f980c08ba53d7ec68b24205c570fd1d51d2879b', value: "arial" }, "Arial"), index.h("option", { key: '9ac51a1f5b47745065ab11047381c21c000147b7', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '51625f9069b8a7f9f050a596baaea41026e60e14', value: "courier" }, "Courier"), index.h("option", { key: '87cfc98d3f120474d5d94800df81371163bdc1c6', value: "helvetica" }, "Helvetica"), index.h("option", { key: '297c02916456ab9b4ee0534170f18293ffc7022d', value: "verdana" }, "Verdana"))), index.h("div", { key: '615054d6fad85ed88a0f614d05d217e95a3ed69b', class: "input-wrapper" }, index.h("ls-icon", { key: 'dbe200893041354ea6d4b0e43903aecd9829cccb', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '7140be312d065e352cc801dc5355f795f9052df3', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), index.h("div", { key: 'b0036810935d8e09a2c5798e622c395889c1ab98', class: 'button-group' }, index.h("button", { key: 'a7b07205713e3d124d1a5e1fce80ede822a03684', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: '1d71bd91f2423f24a9b6ae2768a091ba88b9fac0', class: 'button-group' }, index.h("button", { key: '591012d14dd298aa6ef60de1026a8fda55947669', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: 'b3f0c318f180d0fcfd380033d99c9264290e4fdb', name: "menu-alt-2" })), index.h("button", { key: '5e10ebc2b7d2553e92d76ba7e14c2f56d90d1ee9', onClick: () => {
+            } }, index.h("ls-icon", { key: '8e12a1e29b2bf2c2549aa224c0e189e79635c954', name: "menu-alt-2" })), index.h("button", { key: '67e49dc4631e3390da677fd35acc830aff2fa4db', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '441125d448bf5ff5c4e99de1067d466f810b1a97', name: "menu-alt-5" })), index.h("button", { key: '41afcb33195c926c55d6bddaaae15e7513eab577', onClick: () => {
+            } }, index.h("ls-icon", { key: 'e44c688f14e317dc36187e63103cc471da7e7bcd', name: "menu-alt-5" })), index.h("button", { key: 'a1b000dbce0011ec0da15ce6bfbd414a5020ab22', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '9058e3e51da9df563218eb4eb5ba2c79b3e90b35', name: "menu-alt-3" })))))));
+            } }, index.h("ls-icon", { key: '0181dc2fef0afa5b0412234f15363db2f4b33283', name: "menu-alt-3" })))))));
     }
 };
 LsFieldFormat.style = lsFieldFormatCss;
@@ -26043,7 +26062,7 @@ const LsFieldPlacement = class {
         return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
     }
     render() {
-        return (index.h(index.Host, { key: '0bffe8709acfb3dabd233d030ae4f2413d73f247' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '9984e198a4a62e0589cb9f130a9f431286b1acfe', class: 'ls-field-properties-section' }, index.h("div", { key: 'ec08ef135ab475d41a7857146c6412553b4735e0', class: 'ls-field-properties-section-text' }, index.h("p", { key: '360e9f5b3a1767b8d4ac0924e7aeba8092a464dd', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '4bb509420fbdbee0708c30bb94096c91572e4f4a', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '652362152f63d9a9e8bbdf2ef33b8fcdb5198df2', class: 'input-row' }, index.h("div", { key: '325489edebf7f017aea61079fd09c5b5b653d640', class: 'input-wrapper' }, index.h("ls-icon", { key: '4f83ccf5933082b8ae4bdc39d00e7dd0d30525ce', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '079b69aad8498700836ddaa4a26fb909b2453904', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '4a3329e85a683855bdb6b0a4367233838ccc93ea', class: 'input-wrapper' }, index.h("ls-icon", { key: '0d49f8bf3a3ccf7958ed1f7a2549df4b79ff4429', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '8ec0e69ad54dba0d6b7c60066ae298cfc94bba04', 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: 'afc4d91a22935d01c04e08c5ce7cfdc557fbeee7', class: 'field-set' }, index.h("div", { key: '2c5e01c8bae0a7926efea16014e5f2536d31fb49', class: 'ls-field-properties-section' }, index.h("div", { key: '37b20caf9ee263dc8deec7980493a3f93f64c0f0', class: 'ls-field-properties-section-text' }, index.h("p", { key: '344d79f82c5a585f6dbf23f332ca62e019161c48', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '448c8c44d3c355e83da291b609d693f4688f940f', 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: '36af1e22cb86e09692733c38b7dcc338e61168d5', class: 'multi-button-group-row' }, index.h("div", { key: 'ecc77a571be873d0d85fbbef14eb6997758b08c0', class: 'button-group' }, index.h("button", { key: '7de3125c2f26fd5e5995d0c6dcd49fcf0b911ef0', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: '4fcf1d2cc9d6ab5257948b1cceb1e16f89680e6d', name: "field-alignment-left" })), index.h("button", { key: 'ea1c19cd23f0b70e672c8cc752a4d3e5843fda55', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: '24314d2cdd8afc0ce477e2035d86de790b0b7b17', name: "field-alignment-centre" })), index.h("button", { key: 'a1a8f69b2ff9a86a77497029ce208adb00133b64', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: 'daba40d32e3554a77120c873184e2efcb3afbb74', name: "field-alignment-right" }))), index.h("div", { key: '4cafbc8bba38fed14cf4a11adc3c63d05fb7466e', class: 'button-group' }, index.h("button", { key: '687aba13128fbddd6051f390b26cb45538952ef1', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: '590b71f5ef6fce89b8b1c714468277061eab56f4', name: "field-alignment-top" })), index.h("button", { key: '6febd5b88838d878c9dd839936ef7d38f7575c92', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: '95238e0a7ebdfc4c9fa16e414fe6e5a0a56d826a', name: "field-alignment-middle" })), index.h("button", { key: '45d41ef15ffc1e6cf1c9ddb984757129b8ddfd00', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: 'c8e9bd1d3b821d2d1614ae894829884e2ceb2c23', name: "field-alignment-bottom" }))))), index.h("div", { key: '7e9f3adbeec866937d7877680bfa6509f968af2b', class: 'ls-field-properties-section' }, index.h("div", { key: '8c458a88261cb17ca646559cb4e1fe37f92d8d65', class: 'ls-field-properties-section-text' }, index.h("p", { key: '0a6a357a1b94280c20b30e8a9d098a8674225e9e', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '257206e42e2d83a2af9fd0aab45d028b8597829a', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'a7bf0714059faf0cdcb343c04251ce3d6efd90a7', class: 'input-row' }, index.h("div", { key: '6583f23aa7410ab622603cc2a58e33ab10c2e2a2', class: 'input-wrapper' }, index.h("ls-icon", { key: '37afadf26ba260b0a0c279de378a49d56f5fcbfd', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '56f8349e42aa149f8a2ad9cf9abb7639a294eac4', 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: '696b15023819921958323df5235507bf18ab1703', class: 'input-wrapper' }, index.h("ls-icon", { key: '4a46de0e15f6f68e5492dfe5fb47d70adaf3a3e6', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'bdb4218ea887ef0e8140d994f4df68a5f695fcec', 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: 'dbb6d2814042e026964a4e0985921cdcdf5525c3', class: 'ls-field-properties-section' }, index.h("div", { key: '15b5a13626ce73fc394f1d471c8322a802b047cc', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'eeaddf102de04788520aee131ec47f40a0996bf9', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'f5fcf74fbd8333be67ce82ae1f1c564e77ad6eab', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'fbd064ef2ee9ab70c52686059a71f17a6bff1fda', class: 'button-group' }, index.h("button", { key: '131bc85714362b1b8f82ca6ccf4cda7d5cfecb6d', disabled: true }, index.h("ls-icon", { key: '7992670d2c484046964ec9e7e6c4bd154610867e', name: "field-distribute-vertically" })), index.h("button", { key: '267c8a6626559ffcfc98d1d95845aa358f68db00', disabled: true }, index.h("ls-icon", { key: 'e3eaefcf0a4745ac72d7b435852860f15a96da0f', name: "field-distribute-horizontally" })))), index.h("div", { key: 'b537e1598ec916a922dca7107778ba3a5e2af8b0', class: 'ls-field-properties-section' }, index.h("div", { key: '89e5227f3f3ccf809f79d28db39d2bcc62f1af97', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ce5c7ba048742ef3d604b2befd80561592ccb94c', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '1b6f7192762df43da648af48c4a123d4f175b40f', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: 'c71a7ccfe2ece176ec04f90323c9b8047c40830b', class: 'input-row' }, index.h("div", { key: 'a7ac204eb48aa787f739f348dd26720dee40c648', class: 'input-wrapper' }, index.h("ls-icon", { key: 'c4b34ed47a1e45e6a8c580992de6842b06ec5520', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '12aae540eae17fe3915c7eb79457ca56211cdde3', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: 'e972881a518b48f7cc76fbdabb7f26030fc67678', class: 'input-wrapper' }, index.h("ls-icon", { key: '09c4a28d7afe7dbba12567af3113055f9aafe471', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '1c986d63c853caace3cda02ec12a12c28f28aa67', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
+        return (index.h(index.Host, { key: 'bf165db185ff27a97747d35c439acc36f320cec0' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '28da50141d7f991f3bf1ee51849ca425eaf25a91', class: 'ls-field-properties-section' }, index.h("div", { key: '9d66acfc9a2c7eed9d4f52d250586c1942e7a3ae', class: 'ls-field-properties-section-text' }, index.h("p", { key: '7c3d63ca77a43cfddd265d08d12a68b04e899c11', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '6b974149ab31cc52caaddf785d8a151660d11044', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '4ea32eb6799737a8e5962bd814d6e270adfc5a24', class: 'input-row' }, index.h("div", { key: '60303ebaafc5ea7dcc0bea71a029ef443decad51', class: 'input-wrapper' }, index.h("ls-icon", { key: 'b55c508d607d9eddec4e870c00c6e2398f724ce4', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '41c9e975d7050364a5b3f0cca93b002057694645', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'ed8258c26042213514cc13f3b2ec5504694de514', class: 'input-wrapper' }, index.h("ls-icon", { key: '28871226f68e0cb9c547cb3e60347ecb2ab91b92', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '90bd7547481fbab4a2bf19d7675b69e67e99b128', 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: 'd59db0069032eb21d95be7e7e00fe13a55855b6c', class: 'field-set' }, index.h("div", { key: '3da316b826b05ca5c40e86c20ac94a041c9e397b', class: 'ls-field-properties-section' }, index.h("div", { key: '3f25d6a85a54154f7d98b7a8297ea457f3c1d913', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'efa3e1f4e90cf9b84dc6fae89ed555a8afbe2ef9', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: 'a4cc37bf9765f780e0acc534c881d2a8637285cd', 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: '6694fe7630c8b20a0491d1af1a151a75aeb3eec7', class: 'multi-button-group-row' }, index.h("div", { key: '29fff0131a1003e441b85f341981e206cb1ee3da', class: 'button-group' }, index.h("button", { key: '0d551642e5ee2fa1eca06f5b86b61159d906fd0f', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: 'a36f8771e366de820758bfee744da9bde4c9e3ae', name: "field-alignment-left" })), index.h("button", { key: '6a05dafda45385eb977f33427aeb8c7a7d798149', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: '3fda591e0cb4920c20206fa6d8ae2352bd742448', name: "field-alignment-centre" })), index.h("button", { key: '99a609d8e76626e46f34bf4fcc6542cd16027d46', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: 'e1ff627dccf82333f8f425ab1153cc260f095552', name: "field-alignment-right" }))), index.h("div", { key: 'bafa35fe910a001ccd76935ab68f37ea83b270e9', class: 'button-group' }, index.h("button", { key: '4b1de1698106e5accee226cdc7cd7cd2ede94c3c', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: 'bb55c8594838517aca3eb553cd4cb2581c8a1b2e', name: "field-alignment-top" })), index.h("button", { key: '937656e3a4c586480bdadf187966181585693698', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: '4b98a2548231d5c5039e1ac5828eac1d98f468d9', name: "field-alignment-middle" })), index.h("button", { key: 'e805d719c5f88cca065d15fc2ff51d603d0c5d4d', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: '7dad1351fbb73624b1d507d8ffee1346ad0f35c6', name: "field-alignment-bottom" }))))), index.h("div", { key: 'eb263b6ec37c7bcf57d31573c430e0d87db8cc63', class: 'ls-field-properties-section' }, index.h("div", { key: '79106d27e3afa8cbe58cc1b0d24a9a691f3631e4', class: 'ls-field-properties-section-text' }, index.h("p", { key: '1d6f966bbc0e560654ff10ab116b58bd657efeb8', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '2ec6eba189500c660d982b61b6cd9c642f9b1495', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'f05b96e1b921964dd71f68887441aa7433cf6eba', class: 'input-row' }, index.h("div", { key: 'abd5ed8c84c17023a69cc6efa7365fde3c740dd7', class: 'input-wrapper' }, index.h("ls-icon", { key: 'f4674ea809efbb46dc5bbf32b3c2d050341cf2f8', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '2f34f8e1f424f58d16b81d0323df2c5f429a6015', 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: '42889a206d59f970040f95d34f0c4804797fb846', class: 'input-wrapper' }, index.h("ls-icon", { key: '05687fb70acbb665a96fe5f5a246a102b65f743f', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '46367dbecf5f7177391f942279a7a7d58b7d8e28', 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: 'ff92c96808e8ab1f5e9f1d12f945cf3b50617d00', class: 'ls-field-properties-section' }, index.h("div", { key: 'b5cc48867cf12657186c938ae0827202b7700d40', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3b09f573e94322e972e36f0486d92a279b68a28f', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'fe759b355b5ce3f24a9ee70c94bc3b40daffa418', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '8fc1f92da89df534a867c3d44e4d63a904803baa', class: 'button-group' }, index.h("button", { key: '6717e349f2f0c4eeb21d6256a1d1cb39faf8f770', disabled: true }, index.h("ls-icon", { key: '72fc889318415749f805db95ceca3487cb26eb98', name: "field-distribute-vertically" })), index.h("button", { key: '55a4fde0120b963ed9f07dd8490f1abbf44b5540', disabled: true }, index.h("ls-icon", { key: 'c3a7a795d6d9da295fd4c7aaef5bf1843b13a26e', name: "field-distribute-horizontally" })))), index.h("div", { key: '57184185505c6dfe16322b8d6b59c3fedf30ef65', class: 'ls-field-properties-section' }, index.h("div", { key: 'd0522de83bfa4a5b6bef87072658f511600c9aa7', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cd7880e2f53b6452c5fb136d6a4eaecee7f4403c', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '019e02dcdb5fe4ae4c4aad9f3deacab084c2b306', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '8e566f1e91410ee3cb82b4e4c0a0c27e34ffac03', class: 'input-row' }, index.h("div", { key: '811db7eb6e7b3edf49015440814c222a04e88f45', class: 'input-wrapper' }, index.h("ls-icon", { key: '1b7b4c849995b07da7125b4f9e8d95d20430e043', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '2a61868d165b84d85064d5ce30d60502ef702610', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: 'c174ddc8fde35fdef12602d22c0f4330392372fa', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e540dbbae07e64eb0bae816a54775d939a588e82', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '8b3d0cf223379a4ed8fd7561af482b5a7b2731c3', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss;
@@ -26086,7 +26105,7 @@ const LsFieldProperties = class {
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (index.h(index.Host, { key: 'ef6f3363ef3f3bff466f3fa52e255ac6694f9ff2' }, this.dataItem && this.renderFields(), index.h("slot", { key: 'eeec9e129e6dc68afdafedfba4fe618cb22493c1' })));
+        return (index.h(index.Host, { key: '81a4f69d51691f6bb43ad01c130207fa0bdb71c7' }, this.dataItem && this.renderFields(), index.h("slot", { key: '53546d9623461dcc729c2fcd838fc0b885f19df8' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -26136,7 +26155,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: '0b6b856e45b7c4706b065ef84b8363b69cb21f1b' }, index.h("div", { key: 'd1b3c1fe456b8c91474d6630daa2781b6146fff4', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: '51dce7f9e54d739d85affed9a8cee59a3515e483', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '130ca1ea0b66e84610d0186488c0d8152c6c20eb' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '810c84b2ff44b7cfc6f657fd2072f166827ffc64', class: 'field-set' }, index.h("ls-props-section", { key: '13323318921adeaef2f95b20d524946bb0b1e991', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '587646a40656d8d5daa9b20dbbc6dcc9e95b1abd', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: '38e193322a2d1ca6cee74c7d1dffb59d35c44ff6', sectionTitle: "Ref. Name" }, index.h("input", { key: '79255fb8e8e4d8f7d0faa6ab56d8a7e436a86dc2', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '11a3ee7328be5aa570839fe0dcbac161150c0f6b', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '0b4cede9fc81270b5e6760e082224af22a35a824', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '8917aa33df84224867efc06906536c113797f55b', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '79d9baad245ae5dd60b72934184911978486b40d', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '5dfeff9cc3187b3c7772e375b45d52494c058634', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '4589ed12018fd26f0537ffec2987986d5bd8dc49', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '2846580264af2a80c19d051226996c0068edd4eb', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: 'fcde60427cd92cb342bfae1f73927ab30ed268f1', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+        return (index.h(index.Host, { key: '92737a84b80d8010a6287f30945f9df9952fe550' }, index.h("div", { key: 'e5f3a70117500194d06dcca2517a6d80456958dc', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'f1d233d3156888ecacb0e1f479e2bfbce6d3abb9', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '79a344a0919ce2bea99dbe479f6bfc94f40e64a0' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '19ed81c0c6d5eec89f7ed791a54e72ac9d28df85', class: 'field-set' }, index.h("ls-props-section", { key: '2874e24e5c14103feddec461b705d14947d94e90', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '244706dccaf95e064329dbce846bf095e74305b4', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: 'cc12de5c345f5fe2eacc578a20e9fc29c9bdc53a', sectionTitle: "Ref. Name" }, index.h("input", { key: '75ec554e0527e4e86bc431d8e11a48e21bb797d4', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '0c1c05a72edf3f40cf1ab4376245de848f2ba3ab', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '01f06a4736e7e84bb9450390d4e67483c57ec76c', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '0a460d22381e54bf3e51127ddfd9f99173b2c30c', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '9c9eed5cfb5567137f20470ac0fa906d2497fc4b', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '2cbc05b68dd4c6c2ae06b14eb450d37b3862b1b8', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '693934edcc5fd525a6db7112c4b9f5891c286cd5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '8cff7358763a8673a435596ceb8e2fe72e05d634', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '06606d2f951fd737ac14bb74fa49eeedb082c1a4', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
@@ -26149,7 +26168,7 @@ const LsFieldPropertiesAutosign = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'cfb744a606aa633553b68ed5766054db539ff650' }, index.h("div", { key: 'caea9b14d4409d382e63ce14fcd12e9db0718d14', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: '7f1590c3176af71e0db2fe42d818a449c0ec5323' }, "Label: ", index.h("input", { key: 'b1fd4c75157205fae4bee3c6da43311d24971476', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'de84ae39aabda4f7d2813600f922a9ec07e09661', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'f4ac9dd3177e28595aaa483e74ce5a7a41e41450', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '0d81c4ad693698b62443b6f3402504a47df6245c', dataItem: this.dataItem }), index.h("slot", { key: '20f208656350831401da6bcf55bf03dbdd4b608a' })));
+        return (index.h(index.Host, { key: '1370a689bd756a7b3322b8a0b79eaf2ca8daef97' }, index.h("div", { key: '7f9c66dd492d817a9ca731eb439ebae63542de03', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'd4b7a971288792aa196c7fd86ff4ae34359b9400' }, "Label: ", index.h("input", { key: '741c908b66ce73466ef3d8554b1259b1dfb9ad99', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'efc52c57c322088a72c40440eb1d564687f0d3fe', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '5c96421fce1126fd6c6c618155cc8f5ed41e2ca7', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '1806381c74a36eecfd1a2db9df7294fb0ca1b58f', dataItem: this.dataItem }), index.h("slot", { key: 'a0047935845af09666dde9a82076bb4141b9eb55' })));
     }
 };
 LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
@@ -26169,7 +26188,7 @@ const LsFieldPropertiesContainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a59956ef5b0a6fb25d33ed5020a230a35150b819' }, this.tabs.length > 1 && (index.h("div", { key: '631748b3efa1db8573816b28c5ddf17b40c5add2', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (index.h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), index.h("div", { key: 'eb125ea24c12da57f922af6ff0842be2a31ffd47', class: 'scrolling-container' }, index.h("slot", { key: 'fc9c028d25444c2b87af2ee45e149d8417d77ac5', name: this.selectedTab }))));
+        return (index.h(index.Host, { key: '02eee9d90b4f8abd72f9e193fe04eb5597f3490e' }, this.tabs.length > 1 && (index.h("div", { key: 'a00dd72171808308d53a8d81ffc89669f1bc65d2', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (index.h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), index.h("div", { key: 'ced18e5b24011ba7b982c4aaf7125cb1198991ba', class: 'scrolling-container' }, index.h("slot", { key: 'be78398757fb53cdb987511709f5dd1fc6d5f647', name: this.selectedTab }))));
     }
 };
 LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
@@ -26182,7 +26201,7 @@ const LsFieldPropertiesDate = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'd993f0a5d52e546b908922b71385954f30041880' }, index.h("ls-field-properties-container", { key: 'e3f83d5670000e56d85fbc1c24323a670488309e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '74fe8004070a01813c5525e187371cf3b3058d5b', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'a7053c22927b785560077667892d679e009baeaf', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '4d044a78eb379cb82888600fe076e41e6c52b9ed', dataItem: this.dataItem })), index.h("div", { key: '10cafe3632efa67461f73d8323a7cdf719f1b24d', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '5a145b8fbc1f1502093810f276ff77d00a162496', dataItem: this.dataItem })), index.h("div", { key: '83192def8c0065901e3e63980bd2baafa3827cd0', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '88eb2919a22626c727073195dd0d2e2d748ec794', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'ba6456060d6f4641068fdc9657ab8325edbcd594', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: 'c5f6d6f13a8420c7db262219a47dd8546a44fbba' }, index.h("ls-field-properties-container", { key: '1913c379eee8558d303bc72dad7a73a2c39f9810', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '7aff7b10b7ec6b52cb3772853812a2e30539677f', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '01361d60d1ad587f3db804e0758d1ced9bd46452', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '64269c2cb83224a402bfa870d11c098a24f5b513', dataItem: this.dataItem })), index.h("div", { key: 'a927e9e6813aaebcd133c229da7fb29ad18587b6', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '48cf4bc0db59aace10a15c04a3d05d7cabe418e1', dataItem: this.dataItem })), index.h("div", { key: '52c47bc5b278587c507c365bc431e85202d3d84d', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'df3137d33d4184f6e2cbb80d963ca3a7e568e74c', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '6a69a59eddc45ec3210272c1ff17eed12fdbbde7', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
@@ -26195,7 +26214,7 @@ const LsFieldPropertiesEmail = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'fb1463a220717fbfb0b19a24ebaf9c6edce896c0' }, index.h("ls-field-properties-container", { key: '304c8fe83b45b57b9062a05712acb45ad79ed126', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '53ae5097c2a538a1386585a493c5e4064303fa18', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'd38ee301036d12b7444a215999d7340b370ebf77', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '06d4533c0e6778587b0d82a6bd427a22ec982c72', dataItem: this.dataItem })), index.h("div", { key: 'b692df0cb47cfe8ca327172b412a538c1b2ae4f4', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'a46cbfe8a1b74bc50169fa1fe2fae60f715ddf5b', dataItem: this.dataItem })), index.h("div", { key: '0eccdada74a8e5a5727e35327f184e8c9d9045b0', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '6a88df346388a18a312abaa3d8b6585847cc8a2d', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '166f519bd6ae526dcdb7d2effcd8c26cbb05346a', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '864c283c523e58d327a249643d21a9ae0d522772' }, index.h("ls-field-properties-container", { key: 'c41cec11c9daef8e9689296863a59b5d729e167e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '86318521b7d1f5c0d44bea39cd2d906d2539b3ab', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '252661caa008f083fa0298a1130419ac56a3e7e2', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'e0b1aeeeed2d6c6f61d4278689253b2c394f6096', dataItem: this.dataItem })), index.h("div", { key: '4ae3f032410741f717bc99df83a0f733bae9abce', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '2cfcb0548b1b7825027c209ed1326386e6c6d105', dataItem: this.dataItem })), index.h("div", { key: '83895291760d9dc453652bd1eb81f42c9c1b3781', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '0799a31cc828dfe32c494169990c2381852f7141', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '9813afa7e6b4fc79525a12959ff30f3801c7bddc', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
@@ -26208,7 +26227,7 @@ const LsFieldPropertiesFile = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '90fd5ea99052824760584879d8e60b7bc84764de' }, index.h("ls-field-properties-container", { key: '159ee80bcd5b8e91f8eefe3c0b1ff33919334f71', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'b3ef176e080d75af07dcc7f44cc35f1ed73eda70', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '4bbee3a9777f969686abd502078305fb0e0b56ee', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '714f794313b71d695696de09e318e126c9514da1', dataItem: this.dataItem })), index.h("div", { key: 'cf101dd7a0031dbc9a9b516e07c5d7a6022f6c13', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '2dbbf4b56c50a04d82a1a7d22d1e46bebb19a330', dataItem: this.dataItem })), index.h("div", { key: '82c3d56d1b2c0a819eacf31b9340272d0c9d14dd', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '25f01125319fe86f89cae5e0b81d6296792805ef', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '4d6105813fe254fa39f179bca4a62a2b2de9019b', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '87c4c2935c45a3852f9939327db350025d5f26b9' }, index.h("ls-field-properties-container", { key: 'fbd3ff58eb488b82e498941d6a30d3efeb691c22', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '1bb49bc838ecad441feaff1d9330972f40f3c2fb', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'ca0a6ae02a132315b804ef987db6d8f6dd8d5bec', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '72346af8dc7fa1917c54450782f5b04d90ea2fe2', dataItem: this.dataItem })), index.h("div", { key: 'aef4008d5f1fa5b6f09e34914aaa0729909b28ef', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '34a0e47aba163d1d50c8b5bd3530d68375ace866', dataItem: this.dataItem })), index.h("div", { key: '67cdead2dd9b6a0ebc4178eb9966cc25aeef7b0d', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'c9802804c82bb64e758e69a4f4f9fc98067f3cfd', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'a495c6895d20cef46c687cb65655022279e33c2c', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
@@ -26221,7 +26240,7 @@ const LsFieldPropertiesGeneral = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'b23aa39efade65c582a9aa4ce3b1964549536176' }, index.h("ls-field-properties-container", { key: '5643ad2f76ef53951b3b3c153722ea700ef6bf96', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '41836563fdab56fa7c429b471aff325d4d8602b7', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '94e44706a389d711ec43d11dba6db3bc1ba70734', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '07b13869824345712c880cf9a93daea92c9c8d58', dataItem: this.dataItem })), index.h("div", { key: '6171af5bd7d346717f3b2b26b5431e255947e4c5', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '4a9070a532667a12b9d7a232cbfbb5282cf663fd', dataItem: this.dataItem })), index.h("div", { key: '74727ebb7b2c8a5f5f77ee9f23f0e82732afe781', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '12de13ee69fff67e4f880375a34d2bf975fb5eee', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '097fe669909da8c5f4d9d1c8b699acee4d507de5', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '9cdb29804d3439cc774cdb34fe67cc387d2119d6' }, index.h("ls-field-properties-container", { key: '277529426e659d5bab2370d30757c4418a34c4ea', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '801227d24311f508b852f294a63d20c3ae5d6d07', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'e1ce08761d14588a07a9f817ff12deb303c024e4', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'f622fd5cdf49ea54f9218d4de080048d95fbe88f', dataItem: this.dataItem })), index.h("div", { key: '98ff04437e1cb412e360794d6fce6820b754733b', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '417029ef39562ff320c036d9d90944300934be17', dataItem: this.dataItem })), index.h("div", { key: '80a8381946ad219a4b7d75981cca80121bdf9a3f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '603fe5e39eb0a4b87230e1ec6500f5c1a37fb210', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '51fc00d6d488085afda91ce1f2f5eaa945600337', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
@@ -26234,7 +26253,7 @@ const LsFieldPropertiesImage = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'a5eed1fc06694f187959578b1007a4e1d30d2103' }, index.h("ls-field-properties-container", { key: 'dc464df7db2cd6894abb035e27316a4c11ae47a0', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'f57e5c7439bbc7a3f9f67acbdba1dade556d9ec5', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '79b1e2f5a40b9cef6a83b90b37c34d8ad02af5a8', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'cb6870dc72d3f1baf1222609279b42be5359c1be', dataItem: this.dataItem })), index.h("div", { key: 'ea7e69c07487905565082c85f59dffa396f5b0ea', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '758edfb93aa3d937a9d9e6316de4d9f892ece481', dataItem: this.dataItem })), index.h("div", { key: 'ab557c9750c89aed7b5bfbbd64b3012e68602ac0', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '86c5804fbc1a6ecd8fda573ab008dcdb89786ac5', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '25ebe078515a2e87ca89b72552f42b8e9d3de5af', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '90a138e3af555cf9d41afc9ec8c350e48466bb0c' }, index.h("ls-field-properties-container", { key: 'b67fe1f9fa3a010736841720725405dea6254a49', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'c777591ccf44e40c525b2bffd11d84e8c8a77bba', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '1fadd4d4d0ff8cb4683f45f06899725b9f0261a9', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'd1486d388f4276cb15d54a728f24e5d8919cb93f', dataItem: this.dataItem })), index.h("div", { key: '0418ca135da5c11c54a7556a023aaf5379ee3899', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'b696981f2c6e26df07291f0d018e27fc32675f62', dataItem: this.dataItem })), index.h("div", { key: 'f7dbe53576a316e9a03699fa7fc1e12d44b455d1', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '91b965cf584e1f85b15d84b390ea4ea5b603b263', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '8d4a15349f3056132adf6254b82c535f7ff352d9', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
@@ -26288,14 +26307,14 @@ const LsFieldPropertiesMultiple = class {
         return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
     };
     render() {
-        return (index.h(index.Host, { key: 'db3fa1a68dba2d4f82909b127dad3b6cd2324956' }, index.h("ls-field-properties-container", { key: '1d359d0cf6a30e945cc3840aa0e1942c4256335e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'bc9aaedd653315f033b14e8c770b4aaf2222e49c', class: 'field-set', slot: "content" }, index.h("div", { key: 'df7221d88ea9ccf3b16b1a929d15bc7c99c0b8c7', class: 'ls-field-properties-section' }, index.h("div", { key: '508941e1f5458a2c08382489e426e0d03627bfa8', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'a82d81dff3cdb2c53b60baea88ba233327b0b1b7', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: '6a564a43bdeaaff77c9ce2cd8ed67751da19f8e8', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: '372b48f253950209b1b46da82f931b4d802e4034', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: '8115299b3d1ebbe1896271da1706e765ebdcbab8' }, index.h("ls-field-properties-container", { key: '6cb7365f2c24cb8acac5c815447ed184b6d139ba', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '155d6b33a0b40dc7941b59a980c513271f9db094', class: 'field-set', slot: "content" }, index.h("div", { key: 'be4c86a550ac16f64a008fbb854825d0d6fdec85', class: 'ls-field-properties-section' }, index.h("div", { key: 'fd87a909acd064c04741e6c07a642f1b6310fa34', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f88560758858d0082011cacd9e6d436fb24e12d2', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: '7583fdc8f206c3aeeae1df4db5086757acd85c53', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: 'd3191ac9f58caa1754749cd751b512cb2da01fc7', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${defaultRolePalette[this.allSignersSame().signer % 100].s30}`,
                 background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
-            } }, index.h("div", { key: 'c0930f87d97720730931cca5fa78f1e611bd01b8', class: 'ls-field-type-inner' }, index.h("div", { key: '4f52574596bcc163f05c19d48b45c395211fc72e', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: '8c107b4502595f57772baa94a88c469f434d18f4', class: 'ls-field-type-inner' }, index.h("div", { key: '69e8d25256f2a9381b86e9a87b298011b1f4a646', class: 'ls-field-type-icon', style: {
                 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: 'a9c7595582bda8bb0869d13720b6a83cecf283f6', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: 'c259fd6576d03ce072a7ed516225e5fba12ddb95', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: '93871a17b015b36341d05f27337efdd2ca3ceccc', class: 'ls-field-properties-section row' }, index.h("div", { key: '1f98f10304deb26cb2742e3c5b7743d0d297c9a6', class: 'ls-field-properties-section-text' }, index.h("p", { key: '04071efc572c4db6b9609690a428465b5f48ceee', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: 'ccc36e3005928f54d580d0c76db792e0db552d07' })), index.h("div", { key: '99df8d93eb6b930ed2cbd207b5baaff0105af46e', class: 'ls-field-properties-section' }, index.h("div", { key: '7cb461662a379db755adee6346cf05dab5b0c5d9', class: 'ls-field-properties-section-text' }, index.h("p", { key: '0f98657034850a78bc7d765df767454c8db33936', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '219f2d59258dc9bfe82fcf19541757ba02900237', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: 'be8bb2e3f8df73458937ff8c016f7b399c0542c5', value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: 'cf17bb932c83f062d0344873f63691a5c9ebcc77', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c34fe15182b6c6f29644c46d998b83af12b34b6b', dataItem: this.dataItem }), index.h("ls-field-size", { key: '52d9bd27373515ea647c1baad21438ab8599f0a8', dataItem: this.dataItem })), index.h("div", { key: '69fb2d3741e338cb925cc7f2d8f6d2fc2ad0bd45', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: 'c89d477d9b8e9f23c719b949b99031f78722a449', dataItem: this.dataItem }), index.h("ls-field-placement", { key: 'd06a68a38a5828dac44c7ecdcaa92c2d2fc2e1ca', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: '5dc5cce487648010cdc61fe75dbb94bc5f8d844e', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'bfa014a119a1dfa5900ad059447c103e5ecbf2e6' }), index.h("slot", { key: '940b0e01d8a8e908ca7eec6f00bdca318cb4f2d8' })));
+            } }, index.h("ls-icon", { key: 'c7ac9e1d06b8873b49c7e885254b4f8def8f3d16', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: '037d595ee61b1bc26215b10d6465c0a206c3670e', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: 'e2e7420103eeac2852b7a56f963b88d12bd92faf', class: 'ls-field-properties-section row' }, index.h("div", { key: '8e7ccf6c7930958a95f0ffe55ac5fb61f48655fa', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f64987a2124b484c5aeb567a17792e15515124de', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: '7c800d31febea334fa4cbded8c636c3241257ac9' })), index.h("div", { key: 'd075ff5ff376c67f6dad06768462a5d4159981e5', class: 'ls-field-properties-section' }, index.h("div", { key: 'd189f0e0dd17bb698d703d1825fc777d18691b07', class: 'ls-field-properties-section-text' }, index.h("p", { key: '791f2be86f52d6e096c2b447520a76eb93db719e', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: 'eeff9b3b0c561948807b362bd31e4753661f8a3f', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '9640f11d8f8bff810daccbb9cf930c965c532cd9', value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '8914d27fbc2423324df5cf2b5752f790ae8c9019', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'd6dcc88283a94466203c7ec3e3768c28ab685eae', dataItem: this.dataItem }), index.h("ls-field-size", { key: 'e1fa1087be2e6d23452e121ce0da5767e9062f61', dataItem: this.dataItem })), index.h("div", { key: '37e113c9d83eb1cdabba34691ea7a72d4934de36', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '1fa8a3c5fa4663f2f3ddd82278117b3d0a35834f', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '27598e6fa3e938b8cafbc1e30890674094678933', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: 'be68a572cc2f66e3a2e965e1c6194b30bf5a3e05', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '849536faeb6eb1b72da45c7939c75ba53478fbb5' }), index.h("slot", { key: '541e17c8fc0cd817f0d520c17984aab4ef77ef66' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
@@ -26308,7 +26327,7 @@ const LsFieldPropertiesNumber = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '70417edfe13b059615fb7c9b9d3567dfcc0b5456' }, index.h("ls-field-properties-container", { key: '24cd7ba8879c636483730179de64bea08d6518a7', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'ac4bd0f25f7ca65e7a5a55c7909103e8db1eda23', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'ae012182364ca464e1d9cca91955f4081ee153b5', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '2ccc8839add637be02805b7e73347f9243902882', dataItem: this.dataItem })), index.h("div", { key: 'caf2cb1a3e568931ea0209bec01edc03f89cabe4', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'cfe405748d17bcfb372854174126a048287ba802', dataItem: this.dataItem })), index.h("div", { key: '37b3d2b66b12b84e5bd308dd94b6e7e28e9c8da9', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '78aafb16d95cc67f328a7402c64c4871cc7a2d35', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b4f40f2edce91fc5ef5ccef031900b7796ec9bec', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '440725e751ea3b404c5c50c749c5bb8ba06ba17c' }, index.h("ls-field-properties-container", { key: '7397fdc71259fab68af40ebd665cea30fd79674c', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '24f1a1a03d7ef9fadb6fba1b56aff2879c99c848', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '39606a9437ff02fb77c2130ed719472660f7121b', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '2d7148b24ff388504751755fc5039b53d013fe52', dataItem: this.dataItem })), index.h("div", { key: '670bb29a0876fc24a434ab6aa175b528503209d7', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c9dba48006e57a279e17cdedd8e30bccd4cddab1', dataItem: this.dataItem })), index.h("div", { key: '26e8bc89fa11f9baa6c416bdea37f7ee37f53e92', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '232534855f1d61fa7e37277e7675f7cca84d3f4f', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '0d62c5e191013483238d9b1591e820de7b67cec7', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
@@ -26321,7 +26340,7 @@ const LsFieldPropertiesSignature = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'bb09025d4ea6af3b66655872523e96d86f13d484' }, index.h("ls-field-properties-container", { key: '502f3ec1e0d2581e111b494b4e2e9c05c9082216', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '82ef24f4dcc4d0dc4c0b685109d4d40a762c1257', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '271b16a5723b7ca9e26ecf52e322c5a51e7be356', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: 'e40f744d605557c5afe0f78b818d57606508cccb', dataItem: this.dataItem })), index.h("div", { key: 'f81d13b3938e7a42e14e99c29efbeba9548ed15e', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '0abfaa460159362f0a9da4bff75d78c38259ed46', dataItem: this.dataItem })), index.h("div", { key: '66817e28369192a334826916bfa872d907a62669', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '3d4d9f4ddc8f8a693a2676c166e19140c8cd5128', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'ba096994fbaf9b487fb46e43094c27cc5a46c1a6', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '7fd5740e3b624b6ac6f8e7ada0df7ff5ccd63269' }, index.h("ls-field-properties-container", { key: '5513682b779b50683e8f66a4e8f7095da59a473c', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '9fa2ebba6de8c555800656ff62239ad20c2e2ade', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '9689dd597d8628241227c79d2dc8635984176fa0', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: '51ad1040fad68b13332c40bab9352541c41ddde7', dataItem: this.dataItem })), index.h("div", { key: '2d2fff3746cda4b368063c167bc655cb269062e2', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'dfb2bc78783bc43199f1a609907e6dcd26ca23ef', dataItem: this.dataItem })), index.h("div", { key: '8f030a01499135a6d8a902c4ba23838b209abc24', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'dae82093080110d81d76b1403b4b60851561273f', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b7420672d1bdae9118c1bc5abeb67a9bb8e9f991', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
@@ -26334,7 +26353,7 @@ const LsFieldPropertiesText = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '18a4535a7f23c9a7397cc3b3ae1f272bc6455867' }, index.h("ls-field-properties-container", { key: '78bfa9fac7eeac81d932de4f64cd95b56d6cc401', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '02ea188526669a2b7831dcf840baf0918f4213a2', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'd2696260cefafe6c6bbba099c87570faf06c927c', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'f928c063b5fb38d014ffab0310a34b8ae5a0ee41', dataItem: this.dataItem })), index.h("div", { key: '60c62191fe0a42b4e6d90990b7dd1af1ae14e598', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '42df6e0a4f90297a0044a56e53da4ce8ad55af0f', dataItem: this.dataItem })), index.h("div", { key: 'f69db70afc4aa852692b569d22cd96857c0aca51', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '3280ae9e9566d9aa121d05032e3cf7bc757ebe35', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'd1b1c550e7ada8e057f0950b7e4a5bf14efb3e20', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '6581dc23794e94eb5ac89b620ed6a11380fd2d8d' }, index.h("ls-field-properties-container", { key: 'fa44fb4c49078cbb8cdc0978e7b4596bf2820028', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'f372d2b78526341d31f06c7dc039ffef2ab51d94', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '3160b82574571bcd67d04ed74696b0382aed3518', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '96d0f898cc092c395d70b94ed3977ffc473e9538', dataItem: this.dataItem })), index.h("div", { key: 'd62cfb2603c91fec4463c37d26fb6dd9b0cb7164', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '18e0ced89970409cdabe56eeb54c1b8ec1fd192d', dataItem: this.dataItem })), index.h("div", { key: 'a9edc2428d745ee661a4005de05bb8ed33544d28', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '18b7c5d2d81a2a4442164eabc3796e3303bfab4a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'abf9bfd40615ce12e1ae791f1307787f3a8935cd', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
@@ -26361,7 +26380,7 @@ const LsFieldSize = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '962b28dd19449b2201f944168769b96a14b9d3bf' }, index.h("div", { key: '209474f5cc8a713a4643a05a2e1d1574d4e7a5cf', class: 'ls-field-properties-section' }, index.h("div", { key: 'fb3a50f05aeb6e32c4368699df77ac4ba722a430', class: 'ls-field-properties-section-text' }, index.h("p", { key: '1e07af49d2497d5c5ca6b1c0793a35547f872c6a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'a342e0fcea7d4c6e85e77926e958faf6b05598d6', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'cad5ad563e4fc9d3755e8d33d949de2356fdd5cb', class: 'button-group' }, index.h("button", { key: '9c7e189b73b2eebbfdd4057e864c76f80962747f', 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-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'c3ea1d5f72147eaa0a7e08eea7cc345353c9002e', name: "field-scale" })), index.h("button", { key: '08184b633de916bdf1ad90f6fb3fa303e617bf96', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '29b31f5aa9bd1d46ab23e21e8a41e07b2cc0dcf6', name: "field-match-width" })), index.h("button", { key: '3eb243db77a48e39ed3cb7197f320612794c4ea6', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '4d1fd201eca57e0cfe10498cf41a8bbce1957270', name: "field-match-height" })))), index.h("slot", { key: 'f5e8e0f7c5cf0b00db08b55bd1d353efabe5511a' })));
+        return (index.h(index.Host, { key: '106f435214cd643aaedac927bf8095794fd6408d' }, index.h("div", { key: 'de4168ea47757ecc046e18a70109964b1dfd4b33', class: 'ls-field-properties-section' }, index.h("div", { key: '53f2058d12fbd30363086b213c5869f22e85796f', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'd2ab149dfa93256e3ec15d630c48d17caede8ec6', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'd4fb4407b0e76ee2124c951e4ea73753777ab1ca', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '30bcf920ddaaa294bf81eeb31b6fb3415f85197f', class: 'button-group' }, index.h("button", { key: 'f162025f64111b1291541e71d8a22de8b76fe86a', 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-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'c1e09414e242c50be87f6342bd09c30e100edbfc', name: "field-scale" })), index.h("button", { key: '4d82dad505d6b65ecad51b4622911fb2da102397', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '8c463d83131514c1f306dd34df17b46272f33971', name: "field-match-width" })), index.h("button", { key: '8ffa41165583cabda6b5571fac6bd10913c703d8', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'f3d18d6238a71ed7b079ec587a86bb3c2567620f', name: "field-match-height" })))), index.h("slot", { key: '1602b72e9a885363f1d1e5bff5b23b26f4c5e5dc' })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss;
@@ -26396,14 +26415,14 @@ const LsFieldTypeDisplay = class {
     fieldType = 'signature';
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        return (index.h(index.Host, { key: 'c522f5dd24e8cc788fce078c745cf50dc8e897a1', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: '0d4c4aa48bf3ae8f403df502bf9b3b5ba04be686', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, index.h("div", { key: 'd775a1ef4bbc8b4fe4abfc0419c8abd91b0f318b', class: 'ls-field-type-inner' }, index.h("div", { key: 'e4fdf23f7703efaba1ce81f70f684196079d6b14', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: 'e135050c776ba5a4e0bee0fc45c0f8a5de263aef', class: 'ls-field-type-inner' }, index.h("div", { key: '9bedbf90ad8bf224d45c27dc54f125eec297c9fe', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, index.h("ls-icon", { key: 'f699a58904b5824d1553f13ecfab57987a07ca35', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: '3b99f80b4aec87c22619b59db4b7e3a84b694629', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
+            } }, index.h("ls-icon", { key: '4bd803476605785db6d7c16112abda6b8ea7d76f', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: 'af010e7272ca7f4ffeb8dc61a2b862198b8efcbf', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
     }
 };
 LsFieldTypeDisplay.style = lsFieldTypeDisplayCss;
@@ -26453,10 +26472,10 @@ const LsFormfield = class {
     render() {
         const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
         const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
-        return (index.h("host", { key: 'b270dcd40ad2988cce479f03ddd4929f4416cbed', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '64662df8269076c09a8c90797eed12745d5d0fdb', class: "formfield-top-elements" }, index.h("div", { key: '91188a0ce3a1eb486a6776427f041a40163710f8', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '7b1a56ec85b177b807098c6710d61f9c502182e1', name: labelIcon }), index.h("label", { key: '1109913e864d685ad9a3a511c417e2df79affe18', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: 'e250b2f6c63944898a40743f84257f65382f604e', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
+        return (index.h("host", { key: 'e5f6824f9df6531776c52480132206b43012ca0b', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '3d3fc82daac2f290ec293ddc16a543db641b499b', class: "formfield-top-elements" }, index.h("div", { key: '6429a6fce7eac8e3265d8f1ec8796dd6fe523bff', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '5959bf93a9a5425036954e6cf09af87c65e45b46', name: labelIcon }), index.h("label", { key: 'f35970243533ed0e33d5eeca905e685fc0f16ec2', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: 'ed6e965221f7514d35ac42dd50919a915afacc0e', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
             count ||
             countMax ||
-            (descriptionText && (index.h("div", { key: '2153930ddc1ca521d00631ddad7059f8dc6378ba', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: 'cff80a7cd1528ae8ab06577c5ec856dbf7b8a39e', class: "formfield-count-container" }, index.h("p", { key: '67278bc4ab4e7954a444ed626d8379707b7e3508', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: 'ae37ab542f81a9f970439197455b9dde736addc1', class: countClass }, index.h("p", { key: 'b94104282ba35f1b11bc4b051fada1f5f19fd8b6' }, "/"), index.h("p", { key: '621413b5d4e6be5b1d8a6a22d4ae574e7abdeddf' }, countMax))))))))));
+            (descriptionText && (index.h("div", { key: '2ea304d4e81dae4788591d2e7aa5a39b184c6bb5', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: '873c047ac0043308946de56ee48656e7fab39125', class: "formfield-count-container" }, index.h("p", { key: '023f16d83231af14e88a60f7e4721dae5488a6ce', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '08421f716aaa649f04d3816cfba315e021aa6b1c', class: countClass }, index.h("p", { key: '4592374bf088582c7935e7613cc1030ed4f39b5d' }, "/"), index.h("p", { key: 'ee2e23debbb907cdd956a946c00bd63de2f35513' }, countMax))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]
@@ -33488,7 +33507,7 @@ const LsIcon = class {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (index.h("host", { key: 'e4841f50e0143e588e981f1a115a483bc7226037' }, icons
+        return (index.h("host", { key: 'dc63ba24967c79b07985dbaa0fb515a7b210e1b5' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (index.h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -33507,7 +33526,7 @@ const LsInputWrapper = class {
     leadingIcon;
     select = false;
     render() {
-        return (index.h(index.Host, { key: '5f490c4020eca0b115e40e592d8df40d4ad3e448' }, index.h("ls-icon", { key: 'e265e85bc244222631d0fa046a261c373bc178c0', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: '2a73959885e9bb022a4227a560e087b32e969627', id: "selectorIcon", name: "selector" }), index.h("slot", { key: 'd66ea2604ef04373415b44c1a2c908e5ba6c8541' })));
+        return (index.h(index.Host, { key: 'aac9da887f16fb4e885b97fb0347b585cd24b04d' }, index.h("ls-icon", { key: 'c380c2a00b05084cb9c2d18cac05e640e8d3db61', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: '76c71e77e0acd6be689aaa0e9e11c7787c79facf', id: "selectorIcon", name: "selector" }), index.h("slot", { key: 'b0d5300f47ce2bd5137118c9b8b6536593407a72' })));
     }
 };
 LsInputWrapper.style = lsInputWrapperCss;
@@ -33553,7 +33572,7 @@ const LsNumberInput = class {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (index.h("host", { key: '3b54058cfd196746820f37373b8d92bf601e2c8d', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: 'e345e9069e93b89761c3fc5e84c922a9d1ea59ec', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: 'eb06ed0aafe3084bec5a2a0c1090f082a8025c10', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'd7b75956a0aa5e7113731ca25cee4608b2c59a87', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '450d161f7057d3a0738d5d9b74508404b44808d5', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '00ee931c90956f137061f3d5ee08aa2ceca5794c', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: 'a997392c26463b5f060fdf815555db5fe2bcdf67', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '104743bc83db752b73023cf6fecd7ebd57b0f0f4', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '2bcaaeafb1ae543d10e08958ab550d59961c43c8', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '43890558357aee8f85abc16b18560ab191af13f5', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '1e118fe7dae848a09847d118f810f7f3999ee525', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '24641d3185a584a13c997b2ae092dc27e24a99c1', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (index.h("host", { key: 'f4555e124b40f13647581d43cf2527497eb71688', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '5adf7f06989b52a3860301168ba2c134975cd065', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '384dbf5a886003f31f1a54a504e2f73f34948d14', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '3dd5e436957094eb40bc5a3c5c82603dd1d13591', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: 'ccf1f2af403c73c30ca8844e9284bbb69ed24975', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '0e4a866bee7ab98ef5114bf4f556140b6f9d3fc9', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: '4c741413b32ef1ea14908cff35b7dbf6b03e3295', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '2622ddde60eb5fa6c5f0857841341da8f0960da9', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '882cdea945848a5c8f094d5b90792291f8657226', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'c0cb8d43fa3e13aa360e73fb759fd69ba64dafe8', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'e5de958aec8c15c4f64e2371a4808167b3847a91', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '1aaeddf0456e50a9bd9a37f5a8235617b62f4809', id: 'buttonIcon', name: 'plus-sm' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss;
@@ -33608,36 +33627,36 @@ const LsParticipantCard = class {
     }
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (index.h(index.Host, { key: '768db475f548dd2185910c9419d040e796e75529' }, index.h("div", { key: '3e04b8b4fef38537f2d8d4ac16fc244509f4eb61', class: "participant-card", style: {
+        return (index.h(index.Host, { key: '26cd1235d566363298804b8554857f4572fcf3ad' }, index.h("div", { key: '5cb4a93633eaf4fec24648b2207ea8ffb401e950', class: "participant-card", style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
                 marginTop: this.signer.signerIndex > 100 && '-0.813rem',
             }, 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: '40ca2ae09badaaf460fd5ae191e67d894f2aae31', class: 'participant-card-inner' }, index.h("div", { key: '0e61b8ab5675a15b8c65e263e853870a8e341bf4', class: 'participant-card-top-items' }, index.h("div", { key: '8440defd6f52c33d590d97635e2a87f90b956eb8', class: 'role-label', style: {
+            } }, index.h("div", { key: '3ca92742e66d2f9e746fbf0725ea26bbdc4989b9', class: 'participant-card-inner' }, index.h("div", { key: '456cfae55b1fe15b6b7d4444ed228183ca1f93f1', class: 'participant-card-top-items' }, index.h("div", { key: '289757cf77b0b57b5cb9d78c1b248a8c469b5268', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: 'c59cf0a86936367a1b1341c4f1e20b5da73368ed', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: '3009a6badc772219f8beab629ab7d47edfd195b2', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '018c7bf1a5dcf6ab8950134c92dcfb3854f5e81a', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '78405243676cf11489fe016dce9bc0bd493d1005', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: '07e6126404d7c07004596827847e8c1e618c881b', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '456bd5bab69b4f2ed5791f04b4509dc2a80889e1', 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,
-            } }, index.h("ls-icon", { key: '31f07ba8c882572d7dc4cc1d2d643b6b9fc9567b', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: 'b495266ac65174095bfc5f5c99d8d11dc224680c', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '21d0074f67040d377e43696253d055a61c522a14', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '8d9edb433c6a0ea64abfa86212bfddec5a82219b', 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,
-            } }, index.h("ls-icon", { key: 'd915728e5c6fae1aa3e21b87772f50ae1add74a4', name: "arrow-down", size: "18" }))), index.h("div", { key: 'fb5c8efe0610c9bc1a92fce854383ddee064b414', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '5154b792ed0b47da1852be885d1751dc5f090dbd', name: "arrow-down", size: "18" }))), index.h("div", { key: '625e58c9360e52ad651fac5a81bd6aa05130dabb', 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: '306be44578bb974d9791e6e70bdd239d9a583b07', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: '2ebdf89cbb754ee7d1c960742e26b92ffbb17e03', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '75cfef0dcfde68c1a652c0884a910ea4d35deafa', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: 'c90fb747817a8ff3862cd0404e0d2c6507420ea9', 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,
-            } }, index.h("ls-icon", { key: '2604e84af51366f5f6ae7230671f19174c07e558', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, 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 }) }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), 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 => {
+            } }, index.h("ls-icon", { key: '3eebec8b8dc84006ceddcfd8e9a4336c4d862276', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, 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 }) }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), 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;
             } }))) : (index.h("div", { class: 'participant-card-text' }, index.h("p", { class: "participant-text-description", style: {
@@ -33648,7 +33667,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: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: '58390837483cc083a241aedb2394d4506d556335' })));
+            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: 'ca83751b9647aa1a1b02198dcb02a9c1cc5fa951' })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -33697,12 +33716,12 @@ const LsParticipantManager = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'db542b3de20e782c4e9bb7eac957e1c7c2b22db8' }, index.h("div", { key: 'd493833cc1c033b1634d5994b36c2f3f877c47bb', class: "ls-editor-infobox" }, index.h("h2", { key: '2fe04b065ed7b8de4d4d62ce2a86382057246aa4', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '9947ce44db8189af987cff6e6832106cba0434be', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'e83b00fe9b6e4801860c8fbe015f8b7fca4e3ba4', class: "participant-list" }, this.template &&
+        return (index.h(index.Host, { key: '9217c153c317e197897058a5881a781b16a58004' }, index.h("div", { key: '2dd289b3bb90e953eb1c9b722c35d3e20ef17b34', class: "ls-editor-infobox" }, index.h("h2", { key: '67d42783d2b9a8a3161f03c3d517da02eb9ce8b3', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '2f9cbd596e502a592cedb990855cda5da352a10a', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '6936cb07b173bff2a653753aa165366590ce1923', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index$1) => {
                 return index.h("ls-participant-card", { signer: r, index: index$1, template: this.template, onOpened: (event) => {
                         this.handleOpened.bind(this)(event);
                     } });
-            })), index.h("div", { key: '0e816153574f427c6204e719e4fd15b957c60313', class: 'add-participant-button' }, index.h("button", { key: '9811f3e2346752fe8c406491ceda3bf2bb9c84bd', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: 'dad9c22b4247268ed8bbde6e7c470c50fd499a38', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '18ec62c8b5f6b562f5e3cedcf98a2a9d398190c7' }, "Add Participant"))), index.h("slot", { key: 'eaaabf448e84231e22400e9130775be89ab6cec7' })));
+            })), index.h("div", { key: 'c57020f2d560dc9241b8cfc38611564b8bf68eb0', class: 'add-participant-button' }, index.h("button", { key: 'd9e352162f8b3e2b2278c392137888ef85cc46a1', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '31db90682efdb8b93fcab8d77d1e62385b9e5f36', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'df6d9f9fd4b8b8330acd2d04c44e36b07fa4aed3' }, "Add Participant"))), index.h("slot", { key: 'e12c849be729bddd04e79b77c182e26ed5a2563b' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33746,27 +33765,27 @@ const LsParticipantSelect = class {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (index.h(index.Host, { key: 'd7e1a9ac807f6dc5b4144a8ad3e8d66abeb35bd0' }, index.h("div", { key: '47363349480ff656f8dfca4789c8676529693c53', class: "dropdown" }, index.h("div", { key: 'fba86589efce5c2bf1338d3425474c0b981b60c4', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: '086311323f33a1bedfad3d3727934c4c91cdb966', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '3cca120e120194c2f3fcf6db599589a14cc1bc3a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: '44fc7082de32342327fda0b722d68836b868a626', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: '26d62e850926a6658ed1d22e7da2da2f5f10b77f', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: '07e7450ac7faf1e3ae8b90e8d6090cfb625e8d70', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: '976ab0d692503daa8ff7ac9d95b83c7d4fba790f', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: 'ba5776f833330caba78e4c828ff6ef35591a004d', class: 'selected-role-label', style: {
+        return (index.h(index.Host, { key: '05ce04a14cfb2ad7b758aedc5b65369a0ab0b193' }, index.h("div", { key: '01913be9946c4cbd20be9eb0183ccbbfcbd8ca61', class: "dropdown" }, index.h("div", { key: 'f59100f64738d20ad385de862295edf49a91655a', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'c8dca2bf3967cd21445da0d957049a0976cda9a2', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'fcfacdc95436203bf4d9234531c7f7fb7a7a764a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: 'a82eed99f51aa2d161d6b4901c0ee26f582aa895', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: 'f37b804b8ce9c29ee833813b17dbbfd0c7d070d0', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: 'f3a2b18f7340021728a1cc563eb35d27ac17990a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: 'dc6496244da861eff55d628ed9d240c0f507f22b', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '51c552f5e563479b81c26baf7b41b17c06d0f551', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: '49adb8e1055797953677f12c0cfaabb8191e2ebe', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: 'bd7ad751ebf8f1da889fc43fc65c77b309673c30', size: "18", name: this.selectedRole?.roleType === 'SENDER'
                 ? 'user'
                 : this.selectedRole?.roleType === 'APPROVER'
                     ? 'check-circle'
                     : this.selectedRole?.roleType === 'WITNESS'
                         ? 'eye'
                         : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: '99fe87cd5c660e935c534346389b761664ab56ac', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '568fd6db105e15fd5a56843a33d4b0153047b2be', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: 'c86526eb6abf39d9fbd2c8ef67110afa70dfc9cd', class: "dropdown-list" }, index.h("div", { key: '59c1046e912643a27c2f1a85b9f9ab9711583198', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: 'fc7751e7aa67036b170dffffa6f1205bb079da4d', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'd4a9c60a0a9d309c779d926547beab66dd258ec5', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '9afdac4d0239217a9145b87e86ce82fe4baeacfb', class: "dropdown-list" }, index.h("div", { key: '6e6c690b9b73369da2b920d601bd03ae2d4e2c62', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, index.h("div", { key: 'ead01a1838a0eae309c73c890df49b0af10d4ffe', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, index.h("div", { key: '7eafd31f64a1cc1578f79e46eed06fe3c6f19089', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: 'f4a40cce279a8925883ccf8c51522ca5c5c2d5de', name: "user" })), index.h("div", { key: '492c72b6065b3c1726a69a8f54cab19e2ab54b6b', class: 'role-text' }, index.h("p", { key: 'e79745f26fad89503f8739a73493f99e7ee00857', class: 'role-name', style: {
+            } }, index.h("ls-icon", { key: '7a6b5e21dd76b8bf75d8932b049bcdb3b86a4e12', name: "user" })), index.h("div", { key: 'dbc8abbdf4b2ded694637aa54e6124ca5496d3f7', class: 'role-text' }, index.h("p", { key: 'fd3b749275de606c1807f728de49ea12e5fb4964', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: '9528211744fbc4f3eed911835fdb1036130fb1eb', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: '673247e9d41fc4ba38fd7ca8a49f7cd7d6a037c6', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '9c56456a3d894f209198bb7fd4dccd8eb28481f8', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), index.h("ls-icon", { key: 'efab79f4b3d39fe14fd8c91420d0717e4159337a', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -33778,10 +33797,10 @@ const LsParticipantSelect = class {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), index.h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: 'b121dc76fbb72993b494bb046f564f0689208984', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: 'fb09ef1b14adc8f9b4ac2f09cfeadb09158691c7', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, index.h("div", { key: '12f6b52a719b3ba1f8485275579f807ba7a46965', class: 'add-participant-icon' }, index.h("ls-icon", { key: '4812fd6b6e4df9e52e2c012f7515abbe52780e15', name: "user-add" })), index.h("div", { key: '111fc70177c84d6eb987b0a6a6a4f8c83915e398', class: 'role-text' }, index.h("p", { key: 'a0f852ec3e0f8548c1104fb5481dd8b361960e86', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'd12e8b87c28a0af1f0de20d8329c07c0547a134a', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'b1251311dbf746ce4f0358b4e0408d373dec1a24', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: 'ecf266c452257580bd8dc441bdc6efa0a7c57117' })));
+            } }, index.h("div", { key: '33b7d90c55ad488e95a83526e4c501a72ad9c0f6', class: 'add-participant-icon' }, index.h("ls-icon", { key: '32ae47b14d9c5047dc10478a09a8725be7d08f14', name: "user-add" })), index.h("div", { key: '2d206c0f2d7e562098dddb4efbb21bcb537fe402', class: 'role-text' }, index.h("p", { key: 'ae5d9123112652e4af9912b309da2e6eb6705995', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'dcbd38153b8fc2666790df3af0229438b94f9cf0', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: '65fed105324c1dca3c7b0983e6a81db8eb18e4a5', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: 'd18f3b14f6ae9b47f186451c2390acb600a7d476' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -33796,7 +33815,7 @@ const LsPropsSection = class {
     sectionDescription;
     row = false;
     render() {
-        return (index.h(index.Host, { key: '63de6a931a143fd03befa3148e6ad410a3095d5e' }, index.h("div", { key: '063a2d14e8e4ff14fa558b64dd1e4d72c5837e4b', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: '5e39b25cc760e0776e19f88d7d34ebbc13bc3c1c', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3de0465a534e23babe24662a0fa275530c58a4fb', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: '453661f8c9c064e302b31c2b8a2d6218830de2e8', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: 'f98bdd4005ad484ba7b9a8ac3c10180c2573a906' }))));
+        return (index.h(index.Host, { key: 'bef8c364809ca1fe0f137d4fd66ac66de3275d1d' }, index.h("div", { key: 'd0c8b400401a26e228aa7696ab4a78f5d1febaae', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: '3683032dad4fd51bf1150f6c3fc82b274757dc44', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'e3af41b678439b5e6a165d81c18668ab8aae7579', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: '4e8ddddc08e4155cdbccd2225b3135e2f583344a', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: '430f6ee17ee17e5049caffbd5646693623bb8341' }))));
     }
 };
 LsPropsSection.style = lsPropsSectionCss;
@@ -33817,7 +33836,7 @@ const LsRadioInput = class {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (index.h("label", { key: 'f842c73069577e50a3fa643494b686f6413196dd', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '9ab75a30b8685cb3153a4b4c7b9cac95743fd469', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '1e6980fc937541928d0034e38c0425ad6e7f3a00', class: 'spanContainer' }, index.h("span", { key: '8e7a45279b47ee505e7208d3f6841946d95bf7c9' }, icon && index.h("ls-icon", { key: 'd6c0d0a2aa0d0dc3bf65c3d179aa71bd3e2cab13', name: icon, size: "16" })), index.h("span", { key: '8eb49e400a3bebc41cabfa95fa5c63a2b76a4330' }, label))));
+        return (index.h("label", { key: '071f5ea23374017ef930ff4718df692dfaf9c18d', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: 'eab8afd841ac1b0a8f92c8f39eb141bf0833c41c', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'c22ee1a9f45bc7894bed6a978b1394de56ee8d0a', class: 'spanContainer' }, index.h("span", { key: '4f6defdd690a6a799040c1a69461d697086c0272' }, icon && index.h("ls-icon", { key: '5ef441f24e164cb176ec9fcea931e3d603524297', name: icon, size: "16" })), index.h("span", { key: '501bb04681a7bb99e19a1dbc1190fe0fc0eff655' }, label))));
     }
 };
 LsRadioInput.style = lsRadioInputCss;
@@ -33854,7 +33873,7 @@ const LsSelectInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: 'e4ee06f9cfe6012508881ef1b5bbeb9e62400046', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '074c0f1d4b6675800cb383379b712085055075d4', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '65f1f13cfcd216eefd221754e1462d51a1667af3', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '0d9db0ca5a8924e015e721d26891eec381abf711' })), index.h("div", { key: 'fcbb0cd93cbf869eb4f3621e6197c7ae98b061f0', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'd2e26374cdf9724a6abebafc82a8281966282f1f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (index.h("host", { key: '3d36732b2276fe87beaaf75e51cea6f240c51b76', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'd23477ba9177c049c9af4c0b1eb82285bad773a3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: 'fc43cfd4be20eaf13e10d0c0d1b59a8d78a3d2e6', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '16c5c77c2708f382be33e72012ac428d302fa8d8' })), index.h("div", { key: '38749a68383a2656d27946f21af6efd02cf8c80b', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'a0b606ae3e1ae4b86a9c2c079859ef4eaac42260', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
 };
 LsSelectInput.style = lsSelectInputCss;
@@ -33898,11 +33917,11 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (index.h(index.Host, { key: '3be2a0dcb5f07ec4530963c4921287db1722d34f' }, index.h("div", { key: 'e6b1cc2ba3d89717418bfa731ba5465d721330c7', class: "status-bar-section" }, index.h("button", { key: '1da63862b88fe5c89e1717811f1754d058fc440e', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '8718ed60f74f4bad4a5c96adf94ae159c2fd6db1', name: "zoom-out" })), index.h("div", { key: '583b01ac6a1701ea445218633309dc75257aecad' }, index.h("input", { key: '0305e05cc942cf38cfc4c8d648f24895bbbd75ee', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '988054a084583d5ecfc5b927763361fb6dbc524a', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '45392d8bdcacc1897c953ccd9cbf55fbdd39c413', name: "zoom-in" }))), index.h("div", { key: '291121b5da20ef25303298047f357f770b6856d9', class: "status-bar-section" }, index.h("button", { key: '2c005f38ad45b77a5d1f286ed7020568aa253f7c', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '865e4c95b4c434b80ede6353261fd1f689a4997b', name: "fit-width" })), index.h("button", { key: '34fd96dfad199d7ec24e1747e53b02351493198f', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '437675aa53165d94afc871f3b9b6535c1d1eca66', name: "fit-height" }))), index.h("div", { key: '446652590467df37a108decd8976b2fc9fab55a0', class: "status-bar-section" }, index.h("button", { key: 'e3d9f38997cc4acafc2f23c6265dea5c72401ce4', onClick: () => {
+        return (index.h(index.Host, { key: '55097643549b7cbe604e9bee3849b9766f080126' }, index.h("div", { key: '9b133335d222606b1097e8da02314bf0b0b6a1ae', class: "status-bar-section" }, index.h("button", { key: '0827867b7959437e246b906d43809a44654f2f86', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '00c7626a1734ca3e033449465e67dcc31eaa0529', name: "zoom-out" })), index.h("div", { key: '3855d5a719e2da9d7cdb7ced6d8738bcbf6eb820' }, index.h("input", { key: '8314f667a74775625d0b64a7d6002ca8f06e64b1', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '911190a0e364786561c0858331bdb453fb6ec75e', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '08d488109b61fd13977645a66abbd96332989f5b', name: "zoom-in" }))), index.h("div", { key: '6f014eb039ae5e72df5371337fb0133d4042b9fc', class: "status-bar-section" }, index.h("button", { key: 'bf93ddda1fb8206c31df64705d72c49dc6807274', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'bcc5998901ba5875de5dc2f33fd8001f0c64cdd9', name: "fit-width" })), index.h("button", { key: '66d72546495cdcee8afa2d1ba85d7dc9100e2184', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '872ac2174c60d828c58f0d45f0aa15bf0a5a74ce', name: "fit-height" }))), index.h("div", { key: '78222891e89515a221be4d3e517bac94b7c213a8', class: "status-bar-section" }, index.h("button", { key: 'dca255d5540c8752fbd424909bb5595484bc84ca', onClick: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '46836c2b2844e054afcf5cf507fb244c1455ad1f', name: "chevron-left" })), index.h("p", { key: '2b8011c6be1d9a70e5342ab4aa4d8862dd72bad8' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: '4dbf24b5e492136c90000d8c89ae0b392d1136fe', onClick: () => {
+            } }, index.h("ls-icon", { key: '6a5a348512d4746727bbb9a1bb3b25f3c7ac84e9', name: "chevron-left" })), index.h("p", { key: '8c78f2ae00d855c0cdb19ffbfbe1bcdabf2cf65d' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: 'b91bb6fec66a25071d847b85dd5723960e433094', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: '3cfc0baeeb1cf6325d2a2de4f794e9a88f98df15', name: "chevron-right" }))), index.h("slot", { key: 'e6e28000cb9b81b4bacec56c95962b367f3b3049' })));
+            } }, index.h("ls-icon", { key: 'd73352bf128f6d2911b98bd9340a8963018e7fd6', name: "chevron-right" }))), index.h("slot", { key: '1829b9f4ce5f420972c64b9f63a59c1aa48c70b2' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
@@ -33948,13 +33967,13 @@ const LsTextInput = class {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h(index.Host, { key: '7ce2244115383d8d213b01f3d16f33578f6dc8bb', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'a9e7141c0b35642d54134757060d6bb0209cced4', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+        return (index.h(index.Host, { key: '2a86d2b2edd5666c42772d0fbf4627f52b304e7e', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'ef45261622c63b60291451c37618c3e434dbfdf3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
             } })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
                 this.changeHandler(e);
             } })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
-            } })), index.h("div", { key: '183a47c3e4cf6254be4f3371bea800311d3ba255', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '51525d56ebb0207dc4f40d936dfc781302bb1cc2', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '8911069152bb11758c782078b49d8e512aba524e', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '22a019c1d4a57c8733bb4ac1b5cd726aad32543d', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: 'd1015a82b3cec1d8eecfb7fb9ed6850a9d6bb2f6', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), index.h("div", { key: '6144900e185b774d5f5e10d094424b78c4899374', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '5cf0c2112ddb11766cda8b2d8c963b4c92ccc9f9', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '681ec8d8d0ea70b679c8176928e658391ae1a0d0', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'a3256ca30fddba1c048ee1315f0348cadcfb513b', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: 'a3e541ae6e5c1c88eea76da2a7d1c7db1022de2c', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
 };
 LsTextInput.style = lsTextInputCss;
@@ -33990,7 +34009,7 @@ const LsTextareaInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: 'a47ced7dc6146a6fd69e92b668ae85ab0f111881', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '763a1f8e831e31398eef396395cae9e25888100f', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '3fc4892b48122161f061724ae08addbdc5fedc7d', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: '396a40c7688e8aef2e6319fb3a112cee7d6dd7aa', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'e8ab22f4bdb4420f9401ff8927867a07c5b3a26c', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '37a308b5162b4082e34d86b8a070eb13ec17887a', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '02f723aa88e3bd2494bfbd5ac3420eeb90393fa6', id: 'buttonIcon', name: buttonIcon }))))));
+        return (index.h("host", { key: '281954f96e56d9b22ce6e90b73d913449163a384', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '7c01fc436423b1a2a7496d0f043bb592510c9057', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '2a4328d5674b9a759a1c63c4a2f622591679f363', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'a389f298d31654df347c9d654be0868f6ebab862', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'cd6d7204e0301fd87d29d5c709c9e43721542bb1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '31d5b142aa8a642c28748dae32adb19c97ef7936', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '08c4ae96097a8ed4cdc8640c30d2b3b472e4fad5', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;
@@ -34008,9 +34027,9 @@ const LsToggle = class {
         this.valueChange.emit(value);
     }
     render() {
-        return (index.h(index.Host, { key: '8e2b42e0c10adf0e14b56fe2f6ed8f94d6441d09' }, index.h("label", { key: '96372c7e550570bacfff4115fe9cf6927722c985', class: "switch" }, index.h("input", { key: 'e9b6f17104035a7bcf25d2e60641847f711619ba', type: "checkbox", checked: this.checked, onChange: (e) => {
+        return (index.h(index.Host, { key: 'fff128eeef303b0a5482220dc6d9c3d0ac0ae400' }, index.h("label", { key: 'd5297141d7c7279f07d72d939e5924b8841bce82', class: "switch" }, index.h("input", { key: '0ee4b85550bac696e7e4273fbe31165445897a06', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), index.h("span", { key: '8fd5cd6aadce53fcbb3250db520a2678870da632', class: "slider round" })), index.h("slot", { key: '39608b536c127892c425f4d2c634ea52237e21de' })));
+            } }), index.h("span", { key: 'fe5e6f17345ba5057d2df8a9c245d28b7c79e328', class: "slider round" })), index.h("slot", { key: '9c3d8ceb80fbf7d4c0efff45d671866b42476f21' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -34059,7 +34078,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'd2586e6c8588c051ed075fde8bb9d5a279877986' }, 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, dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'hidden' : 'visible' } }))), index.h("slot", { key: 'c6bd677b349de454be70ce1938b1231e21739b88' })));
+        return (index.h(index.Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, 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, dataItem: this?.dataItem, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("slot", { key: 'c22f9e9921ca69912896777e704636e323ffdb36' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -34113,12 +34132,12 @@ const LsToolboxField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b8e9ac652b417109c0efe1f2629885bbc48b7f5b', draggable: "true" }, index.h("div", { key: 'de04c17c4eb93e027f7ec3d368a0d0c785365978', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, index.h("ls-icon", { key: '37a6a947d1e50e3bf659406f8fbd14d4e52a3625', name: this.icon, size: "20" })), index.h("p", { key: '0ad0c41c97fbb3398839502b29cecf50091560be', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '87173c300c80ae2bbf7bd8e3b0ff67f48712e402', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (index.h(index.Host, { key: 'fb137a5eaeb10b88f8d0eb43feef6d2ef8505973', draggable: "true" }, index.h("div", { key: '9c92bec6e9abb2b57697eef17b52d43d24461784', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, index.h("ls-icon", { key: '6febc0b55187a9b51ac094f49f72266c90acd433', name: this.icon, size: "20" })), index.h("p", { key: '2533c0ad8ac9e815847b1bad4798451f6b19118a', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: 'bee17f0bedbbd904e634064bd37825fd96c75bc5', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;
 
-const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
+const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
 
 const LsValidationTag = class {
     constructor(hostRef) {
@@ -34128,16 +34147,16 @@ const LsValidationTag = class {
     validationErrors = [];
     isExpanded = false;
     render() {
-        return (index.h(index.Host, { key: '0cc1542e1fc6360b9f697048edccc4b5cf9d04db' }, index.h("div", { key: '801ddb23b2c5a1ae1b20f0057f6ef5c0d6f5f98d', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.status !== 'Valid' && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '654bc4a92c3f443869deebfa0442ce291fddcb2f', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && index.h("ls-icon", { key: '39f5bd1553370e7afbfef3f8ada98ce020bd154b', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.isExpanded && (index.h("div", { key: '132baa5cb7d975470bcff691088263d0844c6f76', class: 'field-dropdown' }, index.h("div", { key: '77274cfcac7520a68703ec2ebd71bfc7220374d9', class: 'dropdown-header' }, index.h("h2", { key: '5e8c99e97ed5f4e5ca30c87b739f5481a15c54d6' }, "Signature Fields Required"), index.h("p", { key: 'fd48c075cba33d06570c41c7f0d62a1bd662cce8' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+        return (index.h(index.Host, { key: '19a7fa173b5753ee1323adf935c9b76aab197a1b' }, index.h("div", { key: '5c0b59aa90ee1bf2c39f341e167437ae0cfb700b', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '209d7861899401458d8a5fa7a64665d7e7991a51', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (index.h("ls-icon", { key: '0a528826d3b7d67382a934259c1fd515a931a108', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && (index.h("div", { key: 'b1628cd4fcfa5b92d88b492504865a2d91c5713a', class: 'field-dropdown' }, index.h("div", { key: '5cf6c73e2bf98fa41ae6016e1d1e75a150b334cb', class: 'dropdown-header' }, index.h("h2", { key: '389ba3f91d3195671965ee25a5e85764ade84449' }, "Signature Fields Required"), index.h("p", { key: '6bb94ffb2b9063a9f033e939af816bbb0eebda55' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
             const pallette = defaultRolePalette[field?.role?.signerIndex || field?.element?.signer || 0];
-            return index.h("div", { key: idx, class: 'required-field', style: {
+            return (index.h("div", { key: idx, class: 'required-field', style: {
                     '--field-background': pallette.s10,
                     '--field-border-color': pallette.s10,
                     '--field-background-hover': pallette.s20,
                     '--field-text-color': pallette.s70,
                     '--field-text-color-hover': pallette.s80,
                     '--field-border-color-hover': pallette.s60,
-                } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && index.h(index.h.Fragment, null, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType || `Signer ${field.role?.signerIndex + 1}`)), field?.element && index.h(index.h.Fragment, null, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))), index.h("ls-icon", { name: "chevron-right" }));
+                } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (index.h("div", { class: 'required-field-items-left' }, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (index.h(index.h.Fragment, null, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description)))), index.h("ls-icon", { name: "chevron-right" })));
         })))));
     }
 };