legalesign-document-viewer 0.2.14 → 0.2.15

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_44.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"groupInfo":[1032,"group-info"],"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],"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":[1040]}],[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-validation-tag",{"isValid":[4,"is-valid"],"requiredFields":[16,"required-fields"],"isExpanded":[4,"is-expanded"]}],[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"],"editor":[16],"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_44.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"groupInfo":[1032,"group-info"],"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],"validationErrors":[32],"status":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[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"],"groupInfo":[16,"group-info"],"template":[16],"editor":[1040]}],[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-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"]}],[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"],"selected":[1025],"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_44.cjs.entry.js

@@ -24701,6 +24701,28 @@ const getGroupData = (id) => {
       `;
 };
 
+/**
+ * This module contains all the rules required to mark a template
+ * as valid.
+ *
+ */
+function validate(t) {
+    var errors = [];
+    console.log(t);
+    // Check for missing signatures
+    t.roles.forEach(tr => {
+        if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex).length === 0) {
+            errors.push({
+                id: tr.id,
+                title: 'Missing signature.',
+                description: `{tr.name} is missing a signature.`,
+                role: tr
+            });
+        }
+    });
+    return errors;
+}
+
 const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;border-radius:16px;border:1px solid var(--gray-30, #edeff2);background:var(--white, #fff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;max-height:100%;z-index:1000;left:0;top:0}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:center;overflow:visible;max-height:100%;width:100vw;overflow:scroll}#ls-document-frame{position:relative;height:98vh}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.hidden{visibility:hidden;display:none;width:0px}.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}.fields-box{display:flex;flex-direction:column;gap:0.75rem}.page-header{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}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%}.field-properties-outer{position:relative;height: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)}";
 
 pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
@@ -24768,6 +24790,8 @@ const LsDocumentViewer = class {
     pageNum = 1; // hardcoded to start at the page 1
     signer = 0; // hardcoded to start at the page 1
     _template;
+    validationErrors = [];
+    status;
     groupInfo;
     selected;
     /**
@@ -24881,6 +24905,27 @@ const LsDocumentViewer = class {
         if (event.detail)
             event.detail.forEach(fx => this.syncChange(fx));
     }
+    // Updates are internal event between LS controls not to be confused with mutate
+    addParticpantHandler(event) {
+        const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
+        const data = [
+            {
+                action: 'create',
+                data: {
+                    id: btoa('rol' + crypto.randomUUID()),
+                    name: 'Signer ' + (this._template.roles.length + 1),
+                    roleType: event.detail.type,
+                    signerIndex: this._template.roles.length + 1,
+                    ordinal: this._template.roles.length,
+                    signerParent: event.detail.parent,
+                    experience: defaultExperience.id,
+                    templateId: this._template.id,
+                },
+            },
+        ];
+        this.update.emit(data);
+        this.mutate.emit(data);
+    }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
         console.log(event.detail);
@@ -24890,6 +24935,8 @@ const LsDocumentViewer = class {
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
         if (propPanel)
             propPanel.dataItem = event.detail;
+        //Revalidate
+        this.validationErrors = validate.bind(this)(this._template);
     }
     // Send role selection changes to bars and panels
     roleHandler(event) {
@@ -24973,7 +25020,6 @@ const LsDocumentViewer = class {
             elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
             roles: preparedRoles,
         };
-        console.log(this._template);
     }
     /**
      * Render the page based on pageNumber
@@ -25105,6 +25151,8 @@ const LsDocumentViewer = class {
             const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
             this.groupInfo = resultGroup.group;
             this.initViewer();
+            //Revalidate
+            this.validationErrors = validate.bind(this)(this._template);
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25120,7 +25168,7 @@ const LsDocumentViewer = class {
         box.scrollLeft = (box.scrollWidth - box.clientWidth) / 2;
     }
     render() {
-        return (index.h(index.Host, { key: 'ef29d82f599031f9cb5a390a8b11ade1fb4dfc62' }, index.h(index.h.Fragment, null, index.h("div", { key: '22537339efa739f21a95314865a1e32cf9a69879', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '25e180125d9bbaa007ab1c6bbbb4b41702f0da30' })), index.h("div", { key: 'b8497606c629822a505569fe0274a6b6a7751b90', class: "page-header" }, index.h("p", { key: '66c90083c75f5f6872982d62446f38023c3de078', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'a44ea9ddeb683d21c24065f15a9fdd0d3b4e4ed5' }, "/"), index.h("p", { key: '8f0f2a333d56417299965b155317b4c0fb74c9a0', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '1f920b39392e77b353baec2b59dbb18a54d13bfa', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '507862ca8ac9b4fb78e2171652d85f670efd7154' }, index.h(index.h.Fragment, null, index.h("div", { key: '2fc1ec028c5b5812adb0547d9e98f5ae3ca30389', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '966f14b697692e59d186be75a9ff42a5607e9197', validationErrors: this.validationErrors })), index.h("div", { key: 'e919a403e4aa9dc3d33aa8b8d158144ce6187f26', class: "page-header" }, index.h("p", { key: '5ca5551bb9d2a340db2295e9a051fd419509fe86', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'c0bad3a3c1df4bf9649b580bacd135a549047965' }, "/"), index.h("p", { key: '1fb838bea78bdac7716308cc99dc342791adf786', class: "header-text-2" }, this._template?.title)), index.h("form", { key: 'f1514a6d78dd8ce1416d00e6eca88cb39739a7af', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25133,7 +25181,7 @@ const LsDocumentViewer = class {
             } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (index.h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: 'b76d7da37ad9127c563f3e424fa37905a8a254c2', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this }), index.h("div", { key: '8f1c9e2bb84e342988c50e16a34bc81479d537da', id: "ls-mid-area" }, index.h("div", { key: '53d2012ae870b98f47ac5ec62497f2587745f464', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: 'd1bde84484864bce91f43aac0ec5ebacc30eaf3f', id: "ls-document-frame" }, index.h("canvas", { key: '1b0750a6d12e6b731c8a1f8f37aca26a763e14e1', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '6daea04c99103adb38242877c4a4a197f930c688', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '5c45e58466bb3412ad8b366562624b4786458ba3', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '4d001582a46605c4ca7a6bac7e0d206b188ea58f', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '48fd636a4f58a2d1cf69974df2ddd18cbab92470', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: 'f9bc9ea4748bffa5e0ff189292fa739c74b3d348', id: "ls-mid-area" }, index.h("div", { key: '01daa94f4b7c941a6a409b50dc13c353f3fc9110', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '1cc60b24c260bbeea5a649b1190b3e2ce0303409', id: "ls-document-frame" }, index.h("canvas", { key: '90d2df545d6fd2e0e10980d16dcb5e7302c85cfa', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '36ecce266e1f0d3951cae62e64664fb19f5438f1', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'c911b0de65321ff3af541833d88256981d76aef0', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'b95ecec60b852b5a31554f8fdf53cb2394472dfb', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -33606,10 +33654,11 @@ const LsParticipantManager = class {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate");
         this.update = index.createEvent(this, "update");
+        this.addParticipant = index.createEvent(this, "addParticipant");
     }
     get element() { return index.getElement(this); }
     /**
-     * The base template information (as JSON).
+     * The base editor.
      * {LSDocumentViewer}
      */
     editor;
@@ -33620,6 +33669,7 @@ const LsParticipantManager = class {
     template;
     mutate;
     update;
+    addParticipant;
     selectedHandler(_role) {
         //console.log(role, 'participant manager')
     }
@@ -33630,26 +33680,6 @@ const LsParticipantManager = class {
     swapHandler(role1, role2) {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
-    createHandler() {
-        const defaultExperience = this.editor.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
-        const data = [
-            {
-                action: 'create',
-                data: {
-                    id: btoa('rol' + crypto.randomUUID()),
-                    name: 'Signer ' + (this.template.roles.length + 1),
-                    roleType: 'SIGNER',
-                    signerIndex: this.template.roles.length + 1,
-                    ordinal: this.template.roles.length,
-                    signerParent: null,
-                    experience: defaultExperience.id,
-                    templateId: this.template.id,
-                },
-            },
-        ];
-        this.update.emit(data);
-        this.mutate.emit(data);
-    }
     handleOpened(event) {
         const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
         participants.forEach(element => {
@@ -33658,12 +33688,12 @@ const LsParticipantManager = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '380481d9fdbe2a56d2c710cb2cf428b542269670' }, index.h("div", { key: '8b298603a0d18b1dc6d4cb5abbc03d8043038ed1', class: "ls-editor-infobox" }, index.h("h2", { key: 'c4d436718504099af1c740a4a658984a345dba9e', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'cdabf848f257b3b210d5a68b28e946d54560f365', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '2b9464ee4ac825692402567e63e8d4d1299a4b31', class: "participant-list" }, this.template &&
+        return (index.h(index.Host, { key: 'fdec2cf424e6ac9bd8845c819644a4a694a4f037' }, index.h("div", { key: 'e481f226b431d469582a4a4e03ac7c0e085bc162', class: "ls-editor-infobox" }, index.h("h2", { key: 'a9af00c32fa3da719ee25dd39cd5283d10e5b5d7', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '967ed02d5b0da04bd7a79a1d75a1a31d7b8a187c', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'f8a78a0232d44d34469d9e4d1f8dc3fabfbecb62', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index$1) => {
                 return index.h("ls-participant-card", { signer: r, index: index$1, template: this.template, onOpened: (event) => {
                         this.handleOpened.bind(this)(event);
                     } });
-            })), index.h("div", { key: '7677be33de4a1440958e6ec035574442d6f29a50', class: 'add-participant-button' }, index.h("button", { key: '16e82e9a80e3fddd820cd1fbb0497f60f89fa44b', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '63efe83c5b265800a11cf56f5248e06cd340810a', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'e618ef1f45c86f0a075bd99b1968d929c8a919dc' }, "Add Participant"))), index.h("slot", { key: 'aed44ef40f18bf11a9645801955320e3d184985a' })));
+            })), index.h("div", { key: 'db2941a9800fdfb14a8f54bdc927eeb9bdb9e081', class: 'add-participant-button' }, index.h("button", { key: 'b8b70b202cb71d3ebfdaec390b47a8d7e4042ea8', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '7f439f448ec683cba6d6a0c69d05ad514c2e0be3', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'd735648da424f22ed025bd634ca8834635ee4036' }, "Add Participant"))), index.h("slot", { key: '0492d74ebaca1e74bdc28395821f2faafe02b290' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33673,16 +33703,15 @@ const lsParticipantSelectCss = ":host{display:inline-block}*{margin:0}.dropdown{
 const LsParticipantSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.mutate = index.createEvent(this, "mutate");
-        this.update = index.createEvent(this, "update");
         this.roleChange = index.createEvent(this, "roleChange");
+        this.addParticipant = index.createEvent(this, "addParticipant");
     }
     dataItem;
     /**
-     * The parent editor control.
-     * {LsDocumentViewer}
-     */
-    editor;
+   * The id of the currently selected role.
+   * {string}
+   */
+    selected;
     /**
      * The currently selected role.
      * {number}
@@ -33694,71 +33723,41 @@ const LsParticipantSelect = class {
      */
     roles = [];
     isOpen = false;
-    mutate;
-    update;
-    // @Element() component: HTMLElement;
-    // Send one or more mutations up the chain
-    // The source of the chain fires the mutation
-    alter(diff) {
-        const diffs = this.dataItem.map(c => {
-            return { action: 'update', data: { ...c, ...diff } };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-        this.update.emit(diffs);
-    }
     toggleDropdown = () => {
         this.isOpen = !this.isOpen;
     };
     roleChange;
+    addParticipant;
     selectRole(role) {
         this.selectedRole = role;
         this.isOpen = false;
         this.roleChange.emit(role.signerIndex);
     }
     createHandler() {
-        console.log(this.editor);
-        const defaultExperience = this.editor.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
-        const data = [
-            {
-                action: 'create',
-                data: {
-                    id: btoa('rol' + crypto.randomUUID()),
-                    name: 'Signer ' + (this.editor._template.roles.length + 1),
-                    roleType: 'SIGNER',
-                    signerIndex: this.editor._template.roles.length + 1,
-                    ordinal: this.editor._template.roles.length,
-                    signerParent: null,
-                    experience: defaultExperience.id,
-                    templateId: this.editor._template.id,
-                },
-            },
-        ];
-        this.update.emit(data);
-        this.mutate.emit(data);
+        this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (index.h(index.Host, { key: 'f34d646bde23584b2f7b7604d3aa64a696fa404c' }, index.h("div", { key: 'e57de96d39f2ecc5fc2dd6465eecaa88107b05fc', class: "dropdown" }, index.h("div", { key: '95ae228dbc53eac2e9b3a8f646c3961492ad4594', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'd9b931dfe8b59bb9ff66ffc0da59fbc3af5f4b11', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '87aac81898fa5c53259e05abc837c906ade0d6a6', 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: '8f7c51caac5fe1ea6da2ba7de9a547a98a8be874', 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: '558f4377cf47f667f5b2b20dbfc89e1dabed8884', 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: '02d86f7c8aa4626e68d47a626f001fb3fa57daf7', 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: '7b84120836b2a029b87ad62b053fe0c7537eb90b', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: 'b18f6c6011c2f670c75f561fdfbbc91b2b992de1', class: 'selected-role-label', style: {
+        return (index.h(index.Host, { key: 'a9194042094f1851b4a6826f9887fe5eed65d227' }, index.h("div", { key: '6af2f643542a982bdc0036d94acdc7bdea6641ae', class: "dropdown" }, index.h("div", { key: 'd37b58a2b4add18286e66e1a18d9470b5c34c03e', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'a95d70fa2b887486746c8c8b525eb753128b3546', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'df3b852f41ef39022c50407439201f82f7270531', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: '64ff2545b71aefc500e41f47bc194e9f11d73f98', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: 'bf2a824f74ab5b473b7d938087ec0f4025bf74c4', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: '072da80c707d1350114e2b5c1b196561b98c9d43', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: '5e0b113113055f7a4e8f09e6b73e8b940c7fd25d', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '8f21db74ba5ba69170e4652f4d45ffb4195e3271', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: 'fda4190a51630cca3a4baa4a8cfdebb887481da8', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: '3c600d4b48273366e87ee1ae3d618cc33b663572', 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: '8da8f4bea417931293f1dead2eef34ba12d18978', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '4967a3963a7ac6275823fad2bc3b4e58495dc8e0', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: 'b3a9724008a1254edf461e330512429491f585b5', class: "dropdown-list" }, index.h("div", { key: '399463ae562e0b71788143782170ec1de4939d25', 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: '0d0327aff5564669b775c1f5661a48a033eead35', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'c122f79923a199c1148bf67f760776a0bf9c6a26', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '50ab0050cc1d633360d68ef033ff36953867e0be', class: "dropdown-list" }, index.h("div", { key: '55051cfca0375705883963ea4de24e02b70abb02', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--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: '1d1a0017869b9e9f3a8a718d482a605e2590e41b', 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: 'e7dbad92c3c450ae8945e38813e161af34922709', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: 'a4aa329f18d65e8619ee188d53a65bc4cb4ec4df', name: "user" })), index.h("div", { key: '4130d1b34ec2787d400e23c314377b564d82b49a', class: 'role-text' }, index.h("p", { key: '32aad5d01d56c8c309946fa9311ce754e1cb1cca', class: 'role-name', style: {
+            } }, index.h("ls-icon", { key: 'c452e6023dd90e16aeb5942e6f941ee8f1b31d41', name: "user" })), index.h("div", { key: '9a7158619df3fbe2a4566fd9cd3f9f0c1d74c71a', class: 'role-text' }, index.h("p", { key: 'ed48bcacc4651af9d40c880c2eda3a02f40f81a8', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: 'e49ff522fed28e0b39cec91ae20a4934d42da312', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: '7ff63fca05d7172b50bf49c48003e4f5cab14e7c', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '3807c5847fec3e55a61a13197a1ca90c66247836', 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: '31ca94a225ed030fcff70115e3b91295053f8713', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--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
@@ -33770,10 +33769,10 @@ const LsParticipantSelect = class {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), index.h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: '259dfca87eab7407bb466ef4cc39b1418699555c', onClick: this.createHandler, class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: 'f9a3228f7545d55bdc923edf6189afccbcce5d42', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, index.h("div", { key: 'f83c3b6c823b126a5cbeda9cd39f9af6b83eff02', class: 'add-participant-icon' }, index.h("ls-icon", { key: '235ac6cdc706242f70491c924a53432597fc8e0a', name: "user-add" })), index.h("div", { key: 'fce03a64f5d8f7e8b4981d246dd85b262b80257a', class: 'role-text' }, index.h("p", { key: '0d3335f67e793829e206ca5dd5b31fdded0dab4b', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'a7335461af64b101966a7d6a259e434eb9e8e329', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: '77e189b18be9574ee04faa131cfd9da0a48e31ef', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: 'b07974ca7ea8e9d2368568ce585632cc6f5a4822' })));
+            } }, index.h("div", { key: '9f71dc813a5a0b2cff5570bc3706e53179c0cb88', class: 'add-participant-icon' }, index.h("ls-icon", { key: '8d08c6294038f852831c7d37d13aaf580faf5ae3', name: "user-add" })), index.h("div", { key: 'ae50fe55de6cf1c3138933daed493e96e5563808', class: 'role-text' }, index.h("p", { key: '920329e6bc79ab6f78b5231ce38e5f152ff9df10', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'e221d8dbd281aa98db215a5f2ae945f976585c81', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'b1bb7285d2b3c6738012287c0bc4ab8708c5b63a', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: '9e3190405ab4374c72af3b71a84d749bd43d7994' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -34015,11 +34014,17 @@ const LsToolbar = class {
         this.mutate = index.createEvent(this, "mutate");
         this.update = index.createEvent(this, "update");
     }
+    get component() { return index.getElement(this); }
     /**
      * The selected items information (as JSON).
      * {LSApiElement[]}
      */
     dataItem;
+    /**
+   * The group and experience information.
+   * {object}
+   */
+    groupInfo;
     /**
      * The base template information (as JSON).
      * {LSApiTemplate}
@@ -34044,11 +34049,8 @@ const LsToolbar = class {
         this.mutate.emit(diffs);
         this.update.emit(diffs);
     }
-    componentDidLoad() {
-        console.log(this.editor.groupInfo);
-    }
     render() {
-        return (index.h(index.Host, { key: 'a01797a742d9d68ec69a77a872a8162d15e17fb3' }, 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, editor: this.editor })))), index.h("slot", { key: '495b4ee9cd871b2d1ac098fb80727fa86e420eb3' })));
+        return (index.h(index.Host, { key: '74a143b58b3a573ed20b2b88446a5eccb657c0a0' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), index.h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'hidden' : 'visible' } }))), index.h("slot", { key: '2893f9427ccfa30fe982fe3e1b72afe5fdcaa93a' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -34113,18 +34115,18 @@ const LsValidationTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    isValid = false;
-    requiredFields = [];
+    status = 'Invalid';
+    validationErrors = [];
     isExpanded = false;
     render() {
-        return (index.h(index.Host, { key: '8e2b42e0c10adf0e14b56fe2f6ed8f94d6441d09' }, index.h("div", { key: 'bd54d3ed09850d75ed496cad2641a6f377356272', class: `valid-label ${this.isValid ? 'valid' : 'invalid'}`, onClick: !this.isValid && (() => (this.isExpanded = !this.isExpanded)) }, this.isValid ? 'Ready to Send' : `Requires Fields`, !this.isValid && index.h("div", { key: '314c05b28a995b56133628304ba60f127acf98c8', class: 'field-counter' }, this.requiredFields.length), !this.isValid && index.h("ls-icon", { key: 'abb92e3c1e522d3a4a8b0336b48a03f11b39de94', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.isExpanded && (index.h("div", { key: 'bf83f3896ccce457b6ff839d516593cc0e99fbed', class: 'field-dropdown' }, index.h("div", { key: '737935f2ec87330eb6e871d03c759ac967ac9299', class: 'dropdown-header' }, index.h("h2", { key: 'ff5d829da62059b8e1ae9fdc5506d879e6a308b6' }, "Signature Fields Required"), index.h("p", { key: 'e61b395efd05079d2edf491f338387cba2ce9555' }, this.requiredFields.length, " ", this.requiredFields.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.requiredFields.map((field, idx) => (index.h("div", { key: idx, class: 'required-field', style: {
-                '--field-background': defaultRolePalette[field.signer.signerIndex || 0].s10,
-                '--field-border-color': defaultRolePalette[field.signer.signerIndex || 0].s10,
-                '--field-background-hover': defaultRolePalette[field.signer.signerIndex || 0].s20,
-                '--field-text-color': defaultRolePalette[field.signer.signerIndex || 0].s70,
-                '--field-text-color-hover': defaultRolePalette[field.signer.signerIndex || 0].s80,
-                '--field-border-color-hover': defaultRolePalette[field.signer.signerIndex || 0].s60,
-            } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: defaultRolePalette[field.signer.signerIndex || 0].s60 } }), index.h("p", { style: { color: defaultRolePalette[field.signer.signerIndex || 0].s80 } }, field.signer?.name || `Signer ${field.signer?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: defaultRolePalette[field.signer.signerIndex || 0].s30, color: defaultRolePalette[field.signer.signerIndex || 0].s70 } }, field.signer?.roleType || `Signer ${field.signer?.signerIndex + 1}`)), index.h("ls-icon", { name: "chevron-right" }))))))));
+        return (index.h(index.Host, { key: '831f0d525df46dc73cdad43da4dc836ef7d5cda0' }, index.h("div", { key: '11768cd66d0f20bdd9c1dba7f75197ae36d4adca', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.status !== 'Valid' && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '315f7789dac5367aaaecedb8f704aa5d24631563', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && index.h("ls-icon", { key: 'fa4fb38503e8947c316dfe5425bdfd06e9771dc9', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.isExpanded && (index.h("div", { key: '54023a5567a1f4c76a91035cf02606695900dc60', class: 'field-dropdown' }, index.h("div", { key: '4bf0754f860db5794dd49b47c17bbe6543d161ad', class: 'dropdown-header' }, index.h("h2", { key: '40c01887fff3d614faa1287bb4dbf1e4448c35b5' }, "Signature Fields Required"), index.h("p", { key: '311e124d50204efeabdb4e1350a2ab6dcbd659b6' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => (index.h("div", { key: idx, class: 'required-field', style: {
+                '--field-background': defaultRolePalette[field.role.signerIndex || 0].s10,
+                '--field-border-color': defaultRolePalette[field.role.signerIndex || 0].s10,
+                '--field-background-hover': defaultRolePalette[field.role.signerIndex || 0].s20,
+                '--field-text-color': defaultRolePalette[field.role.signerIndex || 0].s70,
+                '--field-text-color-hover': defaultRolePalette[field.role.signerIndex || 0].s80,
+                '--field-border-color-hover': defaultRolePalette[field.role.signerIndex || 0].s60,
+            } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: defaultRolePalette[field.role.signerIndex || 0].s60 } }), index.h("p", { style: { color: defaultRolePalette[field.role.signerIndex || 0].s80 } }, field.role?.name || `Signer ${field.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: defaultRolePalette[field.role.signerIndex || 0].s30, color: defaultRolePalette[field.role.signerIndex || 0].s70 } }, field.role?.roleType || `Signer ${field.role?.signerIndex + 1}`)), index.h("ls-icon", { name: "chevron-right" }))))))));
     }
 };
 LsValidationTag.style = lsValidationTagCss;