legalesign-document-viewer 0.2.11 → 0.2.12

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-DqDUg8D7.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ls-document-options_43.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"_group":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-document-options",{"template":[16]},null,{"template":["selectedHandler"]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[16,"data-item"]}],[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[4],"template":[16]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]}],[257,"ls-participant-select",{"dataItem":[1040,"data-item"],"roles":[16],"selectedRole":[32],"isOpen":[32]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028]}],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
+  return index.bootstrapLazy([["ls-document-options_43.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"_group":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-document-options",{"template":[16]},null,{"template":["selectedHandler"]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[16,"data-item"]}],[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]}],[257,"ls-participant-select",{"dataItem":[1040,"data-item"],"roles":[16],"selectedRole":[32],"isOpen":[32]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028]}],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -20000,6 +20000,20 @@ function matchData(data) {
             participantManager.template = this._template;
         }
     }
+    else if (data.event.action === 'swap') {
+        if (prefix === 'rol') {
+            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+            const obj1 = data.event.data;
+            const obj2 = data.event.data2;
+            const objindex1 = this._template.roles.findIndex(r => r.id === obj1.id);
+            const objindex2 = this._template.roles.findIndex(r => r.id === obj2.id);
+            const reorderedRoles = this._template.roles;
+            reorderedRoles[objindex1] = obj2;
+            reorderedRoles[objindex2] = obj1;
+            this._template = { ...this._template, roles: reorderedRoles };
+            participantManager.template = this._template;
+        }
+    }
 }
 // Utility function which extracts the type from any API id
 function getApiType(obj) {
@@ -24403,8 +24417,8 @@ const swapRoles = (roleId1, roleId2) => {
     return `
     mutation LDVswapRole {
       swapRoles(input: {
-        roleId1: "${roleId1}"       
-        roleId2: "${roleId2}"
+        roleId1: "${roleId1.id}"       
+        roleId2: "${roleId2.id}"
        })
     }`;
 };
@@ -24539,6 +24553,7 @@ class LsDocumentAdapter {
                         query = deleteRole(obj);
                         break;
                     case 'swap':
+                        console.log(obj, event);
                         query = swapRoles(obj, event.data2);
                         break;
                 }
@@ -25319,7 +25334,7 @@ const defaultRolePalette = [
 ];
 // export const defaultRolePalette: string[] = ['gray', 'blue', 'green', 'yellow', 'purple', 'teal', 'pink', 'lime', 'red', 'lightblue', 'aubergine', 'burnt', 'trueGreen', 'indigo', 'cyan'];
 
-const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}.required-icon{position:absolute;top:2px;right:2px;color:var(--red-60)}";
+const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}.required-icon{position:absolute;top:2px;right:2px;color:var(--red-60, #f64a44)}";
 
 const LsEditorField = class {
     constructor(hostRef) {
@@ -33469,15 +33484,32 @@ const LsParticipantCard = class {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate");
         this.update = index.createEvent(this, "update");
+        this.opened = index.createEvent(this, "opened");
     }
+    get component() { return index.getElement(this); }
     signer;
     index;
     editable = false;
     template;
     mutate;
     update;
-    selectedHandler(_role) {
-        //console.log(role, 'participant manager')
+    opened;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.signer = { ...this.signer, ...diff };
+        this.debounce(this.signer, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }, delay);
     }
     deleteHandler(role) {
         this.update.emit([{ action: 'delete', data: role }]);
@@ -33487,51 +33519,45 @@ const LsParticipantCard = class {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
         this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
+    modeHandler(_editable) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_editable) {
+            this.opened.emit(this.signer);
+        }
+    }
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (index.h(index.Host, { key: '300399f367f4312a1a41e4042538358025bd9d32' }, index.h("div", { key: '5f693039b0dd611c617682a94ad9b490e47d4595', class: "participant-card", onClick: () => {
-                this.selectedHandler(this.signer);
-            }, style: {
+        return (index.h(index.Host, { key: 'b7aabd90b130b9b02e9fb77863e7a23bf39569d0' }, index.h("div", { key: 'ed48eaad33654c3b739211e6fdc288001c5052e8', 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') }, index.h("div", { key: 'e0091f70bd9dd2d992b7b929930326af9fc07e8d', class: 'participant-card-inner' }, index.h("div", { key: 'e954256599d9189b68b50b6b75bb62a1583a5340', class: 'participant-card-top-items' }, index.h("div", { key: '22ab590f8670f502e4a38d757dd9b409ed19f450', class: 'role-label', style: {
+            }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden') }, index.h("div", { key: '16ea1a7aafb2c289610e64d2f2bfac42c11e63d0', class: 'participant-card-inner' }, index.h("div", { key: '0f3430754942b7e8c483f6b9f93723826cadf751', class: 'participant-card-top-items' }, index.h("div", { key: '231172bafc8a11fbd77c3a311e6d58fe42df6677', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: '0e314f53b07b487d7d6b39c4143bbb9d7ae98b80', name: this.signer?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (this.signer?.signerIndex || '')), !this.editable && (index.h("div", { key: '119b5fbaa16a0a9268ca77a277b108894b7e71cf', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '6b241a08436d20678b79daa30c49636bd3c17800', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '8bf3b1df5284007fb2751c35fa580769489c930e', name: this.signer?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (this.signer?.signerIndex || '')), !this.editable && (index.h("div", { key: 'df294e1256e36bc93e18c17d39941550b0b53fd9', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: 'd58e98915b131b072b5890991796856a4841e1d7', 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: '59e635917341faa1442ab316a727764dac4282e9', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '4346610f1ef79bee775b9e6b7d28434d8f522615', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '6bf124edf13502e5f005c68607de7fcbbd4bfc7a', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '9e3d3c78b4fb3e47877cb6c593b09944bb45eb2c', 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: '0d85a63b0d8441ca06ded1eda695237078597810', name: "arrow-down", size: "18" }))), index.h("div", { key: 'd14f861436b44bc43f2f46f804c785425de4cb8b', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '0bc3cebc90b1a01e49b37f18874990478968862f', name: "arrow-down", size: "18" }))), index.h("div", { key: '4233b27edf601e2687666f5f9c8daa623af071c2', class: "innerButton", onClick: () => {
                 this.editable = true;
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: '4f4dce9110dcab1f23439427bc4112acee768584', name: "pencil-alt", size: "18" })), index.h("div", { key: 'cc9d0a0ae6f7d1449d7f7d30055e1b204021ebda', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '5973801c6faa66dfe3747cc33d07d3d5d9b5fbde', name: "pencil-alt", size: "18" })), index.h("div", { key: 'd75fe687274cda0cd76742b21650cf44d67051f5', 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: '648d735c2c4647082db6e2a1a1596034963c6b25', name: "trash", size: "18" }))))), this.editable ? (index.h("form", { class: 'participant-card-inner', onSubmit: e => {
-                e.preventDefault();
-                this.update.emit([
-                    {
-                        action: 'update',
-                        data: {
-                            ...this.signer,
-                            roleType: e.currentTarget.roleType.value,
-                            name: e.currentTarget.participantDescription.value,
-                        },
-                    },
-                ]);
-                this.editable = false;
-            } }, index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'eye' : 'signature' }, index.h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon' }, 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 }), index.h("div", { class: 'form-button-set' }, index.h("button", { type: "cancel", class: "secondary full-width" }, "Cancel"), index.h("button", { type: "submit", class: "full-width" }, "Save")))) : (index.h("div", { class: 'participant-card-text' }, index.h("p", { class: "participant-text-description", style: {
+            } }, index.h("ls-icon", { key: '9caad0cdc9909dd385492749b4f33ea411bcfb19', 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' ? 'eye' : '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: {
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s100,
             } }, this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`), index.h("p", { class: "participant-text-type", style: {
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s80,
@@ -33539,8 +33565,11 @@ 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: 'dda0b0195b5058a91e9249bc3f251f6da598973f' })));
+            } }, 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: '92d60ae9f1a3ac0cb1d5eeee4565768dc4bd33fa' })));
     }
+    static get watchers() { return {
+        "editable": ["modeHandler"]
+    }; }
 };
 LsParticipantCard.style = lsParticipantCardCss;
 
@@ -33552,6 +33581,7 @@ const LsParticipantManager = class {
         this.mutate = index.createEvent(this, "mutate");
         this.update = index.createEvent(this, "update");
     }
+    get element() { return index.getElement(this); }
     /**
      * The base template information (as JSON).
      * {LSDocumentViewer}
@@ -33594,11 +33624,20 @@ const LsParticipantManager = class {
         this.update.emit(data);
         this.mutate.emit(data);
     }
+    handleOpened(event) {
+        const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+        participants.forEach(element => {
+            if (element.signer.id !== event.detail.id)
+                element.editable = false;
+        });
+    }
     render() {
-        return (index.h(index.Host, { key: '5b11da563144f62fb59e2821bcd2fd57896f7e68' }, index.h("div", { key: 'ba4d1443c0edc91eb123d3a225c5e1f9e49df79e', class: "ls-editor-infobox" }, index.h("h2", { key: '11eec7e5c1db6cefd3bdd87c7d5444f06424afc7', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '80c3e2ae3c60005ba34c7a5499e0b0c009b8585d', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '22d8aa202afc49c5fc10c85c283126b9fc557d9d', class: "participant-list" }, this.template &&
+        return (index.h(index.Host, { key: '82e2bd459c1807413172155cfaf07082b5630cea' }, index.h("div", { key: '98ac165c1f75fd872d0737e64c0d9fb1ad8eacd0', class: "ls-editor-infobox" }, index.h("h2", { key: '2746f0a0392c70cca69441d175820dc2fb7eb23c', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'd2eb1045f15aeffa2cfcb00741dc074e9010a0dd', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'a31de2f77f7b80b47d2e04d582c961bf4f272eae', 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 });
-            })), index.h("div", { key: '40f05d87af9a9be58d4c0d67bbef14285a6315df', class: 'add-participant-button' }, index.h("button", { key: '15b8d0b2e3a6f12b39cd462fab6e9cd0c3b1d116', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '7569e30b350228c6258722212624a32540231a86', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '24501b424b7266ae689ac89954d8f0aea53d12b8' }, "Add Participant"))), index.h("slot", { key: 'ff03b8dbdb614019261cf5a4ae10b5f1863ca86f' })));
+                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: '388e7c10cf74e35d386dacbb33b5b88d0ad0ffbb', class: 'add-participant-button' }, index.h("button", { key: '1cfa2e1e7e42fe3867533f138f3a8824b1e2204d', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '56e394c92824aa5aced538afc3371d568d6eabd1', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'a39870576ae072e54db0eeeb5d6b6cb5f6db7986' }, "Add Participant"))), index.h("slot", { key: '2b47e8430c82eeee25d3e698a430406fd9bb0d83' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;