legalesign-document-viewer 0.2.15 → 0.2.16

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

@@ -24708,7 +24708,6 @@ const getGroupData = (id) => {
  */
 function validate(t) {
     var errors = [];
-    console.log(t);
     // Check for missing signatures
     t.roles.forEach(tr => {
         if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex).length === 0) {
@@ -24720,6 +24719,17 @@ function validate(t) {
             });
         }
     });
+    // Check for missing multi-select options
+    t.elementConnection.templateElements.forEach(element => {
+        if (element.validation === 20 && (!element.options || element.options.length === 0)) {
+            errors.push({
+                id: element.id,
+                title: 'Missing options',
+                description: `Drop down field "${element.label}" is missing options.`,
+                element: element
+            });
+        }
+    });
     return errors;
 }
 
@@ -24804,14 +24814,12 @@ const LsDocumentViewer = class {
             this.showtoolbar = false;
             this.showtoolbox = false;
             this.showstatusbar = false;
-            this.showrightpanel = false;
             this.readonly = true;
         }
         else if (_newMode === 'editor') {
             this.showtoolbar = true;
             this.showtoolbox = true;
             this.showstatusbar = true;
-            this.showrightpanel = true;
             this.readonly = false;
         }
     }
@@ -24854,12 +24862,6 @@ const LsDocumentViewer = class {
      * {boolean}
      */
     showpagepreview = false;
-    /**
-     * Whether the right panel (which can be default field properties or custom panel) is
-     * displayed.
-     * {boolean}
-     */
-    showrightpanel = false;
     /**
      * Whether or not the fields list is expanded.
      * {boolean}
@@ -24904,6 +24906,7 @@ const LsDocumentViewer = class {
     updateHandler(event) {
         if (event.detail)
             event.detail.forEach(fx => this.syncChange(fx));
+        this.validationErrors = validate.bind(this)(this._template);
     }
     // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
@@ -24928,14 +24931,17 @@ const LsDocumentViewer = class {
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
-        console.log(event.detail);
+        // 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) }
+        };
         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)
             propPanel.dataItem = event.detail;
-        //Revalidate
         this.validationErrors = validate.bind(this)(this._template);
     }
     // Send role selection changes to bars and panels
@@ -25093,6 +25099,7 @@ const LsDocumentViewer = class {
                     const fu = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                     fu.dataItem = update.data;
                     // Refresh the selected array
+                    this.selectFields.emit(this.selected.map(sf => sf.dataItem));
                     this.selected = this.selected.map(s => (s.dataItem.id === update.data.id ? fu : s));
                 }
                 // Reselect the fields - this updates the dataItem value passed to child controls
@@ -25102,7 +25109,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.selected = [];
+                this.selectFields.emit([]);
             }
             else {
                 console.warn('Unrecognised action, check Legalesign documentation. `create`, `update` and `delete` allowed.');
@@ -25168,7 +25175,7 @@ const LsDocumentViewer = class {
         box.scrollLeft = (box.scrollWidth - box.clientWidth) / 2;
     }
     render() {
-        return (index.h(index.Host, { key: '507862ca8ac9b4fb78e2171652d85f670efd7154' }, index.h(index.h.Fragment, null, index.h("div", { key: '2fc1ec028c5b5812adb0547d9e98f5ae3ca30389', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '966f14b697692e59d186be75a9ff42a5607e9197', validationErrors: this.validationErrors })), index.h("div", { key: 'e919a403e4aa9dc3d33aa8b8d158144ce6187f26', class: "page-header" }, index.h("p", { key: '5ca5551bb9d2a340db2295e9a051fd419509fe86', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'c0bad3a3c1df4bf9649b580bacd135a549047965' }, "/"), index.h("p", { key: '1fb838bea78bdac7716308cc99dc342791adf786', class: "header-text-2" }, this._template?.title)), index.h("form", { key: 'f1514a6d78dd8ce1416d00e6eca88cb39739a7af', 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: '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 => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25178,10 +25185,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: "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.showrightpanel && !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 && 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: '48fd636a4f58a2d1cf69974df2ddd18cbab92470', 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: 'f9bc9ea4748bffa5e0ff189292fa739c74b3d348', id: "ls-mid-area" }, index.h("div", { key: '01daa94f4b7c941a6a409b50dc13c353f3fc9110', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '1cc60b24c260bbeea5a649b1190b3e2ce0303409', id: "ls-document-frame" }, index.h("canvas", { key: '90d2df545d6fd2e0e10980d16dcb5e7302c85cfa', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '36ecce266e1f0d3951cae62e64664fb19f5438f1', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'c911b0de65321ff3af541833d88256981d76aef0', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'b95ecec60b852b5a31554f8fdf53cb2394472dfb', 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: '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 }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25754,9 +25761,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.showValidationTypes && (index.h("ls-props-section", { key: '9e1a4f9a6c807c65b6124b1c1dd4ee967a21083b', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: 'ef605c78fd88bb30fa741fd6a9a8c9e5e4dd08e4', select: true }, index.h("select", { key: '6a72e1e22e573041535b093964720e78c6bab987', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        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
             .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: '26dbed7c7c7d1a53df34282440b92310909f8206' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: '1cb573328edd690168d072bf7ad602344e9b9280' })));
     }
 };
 LsFieldContent.style = lsFieldContentCss;
@@ -25798,7 +25805,7 @@ const LsFieldDimensions = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '439ff89c605ccc47545bfd426a8d616ba725d98a' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '2eae27cf3317ef6ddfc497a08706ecfcb92793bf', class: 'ls-field-properties-section' }, index.h("div", { key: 'f3bb199414d38bd7f464b717fcf45908d8382909', class: 'ls-field-properties-section-text' }, index.h("p", { key: '97e6f89cfac137bd2347d64bea4e7c0fda46a8bb', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '5e5ead118583d0c3ef9dfa99a9545c475d7ba4c0', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '1c75c5afa416e6c1a940925460315ef7858058f8', class: 'input-row' }, index.h("div", { key: '70f55be15b099697e4a4f41f9facb6dc452d556b', class: 'input-wrapper' }, index.h("ls-icon", { key: '8fadd033b5a55594dcfbf7f0e5741e3a760a3792', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '334b5c485b63dda46dbc1f512c345f29c9055f8f', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '58817e4b1411b1f9b66d0c50021730efdb78ff8f', class: 'input-wrapper' }, index.h("ls-icon", { key: '1e182a7e0f3bdf4b094bf1174899cc05fd1195af', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'b910a0a9ceff55857a46bcbf7146058572ee4471', 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: 'd0f03c9d86708196d9567a510056cb45a5fa0a62', class: 'field-set' }, index.h("div", { key: 'f79f4c4d7755ae4d0675139374ed88bef48de6b7', class: 'ls-field-properties-section' }, index.h("div", { key: '4df6b4bf921d1f084efabfcbd9f303ab8b3860cf', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'd847ab18a383635db36cf1d0ccfb71496c0b65da', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '7a7e9adcc9dd5cb9695d63a1b7bfacbb3fbe9b1c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'ecc440a146667194dd8e4d92fecc3cfb43cdb10e', class: 'input-row' }, index.h("div", { key: 'fd7a30dc9acf4a3c1a613bebbff2198782a3dbff', class: 'input-wrapper' }, index.h("ls-icon", { key: 'd3d773a181c195ce5914c9d57d7eef084f4ccd63', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'f124480b9b6d5a766f0777d12a11b4762cd0b0a8', 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: '89dc792a2c896a6b2cd4533a9f0c17a320c795e9', class: 'input-wrapper' }, index.h("ls-icon", { key: 'eebe00d06a8af9f2b1d6afcdeb978c319f674e3d', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'f95933095df0b947448535d3aa3f4f67463fca50', 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: 'c012b397f6bb394476ed6b1e15493676b7b0b4d8', class: 'ls-field-properties-section' }, index.h("div", { key: '39088003046f26edd4618fe3e39f6f7fcd7e9ea0', class: 'ls-field-properties-section-text' }, index.h("p", { key: '10f4adbc3335b90544051907b914030501a6d9a2', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '3b5bb5809a3f421438fa35fd35df0343de550bc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '6507bff65254b8e206be5940c20f89340bb36318', class: 'button-group' }, index.h("button", { key: 'a72e710ee3e6a038f1f8de74296b73007a03dd2a', disabled: true }, index.h("ls-icon", { key: 'f1367e59789a180d6ef8907b5245074977dd6618', name: "field-scale" })), index.h("button", { key: '05bf5357859205da330311ae1e394ef23f4ee3a7', disabled: true }, index.h("ls-icon", { key: '711ed196347dc0209acf7a23d74247c86d497d73', name: "field-match-width" })), index.h("button", { key: 'c7929e849f85ff10b44ca82157f6e96345c7129b', disabled: true }, index.h("ls-icon", { key: '427f363c6b29a0a200c1b54fefa5b20d990de345', name: "field-match-height" }))))))));
+        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" }))))))));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss;
@@ -25894,11 +25901,11 @@ const LsFieldDistribute = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '25772e196603735cb914bd01133c7c34e23826ef' }, index.h("div", { key: '81a0ecce05d52174c289b9af137948c873826478', class: 'ls-field-properties-section' }, index.h("div", { key: 'e1628c86925f5526db581bae1183d0fb8cada405', class: 'ls-field-properties-section-text' }, index.h("p", { key: '14bacdbe4ef83564c461855438c09c353a2be016', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '6135630ef29e41b30224944e9ef769c5c8625308', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'c44923008bcdd4da4822215d5527dec55582aabd', class: 'button-group' }, index.h("button", { key: '906f9ddd5924d9e92190ab55ac2e1177c1871fb8', onClick: () => {
+        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: () => {
                 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: '63cde060fd4b7deaa88203a5d06fba9493d1dd1d', name: "field-distribute-vertically" })), index.h("button", { key: 'd9f213ee0cbcaf6878d0fd91ad92012dcc3a585f', 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: '519ed59a373c7a8312cad6762e914ffbe6d0a731', name: "field-distribute-vertically" })), index.h("button", { key: 'd084dd0be3c07a1c79393492e39c7ffc75e91839', 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: 'a82bb99cd380432c9ab5f5da717e16e5f97c4957', name: "field-distribute-horizontally" })))), index.h("div", { key: '6c3464428454774cad37f7886c9acc62d71a5f38', class: 'ls-field-properties-section' }, index.h("div", { key: 'e42014c936deaa922edca1a9ee40d5a2d56649cb', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'eb71e09823bacfb6947d46adc62e4c16108c391b', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '573be67c9576bfc34e1d90a0c782043d88ecd96b', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: 'b7da3a466b0ebd3af072f832956ca8e9ee1aa8a4', class: 'input-row' }, index.h("div", { key: 'a174323c55cc78406011abdbc275c9573a3c214d', class: 'input-wrapper' }, index.h("ls-icon", { key: '6fd94cf04330cf51385acd4795b3b19fd7474187', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '233907eacadcbb11816200e80fb4ff584769f856', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '1710d0606bc60817cd71457bd99681cd7c2a21eb', class: 'input-wrapper' }, index.h("ls-icon", { key: 'a880cf0caff0c3825567d8344c17635cfc525200', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '3709df277a625b566db42e2a72f5d13ef8f2679b', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: 'b790914b23032b04e89feb7e3a9d3aa2cc4a56d5' })));
+            }, "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' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss;
@@ -25927,7 +25934,7 @@ const LsFieldFooter = class {
         this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
     };
     render() {
-        return (index.h(index.Host, { key: '758127fdaf9df338b22f0dd8018f0d5744787d15' }, index.h("div", { key: '65d97db494f4338326b39c79a9ce8da09a8e76e4', class: 'button-footer' }, index.h("button", { key: '9d48d0c97c1fbebcf010bc3e2523f4006d6593d5', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '304be5d258b110f4eb68fe5237eee0d03e12d55f', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'a1b1b451b1696577019b9bde4530733d57834964', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '3d59bb5c5eeebd6c2914cf9024f76ee1b8332a3a', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '7f68c240e7e5b9c533bf9b2ea6f48ae40101f127' })));
+        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' })));
     }
 };
 LsFieldFooter.style = lsFieldFooterCss;
@@ -25956,25 +25963,25 @@ const LsFieldFormat = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'b88040d1b9116cd13e60c6a80da6decb8671a383' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '5cc04fea5911be029af2656e8f197ac71a96c77b', class: 'ls-field-format-bar' }, index.h("div", { key: '0cf17eb7f3d1ed52c3461bf242637c9bdb85d6e7', class: " input-wrapper" }, index.h("ls-icon", { key: '00efad485e3f55213d01f76debaf04138eb80cc3', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '882f1eab23c32381a658a493068015f72f9ac9f0', onChange: input => {
+        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 => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: '9971b423adb4409326f1f4b21128d6670e236252', value: "arial" }, "Arial"), index.h("option", { key: 'cd8f8caa2724f1901fe4c14b8218c0b344689f5c', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '31f639c71f806fd023d2f5fb30d22bb03b5b274e', value: "courier" }, "Courier"), index.h("option", { key: 'b8842a6e33d5949ffc8dea43c886f1820ff3185a', value: "helvetica" }, "Helvetica"), index.h("option", { key: '8bb308d75fc116582cbbf18a52dcc691e0a90447', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: 'e7b40cad94632f7d61102ca6644e2f1b6e8f782d', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'a3251844e07ed9a84397f32c7409932db082cb19', class: "input-wrapper" }, index.h("ls-icon", { key: 'd649faa9b15e970fb2d706c9e7177ece8c6ab5b7', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'bf2b5963d83d621e2104c575617bd31ec2421227', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '77c7b8c56dfd32e185c52f388e7c68a0c34848be', class: 'button-group' }, index.h("button", { key: '565bfd0cce4b56369e700bd6f5666b82025845c5', onClick: () => {
+            }, 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: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: '5e84eda1353f569c61bbb6f563f55b974237b451', name: "menu-alt-2" })), index.h("button", { key: 'ceca65282468eaee956bf6d8a80d97a793ef016b', onClick: () => {
+            } }, index.h("ls-icon", { key: '5215471766ea8305d1de1075870471cd396dfb82', name: "menu-alt-2" })), index.h("button", { key: '994cc7ec78b566286739dc4a6416fc100d0c9ac8', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '474a2513d7edbfe69e2c2be1a65abdbd483394c2', name: "menu-alt-5" })), index.h("button", { key: '0e3d319cff0a918ad35db83892b07edecb8f77d4', onClick: () => {
+            } }, index.h("ls-icon", { key: 'ff73e43bb41460b902dc5778adf7fe448e136be1', name: "menu-alt-5" })), index.h("button", { key: '0841ca37df78b67b80760f5266a9f78db7e913e1', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '5b0b4aaaa6769e81d8834e0dff5ff28e4d204ada', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '1296d9077f278af5b305803bf4a86f3d6d422232', class: 'ls-field-format-bar' }, index.h("div", { key: 'a26204c2b9436553081d59af854672e9fa812e8c', class: "input-wrapper" }, index.h("ls-icon", { key: '3c653235269d2aca9fb007cb24d78755f80d872e', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '2ae0f82ff2d4a9ea0ecde2b60fdbf898ad58f0bc', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '99c594d2e5a82297dae992f296d9bcbe5fb28a06', onChange: input => {
+            } }, 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 => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: 'ace9071a1981a0666bd96740b94c8275ee5010f8', value: "arial" }, "Arial"), index.h("option", { key: 'c45156c0eb4e3e056374b9bdca680a1503d2f2ea', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'ac476cc6d0de6e916ce6bd3b3ce806c056d4a5c8', value: "courier" }, "Courier"), index.h("option", { key: 'e6efc61a261b3b82a57d40fee4682459d31d06de', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'ae4becd65bf7e18f6a766bb405ed522dcffef2c3', value: "verdana" }, "Verdana"))), index.h("div", { key: '2f246b67993339a4d86f64375c63851e4a3da96e', class: "input-wrapper" }, index.h("ls-icon", { key: '82b9bc439c599491101bc6fe584be00e246f7166', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'efd1c4d402212c20fc4604046c109a2cf139479c', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, 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 => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), index.h("div", { key: 'd6b8ffcd127e5aa6272a7c52fd83dd5a27d93ca1', class: 'button-group' }, index.h("button", { key: '6d0e2f14c6421300b82291fbfb9e427c6e8c10bb', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: 'b0036810935d8e09a2c5798e622c395889c1ab98', class: 'button-group' }, index.h("button", { key: 'a7b07205713e3d124d1a5e1fce80ede822a03684', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: 'c8148f17836a77b7e3e171db0cb9a2798930a065', name: "menu-alt-2" })), index.h("button", { key: 'eb20c2acedff64378165f1e4f5b92b96aaeef1c6', onClick: () => {
+            } }, index.h("ls-icon", { key: 'b3f0c318f180d0fcfd380033d99c9264290e4fdb', name: "menu-alt-2" })), index.h("button", { key: '5e10ebc2b7d2553e92d76ba7e14c2f56d90d1ee9', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '2f337e94b6bf8c2bbf822087125b8fc22dceeae6', name: "menu-alt-5" })), index.h("button", { key: '1d818ddc9cc83ddb68abb07f7ff03f6f12fa65b7', onClick: () => {
+            } }, index.h("ls-icon", { key: '441125d448bf5ff5c4e99de1067d466f810b1a97', name: "menu-alt-5" })), index.h("button", { key: '41afcb33195c926c55d6bddaaae15e7513eab577', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: 'ea14284d9e0cc337300f0c87d889b85c50e6309f', name: "menu-alt-3" })))))));
+            } }, index.h("ls-icon", { key: '9058e3e51da9df563218eb4eb5ba2c79b3e90b35', name: "menu-alt-3" })))))));
     }
 };
 LsFieldFormat.style = lsFieldFormatCss;
@@ -26036,7 +26043,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: '8f414efb9ba794f6c30eda446fe3030a681650df' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '4a260ef4b7196e83ae0c9f5546bfbcd2a1e0affc', class: 'ls-field-properties-section' }, index.h("div", { key: 'fa55ea83e1c35f7a87e89e707b0b1e8627106d0a', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'fc3ff62872dbded4d1c5efdb66cc9adef9713330', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: 'acb421717e87c8bc48dbfe38b99ee154f078daaa', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'e44d42de07201df6cbb6db1727c8b0b99e3af5a8', class: 'input-row' }, index.h("div", { key: '2da475667995c71fecd631bf00155ed24776e6d0', class: 'input-wrapper' }, index.h("ls-icon", { key: '885e5912b6cfe5f29871420e9162807455358c9b', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'bce82f437e321c7a0fa85f748afb8316763e3a02', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'd63127f3f419f857ab17a24692c3beedbf61e77d', class: 'input-wrapper' }, index.h("ls-icon", { key: '220b6d48b0e9d9e8e89f07cc01b4c15b30c953de', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '81704c2be50741c1a4df4e465009c44f4ffe6286', 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: '67d9a9516e4a3a8d889621bac9606246038a35d5', class: 'field-set' }, index.h("div", { key: 'e264bd3c40e0e938f421d0b946742eb986c19bd8', class: 'ls-field-properties-section' }, index.h("div", { key: '30989a6e90b6da5855e23801790797a93662af5d', class: 'ls-field-properties-section-text' }, index.h("p", { key: '10557815232bd764299c3d83c26314c190237a5b', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '711a3ecd055c7c5491edb0492e397062bd5a8558', 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: 'fb066d48051bc05ac667e78a47a0d34028e7f641', class: 'multi-button-group-row' }, index.h("div", { key: 'b8a02b554d6c2b111501b6231b4ad56cb5675093', class: 'button-group' }, index.h("button", { key: '16bcbbd263a668a0896a4b4d1ac1fc8ef7e3e95b', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: '4ffa1b6492eb665febd819456ac68489dfa6492f', name: "field-alignment-left" })), index.h("button", { key: 'f52ff655aea15cd88bd8b98089fae8d3aa2d9082', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: 'f74a107cdeebe8ae88285c2393e2f04438ebfadc', name: "field-alignment-centre" })), index.h("button", { key: 'f83f0a41a4f6e500250ee3e16e327df805fd0ee5', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: '054f3adad0d2af592167153cf3c8f8dfbcafb172', name: "field-alignment-right" }))), index.h("div", { key: '6c2afc8dd070207b1e0f40aa53d9c408c097fdb1', class: 'button-group' }, index.h("button", { key: '8307302d554a55e938880df59c8dcfce2090347f', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: '00fc766d8a6d2c912f178f18b9ba0284df53887d', name: "field-alignment-top" })), index.h("button", { key: 'd7aa397f69a8e0b4bdad48669488a607f0eec5b8', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: '4043aa6d8ebab2e5157271c17e2a6dd2036b7168', name: "field-alignment-middle" })), index.h("button", { key: 'c83298f7e5c5dc12257bfe44876bceb60440fb85', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: '28c48590ac70f74c0f499a5bbd79750352bd1b1d', name: "field-alignment-bottom" }))))), index.h("div", { key: '8c9a934b62d07c6d9e17572d04fae086937ae533', class: 'ls-field-properties-section' }, index.h("div", { key: '6babb79ddce1a7d3df7ae6e7342e47e69973a14c', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f77e129ab13e0c1dc8a4a69ad0f6a4d7205e7d36', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '0b8ba2425c2ec45a9de75c0af96edd783af29e3d', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'fe835366f46b95d59c3dacac786ae5693c81eaa1', class: 'input-row' }, index.h("div", { key: '224dffc26b58d3e9bfdb5c1972bf45977a52a8cf', class: 'input-wrapper' }, index.h("ls-icon", { key: '6a26cfcb7a9adf35b12a7ff6e92d655005ca80e2', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '49919dd027f1f8049790921700ec8fe4169a1296', 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: '847f2694df55dd5e94cdd107c517c559b224716c', class: 'input-wrapper' }, index.h("ls-icon", { key: '9677a8d03fa592440b07ad21ab16ccc9b8a156b2', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '2bf304254596cba654b3af57199b9b0bf58f64b6', 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: '5ce85ba3ad758a998ec16e4390ee8bbf8407b366', class: 'ls-field-properties-section' }, index.h("div", { key: '04da1b5d71faf0fefbf84e7eb3e42ed107bde312', class: 'ls-field-properties-section-text' }, index.h("p", { key: '9e3988a6cebf275fe84a33530a53c055ff9f5a51', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'dbdbcb26d95fb4de61ce112cc9ab6aa2411396f9', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '45209ea3390a7810909867f1966f4208fe44517e', class: 'button-group' }, index.h("button", { key: '0ce201c842aaf2be23e7ce417e2db6bb85f5992a', disabled: true }, index.h("ls-icon", { key: 'be41fa982be1fd65b51341372195d62e1b7609b7', name: "field-distribute-vertically" })), index.h("button", { key: '4534e69518070f29c42f1a51ee8025240d936d7f', disabled: true }, index.h("ls-icon", { key: '6743c48ca8f486e2d97d7a9e5f96e7065ab07e56', name: "field-distribute-horizontally" })))), index.h("div", { key: '2869721abaae844627348711d0d62467a11ba4ef', class: 'ls-field-properties-section' }, index.h("div", { key: '143514ae6009bf84738dff7b64e433606a36570a', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3b661ec179f8bda3d6da65939e476c24da4c2f70', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '3c474d1fd4dd4d8d26127dd42a461571c767a3aa', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '35893a7a0e5eb244388f6cb7f1673992c0d00605', class: 'input-row' }, index.h("div", { key: '4722103927697e90a96ccb912045785beb0162e6', class: 'input-wrapper' }, index.h("ls-icon", { key: '5eb9d50a601c796dd559769aae1241cea60b235e', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '9f25668d5ff8d223d694da334875101deb1aed26', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '912e5ecdf9b65a98139e3c8885fb5578834a593c', class: 'input-wrapper' }, index.h("ls-icon", { key: '04a998a14bc3d91f22340b4065ae1f49d9f23f66', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: 'c06d8aa85ac974a1c1c9818e073d5ac51f199065', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
+        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 }))))))));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss;
@@ -26069,6 +26076,8 @@ const LsFieldProperties = class {
                     return index.h("ls-field-properties-image", { dataItem: this.dataItem[0] });
                 case 'file':
                     return index.h("ls-field-properties-file", { dataItem: this.dataItem[0] });
+                case 'dropdown':
+                    return index.h("ls-field-properties-file", { dataItem: this.dataItem[0] });
                 default:
                     return index.h("ls-field-properties-general", { dataItem: this.dataItem[0] });
             }
@@ -26077,7 +26086,7 @@ const LsFieldProperties = class {
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (index.h(index.Host, { key: '1c18ca2e12dd50989e2c1971300333385246ca58' }, this.dataItem && this.renderFields(), index.h("slot", { key: '249477d27cc76e42abfb31cd52e72144235abaa5' })));
+        return (index.h(index.Host, { key: 'ef6f3363ef3f3bff466f3fa52e255ac6694f9ff2' }, this.dataItem && this.renderFields(), index.h("slot", { key: 'eeec9e129e6dc68afdafedfba4fe618cb22493c1' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -26127,7 +26136,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: 'e04335cb107a9e4e0d095b1eda2a486e0d9f776f' }, index.h("div", { key: '0936b472a4bf39e70bd65439b5a21e411e1c5e30', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: '4c738d14f1b351a4b27430e11d15286049e4ce32', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '7cbccb6ef41aa059e9b86b8b45c69e4f52fac936' }, "Advanced Properties")), this.expanded && (index.h("div", { key: 'c1c3c78c9163d05cb57e77da86d25745b6235798', class: 'field-set' }, index.h("ls-props-section", { key: '8fc2daed33e47c25c7291293cd679407393e91c7', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '3bf4ed75b4811296030c4819833c5fd60716fb5a', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: '73a9ec3f75781e20eac4773a607d255f8de6c283', sectionTitle: "Ref. Name" }, index.h("input", { key: '032596480f059222041d16abdf562fa3ac4e98f9', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '96741d6f46f81e493cc5f922081656526998705a', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '5af240fbc48e1b4a378e0d50af3f7ca6c9a90d80', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: 'e851e62f7ed7802bf8df89d169892a1f440f9b8b', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '7109c3f443a374fa34827eda568f53aa0afb8215', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '9636e53c37ce3b7cfee5b8b949c253a9fdcf8f73', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '68234f91c525bf0cc94e95dd25a1537a4c4a73e1', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '5875edf841f10674d0e915d046f01a1d1b699832', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '81bf61fa9dc6456ffaa6e7d40e3920424f2dff92', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+        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 }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
@@ -26140,7 +26149,7 @@ const LsFieldPropertiesAutosign = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'f5cd10d54372acb1b9b187fea8457f3c5d579f65' }, index.h("div", { key: '1a6ee3c380d3cd4f863234612e5e2118a2e484e3', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'd3b054bc21587267a8635a7ee5bf725a6df68344' }, "Label: ", index.h("input", { key: 'a0ce92e375258ab4d0c9e78839f62277a3e2e456', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '0114b12443dab1a9beff3400bc01b7e1a31dea0e', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'b069741ef52f91be222f2a37bc94d60eb73de678', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '0da324c73affff959ed0f105de54b3592e9a2d56', dataItem: this.dataItem }), index.h("slot", { key: '79a362ef43d193bb3693199764989eae5c337579' })));
+        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' })));
     }
 };
 LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
@@ -26160,7 +26169,7 @@ const LsFieldPropertiesContainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3217e41e198024094892d42bd724ea0ed1c23870' }, this.tabs.length > 1 && (index.h("div", { key: '5a5311e9c3266756e4deefd4a041d52686894003', 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: '5b854a884a10f6c31dd0d226e240d9ba5361a895', class: 'scrolling-container' }, index.h("slot", { key: '81d65a66f698c227148b70a96d8848a8af832957', name: this.selectedTab }))));
+        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 }))));
     }
 };
 LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
@@ -26173,7 +26182,7 @@ const LsFieldPropertiesDate = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '1e22861bedca97ea7f6781cbc85f1987136d10b6' }, index.h("ls-field-properties-container", { key: '33f657508f9bbd176774130da47eac3fcde89a0e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'db5c54e468a03df122c361fb9fa49cf4f00e1c67', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'c3f3446c93a170214eb629ab1724c85297d151e4', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'e2f2f37ede68bf6551a8f13105bf01fbd8374943', dataItem: this.dataItem })), index.h("div", { key: 'faeb5931d9a822ac128f404dd5471d92802069fc', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '4ce5143bde21082793d494c4397dc585786a2e2d', dataItem: this.dataItem })), index.h("div", { key: 'a60a20c678a2c3f62666f2d2dd9d0d5178272c3f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'b0ce7720a9476c4bb909a270fd28d9d2a60043be', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e9c1b45725c09f9432612e5ea064da4899c4b3b9', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
@@ -26186,7 +26195,7 @@ const LsFieldPropertiesEmail = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '52d5e052255ddddc5df7ef6d57d21ce764893819' }, index.h("ls-field-properties-container", { key: 'bb6954deec48f8174b46570efc472e16a580c705', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '954ffa1a3c8f867032de9d8641944157eb264267', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '5bcc170c47f40053ac5a5dc502cb9fb5143e1ee2', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '8cae67f476d1f4c876ccabc592f94fe9f51c6c30', dataItem: this.dataItem })), index.h("div", { key: '251f9e4b9564c23150625b2e7cfcd528b4e7247c', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'cc7d18178466cd04280e97819c84a1d8221ed913', dataItem: this.dataItem })), index.h("div", { key: '4b2ff365536cf21d4a0a39e722dbcb6ac663294f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'a8dced9cdac3f299d90273f6f9d9a65f2ac4938a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '27647d935e13bde357c1b5a921863712a76d2bd8', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
@@ -26199,7 +26208,7 @@ const LsFieldPropertiesFile = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '3447b285dd9911fb7f3472686bb0e0d5441d587f' }, index.h("ls-field-properties-container", { key: '1d92794e7327095f427dde753586b123373beffd', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '2e63d9192ff1903d7e0320ddfa575044b3ed614c', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '8b24f2ad4721b9b65f261e264f394c37099aeb4a', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '8930b2882f00476b4868b1a8ae61387ecbf78660', dataItem: this.dataItem })), index.h("div", { key: '02e4e6045b40ca33ebe1f086b38e2db3f448252a', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'ac7f4393d9d1580631ead29dafd253976c55d873', dataItem: this.dataItem })), index.h("div", { key: '279073c834a47ce7547470b75b1c9e76938281ca', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '0d971c43751b55c691584d4ad7a8dc68d73cda4b', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '71833e73a8bd3f831a820d8941712454f5cd5e13', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
@@ -26212,7 +26221,7 @@ const LsFieldPropertiesGeneral = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'c1d347df418aa633a5ceb170b2df1d75c9f9820d' }, index.h("ls-field-properties-container", { key: 'bfa4b014acb6bdf27813fbd71cddd27c46f6c78d', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'b1349ee15a5e69638b90392de2835c0ae01f1eab', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '92b3cb1b6ffa80e8f056aa1e4be601c363c82f3b', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'a6127d943ef5ddc178046f5c889c4a2b079363ad', dataItem: this.dataItem })), index.h("div", { key: '348114e94754cb7d468c37f2b1ab68c188a8d4c4', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'f336c77e0513a2d4436491e8747654574f62625e', dataItem: this.dataItem })), index.h("div", { key: 'e31078730330edbe00af55f7092dec184fde09d8', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '4c7fe89adf29c33942b67523936a4ebca5a0035a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'dc3df9a1b51e3c64baa4c2789220e79d9b29ec34', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
@@ -26225,7 +26234,7 @@ const LsFieldPropertiesImage = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '65fcda38b8853ee3179127e4ea0217a37abfe0bb' }, index.h("ls-field-properties-container", { key: '90d24d4b4b3c1d4c7f207a94e41d6bb76acdc866', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '3b81783649e0244fe50a79cd490bd9f22342af5b', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '679cc159e883497534f571c44bfc7c332a0a7c4f', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '6c94b5a407cab02f396b750ec4e40042581cfb4e', dataItem: this.dataItem })), index.h("div", { key: '1cfc7556b21007b6cb5acbed06a4b5995a5253cc', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '8c99c5144493f8af38caa1feae13c6e79d947c70', dataItem: this.dataItem })), index.h("div", { key: 'ad0a459f39ab8b047ce1132380dde335b6d2f82f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'cf7156a67000cf747d75d742430623ff9a70d604', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'c63053937d6f5c226b1588d90fe046be7c477f4c', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
@@ -26279,14 +26288,14 @@ const LsFieldPropertiesMultiple = class {
         return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
     };
     render() {
-        return (index.h(index.Host, { key: '8e01113dfd6e869c2e4384badde7abf844a59bd6' }, index.h("ls-field-properties-container", { key: '1c8ddb63db0ed82dcb226f1d2fd9b9e62da5254a', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'd3b48632b485c523481445610797523ee454446f', class: 'field-set', slot: "content" }, index.h("div", { key: 'c1e14f475a99f38c338357942b8e7dddcf7b6ace', class: 'ls-field-properties-section' }, index.h("div", { key: '8cd53e48493f5623ee90f277f0e6897524758994', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'e62e5a33f1e16fdc2afa3833608f3436102f9e14', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: 'a339d8c9ef5b466fc01b886a960f3807d866b58c', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: '179e0663f26737286e97c25178442993e8d0feff', class: 'ls-field-type-wrapper', style: {
+        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: {
                 border: `1px dashed ${defaultRolePalette[this.allSignersSame().signer % 100].s30}`,
                 background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
-            } }, index.h("div", { key: '1719e7e0774a20de2cb3691fa7de2026a4ce6d80', class: 'ls-field-type-inner' }, index.h("div", { key: '667fce963656c13408f6f6b65e6694cfe1386b1f', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: 'c0930f87d97720730931cca5fa78f1e611bd01b8', class: 'ls-field-type-inner' }, index.h("div", { key: '4f52574596bcc163f05c19d48b45c395211fc72e', 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: 'a8c640a6fa13fce2bda0dd793cfcaf9fd6970ada', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: '52535bbb0b491208a943366eeb299c08044fecf2', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: '9f4a802d3aef44515af038fa205cd8cf0e166670', class: 'ls-field-properties-section row' }, index.h("div", { key: 'aef637d718fcc86d09beec5bc61a1f4bc1026f81', class: 'ls-field-properties-section-text' }, index.h("p", { key: '04072003b28a9d26ee5fcffce33841205dcd0d0b', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: '8ad80d4cb6e1ce8f0799b9b1a748afe3483dc032' })), index.h("div", { key: 'a3d7debfcce83dbe780be589e8c31c4076944d7f', class: 'ls-field-properties-section' }, index.h("div", { key: '80d46023d84a9dd18dec3635c1150766a535c81e', class: 'ls-field-properties-section-text' }, index.h("p", { key: '7c4bd36e3db0ed7994dedca64a84edf7432287d9', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '3775eeebecedaf2418c054c9b9de49e71b3d28ca', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '96fe39c3e74107fe42e218a2717dfb3276d002ed', value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '0555cf3dbb8536156215f57dadccefc68c3b3625', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'ff4958a61f1acae6795972553309339e2a98e591', dataItem: this.dataItem }), index.h("ls-field-size", { key: '112b409cf7f4d4f640e176cf520693144ae578a9', dataItem: this.dataItem })), index.h("div", { key: '72a6b6fd1b9aedd78d3871d9b34edc5a45aad1b2', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '2e3a5a9c8704c1c3cb7532915a79ac85e74ade2c', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '1f86b76cc6dabdd863ace8a6a096f62e4212e6e7', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: '79650c95fd6e75b8546fab91a7a333ecdff824a4', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e6d6e6ccdf9c4c022fa66af4f3c76936de0d44f5' }), index.h("slot", { key: 'e38324a7b2f3c423aa47b9d8032b526d8adaa7c8' })));
+            } }, 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' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
@@ -26299,7 +26308,7 @@ const LsFieldPropertiesNumber = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '9fe2166df062942e894e016d5839925fa40a04ca' }, index.h("ls-field-properties-container", { key: '135151f1e46176a7b95535601e3f342ef1dcbb57', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'c54c48dae4699eb242dce742e710e15f6fb5ce94', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '5c1ef6ba4766d28aa1067ac60f55dfcd6398851c', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '19f1abac68624bc164c1997980739525d5eb51bf', dataItem: this.dataItem })), index.h("div", { key: 'e03a15d48bdef0e1d2d1862ca8ee867bd796306a', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '417545b5b1ec5bcf319f57b65d8e9821d0096dfd', dataItem: this.dataItem })), index.h("div", { key: 'f23bd37a4c8352d7f924c6ba880642cf4b7ffd35', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '366af897d35122d1b58c74564a7e5a1e20ac7821', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '04ebe9615649031820606beb1722b010abdd8a57', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
@@ -26312,7 +26321,7 @@ const LsFieldPropertiesSignature = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'bbd7958209af66fad48be99886a08046b1d3edfe' }, index.h("ls-field-properties-container", { key: '42f0138b67b01dc2040c6ec00b28609fecb110d6', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '74780e1241424f10380cce6bd4d5eba94c6cb27a', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'a0f17edf6f21881dd64cfb76666470c70f804d20', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: 'b710aa53e780aef37941aaa93072ed8f73dbb8c4', dataItem: this.dataItem })), index.h("div", { key: '76a0038059b261799a16796809d538cb7d7fdff3', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '83f319ee972be45c14304f0bf876ef2173bf84f8', dataItem: this.dataItem })), index.h("div", { key: '201a99c300a95f410e7263944781a4244b16f5d3', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '55b91cd0afef3ff8cdb404393d8fe077752f1a6c', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '8d956946ac162915524f3a5b4bdd529a8374632b', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
@@ -26325,7 +26334,7 @@ const LsFieldPropertiesText = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '1ff0b9fc2ac1eb9f00f4bb6adcba90f6ef94b41b' }, index.h("ls-field-properties-container", { key: '3eeaa94048625aaa8723f599c253ac9cd2f5e4d7', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '07ab69b40b93e612d1c781d40c839bf9b713c91f', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'c50cabcc991c42c4779587ec2f85dccf20652229', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '76f8fd906a824d920c62a5f4babf068096d34507', dataItem: this.dataItem })), index.h("div", { key: 'bb799ad6adf4d91fe821a2c8a7a708657040dcd9', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '2e6574c20708f6b05abe2c0b8e47119e5cee5461', dataItem: this.dataItem })), index.h("div", { key: '5661298807f42e57eede3bdd6d803100b0691bf0', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '41af8451c9259567b488c7f43e7efa72bada6bfe', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b3125a7dc5634cde08cefbcef517f67eab0ed2c6', dataItem: this.dataItem })));
+        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 })));
     }
 };
 LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
@@ -26352,7 +26361,7 @@ const LsFieldSize = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'fe7f6177f20212521a07763893289f7be5f7669b' }, index.h("div", { key: 'd084845c8c0123e0475352a40ddbdd4a6d545351', class: 'ls-field-properties-section' }, index.h("div", { key: '4ec306b1562ef35febdfc8a128a4ad9311aa5e44', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cfc8598761da8b13cde7cc5c52d15c3dfddb7a25', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'cb52c02f6f3075e2a0e016b1bfc5ea3e527391d5', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '5445710a9a9c6de6113da6441ad7723a32f25d6a', class: 'button-group' }, index.h("button", { key: 'a026eaeb8d745d5661a0d330b3cbe2bc69e05101', 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: '64925672bf84a5bd6ad67d73813518a325c94d41', name: "field-scale" })), index.h("button", { key: 'a01eceaf15d1736256fb873261e1af1179fd9b7d', "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: '11b7c0c30e517be959bccb11e146ea464b936891', name: "field-match-width" })), index.h("button", { key: 'd446980fdb27663ec48ff707ffafafede8699b97', 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: '3bc119fe08cc4679af9628c59d8e440e377f8454', name: "field-match-height" })))), index.h("slot", { key: '793f9eda29affc698ac78efdd86910f9f06c1ae5' })));
+        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' })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss;
@@ -26387,14 +26396,14 @@ const LsFieldTypeDisplay = class {
     fieldType = 'signature';
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        return (index.h(index.Host, { key: '068526be7934203ee56f74ae0afd46d4385b7105', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: 'c522f5dd24e8cc788fce078c745cf50dc8e897a1', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, index.h("div", { key: 'f093de3ce062c53a8365478e96228f103f7eb0a7', class: 'ls-field-type-inner' }, index.h("div", { key: '34ff8888c2e4f96483eee7ecc0819dae71215b89', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: 'd775a1ef4bbc8b4fe4abfc0419c8abd91b0f318b', class: 'ls-field-type-inner' }, index.h("div", { key: 'e4fdf23f7703efaba1ce81f70f684196079d6b14', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, index.h("ls-icon", { key: '163a6f209fe9dc99da10bbf58ad45182bc0e8bc3', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: '98489fe139e173c06ae5e41adef2c23ddfe7e6ea', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
+            } }, 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)))));
     }
 };
 LsFieldTypeDisplay.style = lsFieldTypeDisplayCss;
@@ -26444,10 +26453,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: '0cd448314953cf6179cc81492c639e465090c25a', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '4e149c3aa55a0530192754d91e9e9b3812e1d910', class: "formfield-top-elements" }, index.h("div", { key: '63ef5ae63ffb895cd6de897d170d2f6f72d6951f', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '3975080a1c2ea0492bcd662444f1c0b19e37ed7e', name: labelIcon }), index.h("label", { key: 'c9b0dc98a25a48613ee4c8648f55887a7e5959e0', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '81adbc2317283d037179e7394be56bbe3e462fe1', 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: '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 ||
             count ||
             countMax ||
-            (descriptionText && (index.h("div", { key: '27431f59462bc1756965bd432b87f2a218121b03', 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: 'a6b52057db9f859de90657e0ac769cf728199a3a', class: "formfield-count-container" }, index.h("p", { key: 'f54af70259edcb1a30028266b75fe78c06ac9331', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '68bfc2228d5a7e9bf11609f6ae8171b14138f45c', class: countClass }, index.h("p", { key: '10942a7e5ec65121df303508eac9bfa0c30aa305' }, "/"), index.h("p", { key: '8d181cef927143961908f6951a489138b5c0b5f2' }, 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))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]
@@ -33479,7 +33488,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: 'c072e06bf5988d6d94338a53519d26ff1855c1f6' }, icons
+        return (index.h("host", { key: 'e4841f50e0143e588e981f1a115a483bc7226037' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (index.h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -33498,7 +33507,7 @@ const LsInputWrapper = class {
     leadingIcon;
     select = false;
     render() {
-        return (index.h(index.Host, { key: 'dc4c4f847b5fcb665c6708ccf164584d05579f99' }, index.h("ls-icon", { key: 'a01ed2d34c83cf7645d7e277965afae4b7377dd9', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: 'adc8fdeef9869b93e7c22aa15332c047a48723da', id: "selectorIcon", name: "selector" }), index.h("slot", { key: '98a7b54a752cd6d6af83a81a4e596ed199ab3c35' })));
+        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' })));
     }
 };
 LsInputWrapper.style = lsInputWrapperCss;
@@ -33544,7 +33553,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: '992b6b2b02f343f2ee3e33827f6b5868b2fed4e2', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '943aae095a25962aa7a7f02d13afd3ed8e55bcea', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '25a5cdba638ac0b7d4bb14b593e1970be844a4c0', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '4e90fd096fbfe83cf60e68bede027aaeb06d8275', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '04226f9f85c668e88cfcabef59af5200d4b73ed8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: 'b5151af6119d6cc220bd4eaa8c956c55eb8516e4', 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: 'bf5639c1d68709590300bb96f550a4af6486b8bd', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '5aaa2cd541ff383b3256189026f310ce71473503', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: 'bc378aff0e9a70991e0207ad626db5bf324617a0', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'da43b73f8891536e9534fcc1c2bce7ddf8cfb26e', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'e9e4d5fc3e5a6a83843d060e628118db8162da3b', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '60ba658748f82f8c6181c46cf66a748ee3ca0300', id: 'buttonIcon', name: 'plus-sm' })))));
+        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' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss;
@@ -33599,36 +33608,36 @@ const LsParticipantCard = class {
     }
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (index.h(index.Host, { key: '90813bebbb0d7afaa75c2d47a8539ef1458574ba' }, index.h("div", { key: 'b2612ebb13717d3cba368d07b66a669e7dd30fe7', class: "participant-card", style: {
+        return (index.h(index.Host, { key: '768db475f548dd2185910c9419d040e796e75529' }, index.h("div", { key: '3e04b8b4fef38537f2d8d4ac16fc244509f4eb61', 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: 'ba1249b879314253cabb87cf676dc7a1f7c2c883', class: 'participant-card-inner' }, index.h("div", { key: '458c04c0c16f4ecd2429d344e12f8c83f3d79439', class: 'participant-card-top-items' }, index.h("div", { key: 'a99faeac32d7a6d291c5be61489c3ce4f3927e57', class: 'role-label', style: {
+            } }, 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: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: '7f2a13c28f716a82b82a5f04d4d9a55764bc40b5', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: 'a2da3f741e8f164ef3bf98b1cc1e4cf5b60c2f23', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '8bf5174869435333c7e26f8d232268b4b1fa6c69', class: "innerButton", onClick: () => {
+            } }, 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: () => {
                 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: '7842f3d631fc1d870f7ae920cc9892e6e1629373', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '3068ed3a4be64927d2aaafd3196bcddcb1626287', class: "innerButton", onClick: () => {
+            } }, 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: () => {
                 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: '815e9acb881a3ff596a27c83a478c474624cbb24', name: "arrow-down", size: "18" }))), index.h("div", { key: 'f783fb0715a96d797a33247b3c05a376900f2aa8', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: 'd915728e5c6fae1aa3e21b87772f50ae1add74a4', name: "arrow-down", size: "18" }))), index.h("div", { key: 'fb5c8efe0610c9bc1a92fce854383ddee064b414', 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: 'bba4cbb817e91e825a16481a4bfd80c9b2beff2e', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: '8a332b44bc698608f61a36d8be4d1b0861d26d0e', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '306be44578bb974d9791e6e70bdd239d9a583b07', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: '2ebdf89cbb754ee7d1c960742e26b92ffbb17e03', 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: 'fdfb0c796ccfd4fc7f03a033f6cbfc9a5e41964d', 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: '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 => {
                 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: {
@@ -33639,7 +33648,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: '93aef965fe2e9977a2789508ac486f46f6538dca' })));
+            } }, 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' })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -33688,12 +33697,12 @@ const LsParticipantManager = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'fdec2cf424e6ac9bd8845c819644a4a694a4f037' }, index.h("div", { key: 'e481f226b431d469582a4a4e03ac7c0e085bc162', class: "ls-editor-infobox" }, index.h("h2", { key: 'a9af00c32fa3da719ee25dd39cd5283d10e5b5d7', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '967ed02d5b0da04bd7a79a1d75a1a31d7b8a187c', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'f8a78a0232d44d34469d9e4d1f8dc3fabfbecb62', class: "participant-list" }, this.template &&
+        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 &&
             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: 'db2941a9800fdfb14a8f54bdc927eeb9bdb9e081', class: 'add-participant-button' }, index.h("button", { key: 'b8b70b202cb71d3ebfdaec390b47a8d7e4042ea8', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '7f439f448ec683cba6d6a0c69d05ad514c2e0be3', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'd735648da424f22ed025bd634ca8834635ee4036' }, "Add Participant"))), index.h("slot", { key: '0492d74ebaca1e74bdc28395821f2faafe02b290' })));
+            })), 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' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33737,27 +33746,27 @@ const LsParticipantSelect = class {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (index.h(index.Host, { key: 'a9194042094f1851b4a6826f9887fe5eed65d227' }, index.h("div", { key: '6af2f643542a982bdc0036d94acdc7bdea6641ae', class: "dropdown" }, index.h("div", { key: 'd37b58a2b4add18286e66e1a18d9470b5c34c03e', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'a95d70fa2b887486746c8c8b525eb753128b3546', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'df3b852f41ef39022c50407439201f82f7270531', 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: '64ff2545b71aefc500e41f47bc194e9f11d73f98', 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: 'bf2a824f74ab5b473b7d938087ec0f4025bf74c4', 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: '072da80c707d1350114e2b5c1b196561b98c9d43', 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: '5e0b113113055f7a4e8f09e6b73e8b940c7fd25d', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '8f21db74ba5ba69170e4652f4d45ffb4195e3271', class: 'selected-role-label', style: {
+        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: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: '3c600d4b48273366e87ee1ae3d618cc33b663572', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: '49adb8e1055797953677f12c0cfaabb8191e2ebe', 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: '0d0327aff5564669b775c1f5661a48a033eead35', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'c122f79923a199c1148bf67f760776a0bf9c6a26', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '50ab0050cc1d633360d68ef033ff36953867e0be', class: "dropdown-list" }, index.h("div", { key: '55051cfca0375705883963ea4de24e02b70abb02', 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: '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: {
                 '--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: 'e7dbad92c3c450ae8945e38813e161af34922709', 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: 'ead01a1838a0eae309c73c890df49b0af10d4ffe', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: 'c452e6023dd90e16aeb5942e6f941ee8f1b31d41', name: "user" })), index.h("div", { key: '9a7158619df3fbe2a4566fd9cd3f9f0c1d74c71a', class: 'role-text' }, index.h("p", { key: 'ed48bcacc4651af9d40c880c2eda3a02f40f81a8', class: 'role-name', style: {
+            } }, 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: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: '7ff63fca05d7172b50bf49c48003e4f5cab14e7c', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: '9528211744fbc4f3eed911835fdb1036130fb1eb', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '31ca94a225ed030fcff70115e3b91295053f8713', 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: '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: {
                 '--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
@@ -33769,10 +33778,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: 'f9a3228f7545d55bdc923edf6189afccbcce5d42', 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: 'b121dc76fbb72993b494bb046f564f0689208984', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, index.h("div", { key: '9f71dc813a5a0b2cff5570bc3706e53179c0cb88', class: 'add-participant-icon' }, index.h("ls-icon", { key: '8d08c6294038f852831c7d37d13aaf580faf5ae3', name: "user-add" })), index.h("div", { key: 'ae50fe55de6cf1c3138933daed493e96e5563808', class: 'role-text' }, index.h("p", { key: '920329e6bc79ab6f78b5231ce38e5f152ff9df10', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'e221d8dbd281aa98db215a5f2ae945f976585c81', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'b1bb7285d2b3c6738012287c0bc4ab8708c5b63a', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: '9e3190405ab4374c72af3b71a84d749bd43d7994' })));
+            } }, 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' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -33787,7 +33796,7 @@ const LsPropsSection = class {
     sectionDescription;
     row = false;
     render() {
-        return (index.h(index.Host, { key: '2faf49980bc5fba08001d2aefacb8c860d6ec5f3' }, index.h("div", { key: 'c78a3d1081c8155ff52c46f5cb02313b47d46e76', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: '1bc6ccf99f63861b20cc81da5d082f4e8c9e3de4', class: 'ls-field-properties-section-text' }, index.h("p", { key: '05769627dfad040aa9379108aa137ee6b5516565', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: 'bfb348c75ee3abc7c4f82b050298a5eaac059cb1', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: 'b2d68495d2a96bb846d4e3f82c69422c70737829' }))));
+        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' }))));
     }
 };
 LsPropsSection.style = lsPropsSectionCss;
@@ -33808,7 +33817,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: 'df81d9ee2937349710e752e6764fe178d28770a4', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '5e937e2c650db4890eb4a744950be6393af337b8', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'cfd8bec26223bbb063f8f52885dce4518429e7c7', class: 'spanContainer' }, index.h("span", { key: '08b23397c12c75b24e6370f8dafd1482d20ceb9f' }, icon && index.h("ls-icon", { key: '8560befe7a54b8dbd9a6708ad72fd91180e4c6e7', name: icon, size: "16" })), index.h("span", { key: '9982593f10c009f76fa1ede25b30e8b7d097c7d8' }, label))));
+        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))));
     }
 };
 LsRadioInput.style = lsRadioInputCss;
@@ -33845,7 +33854,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: '61f68a25588a4c23c80b33416aa266ea296fccc8', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '5496d07eb72db24c7c1287a94f7183f95f1084f3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '48e7f5c85a0f3b100f97773eb3d7fcad38341bcd', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '78619bdc17b5039e8fb8888b19e900ac62d52995' })), index.h("div", { key: 'e25c833bbab74e2a5a2c907a2530ec412bcfe97c', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '8d5f329c111b23bc7f1e8550bd7f3b0195e54703', 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: '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' })))));
     }
 };
 LsSelectInput.style = lsSelectInputCss;
@@ -33889,11 +33898,11 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (index.h(index.Host, { key: 'ba7a9b6dd61066ffa2303a46bf7bed966dc39965' }, index.h("div", { key: 'af1516e85ef08f2f9fe68bc6290a7663aa8d141f', class: "status-bar-section" }, index.h("button", { key: 'a551e90f9a5653cbd0f46458d90b4af97c4fd9cf', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '791e67a3c339c609e200f876f82afbad9cade5d1', name: "zoom-out" })), index.h("div", { key: 'ae0d62b8d3b2b1d9b3c6bb7da635b55d4b79b9ac' }, index.h("input", { key: '0a24e800e9e88cac41a73e679264f8be9006eeb5', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: 'c1c81b98b26a4a532a47b86e0a650cfbd579d8e0', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '9a0e28fd5865d68e5728145ee1edc60b6ad5e504', name: "zoom-in" }))), index.h("div", { key: '99b435f71790c471fa427debbe8b4a736766cac8', class: "status-bar-section" }, index.h("button", { key: '8eeebad85d1c3723ee7a771c4f2fc0e678e98017', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '928265d68c6b58820b306ac1f33e9874432c52e5', name: "fit-width" })), index.h("button", { key: '3236c8efa7c2eb04206d7a9af0ac7d2ab628a5b2', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '18d50f62ebb30e3da0ea39f42eea2a27e2b7027a', name: "fit-height" }))), index.h("div", { key: 'c9217422a77b2082dcf05563ea65966647bb034c', class: "status-bar-section" }, index.h("button", { key: '1c05b14a0efa0e3082bab21f2e199cf55e2e6958', onClick: () => {
+        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: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '511ba9eb7235f4deb704cffd025e27c7bd475f4a', name: "chevron-left" })), index.h("p", { key: '915e6c05fa12edffc0cf14a57e5b658ecc97a24d' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: '936ebeaaa6b9f8d8ae9e8c0a97a575a6ea52b6fa', onClick: () => {
+            } }, 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: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: 'cee9e4701734bb03cda94c2b655db925f7fc2b64', name: "chevron-right" }))), index.h("slot", { key: 'b6222b81c3b0fdcfc7aa8db886a2dcb44bd48a2d' })));
+            } }, index.h("ls-icon", { key: '3cfc0baeeb1cf6325d2a2de4f794e9a88f98df15', name: "chevron-right" }))), index.h("slot", { key: 'e6e28000cb9b81b4bacec56c95962b367f3b3049' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
@@ -33939,13 +33948,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: '8f42e11e68b1d066125e5e7ed73a6a42dff8df62', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '729361c21d5280000da27a01d87ee01e33a735fd', 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: '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) => {
                 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: '2ac5022b5561a3a2bc1fc3e26e34f810b77739b6', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '2d56926abe0b2d76e20615f34ebca9e9fae6670b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'deae6d59578485f95ba27b2552302f2821b705ae', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '13b4a9b396bd0b0e71f87181571c09eb87463702', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '60dd7e81dad2c5670c26ddb75ed797d2ebf0fdc9', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), 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 })))));
     }
 };
 LsTextInput.style = lsTextInputCss;
@@ -33981,7 +33990,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: '1152062c81e89009b6cf1ebe00a99bde6a62a9fb', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'afe57dc32bafc445472857b1c4dfabb3a83007c0', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '32f1dfbe80dc92e10b14ba1c1d6f451dce6ab2fc', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'ed7814be4900b60ab4b83336e828d4393e1a32d0', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '0a1a2656f1eccb53b865985503c33a683df5e825', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'abcce2d4d5cd7fda7d2afdb850a1b06427004ca9', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'a781e4073f217c6485cf1eddbcc786352f072d16', id: 'buttonIcon', name: buttonIcon }))))));
+        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 }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;
@@ -33999,9 +34008,9 @@ const LsToggle = class {
         this.valueChange.emit(value);
     }
     render() {
-        return (index.h(index.Host, { key: '7a8b074e36ff103be88ac5896295dbd14e2ad43a' }, index.h("label", { key: 'fb962a6c7458e1a8d23a99aa6d1f3199920124c9', class: "switch" }, index.h("input", { key: 'df2fc16a06324e88dc18653fb2dc6fb23b010d8a', type: "checkbox", checked: this.checked, onChange: (e) => {
+        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) => {
                 this.changeHandler(e.target.checked);
-            } }), index.h("span", { key: '8c13337c41efdbcf73a92bacee0e751a7d876641', class: "slider round" })), index.h("slot", { key: '074fca0f6b2fc003697d8d033b5a6282fcd111a7' })));
+            } }), index.h("span", { key: '8fd5cd6aadce53fcbb3250db520a2678870da632', class: "slider round" })), index.h("slot", { key: '39608b536c127892c425f4d2c634ea52237e21de' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -34050,7 +34059,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '74a143b58b3a573ed20b2b88446a5eccb657c0a0' }, 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: '2893f9427ccfa30fe982fe3e1b72afe5fdcaa93a' })));
+        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' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -34104,7 +34113,7 @@ const LsToolboxField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '32bbd9091000893a5bfd55d44d029ca6e7dfa485', draggable: "true" }, index.h("div", { key: 'de789318b2d75e95e52aea4c88ac94ea31bb1ba7', 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: '708c2bae731ddc757e27459ea4068326834fda32', name: this.icon, size: "20" })), index.h("p", { key: '1c0024be050c892e3c459eef47cc74c45dc9fda3', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '35a9525fc7cfc0a47f4214c1bd7165fe8621f15c', name: "drag-vertical", size: "16", color: "#787a80" })));
+        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" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;
@@ -34119,14 +34128,17 @@ const LsValidationTag = class {
     validationErrors = [];
     isExpanded = false;
     render() {
-        return (index.h(index.Host, { key: '831f0d525df46dc73cdad43da4dc836ef7d5cda0' }, index.h("div", { key: '11768cd66d0f20bdd9c1dba7f75197ae36d4adca', 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: '315f7789dac5367aaaecedb8f704aa5d24631563', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && index.h("ls-icon", { key: 'fa4fb38503e8947c316dfe5425bdfd06e9771dc9', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.isExpanded && (index.h("div", { key: '54023a5567a1f4c76a91035cf02606695900dc60', class: 'field-dropdown' }, index.h("div", { key: '4bf0754f860db5794dd49b47c17bbe6543d161ad', class: 'dropdown-header' }, index.h("h2", { key: '40c01887fff3d614faa1287bb4dbf1e4448c35b5' }, "Signature Fields Required"), index.h("p", { key: '311e124d50204efeabdb4e1350a2ab6dcbd659b6' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => (index.h("div", { key: idx, class: 'required-field', style: {
-                '--field-background': defaultRolePalette[field.role.signerIndex || 0].s10,
-                '--field-border-color': defaultRolePalette[field.role.signerIndex || 0].s10,
-                '--field-background-hover': defaultRolePalette[field.role.signerIndex || 0].s20,
-                '--field-text-color': defaultRolePalette[field.role.signerIndex || 0].s70,
-                '--field-text-color-hover': defaultRolePalette[field.role.signerIndex || 0].s80,
-                '--field-border-color-hover': defaultRolePalette[field.role.signerIndex || 0].s60,
-            } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: defaultRolePalette[field.role.signerIndex || 0].s60 } }), index.h("p", { style: { color: defaultRolePalette[field.role.signerIndex || 0].s80 } }, field.role?.name || `Signer ${field.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: defaultRolePalette[field.role.signerIndex || 0].s30, color: defaultRolePalette[field.role.signerIndex || 0].s70 } }, field.role?.roleType || `Signer ${field.role?.signerIndex + 1}`)), index.h("ls-icon", { name: "chevron-right" }))))))));
+        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) => {
+            const pallette = defaultRolePalette[field?.role?.signerIndex || field?.element?.signer || 0];
+            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" }));
+        })))));
     }
 };
 LsValidationTag.style = lsValidationTagCss;