npm - legalesign-document-viewer - Versions diffs - 0.4.5 → 0.4.6 - Mend

legalesign-document-viewer 0.4.5 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (291) hide show

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BpMnxZQ4.js');
+var index = require('./index-C4ibYtjE.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -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_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"],"fieldTypeSelected":[16,"field-type-selected"],"template":[16],"validationErrors":[16,"validation-errors"],"filtertoolbox":[1],"isHovered":[32]},[[0,"fieldTypeSelected","handleFieldTypeSelected"]]],[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);
+  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_46.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"],"zoom":["zoomChanged"]}],[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"],"fieldTypeSelected":[16,"field-type-selected"],"template":[16],"validationErrors":[16,"validation-errors"],"filtertoolbox":[1],"isHovered":[32]},[[0,"fieldTypeSelected","handleFieldTypeSelected"]],{"activeRecipient":["handleExpandCollapse"]}],[257,"ls-validation-manager",{"validationErrors":[16,"validation-errors"]}],[257,"ls-feature-column",{"manager":[1025],"mode":[1]}],[257,"ls-title-input",{"template":[1040],"editTitle":[32]}],[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",{"assignee":[1],"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"fixedAspect":[2,"fixed-aspect"],"zoom":[1],"floatingActive":[1540,"floating-active"],"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BpMnxZQ4.js');
+var index = require('./index-C4ibYtjE.js');
 const lsFieldPropertiesDropdownCss = ":host{display:block}";
@@ -10,7 +10,7 @@ const LsFieldPropertiesDropdown = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '6ab36b10433f2a9c0cd5e39f3b78f3471f795c15' }, index.h("ls-field-properties-container", { key: '4cfe8d66c414f0684282d5379b7950cef1ea5773', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '673962971e8e8e219c02d13e9e61d2cdcad83887', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'ae5e0250d816457bfacf2a6d9d2b711feeb05dd8', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '07f776cee20cc1f8929db189cd84f68b5b349501', dataItem: this.dataItem })), index.h("div", { key: 'a8e1665f9d3f88fa1caa881ebb71d97bc17ba4fc', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'a8f7df3d69a5f6d8fd4ebe7293b948bf2855b73e', dataItem: this.dataItem })), index.h("div", { key: 'e8a36fe97a69841dc48c6e99d6517fad087ef05d', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '0872ceab1ea0af0b8e8c6e7b7a01e453c264b4da', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e4609c33b929269673d302b5d7e53c0a1820d60e', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesDropdown.style = lsFieldPropertiesDropdownCss;

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-BpMnxZQ4.js');
+var index = require('./index-C4ibYtjE.js');
 const lsFormfieldCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";
 const LsFormfield = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "valueChange");
+        this.valueChange = index.createEvent(this, "valueChange", 7);
     }
     name;
     fieldId;
@@ -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: '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 ||
+        return (index.h("host", { key: '7d9ce8f93eef332dc934dbb8b18c686a24b7bb7b', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '83f6dc53d7ed4a97574788f5226f58c7dcdf7f76', class: "formfield-top-elements" }, index.h("div", { key: '61761e85e2d573f7361d990474dfc8fa168db633', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: 'f2c2d195abf5ecd11db30844f7a9a45f37a585b1', name: labelIcon }), index.h("label", { key: 'eb97be872ffcb60d4d161283af72882303471e76', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '09065bb12b3df7e2daf4fd761b328f7b86fdb44e', 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: '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))))))))));
+            (descriptionText && (index.h("div", { key: '0729bf9725dd53684bf0475718955fbe6847ebcf', 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: 'df740e5bc22bd24bbc496a00c02023a95fdf6b9a', class: "formfield-count-container" }, index.h("p", { key: '0bcd5b23f4ab2483cda330829feea022f2bb33fd', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '36280cff83fc6522a36778577f04bd9644e1f800', class: countClass }, index.h("p", { key: 'a1516c03a84710c101b92710cc9ea77ca8a5d45b' }, "/"), index.h("p", { key: '55b029ed794ce322b7e75a49776d74d21e6f57cf' }, countMax))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BpMnxZQ4.js');
+var index = require('./index-C4ibYtjE.js');
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -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: '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' })))));
+        return (index.h("host", { key: '16b2658c62a3ea3de4f55ef91fd669677506e1fe', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: 'c1ac4489e1eae6a84a56bff53d22dc7a33d7d4a4', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '8db14a1fd8fad4907c73dd2a41a1e584ddd02914', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'f612a83f625cb10b7e11249b281be587c92e783c', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: 'e737ac19586a0a5bca2f1caaf18b1f68b25c9c03', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '2f8681769df8a8affc62f0744e198896eb893ffb', 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: '3f175e8ed586f731c62d81b286cc3fa198ae8e4b', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '451f88055782062684466fe084477eb675eaec62', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '0699154beaa0964a71b0e378c76853f8bd1832fc', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'edad9c88e963bba30a8f6e3ccd7dc5c9646828bb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '2b263884f201f422652393f95e486e51a6e369fb', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '57dcfe868a3865e0b9b5a9930596a8c758513723', 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: '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))));
+        return (index.h("label", { key: 'affba3f5b1b1c934f56a2cb7568dfee10639e842', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '4287b9cd8a951be8c65ce0fb83580ed32fbee77a', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '7d80ac9ae37ad054e726fd75f52d3568c0f13a25', class: 'spanContainer' }, index.h("span", { key: '5d2fb9b0d694e03f38da46459b5bcbd97a4982cf' }, icon && index.h("ls-icon", { key: 'c618f79ac8f61cec3cde549a554190e085599091', name: icon, size: "16" })), index.h("span", { key: 'a4ab42377ba01f88819b12beacdace5ea6d393b7' }, 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: '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' })))));
+        return (index.h("host", { key: '9980f5312e7bdd61255e5684404c85351dd32b63', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'ee10c135a53f825b16f134af7d5d24762ea0794a', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '95875345316282ded2d72eabe24ebcfe9e112947', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '352aae0b0c6ad7dae862021cf81584b89fe761e5' })), index.h("div", { key: '5ce9ec6d3edb7645be270874087c5b066996e8a6', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '07ad8dc616954c148b044fd68e4518d583e14300', 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;
@@ -111,7 +111,7 @@ const lsTextInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Ple
 const LsTextInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "valueChange");
+        this.valueChange = index.createEvent(this, "valueChange", 7);
     }
     type = 'default';
     name;
@@ -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: '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) => {
+        return (index.h(index.Host, { key: '065f2582758ce9cfeea52508bd051c49ac8f7a22', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'b5e77210c848cff4c8c572fc2ad2b137e67670c1', 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: '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 })))));
+            } })), index.h("div", { key: 'aa71635dc5ce7a3727559271dd57cead5d5f2c7b', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '07561e3d44c33a945083f69cf1c1449257153ed5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '7fa27ddfe3e004c6c2232210bf0ab39664f7cc75', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '2a07f650fdd786d01a7d88548ba07074da25fbc9', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '1b3fd40bf47799698ea65239eedc0123e01e6cda', 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: '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 }))))));
+        return (index.h("host", { key: '9ae8b4df7f03ce8007522c161f373be320f802aa', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '6ee5150550cf1fcbe0ddf70e1100a424c4cbf799', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '4db4ca2f5402d0081750eb05c24d384e6604915b', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'bd8f98837ef04e4f47ea4cb6f14e7cf75d40e026', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '4b9fcca0baa77a2fc70ecfcda72e09fc60560005', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '2bbf87b77cf0df42e620b8ee8990a15efdf29699', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '53e406ede857fa2fbe2550ac448b5ebf81427a02', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -47,6 +47,7 @@
     "components/ls-recipient-card/ls-recipient-card.js",
     "components/ls-recipient-manager/ls-recipient-manager.js",
     "components/ls-statusbar/ls-statusbar.js",
+    "components/ls-title-input/ls-title-input.js",
     "components/ls-toggle/ls-toggle.js",
     "components/ls-toolbar/ls-toolbar.js",
     "components/ls-toolbox-field/ls-toolbox-field.js",

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

@@ -6,10 +6,10 @@ export class LsComposeManager {
      */
     template;
     render() {
-        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 &&
+        return (h(Host, { key: 'e4d4722a301e5083ab89c2ce9cc0e511175f5e12' }, h("div", { key: '95b2bf71c94f71b9666ac98573b130e820e11686', class: "ls-editor-infobox" }, h("h2", { key: '68a1cac596fe3cf6e467cae8843ef87143ed72fe', class: "toolbox-section-title" }, "Recipient Fields"), h("p", { key: 'f757c8fd62798a780e83f17dabea592af35d1a80', class: "toolbox-section-description" }, "Select and Click to place Signature fields where on the Document.")), h("div", { key: '04f1a659c4515be778eedd7897c0ceed9c1dc0ca', class: "participant-list" }, this.template &&
             this.template?.roles.map(() => {
                 return (h("div", null));
-            })), h("slot", { key: 'b3ab4de5aadef10c608e33e8b801cb39d9600eb9' })));
+            })), h("slot", { key: '6fc6d3e8805e94b0560e6b46cd027479d9982366' })));
     }
     static get is() { return "ls-compose-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-document-viewer/editorCalculator.js CHANGED Viewed

@@ -18,9 +18,11 @@ export const findIn = (fields, selector, restyle = false, additive = false) => {
 export function addField(frame, data) {
     const fields = this._template.elementConnection.templateElements;
     this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: [...fields, data] } };
+    const assignee = this._template.roles.find(r => r.signerIndex === data.signer);
     const node = document.createElement('ls-editor-field');
     node.setAttribute('type', data.formElementType);
     node.setAttribute('id', 'ls-field-' + data.id);
+    node.setAttribute('assignee', assignee?.name || `Participant ${data.signer}`);
     // node.setAttribute('selected', 'selected');
     node.style.zIndex = '100';
     node.style.position = 'absolute';

package/dist/collection/components/ls-document-viewer/editorCalculator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"editorCalculator.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/editorCalculator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LSApiElement } from '../../types/LSApiElement';\n\nexport const findIn = (fields: NodeListOf<HTMLLsEditorFieldElement>, selector: HTMLElement, restyle: boolean = false, additive: boolean = false): HTMLLsEditorFieldElement[] => {\n const selected: HTMLLsEditorFieldElement[] = new Array();\n const { top, left, bottom, right } = selector.getBoundingClientRect();\n\n fields.forEach(f => {\n if (f.getBoundingClientRect().bottom <= bottom && f.getBoundingClientRect().top >= top && f.getBoundingClientRect().left >= left && f.getBoundingClientRect().right <= right) {\n if (restyle) f.selected = true;\n selected.push(f);\n } else {\n if (restyle && !additive) f.selected = false;\n }\n });\n return selected;\n};\n\n// Used to append new fields (dropped or loaded from template data)\nexport function addField(frame: HTMLElement, data): HTMLLsEditorFieldElement {\n const fields = this._template.elementConnection.templateElements;\n this._template = {...this._template, elementConnection: { ...this._template.elementConnection, templateElements: [...fields, data]} };\n\n const node = document.createElement('ls-editor-field');\n node.setAttribute('type', data.formElementType);\n node.setAttribute('id', 'ls-field-' + data.id);\n // node.setAttribute('selected', 'selected');\n node.style.zIndex = '100';\n node.style.position = 'absolute';\n\n node.style.top = Math.floor(data.top * this.zoom) +'px';\n node.style.left = Math.floor(data.left * this.zoom) + 'px';\n node.style.height = Math.floor(data.height * this.zoom) + 'px';\n node.style.width = Math.floor(data.width * this.zoom) + 'px';\n node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n node.style.alignContent = data.align;\n node.style.fontFamily = data.fontName;\n node.dataItem = data;\n frame.appendChild(node);\n\n return node as any as HTMLLsEditorFieldElement;\n};\n\nexport function moveField(item: HTMLLsEditorFieldElement, data){\n item.style.top = Math.floor(data.top * this.zoom) + 'px';\n item.style.left = Math.floor(data.left * this.zoom) + 'px';\n item.style.height = Math.floor(data.height * this.zoom) + 'px';\n item.style.width = Math.floor(data.width * this.zoom) + 'px';\n item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n item.style.fontFamily = data.fontName;\n item.style.textAlign = data.align;\n item.dataItem = recalculateCoordinates(data);\n};\n\n// calculates html compatible coords at current zoom level\nexport const transformCoordinates = (\n sourceField: LSApiElement,\n inputFieldWidth: number,\n inputFieldHeight: number,\n viewerWidth: number,\n viewerHeight: number,\n left: number,\n top: number,\n fontName: string,\n fontSize: number,\n zoom: number,\n): LSApiElement => {\n // Returns X, Y coordinates\n const ax = left > 0 ? left / viewerWidth : 0;\n const ay = top > 0 ? top / viewerHeight : 0;\n const bx = (left + inputFieldWidth) / viewerWidth;\n const by = (top + inputFieldHeight) / viewerHeight;\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n ...sourceField,\n ax,\n ay,\n bx,\n by,\n cstyle: {\n margin: 0,\n verticalAlign: 'top',\n boxSizing: 'content-box',\n fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n fontFamily: fontName \|\| 'arial',\n width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`, // app1 input has padding-x 3px\n height: `${inputFieldHeight * (by - ay) * zoom}px`, // app1 input has padding-y 2px\n // minHeight: `${inputFieldHeight * (BY - AY) * zoom - 2}px`,\n lineHeight: 'inherit',\n },\n divStyle: {\n position: 'absolute',\n top: `${inputFieldHeight * ay * zoom}px`,\n left: `${inputFieldWidth * ax * zoom}px`,\n width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`,\n height: `${inputFieldHeight * (by - ay) * zoom}px`,\n zIndex: 1000,\n fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n },\n objectHeight: `${inputFieldHeight * (by - ay) * zoom}px`,\n };\n};\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const findDimensions = (\n frameContainer: HTMLDivElement,\n sourceField: HTMLLsEditorFieldElement,\n pageHeight: number,\n pageWidth: number,\n zoom: number\n): { top: number; left: number; height: number; width: number; ax: number; ay: number; bx: number; by: number } => {\n\n // Position of widget frame\n const frmDims = frameContainer.getBoundingClientRect();\n // dimensions relative to viewport\n const { height, width } = sourceField.getBoundingClientRect();\n const zwidth = width / zoom;\n const zheight = height / zoom;\n const top = Math.floor((sourceField.getBoundingClientRect().top - frmDims.top) / zoom);\n const left = Math.floor((sourceField.getBoundingClientRect().left - frmDims.left) / zoom);\n \n // Returns X, Y coordinates\n const ax = left > 0 ? left / pageWidth : 0;\n const ay = top > 0 ? top / pageHeight : 0;\n const bx = (left + zwidth) / pageWidth;\n const by = (top + zheight) / pageHeight;\n\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n top,\n left,\n height,\n width,\n ax,\n ay,\n bx,\n by,\n };\n};\n\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const recalculateCoordinates = (\n d: LSApiElement\n): LSApiElement => {\n\n // Returns X, Y coordinates\n const ax = d.left / d.pageDimensions.width;\n const ay = d.top / d.pageDimensions.height;\n const bx = (d.left + d.width) / d.pageDimensions.width;\n const by = (d.top + d.height) / d.pageDimensions.height;\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n ...d,\n ax,\n ay,\n bx,\n by,\n };\n};\n\n// from a field determinse if out of bounds\nexport const oob = (\n d: LSApiElement\n): boolean => {\n\n return (d.left < 0 \|\| d.top < 0 \|\| (d.left + d.width) > d.pageDimensions.width \|\| (d.top + d.height) > d.pageDimensions.height);\n};\n\n\n"]}
1	+ {"version":3,"file":"editorCalculator.js","sourceRoot":"","sources":["../../../src/components/ls-document-viewer/editorCalculator.ts"],"names":[],"mappings":"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","sourcesContent":["import { LSApiElement } from '../../types/LSApiElement';\n\nexport const findIn = (fields: NodeListOf<HTMLLsEditorFieldElement>, selector: HTMLElement, restyle: boolean = false, additive: boolean = false): HTMLLsEditorFieldElement[] => {\n const selected: HTMLLsEditorFieldElement[] = new Array();\n const { top, left, bottom, right } = selector.getBoundingClientRect();\n\n fields.forEach(f => {\n if (f.getBoundingClientRect().bottom <= bottom && f.getBoundingClientRect().top >= top && f.getBoundingClientRect().left >= left && f.getBoundingClientRect().right <= right) {\n if (restyle) f.selected = true;\n selected.push(f);\n } else {\n if (restyle && !additive) f.selected = false;\n }\n });\n return selected;\n};\n\n\n// Used to append new fields (dropped or loaded from template data)\nexport function addField(frame: HTMLElement, data): HTMLLsEditorFieldElement {\n const fields = this._template.elementConnection.templateElements;\n this._template = {...this._template, elementConnection: { ...this._template.elementConnection, templateElements: [...fields, data]} };\n const assignee = this._template.roles.find(r => r.signerIndex === data.signer);\n \n const node = document.createElement('ls-editor-field');\n node.setAttribute('type', data.formElementType);\n node.setAttribute('id', 'ls-field-' + data.id);\n node.setAttribute('assignee', assignee?.name \|\| `Participant ${data.signer}`);\n // node.setAttribute('selected', 'selected');\n node.style.zIndex = '100';\n node.style.position = 'absolute';\n\n node.style.top = Math.floor(data.top * this.zoom) +'px';\n node.style.left = Math.floor(data.left * this.zoom) + 'px';\n node.style.height = Math.floor(data.height * this.zoom) + 'px';\n node.style.width = Math.floor(data.width * this.zoom) + 'px';\n node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n node.style.alignContent = data.align;\n node.style.fontFamily = data.fontName;\n node.dataItem = data;\n \n frame.appendChild(node);\n\n return node as any as HTMLLsEditorFieldElement;\n};\n\nexport function moveField(item: HTMLLsEditorFieldElement, data){\n item.style.top = Math.floor(data.top * this.zoom) + 'px';\n item.style.left = Math.floor(data.left * this.zoom) + 'px';\n item.style.height = Math.floor(data.height * this.zoom) + 'px';\n item.style.width = Math.floor(data.width * this.zoom) + 'px';\n item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';\n item.style.fontFamily = data.fontName;\n item.style.textAlign = data.align;\n item.dataItem = recalculateCoordinates(data);\n};\n\n// calculates html compatible coords at current zoom level\nexport const transformCoordinates = (\n sourceField: LSApiElement,\n inputFieldWidth: number,\n inputFieldHeight: number,\n viewerWidth: number,\n viewerHeight: number,\n left: number,\n top: number,\n fontName: string,\n fontSize: number,\n zoom: number,\n): LSApiElement => {\n // Returns X, Y coordinates\n const ax = left > 0 ? left / viewerWidth : 0;\n const ay = top > 0 ? top / viewerHeight : 0;\n const bx = (left + inputFieldWidth) / viewerWidth;\n const by = (top + inputFieldHeight) / viewerHeight;\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n ...sourceField,\n ax,\n ay,\n bx,\n by,\n cstyle: {\n margin: 0,\n verticalAlign: 'top',\n boxSizing: 'content-box',\n fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n fontFamily: fontName \|\| 'arial',\n width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`, // app1 input has padding-x 3px\n height: `${inputFieldHeight * (by - ay) * zoom}px`, // app1 input has padding-y 2px\n // minHeight: `${inputFieldHeight * (BY - AY) * zoom - 2}px`,\n lineHeight: 'inherit',\n },\n divStyle: {\n position: 'absolute',\n top: `${inputFieldHeight * ay * zoom}px`,\n left: `${inputFieldWidth * ax * zoom}px`,\n width: `${(inputFieldWidth * bx - inputFieldWidth * ax) * zoom}px`,\n height: `${inputFieldHeight * (by - ay) * zoom}px`,\n zIndex: 1000,\n fontSize: viewerWidth < 640 ? `${(fontSize / 24) * zoom}rem` : `${fontSize * zoom}px`,\n },\n objectHeight: `${inputFieldHeight * (by - ay) * zoom}px`,\n };\n};\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const findDimensions = (\n frameContainer: HTMLDivElement,\n sourceField: HTMLLsEditorFieldElement,\n pageHeight: number,\n pageWidth: number,\n zoom: number\n): { top: number; left: number; height: number; width: number; ax: number; ay: number; bx: number; by: number } => {\n\n // Position of widget frame\n const frmDims = frameContainer.getBoundingClientRect();\n // dimensions relative to viewport\n const { height, width } = sourceField.getBoundingClientRect();\n const zwidth = width / zoom;\n const zheight = height / zoom;\n const top = Math.floor((sourceField.getBoundingClientRect().top - frmDims.top) / zoom);\n const left = Math.floor((sourceField.getBoundingClientRect().left - frmDims.left) / zoom);\n \n // Returns X, Y coordinates\n const ax = left > 0 ? left / pageWidth : 0;\n const ay = top > 0 ? top / pageHeight : 0;\n const bx = (left + zwidth) / pageWidth;\n const by = (top + zheight) / pageHeight;\n\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n top,\n left,\n height,\n width,\n ax,\n ay,\n bx,\n by,\n };\n};\n\n\n// from a field element get all dimension data including LEGACY dimensions\nexport const recalculateCoordinates = (\n d: LSApiElement\n): LSApiElement => {\n\n // Returns X, Y coordinates\n const ax = d.left / d.pageDimensions.width;\n const ay = d.top / d.pageDimensions.height;\n const bx = (d.left + d.width) / d.pageDimensions.width;\n const by = (d.top + d.height) / d.pageDimensions.height;\n\n // Return with calculated styles that try to place it as it would appear on legacy signing page\n return {\n ...d,\n ax,\n ay,\n bx,\n by,\n };\n};\n\n// from a field determinse if out of bounds\nexport const oob = (\n d: LSApiElement\n): boolean => {\n\n return (d.left < 0 \|\| d.top < 0 \|\| (d.left + d.width) > d.pageDimensions.width \|\| (d.top + d.height) > d.pageDimensions.height);\n};\n\n\n"]}

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

@@ -169,14 +169,50 @@ slot {
   gap: 1rem;
   overflow-y: auto;
 }
-.compose-toolbox {
+.compose-toolbox {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: none;
   border-radius: 0;
   border: none;
   background: white;
   padding: 0.25rem;
+}
+.recipients-box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   gap: 0.75rem;
+  overflow-y: auto;
+  width: calc(100% + 4px);
+  padding: 0.75rem 0.25rem 0.25rem 0.25rem;
+}
+.scroll-gradient-top {
+  position: absolute;
+  top: 95px;
+  left: 0;
+  width: 100%;
+  height: 1rem;
+  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
+  pointer-events: none;
+  z-index: 100;
+}
+.scroll-gradient-bottom {
+  position: absolute;
+  bottom: 1rem;
+  left: 0.75rem;
+  width: calc(100% - 1.5rem);
+  height: 1rem;
+  background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
+  pointer-events: none;
+  z-index: 100;
 }
 .ls-editor-infobox {

package/dist/collection/components/ls-document-viewer/ls-document-viewer.js CHANGED Viewed

@@ -114,6 +114,10 @@ export class LsDocumentViewer {
             this.readonly = false;
         }
     }
+    zoomChanged(newZoom) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(f => f.setAttribute('zoom', String(newZoom)));
+    }
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
@@ -174,7 +178,6 @@ export class LsDocumentViewer {
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     handleFieldTypeSelected(event) {
-        console.log(event);
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
         fields.forEach(element => {
             element.isSelected = element.formElementType === event.detail.formElementType;
@@ -211,8 +214,25 @@ export class LsDocumentViewer {
     }
     // Updates are internal event between LS controls not to be confused with mutate
     updateSigner(event) {
-        if (event.detail)
+        if (event.detail) {
             this.signer = event.detail;
+            try {
+                const leftBox = this.component.shadowRoot?.getElementById('ls-recipient-manager');
+                if (leftBox) {
+                    const recipientsBox = leftBox.querySelector('.recipients-box');
+                    const card = recipientsBox?.querySelector(`ls-recipient-card[data-signer-index="${event.detail}"]`);
+                    if (card && recipientsBox) {
+                        recipientsBox.scrollTo({
+                            top: 0,
+                            behavior: 'smooth',
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                // fail silently
+            }
+        }
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
@@ -428,7 +448,10 @@ export class LsDocumentViewer {
                 this.selected = Array.from(fields).filter(fx => fx.selected);
             }
             else if (update.action === 'delete') {
+                console.log('Deleting field via syncChange', update.data);
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
+                if (!fi)
+                    return;
                 const fields = this._template.elementConnection.templateElements;
                 this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: fields.filter(f => f.id !== update.data.id) } };
                 this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi);
@@ -519,7 +542,7 @@ export class LsDocumentViewer {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: '24e54561967e9bf975d292ce20392c45ab346a24' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'ab977b3f64fba964ff8fda1c2460c94ca6d2ff91' }), h("div", { key: '2d75654239867fe3950b549bc42733349c741e62', class: "page-header" }, h("div", { key: '4e62b62337608b3fe73be60088f72371c197db97', class: 'left-slot-wrapper' }, h("slot", { key: 'f2a2ef74789a65ab31a0775bb956a5b175c10cad', name: "left-button" })), h("div", { key: '01b97a05b5af8455b23f212564a6c7fb98767131', class: 'right-slot-wrapper' }, h("slot", { key: '076416c9f25ad58fdb384a45112b7036ca18dbf3', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '0bf8356c5dafd6a8c921b93696f9ec4e3bb4a7db' }, h("span", { key: 'c7f12e2e419aac679594ea822f40755e3b45d9c6', class: "header-text-1" }, "Template Creation"), h("span", { key: '2ee2d5f30b58ce0b7bc727b7bdf480e2775af8a9' }, "/"), h("span", { key: '710ead7ec8e82198a5cd57947ff383a7843fb160', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '2e0cadb9a499f941f433c4e99c5a3b686e2c99c7' }, h("span", { key: 'f23f3fb138f0cd002b5d2496dc170c292d018fc4', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'ce7b5d18a8fbbcb81ecaf6312b4dbc0c06049ee4' }, "/"), " ", h("span", { key: '3ba860f3579a068cb979214302fbebebeb4ff3ae', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: '250a1ec19cc70cdc54904970e45794b89bd16c73', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'ae9152ee7f09a04a3b1b90be1cdb014a316d1214', validationErrors: this.validationErrors }))), h("form", { key: '269870bd47c3e06dea241f82803c6aa48780c55d', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
+        return (h(Host, { key: '62402c417f86fc4281d953b1a4f8709d0f1d6cd7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '15a4db508ee9d16e44a9e84ac4c5be7f2c4f3686' }), h("div", { key: '76f9909417bc27bb9bc2f2524076f05d6c88e9bf', class: "page-header" }, h("div", { key: 'e859052dfb395701cc79b273e93877028628cf15', class: 'left-slot-wrapper' }, h("slot", { key: '34dfd7d2989bb1f96ee822517a709a4ed9820705', name: "left-button" })), h("div", { key: '1d6a035338ce475b564679b7ca1722133247d7b4', class: 'right-slot-wrapper' }, h("slot", { key: '266cce39667d3d4455ffc2f0ce2f20ee27058759', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'd54a9943c81adf4b8fe1906aa5c162b05a657373' }, h("span", { key: '7f81f4fa0ef0a94f1fac293aca22aa61ec273196', class: "header-text-1" }, "Template Creation"), h("span", { key: 'e949e88dc267a1d6317d222dbbdfde6a4953243a' }, "/"), h("span", { key: 'f9f9bad3007748b69d6a9371caab1f1cf0134be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '50db2b3742fab5434332c87c95429902b79e21c6', style: { display: 'flex', alignItems: 'center', gap: '4px' } }, h("span", { key: '23e1c2c04ab0151cb3d174a0598fa4d56edf856f', class: "header-text-1" }, "Compose"), " ", h("span", { key: '26ca47d4f420287047d77988b0a5841849ad910b' }, "/"), " ", h("ls-title-input", { key: 'b9ff06b3f93940cb1bd07737c4bcf8cfa33d975a', template: this._template })))), this.mode === 'editor' && (h("div", { key: 'dce96808076d4b89df82bda46f783ce5de32cef0', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'd7e12a889847de388a56a54c2d250e08e8e437af', validationErrors: this.validationErrors }))), h("form", { key: '62c5c2adf9afeb222cac40daa84ad050142592e4', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -534,11 +557,11 @@ export class LsDocumentViewer {
                     validationManager.validationErrors = this.validationErrors;
                 }
                 this.manager = manager.detail;
-            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'toolbox compose-toolbox' : 'hidden' }, h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), this._recipients &&
-            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected }))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
+            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
+            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: 'c9d61564562f5e8e2daf2d64b7f53f46bfaddc72', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '82ccb98a66969e35302936fc04ea1a343c7b7c88', id: "ls-mid-area" }, h("div", { key: '0670c9bbff024b256513ca6f4dc85a5b890db617', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'b1f6c15bc46f650ddec12df17274a6b38dad2d23', id: "ls-document-frame" }, h("canvas", { key: 'a28c5f0300be933438c23430689c66f7960767e1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'e7f7c65385389d527ec56fb468e81d9c25d90ead', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'cff629b4589523648277eaf96019838de3e0a487', id: "ls-box-selector" }))), h("ls-statusbar", { key: '857d84f8b261c2383bf8c248a72f30a0b7ea25b8', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '5d87d0297bf80e96dc013fd957e93313bd988401', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: 'd2cd3c8b66d53b227beb35f441cedb808d5ad91e', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '753752c0987efd7cd86b53ad3f00a74adca1fabe', id: "ls-mid-area" }, h("div", { key: 'bec6d9793a453e0a6efaf7984cbdbe2001e51eff', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'c92c1fd73afcff335655e00c2d26f990693eaf45', id: "ls-document-frame" }, h("canvas", { key: '63dc6920f052cf6c78473009f58144f8353f8e34', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '8598600d059adf0497c4f9c6c80de60b44594408', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '1a473a145bb081bac583f53b00b12338260a4323', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'c0e286f2402be48c8242ea6fd17d8088ce95283c', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6722839e866df4b08b0ca43c0363044d3f6888b6', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -1162,6 +1185,9 @@ export class LsDocumentViewer {
         return [{
                 "propName": "mode",
                 "methodName": "modeHandler"
+            }, {
+                "propName": "zoom",
+                "methodName": "zoomChanged"
             }];
     }
     static get listeners() {