legalesign-document-viewer 0.2.9 → 0.2.10

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_42.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-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[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-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-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-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-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1,"selected-tab"]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-toggle"],[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-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-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-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-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1,"selected-tab"]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[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-toggle"],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{ls-document-options_42.cjs.entry.js → ls-document-options_43.cjs.entry.js}

@@ -33394,7 +33394,84 @@ const LsNumberInput = class {
 };
 LsNumberInput.style = lsNumberInputCss;
 
-const lsParticipantManagerCss = ".label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}*{box-sizing:border-box;margin:0}.hidden{visibility:hidden;display:none}.participant-list{position:relative;display:flex;flex-direction:column;gap:0.75rem}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;border-radius:1rem}.role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.add-participant-button{position:sticky;display:flex;padding:0.75rem 0;margin-bottom:-0.75rem;margin-top:-0.75rem;bottom:-0.75rem;background-image:linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%)}.add-participant-button button{display:flex;gap:0.75rem;justify-content:center;align-items:center;width:100%;border:2px dashed var(--gray-20, #edeff2);background:var(--white, #fff);color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsParticipantCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;border-radius:1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+
+const LsParticipantCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate");
+        this.update = index.createEvent(this, "update");
+    }
+    signer;
+    index;
+    editable = false;
+    template;
+    mutate;
+    update;
+    selectedHandler(_role) {
+        //console.log(role, 'participant manager')
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    render() {
+        return (index.h(index.Host, { key: '6c04fbc73a0682f73ebe37b7cae2892d002e494d' }, index.h("div", { key: 'd131e463096f408abf00048b635cebd57176c9fd', class: "participant-card", onClick: () => {
+                this.selectedHandler(this.signer);
+            }, 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: 'ec60ae781e1f358c3667e246a6fbf14cf685453b', class: 'participant-card-inner' }, index.h("div", { key: '9846a86361a0b5f23cfa43b7e3e292a3d427f82b', class: 'participant-card-top-items' }, index.h("div", { key: '4c85875538786fb8603c332e917be496199feda9', class: 'role-label', style: {
+                background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, index.h("ls-icon", { key: 'e1859e93c7f4da493f42c886e5ca1bd957f35a79', name: this.signer?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: 'ee4104395bd2d0da3722fccdaf61f22f95d3e031', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '479c833898ecf8816ac1478c259d8a8c9a8352fa', 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: '2d7f3c8e0da80bd565db60c6b2813927270af9aa', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '8c1f5f115dbf50a02762d87c5f3f7014ed04ffea', 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: 'b34cacf61d21b7f452a5811cbb1cfa56146f1719', name: "arrow-down", size: "18" }))), index.h("div", { key: 'ab45089498c182283021f8d6ec03be092b4d96b9', 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: 'e4e00095c20c482a180a70df1fda68b08acfcff7', name: "pencil-alt", size: "18" })), index.h("div", { key: '6ebdfbf08115018173a48143bfe946bb6b7f73a7', 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: '6167a5a30eedd0a7edf968c9171d0029ab3ea6ac', 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("button", { type: "submit", class: "submit-btn" }, "Save"))) : (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,
+                textTransform: 'capitalize',
+            } }, this.signer.roleType.toLowerCase()))))), index.h("slot", { key: 'f9a151fc2dc910b6be691ff1a02d9c773dfa631e' })));
+    }
+};
+LsParticipantCard.style = lsParticipantCardCss;
+
+const lsParticipantManagerCss = ".label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-list{position:relative;display:flex;flex-direction:column;gap:0.75rem}*{box-sizing:border-box;margin:0}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.add-participant-button{position:sticky;display:flex;padding:0.75rem 0;margin-bottom:-0.75rem;margin-top:-0.75rem;bottom:-0.75rem;background-image:linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%)}.add-participant-button button{display:flex;gap:0.75rem;justify-content:center;align-items:center;width:100%;border:2px dashed var(--gray-20, #edeff2);background:var(--white, #fff);color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
 const LsParticipantManager = class {
     constructor(hostRef) {
@@ -33437,7 +33514,7 @@ const LsParticipantManager = class {
                     ordinal: this.template.roles.length,
                     signerParent: null,
                     experience: defaultExperience.id,
-                    templateId: this.template.id
+                    templateId: this.template.id,
                 },
             },
         ];
@@ -33445,27 +33522,10 @@ const LsParticipantManager = class {
         this.mutate.emit(data);
     }
     render() {
-        return (index.h(index.Host, { key: 'aee8c395845b3a476db16dca9501a3d82477af1d' }, index.h("div", { key: 'b573e4751a8a28ec10c1707a6fa9978c11a6663f', class: "ls-editor-infobox" }, index.h("h2", { key: '04e59ec7870daa2c775e1e59b04b3a45517f689b', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'f7ca3c04efce08a21fcf1af6282219aa937ff40e', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '9784f6af6ec03bdab571028a48642bf825672607', class: "participant-list" }, this.template && this.template?.roles.map((r, index$1) => {
-            return (index.h("div", { class: "participant-card", onClick: () => {
-                    this.selectedHandler(r);
-                }, style: {
-                    background: defaultRolePalette[r?.signerIndex % 100].s10,
-                    border: `1px solid ${defaultRolePalette[r?.signerIndex % 100].s60}`,
-                    marginTop: r.signerIndex > 100 && '-0.813rem',
-                }, onMouseEnter: e => e.currentTarget.querySelector('.innerButton')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.innerButton')?.classList.add('hidden') }, index.h("div", { class: 'participant-card-top-items' }, ' ', index.h("div", { class: 'role-label', style: {
-                    background: defaultRolePalette[r?.signerIndex % 100].s20,
-                    color: defaultRolePalette[r?.signerIndex % 100].s90,
-                } }, index.h("ls-icon", { name: r?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (index$1 + 1)), index.h("div", { class: "innerButton hidden", onClick: () => {
-                    this.deleteHandler(r);
-                } }, index.h("ls-icon", { name: "trash", size: "18", style: {
-                    color: defaultRolePalette[r?.signerIndex % 100].s40,
-                } }))), index.h("div", { class: 'participant-card-text' }, index.h("p", { class: "participant-text-description", style: {
-                    color: defaultRolePalette[r?.signerIndex % 100].s100,
-                } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index$1 + 1}`), index.h("p", { class: "participant-text-type", style: {
-                    color: defaultRolePalette[r?.signerIndex % 100].s80,
-                    textTransform: 'capitalize'
-                } }, r.roleType))));
-        })), index.h("div", { key: 'dc0bf8fcf3ca95dc923bf5ade55d7fc6ae23358d', class: 'add-participant-button' }, index.h("button", { key: '453ee869c30c9891f98507f9197e8a5821b4560c', onClick: () => this.createHandler() }, index.h("ls-icon", { key: 'b076fbf436b3d8e64e908485318c732c1987943f', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '6f0dce7920fdbf12e6956b345d4bc2fada6ccb02' }, "Add Participant"))), index.h("slot", { key: '9cd204b05753d8fdf0ce5bccec19b736574c3338' })));
+        return (index.h(index.Host, { key: '2f94ec45b0e77280ff2a93510f5252c52148b2ec' }, index.h("div", { key: 'be0334a702286fa8247d0da989bacf1eb70c588c', class: "ls-editor-infobox" }, index.h("h2", { key: '2c43847f2e70eda803dcae69ccd0ae6e6bcda5e7', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '76114f1b7e003a0273e3d8885992605405d0e45c', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'e0f7ffc118ce39e1b7ff1f921c3273ea6d24f691', 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: '279cab9721249459183f8a4550e7b49027899fad', class: 'add-participant-button' }, index.h("button", { key: 'd9c26c28c418f8a7b0b8bee17923df228f406c92', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '0766ee1e4048850ba58980ae103980bce62abc32', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'c3d17275576d99825418970646871093a8f9d124' }, "Add Participant"))), index.h("slot", { key: '4cf0ad6fc3bba91f678ad6fe2d832a1c06d1a77c' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33514,27 +33574,27 @@ const LsParticipantSelect = class {
         this.roleChange.emit(role.signerIndex);
     }
     render() {
-        return (index.h(index.Host, { key: '2259302336ee511c06fd36ef7c0b76e4b2ac97df' }, index.h("div", { key: '66e8e8837dbda44726aaf0a304014ce78af8175b', class: "dropdown" }, index.h("div", { key: 'd22d241a44f95a8ac711e0d1142b5e21a60d70da', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: '18b6a1fe3e420d6555da897a165191a1f6cf4b92', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '1968f256f04081a1522e8e69743f700211fba214', 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: 'a6e4107395a4dda4d51a19efd21a8437ccc81aef', 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: '3b92e4f52b743212c02593b9c47abdb28a267d0e', 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: 'e3008a2a49c06e455080c1b6aac257f06878433f', 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: '14deba4fcbc4bbc89add1bc73b2f0d2216e756f5', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '759b01516e1fb3eb5a4e118eea108bfaebca6468', class: 'selected-role-label', style: {
+        return (index.h(index.Host, { key: 'abc30333f08008eb26a12c4da687bb65fd3ecf9e' }, index.h("div", { key: '5ff27c5c732f5c801e18a8a85d7344a875373e80', class: "dropdown" }, index.h("div", { key: 'a7ff163b9623c3270295bc6d43871f536eadd116', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'feb11332e1189c7b1251046e949cbc3ea5bbee32', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c79f2da68976cfb2530d80e531d7de5dd4ce3f6c', 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: '09dd601caf5379d50b13b16dbe9ba0b5ccb71126', 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: 'c7ec8814c9d887d45e443c1f381bb683137bc6f6', 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: 'cc574fac0148ab1fcefa6ce226263f744ef2c542', 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: 'da59733ddff6b363f82dee294e6fb24fee27c8f5', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: 'c25b281b284cf0a19f3d28685660dd44b736ce41', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: '73a61965496f40706b49ac4a3abd4321b8883d03', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: '64fbdb1c37f83777a4cf0d9d80224cd3f3a3e514', 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: '937da1239b6166bacd9658bb10d95aa3b0cec6a9', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'ec623dff0cde0ecd221bc3a74f0708f786a5105f', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '1bcabc54fc3426b72308f2949ad7dd190c963c7d', class: "dropdown-list" }, index.h("div", { key: '9b3372981bf8e27be793e42ff59590040dd7b0ee', 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: '018d3ddcfcc802cb63ebcfb77a3d51cac6fb657e', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'b0c0fde73ae923d55a3c5f6d2107afa36d6e0c5c', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '18bd61e4a5b40938f61ac984e98abe5a33fb9bc2', class: "dropdown-list" }, index.h("div", { key: 'cd6d2c4f892211d9ed1c0d8650aa5bb6e4f59fe4', 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: '35e36a745de019c208e20cfb0a792c1c0358c624', 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: '36d24bae48e0ebb0ebf03bb9f27fbe88b89d8609', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: '73db13f9a183bc68bfa96ae89cdecc4319cf2fad', name: "user" })), index.h("div", { key: 'eea7771b7bea1ae9274fa21062489b42b8dbbb67', class: 'role-text' }, index.h("p", { key: '8e08a32a9f81858fa12bcea46eb13d9d1d43bef7', class: 'role-name', style: {
+            } }, index.h("ls-icon", { key: 'dc00b4a878dcd4984ca4f5ac84db64a33defbfc4', name: "user" })), index.h("div", { key: '3a20d11a0370bf19aa005fcb4a829ca2d1f92d13', class: 'role-text' }, index.h("p", { key: '8eae8a0458f55d9346db72d3bb67f69eba71a3b1', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: 'cec63bd1ae998309443a488153702113341607f6', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: 'a9edba6663ed70da8f8a911da07bcfdac34b70d0', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '7463cf536097180ead38cb60dd430c6b406b0331', 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: '5045741835dd409408073c24ba6cc37c09b5957b', 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
@@ -33546,7 +33606,7 @@ 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("slot", { key: 'cf25d1ad5c381ba55301ce640c0b245efb4c7d45' })));
+            } }, 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("slot", { key: '4defb862774f3be686aed9dbb722742b976fdc59' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -33561,7 +33621,7 @@ const LsPropsSection = class {
     sectionDescription;
     row = false;
     render() {
-        return (index.h(index.Host, { key: 'e3cfed7bb4681f2df8fdd8a314a33c5c43576604' }, index.h("div", { key: '9a5c97c4fa230cd86c55ba42d8225d5be03b5a9a', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: 'af2f660bc361fc1ddf45e0cfe85cc6063e044f54', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f68cc3be9dc7536622c70e3d1409b74f30147b66', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: '8d2e895c4812850bc26596ebef883abe77a0dfb6', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: 'c1e581a2eb3e950d78666f1ee6b0adb485359800' }))));
+        return (index.h(index.Host, { key: '5993bc2e95d70e3625af9647964b601fbcc5e98e' }, index.h("div", { key: '56c7bd55b4e357752d32025ede162ae42ed545ab', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: 'a02514409e4ee6652b83d1264b2157db847bac73', class: 'ls-field-properties-section-text' }, index.h("p", { key: '1e56fcd1dfecfbe5545113754b8cf97b7e536c58', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: 'af0a13f4e2f4cb99abd346aa8c547af8c5a4b6c9', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: 'bea116d371a1390573f7779cc8d6d8dbb3a7ce34' }))));
     }
 };
 LsPropsSection.style = lsPropsSectionCss;
@@ -33663,11 +33723,11 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (index.h(index.Host, { key: 'b03a2182e7a080369234d94fff5f7bfb066a4c0b' }, index.h("div", { key: '87ee21cd6e61163176c248b576f9d038bf0e823b', class: "status-bar-section" }, index.h("button", { key: 'e03b2fc3f9d4c07945766bbcb5c6e6b8e3033d57', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: 'b430e0c24834e61b6d2fd71c40d7d96e3b8d3e46', name: "zoom-out" })), index.h("div", { key: '09090ace70767e83e2c357955ce749bb85d54176' }, index.h("input", { key: 'c9dd256b1a6d00207c7b44655e695a2dbaca3499', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '7775e29387e92f44b394d6d059215eb00e71ffc8', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '650eca29fdf5293d292b4fa7475f8b2bb9b99fbd', name: "zoom-in" }))), index.h("div", { key: '3305e9cb2c6d5bf3d87f3f9f53ac6db106973fe1', class: "status-bar-section" }, index.h("button", { key: 'c2ef1d471adc280035769616f25e1372e39e271b', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '68f30cf4ff5b8a2d40d762a59b388a6b942c191a', name: "fit-width" })), index.h("button", { key: '0416a71bd46d79a40067f0848685c138802287ef', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: 'abe4e2eda32106e6281056bb12d06047cc32cf4e', name: "fit-height" }))), index.h("div", { key: '42170bc08d0e854b8144aab7426906dab112442b', class: "status-bar-section" }, index.h("button", { key: '794a10e54f938d95ab110630a7cfbc8f39d4a1cd', onClick: () => {
+        return (index.h(index.Host, { key: 'a2d25325c28e7d3ee5656c5d03e29cadd7968cea' }, index.h("div", { key: '6356309e9a41097679a48c124cd459af995c1bf5', class: "status-bar-section" }, index.h("button", { key: '642bd5af767b56e80ff1bd3a2b1370833ba16dbd', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '9f61578b8fcb66d4ebda5b76efe2c91ea0aadcb7', name: "zoom-out" })), index.h("div", { key: '738b44442c23f3d1fce6461e794c91e535b78beb' }, index.h("input", { key: '4bd376ef3d7a5d8d666f2ad2357c85f306d0ae9d', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '37088296667df1683e63811ed96aeb915b43881a', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: 'c3de9b7f3ee79481d1e0a4ac63a2edff28175ce2', name: "zoom-in" }))), index.h("div", { key: '2aa5fccbe3dd364aea307eef922c6ad7d6eac5c2', class: "status-bar-section" }, index.h("button", { key: '0b671ea6f3943da1057713a262ea6a91c2db816d', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'a637b3120acbc0d3963783debea8be5f0b5c9b92', name: "fit-width" })), index.h("button", { key: 'a0347f81f25c138bdc1990337faeeb97d05b02b0', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '9d2142b33f5a24cf03f8d32bc16ae62e2be5eddf', name: "fit-height" }))), index.h("div", { key: '5a1efe22de5fe1729c612594c64ebdfc72089da1', class: "status-bar-section" }, index.h("button", { key: '9bbb8980302a46459a73eb027d9e515f32c98b57', onClick: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '5d1293e223913009b9342988810989a198fe9e85', name: "chevron-left" })), index.h("p", { key: 'dba74063887f883bd34324a3e71a248ff714bf5e' }, "1 / 2"), index.h("button", { key: '907dce2906ae35a3d0b8d3de147e0730f156e11c', onClick: () => {
+            } }, index.h("ls-icon", { key: '4b99335299f0134de0779a5ee1ac724f0d2cdaef', name: "chevron-left" })), index.h("p", { key: '77759fde49162c9210d63c859ceb400f51b35502' }, "1 / 2"), index.h("button", { key: '5b4c1f6bbd6ef6dd97ac265694522539c214dd55', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: '0f2ea81c4e8cbad8f4d8e820c5a767086344747a', name: "chevron-right" }))), index.h("slot", { key: '1464a40ffe8fa37cc653f0bdf500d4212701ac59' })));
+            } }, index.h("ls-icon", { key: 'a2a28b8ba51a44e79679280d5af985090baf0d1a', name: "chevron-right" }))), index.h("slot", { key: '3bd9e7a1a8eb4d85e1688c84ec40b8dcdb423abb' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
@@ -33755,7 +33815,7 @@ const LsToggle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7f4182debfdf06d106482c93b854af19a2966af4' }, index.h("label", { key: '3df06a0441d527019f605605c9f0c71d3d35a80c', class: "switch" }, index.h("input", { key: '8d509f6dac986d687cfe3bb99bbba8d88c46e7a4', type: "checkbox" }), index.h("span", { key: 'b54262b1cfdb1ba60237c292445d025975e8fe33', class: "slider round" })), index.h("slot", { key: 'abc88121801ddad0f9fae2b0e05f831a9afead63' })));
+        return (index.h(index.Host, { key: '7ac7e2efe34d5069f27773cfe6d7128290311367' }, index.h("label", { key: 'ed48e05e053fad6e0844075b2ea9071e5438b686', class: "switch" }, index.h("input", { key: 'cb812dbc57809d3e10d232a8ba54392c6a61d263', type: "checkbox" }), index.h("span", { key: 'f2291febb2e8d30ab9da5d88264f710b2266d016', class: "slider round" })), index.h("slot", { key: '750162d4305971733cdae71a231819071b78dca9' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -33798,7 +33858,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'f94433d6448e20056b3221c86752bcca5e6cd9dd' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (index.h("ls-field-format", { dataItem: this?.dataItem })) : (index.h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), index.h("slot", { key: '6eb44bf1f52b3bca70e76e067c60f736bb82801c' })));
+        return (index.h(index.Host, { key: 'c37ef3418f928a920fe46635a38090850835b5b6' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (index.h("ls-field-format", { dataItem: this?.dataItem })) : (index.h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), index.h("slot", { key: 'e5e566755b02496acac48ada3d04d72b954b83a7' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -33852,7 +33912,7 @@ const LsToolboxField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '81824a892682164614a226de4b33f4bee9d9e10d', draggable: "true" }, index.h("div", { key: '69e212c4408e180471107488937bdfb36365afc2', 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: 'fbe50aacf1d7edd73c6e684bd1ad70c594f93283', name: this.icon, size: "20" })), index.h("p", { key: 'b28bb38d4617aaf039f80bd75cad3568eff5cc52', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '47e324072e2404ec0195b8b7ad9d5d6cf3653b13', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (index.h(index.Host, { key: '40d4706f36b70be2e13b1a2b6d7192ec3465d326', draggable: "true" }, index.h("div", { key: '99957249aa1a69ba9ab624b8ff60cfb37b9982c7', 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: 'ddef21693d5477d431c5683668085c31d623c241', name: this.icon, size: "20" })), index.h("p", { key: 'a02a1593e2734ca129754cae74770c19f363d72e', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '86b6f0bdd96c3ec1ecb3486c22c8e74af9a368ab', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;
@@ -33888,6 +33948,7 @@ exports.ls_formfield = LsFormfield;
 exports.ls_icon = LsIcon;
 exports.ls_input_wrapper = LsInputWrapper;
 exports.ls_number_input = LsNumberInput;
+exports.ls_participant_card = LsParticipantCard;
 exports.ls_participant_manager = LsParticipantManager;
 exports.ls_participant_select = LsParticipantSelect;
 exports.ls_props_section = LsPropsSection;
@@ -33899,6 +33960,6 @@ exports.ls_textarea_input = LsTextareaInput;
 exports.ls_toggle = LsToggle;
 exports.ls_toolbar = LsToolbar;
 exports.ls_toolbox_field = LsToolboxField;
-//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-content.ls-field-dimensions.ls-field-distribute.ls-field-footer.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-advanced.ls-field-properties-autosign.ls-field-properties-container.ls-field-properties-date.ls-field-properties-email.ls-field-properties-file.ls-field-properties-general.ls-field-properties-image.ls-field-properties-multiple.ls-field-properties-number.ls-field-properties-signature.ls-field-properties-text.ls-field-size.ls-field-type-display.ls-formfield.ls-icon.ls-input-wrapper.ls-number-input.ls-participant-manager.ls-participant-select.ls-props-section.ls-radio-input.ls-select-input.ls-statusbar.ls-text-input.ls-textarea-input.ls-toggle.ls-toolbar.ls-toolbox-field.entry.cjs.js.map
+//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-content.ls-field-dimensions.ls-field-distribute.ls-field-footer.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-advanced.ls-field-properties-autosign.ls-field-properties-container.ls-field-properties-date.ls-field-properties-email.ls-field-properties-file.ls-field-properties-general.ls-field-properties-image.ls-field-properties-multiple.ls-field-properties-number.ls-field-properties-signature.ls-field-properties-text.ls-field-size.ls-field-type-display.ls-formfield.ls-icon.ls-input-wrapper.ls-number-input.ls-participant-card.ls-participant-manager.ls-participant-select.ls-props-section.ls-radio-input.ls-select-input.ls-statusbar.ls-text-input.ls-textarea-input.ls-toggle.ls-toolbar.ls-toolbox-field.entry.cjs.js.map
 
-//# sourceMappingURL=ls-document-options_42.cjs.entry.js.map
+//# sourceMappingURL=ls-document-options_43.cjs.entry.js.map