legalesign-document-viewer 0.3.8 → 0.4.0

package/dist/cjs/ls-document-viewer.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["ls-field-properties-dropdown.cjs",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield.cjs",[[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"]}]]],["ls-compose-manager.cjs",[[257,"ls-compose-manager",{"template":[16]}]]],["ls-document-options_42.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"signers":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"pageCount":[1026,"page-count"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"filterToolbox":[1,"filter-toolbox"],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"fieldTypeSelected":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"fieldTypeSelected","handleFieldTypeSelected"],[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-statusbar",{"zoom":[1026],"page":[1026],"pageCount":[1026,"page-count"],"editor":[16]}],[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-document-options",{"template":[1040],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-feature-column",{"manager":[1025],"mode":[1]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"tooltip":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"],"showDropDown":[4,"show-drop-down"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[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":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-helper-bar",{"expanded":[1028],"shortcutsBtn":[32]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16],"swapUpBtn":[32],"swapDownBtn":[32],"editBtn":[32],"deleteParticipantBtn":[32]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-keyboard-shortcuts",{"referenceElement":[16,"reference-element"],"visible":[32]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"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],"indeterminate":[4]}],[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-tooltip",{"referenceElement":[1040,"reference-element"],"placement":[1025],"tooltipText":[1025,"tooltip-text"],"tooltipTitle":[1025,"tooltip-title"],"tooltipLocked":[4,"tooltip-locked"],"hide":[64]},null,{"referenceElement":["updateReferenceHandler"]}],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-number-input_5.cjs",[[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"]}]]]], options);
+  return index.bootstrapLazy([["ls-field-properties-dropdown.cjs",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield.cjs",[[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"]}]]],["ls-compose-manager.cjs",[[257,"ls-compose-manager",{"template":[16]}]]],["ls-document-options_45.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"recipients":[1],"_recipients":[16],"zoom":[1026],"pageNum":[1026,"page-num"],"pageCount":[1026,"page-count"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"filtertoolbox":[1],"showstatusbar":[4],"showpagepreview":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"fieldTypeSelected":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"fieldTypeSelected","handleFieldTypeSelected"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[0,"changeSigner","updateSigner"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-statusbar",{"zoom":[1026],"page":[1026],"pageCount":[1026,"page-count"],"editor":[16]}],[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-document-options",{"template":[1040],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-recipient-card",{"recipient":[16],"activeRecipient":[2,"active-recipient"],"template":[16],"validationErrors":[16,"validation-errors"],"filtertoolbox":[1],"isHovered":[32]}],[257,"ls-validation-manager",{"validationErrors":[16,"validation-errors"]}],[257,"ls-feature-column",{"manager":[1025],"mode":[1]}],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"],"type":[1],"showDropDown":[4,"show-drop-down"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[257,"ls-recipient-manager"],[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":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-helper-bar",{"expanded":[1028],"shortcutsBtn":[32]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16],"swapUpBtn":[32],"swapDownBtn":[32],"editBtn":[32],"deleteParticipantBtn":[32]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"fixedAspect":[2,"fixed-aspect"],"redDot":[4,"red-dot"],"label":[1],"icon":[1],"tooltip":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-keyboard-shortcuts",{"referenceElement":[16,"reference-element"],"visible":[32]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"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],"indeterminate":[4]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"fixedAspect":[2,"fixed-aspect"],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-tooltip",{"referenceElement":[1040,"reference-element"],"placement":[1025],"tooltipText":[1025,"tooltip-text"],"tooltipTitle":[1025,"tooltip-title"],"tooltipLocked":[4,"tooltip-locked"],"hide":[64]},null,{"referenceElement":["updateReferenceHandler"]}],[257,"ls-icon",{"name":[1],"solid":[4],"color":[1],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-number-input_5.cjs",[[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"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ls-field-properties-dropdown.cjs.entry.js

@@ -10,7 +10,7 @@ const LsFieldPropertiesDropdown = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'c205e50348c57bcce7ae2ad52f32c042825c3bc9' }, index.h("ls-field-properties-container", { key: 'ab77b6522f4fd21adc65c2490906d5f40f432106', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '2a3acde05c571a7814492b9b9f0643406dece58b', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'a5244ad6be0ec95b141012896ba5b9e528fdcaf4', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'f584a9b5b27cb38c3af0682833b761a591b2d1f4', dataItem: this.dataItem })), index.h("div", { key: 'e53bc67e7bb258016092185412ce5c7efa5d997b', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '666ba3ee948d1c1f67ecc51d6348b0e96b14cf10', dataItem: this.dataItem })), index.h("div", { key: '107f1265cea6ea2d9aef5c9b08ea11bdfb89bf08', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '10357639a406a7d0091e4114d582f4bf3c6a05ad', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e79eb42805233a06312aa7d5d78cac1fc627f3bf', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: 'cf4a701ae1a4e4a794874e5b5442ccb13162494a' }, index.h("ls-field-properties-container", { key: '8b10f1d45a86eb0cb7a150476513c10d00f643f5', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'ebd19d3770cb563e90cf84e3aa4a8a6f16c15d22', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '1827b4b81665b50127ca658d17e0ab8da3955276', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '0da9e6aee8307e7d5501c62b1f984e30acaf7edb', dataItem: this.dataItem })), index.h("div", { key: 'cb811972008d6d6aab3675e404ae518d92e3da67', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '80a7f0ceebf44088b0ceba2bb66526e4b7b2ccd4', dataItem: this.dataItem })), index.h("div", { key: '67ab96868f2e20f6134823efa2c9f915a0451990', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'bf4530ef267aae9efe0c48e26dc2068d8ec2c198', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'ebfad46e949d644af64d2e30b56377339df95d19', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesDropdown.style = lsFieldPropertiesDropdownCss;

package/dist/cjs/ls-formfield.cjs.entry.js

@@ -47,10 +47,10 @@ const LsFormfield = class {
     render() {
         const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
         const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
-        return (index.h("host", { key: '19aa13876ebe0c20b2ec0ec83c749e4119a8100e', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: 'e1dcf69ba8c3f9ec62376d9e303737eebf92da0a', class: "formfield-top-elements" }, index.h("div", { key: 'ea50d721ef6a77e7d67a7304cd758921cc3e1866', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '267f18033109fd18bbfef712471e5ce81f7351d1', name: labelIcon }), index.h("label", { key: '3a87fe6e53db73708040d03a8dd78758b89b1771', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: 'ea94d57fd409df19e6808fc94bbdabee51cf4410', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
+        return (index.h("host", { key: 'abb10c40dccbc1df9073bb8135933b50c7addf3f', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: 'b8f8cec278fc8b3e224dd4d4cb2a7e3381f1fc53', class: "formfield-top-elements" }, index.h("div", { key: '090b6ce8001334d8ea27ee503bb80abdb4458765', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: 'ae0d3022a53947e3948deeb160b1922f9532f662', name: labelIcon }), index.h("label", { key: '63dfbcd3acfd52aa6f977755734071b320ffe717', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '266a2155a80ccc3e51d5474896fc2250964dff1e', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
             count ||
             countMax ||
-            (descriptionText && (index.h("div", { key: '6a17a0eb6234a6beec0dda3e4ccd06a16d95b17f', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: '3e579b2aee967c2a6ea6973926afa2f3a33535e1', class: "formfield-count-container" }, index.h("p", { key: 'c47b78ed6863386f9b933bde960c5252a2facca8', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '19fb3b5e4fb2467c6aae75c7f8c52802edc5229e', class: countClass }, index.h("p", { key: 'e68d2d8abb15be6b1f66fc085d8b5df73f083911' }, "/"), index.h("p", { key: '11d569dc63c78755822f54ab5c08fa63b898ce12' }, countMax))))))))));
+            (descriptionText && (index.h("div", { key: 'cc8ffdb0f955baab2627011dc3ce756d9f3fb755', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: 'b6d2515988fe6022fbc5dbf353650ad03fa06ed0', class: "formfield-count-container" }, index.h("p", { key: 'ac29508788d292a28e13a88f2dfd0f97bfc54120', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: 'c6da1cc6b8e8970326344ccc37fc7055c36603c7', class: countClass }, index.h("p", { key: '68250a9de3633f0a9d0f64006016663d5e4f9414' }, "/"), index.h("p", { key: '4c541ba2dff8b2cdbc9b49830ed46e871cc2bd1f' }, countMax))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]

package/dist/cjs/ls-number-input_5.cjs.entry.js

@@ -43,7 +43,7 @@ const LsNumberInput = class {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (index.h("host", { key: 'd6cdf484589c9d227c511a994358b15f0a7203c1', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: 'b3665e37f2149dcb1ee8b5ffed682fe98b9a3409', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '3771591b8fbcea7c81ec8cb12af31317e0b4fc5c', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'f9ed1f49415c23e68a2b81c876f2a6d31faa39d7', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: 'e8a348c725b9d16534f35fd72606a238da2f55b0', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '0d9610e847f3434e738105e77bc598351ebcaed9', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: '88b3e499da6232a8b6f63e0c0568a5be2c213879', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '7dd7cba9b45fd859c687104781325fca32c406c1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '27912c7c17b1562cade0bcca96338c95add8d680', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '96e96b4925f196db4e138d63867fe82b9baa9a04', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '26b423107fb452c73bb1b440971bdcb72009dc2b', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '8846ca0764c058fc83a2824dfc787da2e0a6afc2', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (index.h("host", { key: '3223f1b5c6ee85269516ffa345acd30bf507cea6', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: 'bf9c84bd74f40f8e4de7b74ffaae507a0d3278cb', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '2d698e76aa909ee6d44e6aee3dd7edbc93283544', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '344f3a64c0da8b072544b1bef65b1d9961921302', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '74e2c1aaff565cdfeec39ac2c1410a38e4a7ebb3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: 'b658f716bd7a26eceeeb3afbedef32a5ba344d96', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: '4675bf6bea3de2e6952b107bf208ee60fedd7666', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'afacf0c0780d60d7211aeb3c22dbc5c9a070cf5e', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '81db4646d078e20bf49c53420c4af351ad1c6403', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '098621b5511e1aa0e3baf8d655aab0afbfa38dce', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'c967580b4cbc4e7374e928d22a7fe869df5857f9', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: 'b212edc85ce547d05d4345a6b8ab2addd0e56ac0', id: 'buttonIcon', name: 'plus-sm' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss;
@@ -64,7 +64,7 @@ const LsRadioInput = class {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (index.h("label", { key: 'e7e8bafe15e29f9f8b78024f8921c445e3bfdc3f', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: 'baf93f6fa384dabba7151c9108e88b1a20d27b7b', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '714f8c7c84c2e5b1a4af7d8e5433a25628468783', class: 'spanContainer' }, index.h("span", { key: 'c1eb6e3c43aa9d51a8bb17523e701a035b6bcb66' }, icon && index.h("ls-icon", { key: '742786b7193584666d255f2b82824935fbe41878', name: icon, size: "16" })), index.h("span", { key: 'dbaccc572cee54235321c7d4c0782f8313fb33ad' }, label))));
+        return (index.h("label", { key: '92e3bc9b5774de619922d43ef9c24ad7a43568c7', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '3e89bd9b39c9f37c156f17d42108bc788091ebcf', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'e3f1f7b06e8b81eee01d2ce4d674a7ff5c9c76a4', class: 'spanContainer' }, index.h("span", { key: '7170cb3702dbf2dc9bc07a67c4d91ebc9a8e30ea' }, icon && index.h("ls-icon", { key: '4de2c9271302dc11bdd6b35fd273b3c6a5b33b39', name: icon, size: "16" })), index.h("span", { key: '9ce53c08c5031725d09e2edb03660eac4aae9f16' }, label))));
     }
 };
 LsRadioInput.style = lsRadioInputCss;
@@ -101,7 +101,7 @@ const LsSelectInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: 'e22bd6924365a77cebda382a7ee9445263de716f', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '4e0d8d395c7874235f2618c39331ebb77112bd25', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '68077a1eae69a43ec4c37dff022c096bfd7c0c4d', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '13f5f193359e4752bb790d2d8b518b5bb6f91e49' })), index.h("div", { key: 'a06550b784b85776e9976b7a27e51dab2be69e5d', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '7d70d7d3a28ed3082518d588c0b6d6be04829412', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (index.h("host", { key: 'ad6571818f20395ecda1dbd22a574b999afa73ca', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'a68a46e5237f98a621a546b4d8295a3594b73ffd', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: 'd84a610ada56cb39fd0125184a9d5257b9127892', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '2a61c4932a822f0f813e20f6ef079569624ea3ad' })), index.h("div", { key: '7dddfb3625c9f1a0ed02dc5250e3db876299077d', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '405f8a0bfc03565b843001e746059adc77e1558b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
 };
 LsSelectInput.style = lsSelectInputCss;
@@ -147,13 +147,13 @@ const LsTextInput = class {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h(index.Host, { key: '9f58679c7e72b2aa0bb0efb777c1d17420d9fbc6', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '7fc0da24a79e8b0aca1a72a998a86c070b8a33d6', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+        return (index.h(index.Host, { key: '5d0e39de960da7c05dd64f96360cfcd9133aa95e', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '148402cd6087ec414122a54d42ce460fa8fd63e4', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
             } })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
                 this.changeHandler(e);
             } })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
-            } })), index.h("div", { key: 'a9873657c293611cb5b0bfdc7c2936ad2859e1e1', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'b22a919a5886cfd395c19693d3311ea7c34de25f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '2b09bca182cedcb44d124bb91a588878075c1290', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '08e4457eba4879b4dcb1a6f0e8df18694b172f4e', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '56dd71d1b86db74a61bc187d3f85caa3bc001a69', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), index.h("div", { key: 'e86d919029eed85799ae53542758356629dab343', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'c5a0d12e3c07c6708c936b985464b6ff7aff82d1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '7f852342bb7e9407c492b589422494dd088fd61f', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '05d9fcdb971a2876a656ab9f68329899074de1ef', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '2694d48907b91951095d662e68215958ebe68d63', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
 };
 LsTextInput.style = lsTextInputCss;
@@ -189,7 +189,7 @@ const LsTextareaInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '05b7cf86fb66c48b317fc10ea80a3ace14995b8c', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'feadc66f81c470b50c41734d917c3d9976224719', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: 'de65b8db3f8f9925f4d4a0db0bd2498f4371d7cd', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'bde7626f2001a10b9d1eda52d07daebb511277f8', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '86b31eec02b683803802d9a4fbe50e83fcc1afa5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'aaeeee06d1568469cd070ce9a2715aef1a8b11d3', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'cdeca2f643972e176867ebe111431608fc32cc93', id: 'buttonIcon', name: buttonIcon }))))));
+        return (index.h("host", { key: '4e65014b5d0e8df0a397042d501a6c26f250324d', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '5ba14d902bdcfaa3d6825ece9a848ae1d8531888', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: 'e490afebd2e14ede73a904f890e8ebdd5f34dc53', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'b3139ce875b8e39d41931d9507b9e6007faaf94d', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'c0b3e669755f05961a199008385248c9a8e60f8e', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '97011df16622fc8fe7ef0c9c458667ad5844a9a9', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '7046d7ce171217f536f527309ec15e42ffdd87bb', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;

package/dist/collection/collection-manifest.json

@@ -44,11 +44,14 @@
     "components/ls-participant-manager/ls-participant-manager.js",
     "components/ls-participant-select/ls-participant-select.js",
     "components/ls-props-section/ls-props-section.js",
+    "components/ls-recipient-card/ls-recipient-card.js",
+    "components/ls-recipient-manager/ls-recipient-manager.js",
     "components/ls-statusbar/ls-statusbar.js",
     "components/ls-toggle/ls-toggle.js",
     "components/ls-toolbar/ls-toolbar.js",
     "components/ls-toolbox-field/ls-toolbox-field.js",
     "components/ls-tooltip/ls-tooltip.js",
+    "components/ls-validation-manager/ls-validation-manager.js",
     "components/ls-validation-tag/ls-validation-tag.js"
   ],
   "compiler": {

package/dist/collection/components/ls-compose-manager/ls-compose-manager.js

@@ -6,10 +6,10 @@ export class LsComposeManager {
      */
     template;
     render() {
-        return (h(Host, { key: '1dba0753733a9e01b75a9ede154ded5452da804b' }, h("div", { key: '74dc44ced7220ad9b0b5cc33faa0dc529f023068', class: "ls-editor-infobox" }, h("h2", { key: '9333d5ae196bbf0245f7ad45f54756e70e1bc7a6', class: "toolbox-section-title" }, "Recipient Fields"), h("p", { key: '4e1bb1fc4a733718fb1a1777a9d47dfc4bfd2bef', class: "toolbox-section-description" }, "Select and Click to place Signature fields where on the Document.")), h("div", { key: '30a4c2560eb66751f30da898598d4a867b423e21', class: "participant-list" }, this.template &&
+        return (h(Host, { key: '4b56fff9b8d450b5b8613aed8183f1d00dcb0e0b' }, h("div", { key: 'af5c26a7024f009f62fbfba41ad1b91bca789e10', class: "ls-editor-infobox" }, h("h2", { key: 'bbcf9d2f7e43e0b1e19178c7e999c14d1bc52a39', class: "toolbox-section-title" }, "Recipient Fields"), h("p", { key: '47e215fda11a15427e61a371528895d24ee8d16d', class: "toolbox-section-description" }, "Select and Click to place Signature fields where on the Document.")), h("div", { key: '0f8343d8cfc3c0c15dce88ba5d5912ae616fd1c1', class: "participant-list" }, this.template &&
             this.template?.roles.map(() => {
                 return (h("div", null));
-            })), h("slot", { key: '51d70c91fb2eb7ebd2a0605797dacbcd03f0baa8' })));
+            })), h("slot", { key: 'b3ab4de5aadef10c608e33e8b801cb39d9600eb9' })));
     }
     static get is() { return "ls-compose-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-document-options/ls-document-options.js

@@ -57,6 +57,8 @@ export class LsDocumentOptions {
                 this.alter({ autoArchive: e.detail });
             } })), h("div", { class: 'template-detail-section' }, h("div", null, h("p", { class: "template-detail-section-title" }, "Lock Template"), h("p", { class: 'template-detail-section-info' }, "Lock Template to avoid changes being made")), h("ls-toggle", { checked: this.template?.locked, onValueChange: e => {
                 this.alter({ locked: e.detail });
+            } })), h("div", { class: 'template-detail-section' }, h("div", null, h("p", { class: "template-detail-section-title", "tooltip-data": "Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template." }, "Fixed Signature Aspect"), h("p", { class: 'template-detail-section-info' }, "Fixes the aspect ratio of all signatures on the document")), h("ls-toggle", { checked: this.template?.fixSignatureScale, onValueChange: e => {
+                this.alter({ fixSignatureScale: e.detail });
             } })), h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Document Retention (Days)"), h("p", null, h("input", { value: this.template?.documentRetentionDays, style: { width: '100%' }, type: 'number', onInput: e => {
                 e.preventDefault();
                 this.alter({ documentRetentionDays: e.target.value });

package/dist/collection/components/ls-document-options/ls-document-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-document-options.js","sourceRoot":"","sources":["../../../src/components/ls-document-options/ls-document-options.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.css',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Watch('template')\n  selectedHandler(newSelected, _oldSelected) {\n    console.log(newSelected, 'document manager');\n  }\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    function formatDate(isoString) {\n      const date = new Date(isoString);\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Template Details</h2>\n          <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n        </div>\n        <div class={'template-details'}>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Name</p>\n            <div\n              class=\"editButton\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check' : 'pencil-alt'}\n                size=\"18\"\n                id=\"edit-name-btn\"\n                data-tooltip={this.editTitle ? 'Save' : 'Edit Name'}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Auto Archive</p>\n              <p class={'template-detail-section-info'}>After Sending the Template will be automatically archived.</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Lock Template</p>\n              <p class={'template-detail-section-info'}>Lock Template to avoid changes being made</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Document Retention (Days)</p>\n            <p>\n              <input\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                type='number'\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Pages</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Date Created</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Created By</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-document-options.js","sourceRoot":"","sources":["../../../src/components/ls-document-options/ls-document-options.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.css',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Watch('template')\n  selectedHandler(newSelected, _oldSelected) {\n    console.log(newSelected, 'document manager');\n  }\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    function formatDate(isoString) {\n      const date = new Date(isoString);\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Template Details</h2>\n          <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n        </div>\n        <div class={'template-details'}>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Name</p>\n            <div\n              class=\"editButton\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check' : 'pencil-alt'}\n                size=\"18\"\n                id=\"edit-name-btn\"\n                data-tooltip={this.editTitle ? 'Save' : 'Edit Name'}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Auto Archive</p>\n              <p class={'template-detail-section-info'}>After Sending the Template will be automatically archived.</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Lock Template</p>\n              <p class={'template-detail-section-info'}>Lock Template to avoid changes being made</p>\n            </div>\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\" tooltip-data=\"Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template.\">Fixed Signature Aspect</p>\n              <p class={'template-detail-section-info'}>Fixes the aspect ratio of all signatures on the document</p>\n            </div>\n\n            <ls-toggle\n              checked={this.template?.fixSignatureScale}\n              onValueChange={e => {\n                this.alter({ fixSignatureScale: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Document Retention (Days)</p>\n            <p>\n              <input\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                type='number'\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Pages</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Date Created</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Created By</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-document-viewer/keyHandlers.js

@@ -71,6 +71,11 @@ export function keyDown(ev) {
             this.update.emit(createdItems);
             this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));
         }
+        else if (ev.key === 'Escape') {
+            console.log('Clearing selection');
+            this.selected = [];
+            this.selectFields.emit([]);
+        }
     }
 }
 //# sourceMappingURL=keyHandlers.js.map

package/dist/collection/components/ls-document-viewer/keyHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { alter, oob } from './editorUtils';\n\nexport function keyDown(ev: KeyboardEvent) {\n  if (this.selected && this.selected?.length > 0) {\n    // utils need binding to the context\n    const altbound = alter.bind(this);\n\n    if (ev.key === 'ArrowDown') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete' || ev.key === 'Backspace') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n\n      this.update.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          console.log('Setting new top for duplicated item', newTop);\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.update.emit(createdItems);\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n    }\n  }\n}\n"]}
+{"version":3,"file":"keyHandlers.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/keyHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { LsEditorField } from '../ls-editor-field/ls-editor-field';\nimport { alter, oob } from './editorUtils';\n\nexport function keyDown(ev: KeyboardEvent) {\n  if (this.selected && this.selected?.length > 0) {\n    // utils need binding to the context\n    const altbound = alter.bind(this);\n\n    if (ev.key === 'ArrowDown') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top + 1,\n          ay: original.ay + 1,\n          by: original.by + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowUp') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          top: original.top - 1,\n          ay: original.ay - 1,\n          by: original.top - 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowRight') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left + 1,\n          ax: original.ax + 1,\n          bx: original.bx + 1,\n        };\n\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'ArrowLeft') {\n      altbound(original => {\n        const alterElement = {\n          ...original,\n          left: original.left - 1,\n          ax: original.ax - 1,\n          bx: original.bx - 1,\n        };\n        return oob(alterElement) ? original : alterElement;\n      });\n    } else if (ev.key === 'Delete' || ev.key === 'Backspace') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      this.mutate.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n\n      this.update.emit(\n        arr.map(s => {\n          return { action: 'delete', data: s.dataItem };\n        }),\n      );\n    } else if (ev.key === 'd' || ev.key === 'D' || ev.key === 'keyD') {\n      const arr = Array.from(this.selected) as LsEditorField[];\n      const createdItems = arr.map(s => {\n        const newItem = { ...s.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n        const newTop = s.dataItem.top + s.dataItem.height;\n        // check its in bounds\n        if (newTop + s.dataItem.height < s.dataItem.pageDimensions.height) {\n          console.log('Setting new top for duplicated item', newTop);\n          newItem.top = newTop;\n        }\n        return { action: 'create', data: newItem, select: 'clear' };\n      });\n      this.update.emit(createdItems);\n      this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));\n    } else if (ev.key === 'Escape') {\n      console.log('Clearing selection');\n      this.selected = [];\n      this.selectFields.emit([]);\n    }\n  }\n}\n"]}

package/dist/collection/components/ls-document-viewer/ls-document-viewer.css

@@ -57,6 +57,7 @@ h6 {
 p {
   text-wrap: pretty;
 }
+
 h1,
 h2,
 h3,
@@ -83,6 +84,35 @@ h6 {
   padding: 0px;
 }
 
+.left-slot-wrapper {
+  position: fixed;
+  top: 0.375rem;
+  left: 0.675rem;
+  z-index: 2000;
+}
+
+slot {
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem;
+  /* 142.857% */
+  width: fit-content;
+  background-color: var(--green-30, #9df5d4);
+  color: var(--green-100, #125241);
+}
+
+
+.right-slot-wrapper {
+  position: fixed;
+  top: 0.375rem;
+  right: 0.675rem;
+  z-index: 2000;
+}
+
 .validation-tag-wrapper {
   position: fixed;
   top: 0.375rem;
@@ -139,6 +169,15 @@ h6 {
   gap: 1rem;
   overflow-y: auto;
 }
+.compose-toolbox {
+
+  border-radius: 0;
+  border: none;
+  background: white;
+  padding: 0.25rem;
+  gap: 0.75rem;
+
+}
 
 .ls-editor-infobox {
   padding: 2px 8px 2px 8px;
@@ -161,8 +200,8 @@ h6 {
   align-items: center;
   width: 100vw;
   height: 100%;
-  
-  
+
+
 }
 
 .document-frame-wrapper {
@@ -188,6 +227,7 @@ h6 {
   margin-left: auto;
 
 }
+
 .prevButton {
   position: relative;
   bottom: 30px;
@@ -229,7 +269,8 @@ h6 {
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 1.75rem; /* 155.556% */
+  line-height: 1.75rem;
+  /* 155.556% */
 }
 
 .toolbox-section-description {
@@ -285,7 +326,8 @@ h6 {
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 2rem; /* 133.333% */
+  line-height: 2rem;
+  /* 133.333% */
 }
 
 .properties-header-icon {
@@ -306,7 +348,8 @@ h6 {
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
+  line-height: 1.25rem;
+  /* 142.857% */
 }
 
 .expand-fields-row p {
@@ -314,7 +357,8 @@ h6 {
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 1.5rem; /* 150% */
+  line-height: 1.5rem;
+  /* 150% */
 }
 
 /* @media (min-width: 1200px) {
@@ -532,6 +576,7 @@ input[type='checkbox']:disabled:checked {
   gap: 0.25rem;
   width: 100%;
 }
+
 .field-properties-outer {
   position: relative;
   height: 100%;
@@ -595,14 +640,14 @@ button.tertiaryGrey:hover {
   background: var(--gray-10, #f7f8fa);
 }
 
-.button-group > :first-child {
+.button-group> :first-child {
   border-radius: 0.5rem 0 0 0.5rem;
 }
 
-.button-group > :last-child {
+.button-group> :last-child {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
-.button-group > :not(:first-child) {
+.button-group> :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
-}
+}