npm - legalesign-document-viewer - Versions diffs - 0.1.7 → 0.2.1 - Mend

legalesign-document-viewer 0.1.7 → 0.2.1

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 (168) hide show

package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO1E,MAAM,OAAO,0BAA0B;IACpC;;;OAGG;IAIH,QAAQ,CAAe;IAChB,QAAQ,GAA2C,SAAS,CAAC;IAErE,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAC9B,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC5J,CAAC,CAAC;IACF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,cAE1G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,gBAE9G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,iBAEhH,CACL;YACN,4DAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,CAC/B,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WAAK,KAAK,EAAE,WAAW;gBACrB,2BAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,~~CAC5C~~,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,WAAW;gBACrB,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,iBAAgB;wBAC7D,SAAG,KAAK,EAAE,yCAAyC,4CAA2C,CAC1F;oBACN,WACE,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;4BACL,MAAM,EAAE,oBAAoB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;4BACzE,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;yBACnE;wBAED,WAAK,KAAK,EAAE,qBAAqB;4BAC/B,WACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;oCACL,MAAM,EAAE,mBAAmB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCACxE,KAAK,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCAC7D,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;iCACnE;gCAED,eAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,GAAG,CAClC;4BACN,SAAG,KAAK,EAAE,oBAAoB,gBAAe,CACzC,CACF,CACF;gBACN,WAAK,KAAK,EAAE,iCAAiC;oBAC3C,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,qBAAoB,CAC7D;oBACN,oBAAa,CACT;gBAEN,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,kBAAiB;wBAC9D,SAAG,KAAK,EAAE,yCAAyC,0EAAyE,CACxH;oBACN,aAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,WAAW,EAAC,eAAe,GAAG,CACzE,~~CACF~~,CACP,CACG;YAEN,wEAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAE5C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-signature',\n styleUrl: 'ls-field-properties-signature.css',\n shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement;\n @Prop() fieldSet: 'content' \| 'placement' \| 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"signature\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Signature</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n\n <ls-field-footer dataItem={this.dataItem} />\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO1E,MAAM,OAAO,0BAA0B;IACpC;;;OAGG;IAIH,QAAQ,CAAe;IAChB,QAAQ,GAA2C,SAAS,CAAC;IAErE,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAC9B,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC5J,CAAC,CAAC;IACF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,cAE1G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,gBAE9G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,iBAEhH,CACL;YACN,4DAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,CAC/B,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WAAK,KAAK,EAAE,WAAW;gBACrB,2BAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;gBAChD,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,WAAW;gBACrB,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,iBAAgB;wBAC7D,SAAG,KAAK,EAAE,yCAAyC,4CAA2C,CAC1F;oBACN,WACE,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;4BACL,MAAM,EAAE,oBAAoB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;4BACzE,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;yBACnE;wBAED,WAAK,KAAK,EAAE,qBAAqB;4BAC/B,WACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;oCACL,MAAM,EAAE,mBAAmB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCACxE,KAAK,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCAC7D,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;iCACnE;gCAED,eAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,GAAG,CAClC;4BACN,SAAG,KAAK,EAAE,oBAAoB,gBAAe,CACzC,CACF,CACF;gBACN,WAAK,KAAK,EAAE,iCAAiC;oBAC3C,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,qBAAoB,CAC7D;oBACN,oBAAa,CACT;gBAEN,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,kBAAiB;wBAC9D,SAAG,KAAK,EAAE,yCAAyC,0EAAyE,CACxH;oBACN,aAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,WAAW,EAAC,eAAe,GAAG,CACzE,CAEF,CACP,CACG;YAEN,wEAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAE5C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-signature',\n styleUrl: 'ls-field-properties-signature.css',\n shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement;\n @Prop() fieldSet: 'content' \| 'placement' \| 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-properties-advanced dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"signature\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Signature</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n </div>\n )}\n </div>\n\n <ls-field-footer dataItem={this.dataItem} />\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class LsFieldPropertiesText {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '3c866e6f227934dff07ee9d2a26d65ed1c9afa82' }, h("div", { key: 'f0348081e8a5ffc70d6888e41ecd88c948150a60', class: 'tabs-container' }, h("button", { key: '0499e9d95ea152b86bd4e6440646de92b94d59df', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'd6fa7d56ee8c7700b4395ade178ce577367d1b69', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '1449b28a226629068439b9f7277f3fa00549f273', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '4863f52297c424990c72d1aff181fa72c3f4d03b', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+        return (h(Host, { key: '8e6f6f25980bbd4e2cb3123f0cda6cb76d967ba9' }, h("div", { key: '2d28f09ded07153696230a2932035974dae0f169', class: 'tabs-container' }, h("button", { key: '69c4fbb6ccf98cee8ea806215f61330d3da449d3', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'cb9e207cb035ebeb46b3125696063f41f724be63', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '3a9c7d0046fa122e8ed87e2c28fc5be43ed7533b', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '12fc4203e64a318fa0a768f13d9f69f5dc6248fb', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
@@ -17,7 +17,7 @@ export class LsFieldPropertiesText {
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, h("ls-icon", { name: "text", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Text")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
             .filter(type => type.formType === 'text')
-            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'a437d78978c9937a48278a46f4a3998a88a9f638', class: 'button-footer' }, h("button", { key: '7dd5225d65d6dfa5fc2c8f0ebf6b921877aaa75f', class: 'secondary' }, h("ls-icon", { key: '764bc166996b128c8861bb82a7545814851ad162', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '9e0d8e4d4fa8374d85ad62e1530344b20aea9bfa', class: 'destructive' }, h("ls-icon", { key: 'ce98729c0518cb7df746418e86a2bde57fb58efc', name: "trash", size: "20" }), "Delete")), h("slot", { key: '68766f87c0fb2705681f5b255cab2b089324dcad' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '7586851acb82a9badbd364b59c808d056e97c9bb', class: 'button-footer' }, h("button", { key: '1f1c0d2ae6a183ea83c49ebee5a230a4d4bc41cf', class: 'secondary' }, h("ls-icon", { key: 'c0b3ad3c6542255bc2b41119de3523f554d17a99', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'bfe7655f4ae2801eb41a1b9a585c2948f2a800c7', class: 'destructive' }, h("ls-icon", { key: 'b85fac5202d8a0170e781edaf821acc328a9209a', name: "trash", size: "20" }), "Delete")), h("slot", { key: '46bac101ac459901721484c329b6a0766cea88db' })));
     }
     static get is() { return "ls-field-properties-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-size/ls-field-size.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class LsFieldSize {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '90092261b158a8c5417d7745b58b8e9a0feb8852' }, h("div", { key: '97b5accd42cf1301a50260f60722e977130952db', class: 'ls-field-properties-section' }, h("div", { key: '302a99cce209ab3435384649e22ded2f17ad8d4b', class: 'ls-field-properties-section-text' }, h("p", { key: 'c4ae8bfd79a563db422b5a9e70076fb6c13e49a7', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '74911d50258b788e430c1b23171269d3a2aa8596', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '665ac7372b6c2728c864de3be654a61677da70fa', class: 'button-group' }, h("button", { key: 'bac5011c1d6b61a6ee5eae3e262f3400fa1d4944', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '9599ead6bbdc0d994316b97fe9dc00a7875ed7a2', name: "field-scale" })), h("button", { key: '34a921f82812e5c3cf64a794d7ff1ae1f1661adb', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '597a69fb82f407187d7c5fde43e7144d17aa4be4', name: "field-match-width" })), h("button", { key: 'd05fbbd24ad75268bb64ec82a75fa878f7cbb1b3', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'a3f3f8e51a70e0ba38607e0856718d5534c86456', name: "field-match-height" })))), h("slot", { key: '19e743f951e9ca9c6484941edce58248818052c7' })));
+        return (h(Host, { key: '98547af2fe2d69ad705ca35f48f2c5cdda099a75' }, h("div", { key: 'a28dc120fdf4c70fbd0fa928995a991bea108518', class: 'ls-field-properties-section' }, h("div", { key: '27a33d016bd7d8236e041be5e51fd0f42a23cbc5', class: 'ls-field-properties-section-text' }, h("p", { key: '2d163b2619ae8ddb254facc3063924771ae8aa5a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '552806be351b283e0b6d54084826e63cae46a18e', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'b6452db5ffe0c222de4cb26db3f7a568e51e31ae', class: 'button-group' }, h("button", { key: '57d4bfb89e80e3c579c390cc2df7a6f4b5a1e7be', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '5c833c5c80a8ab3cb7bdb3056f89583026eeb7a2', name: "field-scale" })), h("button", { key: '44d9ec9a8d0de7912db0617288c7c018d0dc0fe4', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '117f52044058c1ecbab46b72d0498677373c5667', name: "field-match-width" })), h("button", { key: 'a24a113a4ed35f02b49ce65b3e0f4c95f9656545', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'b8f800d8a113950de839ffd7b61e9e4ab3d4969b', name: "field-match-height" })))), h("slot", { key: '8bd0085b3a9ef307ec5ea42a4577d77aea3c3448' })));
     }
     static get is() { return "ls-field-size"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class LsNumberInput {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (h("host", { key: 'beb0a335033fe6f62f8fd5a753547dc30b1b9ca3', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'bea2559e9a33458628f15ec7dc5e262c1c75b00d', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '85b15e026a28bc9975861d9e0baebe4168d03422', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'f3874bc425a87aa07513aca5ea603e28d6b489fb', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '6c812a63124cbd3f745de5dc6c1ec78faf01d49b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '9f24c493dfa34436183121fa06115511b9d078d0', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '56e238651c4716be0229d8ecb02e3c332ab48545', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'e72d8f9ea8094bd3a5778b76b881f93abaea94b5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '99d14f1c814972f434a4d301e3314ae97005508f', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '51e815f1d9c8cf3840c7dd5a908e5721736d458d', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '1bde6ed929ef2dde774be6c23c30756e3a1fbea1', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '76e662184421697ee480fdaddfc37dd59f51bb40', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (h("host", { key: 'c5e3922c847c62ba187a2d4482cb1d00e87ba833', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '8150a612dbd9d7ec0eb01c4dc380b20085168026', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '5bdbcc88d744bc21f57437c7786ed88cf337c37f', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '9be97c20b91dc7149f3076e441588be4c1bcbc4c', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '4c61a843bfe2a404f33be624a9e0d974ca1ac51b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '5920abb0ede5c05c8a9fc06f00a61739c413fdcd', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '7c74720b9c29a0bbb4b59c27f16defecaf7f7b4a', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '5de94f9e0627a2e3c9614a2b030f3ad1ef82c63d', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: 'a24ca1d6cf66b7c7e07963f25d3e65ff2ed26914', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '80bd58b24794f468a23884b2da8d42d3c3e45554', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '844d1183f557748642c336bd0f4f6e74ef7f9f74', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'd96b4f76efb2206b6776a737fe2baa1b8601bd3b', id: 'buttonIcon', name: 'plus-sm' })))));
     }
     static get is() { return "ls-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class LsRadioInput {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (h("label", { key: '0a42e5e7876168eeac63f3d1005d64b2ab90107c', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '106b67793bf5dde83ef6086cd588b3fdc59befe7', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '2fcabb808dd94c490ddb855d5da1261f6965be55', class: 'spanContainer' }, h("span", { key: 'b5b74b98e6553da9497d9da33f4a268292b2bec5' }, icon && h("ls-icon", { key: '700388ccde573f6432597eb4111fff01577ee8f7', name: icon, size: "16" })), h("span", { key: 'f0a9bf1243d429bd4d62c619c6f043057099a8ff' }, label))));
+        return (h("label", { key: 'e2d3e56e5167a562793bb0a8c227f436098f162d', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '09c8cc16cbb64dc3528ab5d5ebd2343c6ced3a70', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: 'c2dc15132ded49f6d9f55bd7d394c908500734d0', class: 'spanContainer' }, h("span", { key: '931aa12172f4c5de77045d4ef6a57d429e4cf4f0' }, icon && h("ls-icon", { key: '264705022c6e12f4bf421f8dae595a607a44f00b', name: icon, size: "16" })), h("span", { key: '45872253b0cf7571fb061e04f4d4cadc5e838424' }, label))));
     }
     static get is() { return "ls-radio-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class LsSelectInput {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '6057a8c24ad92b90d7d0306cc33e1d1203013d57', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'bd93aa8411864400f3252b07d0422e3878f064c8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '89f56b035f9406771bcfd02c4e028d246a1c3132', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '325b4225d203241b8be7566a60ac506ca77108eb' })), h("div", { key: '2d28afc89b2155e0fa629d174dc9601283002fb8', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '0b5d46698d73145af331452c27b5c4ecf9b03491', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (h("host", { key: '1a19eb5a6afbcd82294bca60ea5bad6d79f077f7', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'c78b6fc5275df51ed5360b26336b901ebe02ce52', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '80f259e36cf655fab7e073f5c06acbdcfddcde95', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: 'e5bec3c8e55c593616037844b2d827871a7ccb77' })), h("div", { key: 'ec67f53732de7806efe6fd863b9d0e737eac8198', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'fc3dd4c07a8faac3122c418f0646c495d33b912b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
     static get is() { return "ls-select-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class LsTextInput {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h(Host, { key: 'efd1b5f431d736f4169fde7427c03928cc97aabd', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'bf6c98bb8531835cfddb19f94b64cc199e5f61b0', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), h("div", { key: '0edc424a3a5d351f0643aacacfe681f7964c13db', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '586286e7682dc19b140da077381a9495594f1552', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '40c3321547d42662cfb72e50e42582d2d925f4d9', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'c2b290f3ed83e6c3f57bc3b3097b2d42377093e7', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '8f98aeaa1c086e2ba3f0813a07e74df9838e3968', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+        return (h(Host, { key: 'db79cff0e48b633e862776b12a2e5dcd443bf710', class: 'host' }, fieldIcon && (h("ls-icon", { key: '74cdc714699243b8e12a59570597a71780dc612a', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), h("div", { key: '6d10e6d29bbb4253ca80349c87fcd587958558db', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '1bb407fb405080e21b43c7c424c6c54949b1cec3', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '9d66c970210ed8ae898a2a843193ce3601004273', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '905a87886a05dc642bedee095157d4c35dcdb45d', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '726e82e0afcc93d061a7ea5b5d33e2341da23e70', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
     static get is() { return "ls-text-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js CHANGED Viewed

@@ -26,7 +26,7 @@ export class LsTextareaInput {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '1d15c458b28af68b80aa8202a0752428309a2fb8', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'f50cbadb5ad3dbead6e5b3e05827fe40e445e63e', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '1ddb10713cda1237a569d00e66baabfe4573519e', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'da68e9d7eceb82ed4842ec013dc7c9c571490663', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '2d0b2def44cda6324ffde6b166c097ea7e5d27c6', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '441ce62d6eb057295b18bd7b10d2214247079a4d', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '746d2a9fcc47146be5b62d5afd6337f332db2427', id: 'buttonIcon', name: buttonIcon }))))));
+        return (h("host", { key: '52a02c0528016be1702751526201236b891821f1', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'd8e5496a1c1874f4873304f23827b18347e03b4a', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '2c6c117270f605babfc13ef2e8b0925364219e68', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'd106b408d2dfc3423bd3e4eb8bcfdc94784ffc35', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '315f8e40f8fddbc347325f99e30fd0da0026fd61', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '9795d8028761deffc64d932c3ccc7d6e82e7d905', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'fa5c412681a1b01a36c759100c4c009e870a0d0d', id: 'buttonIcon', name: buttonIcon }))))));
     }
     static get is() { return "ls-textarea-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/ls-formfield.js CHANGED Viewed

@@ -37,10 +37,10 @@ export class LsFormfield {
     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 (h("host", { key: 'b97320b063e1c80460b03b61637c82db67d42f2c', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: '878ecc2332b69c6801d2818a0e7c5fd1fe4009a8', class: "formfield-top-elements" }, h("div", { key: '8430689883d2b6ae6f2738c8854ff0bbc3662074', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: 'f4430dddc52d37be775d817ee54f442d6a17c013', name: labelIcon }), h("label", { key: '6914de667241020f4c23eddd7ca81fd02ef0481c', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '2e3202967b3acd4bc834c6e809f307af79f74316', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (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, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (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 }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (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' ? (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' ? (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' ? (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 })) : (h("p", null, "placeholder")), errorText ||
+        return (h("host", { key: 'cd4de6c8dd8399530dcf5087ec932a9f87034c2b', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: '66f5f2893e8b715a7f5f68e77af8ae16e8c015fc', class: "formfield-top-elements" }, h("div", { key: '52c7805ea9920bbeb95dd3f2cb570531f301d7f0', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: '0523cafbe32e898ca12a2da19cf48a3f2d4b9192', name: labelIcon }), h("label", { key: 'c2290dca28e5fc6db163eb2681b3a5716318913c', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '6f775314505004cd43aeb0d511d80cd3bce8301a', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (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, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (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 }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (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' ? (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' ? (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' ? (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 })) : (h("p", null, "placeholder")), errorText ||
             count ||
             countMax ||
-            (descriptionText && (h("div", { key: 'c2469ddfb668d4f91161245beb9828d3aaa78cfc', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: '657abb6daeccc091b7bf2b603c0d5f52288c4f21', class: "formfield-count-container" }, h("p", { key: '8e47dc6bd491f6c6b9ba9ce926187c588d7b8f1b', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '1362cf5526896aa051560d0a5a97cf13fab52ffe', class: countClass }, h("p", { key: '88e5d634fc4537fbc7bd0d7e41cb59dcf128cfdc' }, "/"), h("p", { key: '73e0c0238b0567e28c819b55976164d968037e3c' }, countMax))))))))));
+            (descriptionText && (h("div", { key: '792451e5b8490e42937cfef56afcc9875dd19960', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: 'ffbba12478b8724f771f7bb2e97e32535ffa6b2d', class: "formfield-count-container" }, h("p", { key: '140867dbe52880b2b7d262847ec4fbe827a63236', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: 'c1c25a3b7f810d2614d286034a76f214d6e5d64b', class: countClass }, h("p", { key: 'bc364afebb1650e5c35de6fb5334cffe6c3de736' }, "/"), h("p", { key: '7d82bdb23ab08a47f66773856afbb0b14aa30e64' }, countMax))))))))));
     }
     static get is() { return "ls-formfield"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-icon/ls-icon.js CHANGED Viewed

@@ -24,7 +24,7 @@ export class LsIcon {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (h("host", { key: 'e53edb8f22349510399881fb8e76190b03209751' }, icons
+        return (h("host", { key: '57f4194dd8219dfda70127ad03ada603438e0b47' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,

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

@@ -47,7 +47,7 @@ export class LsParticipantManager {
         return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '4f05b9b42935d385ac4dcf575dff6655a39b625c' }, h("div", { key: '07ec67a5c919dbc1258768dd7db80d21790a8c1e', class: "ls-editor-infobox" }, h("h2", { key: '365f0a1c25e77ffc1b89354b867e7844b53a40fe', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'cc7e0187d20492ea7568bd77ef4c3cb2df8b12ce', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '61045bc3accf319bfd5c84953f6a0066b6bd2114', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
+        return (h(Host, { key: '42b6d146cc2155c18759b2239b94e6a2061be7a8' }, h("div", { key: '6aabfc38a5efc199b46cce0f5184e5e0b6aedc70', class: "ls-editor-infobox" }, h("h2", { key: '9a1c852dad10756a01af085ba9e3d4ca6fcc4550', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'd074b9ad19836f29501f727bcd7c194667fe42d5', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '0bf744b4645c9476673a78c1bbdfdfae712ea308', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
             return (h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
@@ -67,7 +67,7 @@ export class LsParticipantManager {
                     color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
                     textTransform: 'capitalize'
                 } }, r.roleType))));
-        })), h("div", { key: '295045bfeca2144d556311574fe6c34e74453c40', class: 'add-participant-button' }, h("button", { key: '6a0a02834fd09aff180fffc58983a0eac9fde61d', onClick: () => this.createHandler() }, h("ls-icon", { key: 'd623a2c621f730b96339657d49be661c96d1d9fa', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'ce3954251ce0b939dab95f9ea1772da1bb0cf9ea' }, "Add Participant"))), h("slot", { key: '65e160a9fde84fb8a09b14e60c992324bd9a8892' })));
+        })), h("div", { key: 'c439b737066174e8067665b0693e9b576aa3a1d9', class: 'add-participant-button' }, h("button", { key: '02b7de44dc38942ed7b78e8ad853202bc93b779a', onClick: () => this.createHandler() }, h("ls-icon", { key: '00d4bbacbc5bdcc72580c275a42e5288fc464133', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '2f9677949581108623e917e2ecaaec90b5d60e6f' }, "Add Participant"))), h("slot", { key: '762710558e4f5f6e1e6a18ba12e9d0a895eac5c2' })));
     }
     static get is() { return "ls-participant-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-participant-select/ls-participant-select.js CHANGED Viewed

@@ -42,21 +42,21 @@ export class LsParticipantSelect {
     };
     render() {
         console.log(this.selectedRole);
-        return (h(Host, { key: '097514e82e870acdeaea5520a07dee58d623e8dd' }, h("div", { key: '520a4fc7e5d787795147eb09c28a69b7c31fd1c6', class: "dropdown" }, h("div", { key: '3319bd3d55f1cc265deebe05d065af83a79631bf', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '0454343f6b2a6af37933b30d7c50c757f2cc389f', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a8e03eee8c2baa5f3d35faac7c7c32a8ee467a97', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '935be72455a27991639c6fa9affdc040a14e220a', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'ff42263315110f6fe02a926d075aebb753dcc9f6', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: '0d54951d113826d171f3de27b5e0ffeaf11ad69d', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '07e310527a339b51a36069832fee0cf891eadf8c', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '2bc97987345d296f8426aa0359b84c65bb675b48', class: 'selected-role-label', style: {
+        return (h(Host, { key: '2546c595c144d147e18b90f75d32abe3f4483a05' }, h("div", { key: 'd9dd58e668607ea40d3b8d4c92ba4d0cc7d31741', class: "dropdown" }, h("div", { key: 'd3d6d7dcaa53a4132a8a076b1aff505fcfe2e22f', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'db053131d580bf0c6f95aba0f76722968c64f5dd', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f08bf0b9f6d35e97b74d6752920ada2db331588b', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '6acc3898fc70f6ed562b6b417a6287d9e8d9aa0f', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'e3d63db7bde1bf0c2d80ddeb32a75cdd7d8ee3c5', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'e70e7f62e32e576d2f818fc9668cf67efe90eff6', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: 'e0f59a31396c7cbe83625c6cda5de3355a37af30', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '736d9cf4b6739f4d79a9dc0ea95d72d4c209c720', class: 'selected-role-label', style: {
                 background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
                 color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
-            } }, h("ls-icon", { key: '90318f0f94f60b0e95d0ffc30576c31759df2ff9', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: '4f53ff5d8f3e14f6f705fc57b5bb3206ea350562', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '326107f673004346ff3232515e1630ee7090f927', name: "chevron-down" }))), this.isOpen && (h("div", { key: 'bc188253d880bf993b585f924defabb0efd66ea7', class: "dropdown-list" }, h("div", { key: 'c3886e83c8514ae2ac2616c23f3583a3cf036ff5', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, h("ls-icon", { key: '20db02315c6cebeab0160d1887098f13c8d43bb7', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
+            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'e031663587e0818a85d4a6a0e4741cf64fe93d9f', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '5c4a6f35485357aef4cc4a1f815e129caec7ee6c', name: "chevron-down" }))), this.isOpen && (h("div", { key: 'e7a39dcefb844c284dd1966d0fe4e252fa6c61e4', class: "dropdown-list" }, h("div", { key: '9265d73fee2da37d2f06a6fc72551e5ce50bb378', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': `var(--${defaultRolePalette[0]}-10)`,
                 '--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '25c93faa92cdbeed92514b5df9181cc7673135cc', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '5396b4f41ec9687befaa65bc3fad7028b89ce5a1', class: 'role-icon', style: {
                 background: `var(--${defaultRolePalette[0]}-40)`,
                 color: `var(--${defaultRolePalette[0]}-80)`,
-            } }, h("ls-icon", { key: 'f8285a338ea604f76b1a1dc7e3f716e7c99890fe', name: "user" })), h("div", { key: '2678585faff4e351e0d4ab14b3ad198e2dd7a89c', class: 'role-text' }, h("p", { key: '5e4aaa375421f9a5f7a03c4c937f7f43bf29906b', class: 'role-name', style: {
+            } }, h("ls-icon", { key: '69241bdb27d0408c843edcca4e7077e741819747', name: "user" })), h("div", { key: '7cbe54d018e5064c13e0b7fa40c9ae56c1d484a1', class: 'role-text' }, h("p", { key: 'd2cf6f7ef8a1f2a4d4aed67cc9f657810c59c309', class: 'role-name', style: {
                 '--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
-            } }, 'Sender'), h("p", { key: '16bc966af7ea7462505ac34806b98ac94295ee61', class: 'role-type', style: {
+            } }, 'Sender'), h("p", { key: '6c62ba47fb4d6a6c2787594045accbbc598a2909', class: 'role-type', style: {
                 '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
-            } }, "You")), h("ls-icon", { key: '55f4d9f94a4b7dfec072e4a26a239b44f9b4b36f', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), h("ls-icon", { key: '23affdb808fde5972b4b1cd55ff4349332341fde', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': `var(--${this.participantColor(r?.signerIndex)}-10)`,
                 '--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -68,7 +68,7 @@ export class LsParticipantSelect {
                 '--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
             } }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), h("p", { class: 'role-type', style: {
                 '--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), h("slot", { key: '36d04c99b0eea3e78c11e1cc269b82a35562ab2a' })));
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), h("slot", { key: '0b22057a23c3ffabc137bd677529eacaf151a689' })));
     }
     static get is() { return "ls-participant-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-statusbar/ls-statusbar.js CHANGED Viewed

@@ -36,11 +36,11 @@ export class LsStatusbar {
     }
     render() {
         console.log('editor', this.editor);
-        return (h(Host, { key: '8e9e1e244b4fc8ea111d2f8ae389b226caf204d9' }, h("div", { key: 'cb05827b0b9c57cc038ccb854669a7fa687a8559', class: "status-bar-section" }, h("button", { key: '9626704051c452f0b2aa4160fc0940a269aa0b97', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '848e4d939f839f5d12ed193e802ee936030929da', name: "zoom-out" })), h("div", { key: 'd95981efcabe65e1101659904df22555245eb31a' }, h("input", { key: '880ca323ccef733bf8557412a7d45a732aa5cb12', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '49754f8b4b8b55a948e1d18ca1eabfc7178f001d', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '582907c3c513ae45237334fc988ca551a1df24f0', name: "zoom-in" }))), h("div", { key: '5e8ba9b4958d4ba01fea0a5eb6cccdbc645b9385', class: "status-bar-section" }, h("button", { key: '68e06dd284961cf8dec02e16c302dc1fc6a22796', onClick: () => this.fitWidth() }, h("ls-icon", { key: '84a8b7bd659d3d80fc52201f44725bb5670b4905', name: "fit-width" })), h("button", { key: '49f1dd909454a0adbd6e8cb950ba5b1c93e6a99c', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'b41c9c936499852e7eaf45417b2f2f492800731e', name: "fit-height" }))), h("div", { key: 'cb133d10f67ea7eec2fadcd202879fb429026a1c', class: "status-bar-section" }, h("button", { key: 'c65d52ad4801488b5a734047dd6866c467b8b3b4', onClick: () => {
+        return (h(Host, { key: 'fc7781c2c5a924b0a7ab90959492f761786518a4' }, h("div", { key: '4a2a72594cc7cb4a9ef4be91e34a0646c9d63d75', class: "status-bar-section" }, h("button", { key: '744bb3198b39dd76d0a9efa5b74e5514cd94cc9a', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '0b854dea52202f0b102b9e4459a11ec8f1f3f44e', name: "zoom-out" })), h("div", { key: '2a3b8dc7ab9ceedf64f224e08479903aa61c1d2e' }, h("input", { key: 'cf20f6bea7a1a2821e4fb8cda2001ba9805f07e1', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'f961d1171cf4a3184b466478d98db577ea3c7d97', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '3c899a42721039209a2816ee486f40ca699a2660', name: "zoom-in" }))), h("div", { key: 'f4400312361c6508caab82290c388ef50087d0b7', class: "status-bar-section" }, h("button", { key: '0b5ff66419088d9efc53a56da417228835a0d6c3', onClick: () => this.fitWidth() }, h("ls-icon", { key: '2c51acad35dadc37c926b6d93ccf9864c8603197', name: "fit-width" })), h("button", { key: '199a4d7a1ee262335898f4a0b9f743f5dbb58a6c', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'ebf72e264d3978a77f6aa42af33172c201bd0ed3', name: "fit-height" }))), h("div", { key: '232fe73b3c843ddfc5337967afa5263d26b039ac', class: "status-bar-section" }, h("button", { key: '8462ed44d60662584133af1c2e9b4f169524e3ee', onClick: () => {
                 this.editor.pagePrev();
-            } }, h("ls-icon", { key: '47661f31d5e771a3e5fa5b33679afe6c4e2c851b', name: "chevron-left" })), h("p", { key: 'b707b96884c61814dc82e331c0bb4d132b093fd3' }, "1 / 2"), h("button", { key: '23c87501b81c71dc9c1ac7f2e861467138a4d71c', onClick: () => {
+            } }, h("ls-icon", { key: 'ed62c9d938f759fbc13f236b2605dde42abe71ff', name: "chevron-left" })), h("p", { key: 'e2d701a6f41428a61d3bc9f40ca6eca95a8c9f03' }, "1 / 2"), h("button", { key: '63f5df0c0fffbb448b7882a59b18c0964849b8f1', onClick: () => {
                 this.editor.pageNext();
-            } }, h("ls-icon", { key: '6f6f802e9237a16f1ac83b094b79918e89f47cd0', name: "chevron-right" }))), h("slot", { key: '555034a1229da45a3ce6e00a814ceedd6e72f4b6' })));
+            } }, h("ls-icon", { key: 'ec596ac9fe71b1f79a48b4622cff8c35cf7004c0', name: "chevron-right" }))), h("slot", { key: '38af107db608c1595eb4a2ce8879e5b8593b2f2a' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-toggle/ls-toggle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class LsToggle {
     render() {
-        return (h(Host, { key: '1ce88fcc6e390bb710e27c47b988574afaa9c9f6' }, h("label", { key: '6d76512b1bdd6c116ab62bfaf1b9178d87019b02', class: "switch" }, h("input", { key: 'eadd916c86f9dbe94fe9d22f65f82f6b72ea630a', type: "checkbox" }), h("span", { key: '9237d68fed12e736c01a5889f801a1398883dde4', class: "slider round" })), h("slot", { key: '19eca8c7489cdfb981d4a6093aef3246b9337abd' })));
+        return (h(Host, { key: '2ba79ca25f70615ba9c0c5d1c80d076ffd70b56f' }, h("label", { key: 'fb36b4a32987fd2649fb261a7545d7cb6a77fae1', class: "switch" }, h("input", { key: '7fc8ceaa8520e553c2c5c8647e6aeba9dd818672', type: "checkbox" }), h("span", { key: '0525930788e55b0bcc5052d4228028971f3af7ff', class: "slider round" })), h("slot", { key: 'd95d740346777a2d51a72c115367f30701da45ee' })));
     }
     static get is() { return "ls-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-toolbar/ls-toolbar.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: 'c43519161f0c44b7f06b5b4e2a14bd81d83ecfdc' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: 'e20ff476ede1359973876658c5e70fd6039b2e3d' })));
+        return (h(Host, { key: '23262246e33898029d23aeb17b0404eaf438e55c' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '415c3c763e3f42f2e7375bcc9c74ebf777fce30a' })));
     }
     static get is() { return "ls-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class LsToolboxField {
         }
     }
     render() {
-        return (h(Host, { key: '28635190b959516d2805743afe73a75899e93188', draggable: "true" }, h("div", { key: 'ebac5f01b6e811b287d3602e11ff9d9b2d2cbf42', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: '8c90a428b4996db02725b8c69c347fbd3e7f7f98', name: this.icon, size: "20" })), h("p", { key: '7707d244b00898a9c3efb2ba8d2a64665b737b69', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '9dc296c2b3da9b561a95fc7cc5cf28f7a85e27c2', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (h(Host, { key: 'a25992d9ba60c16ea2dbdb8def90888240d3e21c', draggable: "true" }, h("div", { key: 'ed40b47f1dcdf0f5d235aa6113941a1ae988c4ce', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: '9dd0f6d8c45eaa4615a7948a31eefc255d63f7d9', name: this.icon, size: "20" })), h("p", { key: '86bede27a53ccc7fae202a2115c72036c4214b5e', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '84de9ecb8ea571f956e8ff048ed3e08382e2c695', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ls-document-options.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-BdJAlep4.js';
+import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-BneR1hef.js';
 const LsDocumentOptions = LsDocumentOptions$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,41 +1,42 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
 import { a as alter, o as oob, m as matchData, g as getApiType } from './p-DqJ_uIFZ.js';
-import { d as defineCustomElement$A } from './p-BdJAlep4.js';
-import { d as defineCustomElement$z } from './p-DasXNgMG.js';
-import { d as defineCustomElement$y } from './p-C9AqDCzm.js';
-import { d as defineCustomElement$x } from './p-BuX-_d2U.js';
-import { d as defineCustomElement$w } from './p-vll2Fgrb.js';
-import { d as defineCustomElement$v } from './p-C9d-OiqW.js';
-import { d as defineCustomElement$u } from './p-BVXVFpxy.js';
-import { d as defineCustomElement$t } from './p-CQr7nmKb.js';
-import { d as defineCustomElement$s } from './p-CixKuBuL.js';
-import { d as defineCustomElement$r } from './p-Cotorbsf.js';
-import { d as defineCustomElement$q } from './p-BMsZB-GL.js';
-import { d as defineCustomElement$p } from './p-CiKsFis4.js';
-import { d as defineCustomElement$o } from './p-8Um41Jug.js';
-import { d as defineCustomElement$n } from './p-4a5NqPpg.js';
-import { d as defineCustomElement$m } from './p-DEu3aUkH.js';
-import { d as defineCustomElement$l } from './p-DVFCDy_Y.js';
-import { d as defineCustomElement$k } from './p-C5iwKF3r.js';
-import { d as defineCustomElement$j } from './p-ChfFmzMa.js';
-import { d as defineCustomElement$i } from './p-C2ZxEVhB.js';
-import { d as defineCustomElement$h } from './p-CdEexh_g.js';
-import { d as defineCustomElement$g } from './p-BvQE1dGX.js';
-import { d as defineCustomElement$f } from './p-8Yvey07o.js';
-import { d as defineCustomElement$e } from './p-DLF5DiJI.js';
-import { d as defineCustomElement$d } from './p-BFSBsh85.js';
-import { d as defineCustomElement$c } from './p-DKOj6SYm.js';
-import { d as defineCustomElement$b } from './p-V-QJ5j_K.js';
-import { d as defineCustomElement$a } from './p-DOULSSR_.js';
-import { d as defineCustomElement$9 } from './p-DeaQdy4U.js';
-import { d as defineCustomElement$8 } from './p-Dc4pAKEn.js';
-import { d as defineCustomElement$7 } from './p-BMRIiOsQ.js';
-import { d as defineCustomElement$6 } from './p-CdL5cKO8.js';
-import { d as defineCustomElement$5 } from './p-DIeSYRR1.js';
-import { d as defineCustomElement$4 } from './p-9Z-GK0Bd.js';
-import { d as defineCustomElement$3 } from './p-CoH616os.js';
-import { d as defineCustomElement$2 } from './p-DxZasSi4.js';
+import { d as defineCustomElement$B } from './p-BneR1hef.js';
+import { d as defineCustomElement$A } from './p-DasXNgMG.js';
+import { d as defineCustomElement$z } from './p-C9AqDCzm.js';
+import { d as defineCustomElement$y } from './p-DVz19y7K.js';
+import { d as defineCustomElement$x } from './p-DzmtJl3e.js';
+import { d as defineCustomElement$w } from './p-iC6XYfS_.js';
+import { d as defineCustomElement$v } from './p-CttUZd3c.js';
+import { d as defineCustomElement$u } from './p-3LU2FV3W.js';
+import { d as defineCustomElement$t } from './p-DjavAQqZ.js';
+import { d as defineCustomElement$s } from './p-DoywjJAr.js';
+import { d as defineCustomElement$r } from './p-1Ir9-yQU.js';
+import { d as defineCustomElement$q } from './p-CfCokEUT.js';
+import { d as defineCustomElement$p } from './p-Dzn5xAM4.js';
+import { d as defineCustomElement$o } from './p-DCLBmOtj.js';
+import { d as defineCustomElement$n } from './p-ucaurEVy.js';
+import { d as defineCustomElement$m } from './p-EsA1p6L3.js';
+import { d as defineCustomElement$l } from './p-C6YMMVJ1.js';
+import { d as defineCustomElement$k } from './p-DzHh5tyo.js';
+import { d as defineCustomElement$j } from './p-DEE854iZ.js';
+import { d as defineCustomElement$i } from './p-B7VyU7YH.js';
+import { d as defineCustomElement$h } from './p-BSN2cMdj.js';
+import { d as defineCustomElement$g } from './p-rEZh-cMt.js';
+import { d as defineCustomElement$f } from './p-Bpzk1RMu.js';
+import { d as defineCustomElement$e } from './p-aOAZ6c8y.js';
+import { d as defineCustomElement$d } from './p-p3xY_X0j.js';
+import { d as defineCustomElement$c } from './p-DY_A9zAm.js';
+import { d as defineCustomElement$b } from './p-Bh-iiZW1.js';
+import { d as defineCustomElement$a } from './p-CuNrTyGb.js';
+import { d as defineCustomElement$9 } from './p-BsqbS8f_.js';
+import { d as defineCustomElement$8 } from './p-Bby5tjrS.js';
+import { d as defineCustomElement$7 } from './p-BCpsA9BY.js';
+import { d as defineCustomElement$6 } from './p-JBc2BCIT.js';
+import { d as defineCustomElement$5 } from './p-lTOSc-NN.js';
+import { d as defineCustomElement$4 } from './p-BPkbTOIU.js';
+import { d as defineCustomElement$3 } from './p-Dsf8KDrt.js';
+import { d as defineCustomElement$2 } from './p-CtMHOHAp.js';
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -24895,7 +24896,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-autosign", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-formfield", "ls-icon", "ls-number-input", "ls-participant-manager", "ls-participant-select", "ls-radio-input", "ls-select-input", "ls-statusbar", "ls-text-input", "ls-textarea-input", "ls-toggle", "ls-toolbar", "ls-toolbox-field"];
+    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-formfield", "ls-icon", "ls-number-input", "ls-participant-manager", "ls-participant-select", "ls-radio-input", "ls-select-input", "ls-statusbar", "ls-text-input", "ls-textarea-input", "ls-toggle", "ls-toolbar", "ls-toolbox-field"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-document-viewer":
             if (!customElements.get(tagName)) {
@@ -24904,55 +24905,60 @@ function defineCustomElement$1() {
             break;
         case "ls-document-options":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "ls-editor-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "ls-editor-table":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "ls-feature-column":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "ls-field-alignment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "ls-field-distribute":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "ls-field-format":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "ls-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
                 defineCustomElement$q();
             }