legalesign-document-viewer 0.2.6 → 0.2.8
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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ls-document-options_37.cjs.entry.js +71 -63
- package/dist/cjs/ls-document-options_37.cjs.entry.js.map +1 -1
- package/dist/cjs/ls-document-viewer.cjs.js +1 -1
- package/dist/collection/components/ls-document-viewer/defaultPalette.js +34 -20
- package/dist/collection/components/ls-document-viewer/defaultPalette.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +3 -27
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
- package/dist/collection/components/ls-editor-field/ls-editor-field.css +0 -244
- package/dist/collection/components/ls-editor-field/ls-editor-field.js +4 -23
- package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js +9 -9
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map +1 -1
- package/dist/collection/components/ls-participant-select/ls-participant-select.js +20 -20
- package/dist/collection/components/ls-participant-select/ls-participant-select.js.map +1 -1
- package/dist/collection/types/RoleColor.js.map +1 -1
- package/dist/components/ls-document-viewer.js +18 -24
- package/dist/components/ls-document-viewer.js.map +1 -1
- package/dist/components/ls-editor-field.js +1 -1
- package/dist/components/ls-field-properties-date.js +1 -1
- package/dist/components/ls-field-properties-email.js +1 -1
- package/dist/components/ls-field-properties-file.js +1 -1
- package/dist/components/ls-field-properties-general.js +1 -1
- package/dist/components/ls-field-properties-image.js +1 -1
- package/dist/components/ls-field-properties-multiple.js +1 -1
- package/dist/components/ls-field-properties-number.js +1 -1
- package/dist/components/ls-field-properties-signature.js +1 -1
- package/dist/components/ls-field-properties-text.js +1 -1
- package/dist/components/ls-field-properties.js +1 -1
- package/dist/components/ls-participant-manager.js +1 -1
- package/dist/components/ls-participant-select.js +1 -1
- package/dist/components/ls-toolbar.js +1 -1
- package/dist/components/{p-EsA1p6L3.js → p-8RGO84cp.js} +3 -3
- package/dist/components/{p-EsA1p6L3.js.map → p-8RGO84cp.js.map} +1 -1
- package/dist/components/{p-DCLBmOtj.js → p-BkaVFoty.js} +3 -3
- package/dist/components/{p-DCLBmOtj.js.map → p-BkaVFoty.js.map} +1 -1
- package/dist/components/p-C7MV1qeW.js +160 -0
- package/dist/components/p-C7MV1qeW.js.map +1 -0
- package/dist/components/{p-ucaurEVy.js → p-C8aZzTni.js} +3 -3
- package/dist/components/{p-ucaurEVy.js.map → p-C8aZzTni.js.map} +1 -1
- package/dist/components/{p-DEE854iZ.js → p-CAWRYUXI.js} +3 -3
- package/dist/components/{p-DEE854iZ.js.map → p-CAWRYUXI.js.map} +1 -1
- package/dist/components/{p-D_ZsRxGa.js → p-CVLOshSp.js} +3 -3
- package/dist/components/{p-D_ZsRxGa.js.map → p-CVLOshSp.js.map} +1 -1
- package/dist/components/{p-rEZh-cMt.js → p-CY4sHy70.js} +3 -3
- package/dist/components/{p-rEZh-cMt.js.map → p-CY4sHy70.js.map} +1 -1
- package/dist/components/{p-B7VyU7YH.js → p-CdCLS2m9.js} +3 -3
- package/dist/components/{p-B7VyU7YH.js.map → p-CdCLS2m9.js.map} +1 -1
- package/dist/components/{p-BSN2cMdj.js → p-CgC585pW.js} +3 -3
- package/dist/components/{p-BSN2cMdj.js.map → p-CgC585pW.js.map} +1 -1
- package/dist/components/p-CuWkMoT7.js +40 -0
- package/dist/components/p-CuWkMoT7.js.map +1 -0
- package/dist/components/{p-DzHh5tyo.js → p-D5Dk1eVp.js} +3 -3
- package/dist/components/{p-DzHh5tyo.js.map → p-D5Dk1eVp.js.map} +1 -1
- package/dist/components/{p-Bh-iiZW1.js → p-DCCgPfmK.js} +12 -12
- package/dist/components/p-DCCgPfmK.js.map +1 -0
- package/dist/components/{p-C6YMMVJ1.js → p-DTX1F_IO.js} +3 -3
- package/dist/components/{p-C6YMMVJ1.js.map → p-DTX1F_IO.js.map} +1 -1
- package/dist/components/{p-1Ir9-yQU.js → p-DTkBayzz.js} +11 -11
- package/dist/components/{p-1Ir9-yQU.js.map → p-DTkBayzz.js.map} +1 -1
- package/dist/components/{p-D4JCAjlc.js → p-D_N3_nSq.js} +23 -23
- package/dist/components/p-D_N3_nSq.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ls-document-options_37.entry.js +71 -63
- package/dist/esm/ls-document-options_37.entry.js.map +1 -1
- package/dist/esm/ls-document-viewer.js +1 -1
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/{p-3e954354.entry.js → p-d5fa8c23.entry.js} +5 -5
- package/dist/ls-document-viewer/p-d5fa8c23.entry.js.map +1 -0
- package/dist/types/components/ls-document-viewer/defaultPalette.d.ts +2 -1
- package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +0 -5
- package/dist/types/components/ls-editor-field/ls-editor-field.d.ts +1 -2
- package/dist/types/components/ls-field-properties-date/ls-field-properties-date.d.ts +1 -1
- package/dist/types/components/ls-field-properties-email/ls-field-properties-email.d.ts +1 -1
- package/dist/types/components/ls-field-properties-file/ls-field-properties-file.d.ts +1 -1
- package/dist/types/components/ls-field-properties-general/ls-field-properties-general.d.ts +1 -1
- package/dist/types/components/ls-field-properties-image/ls-field-properties-image.d.ts +1 -1
- package/dist/types/components/ls-field-properties-multiple/ls-field-properties-multiple.d.ts +1 -1
- package/dist/types/components/ls-field-properties-number/ls-field-properties-number.d.ts +1 -1
- package/dist/types/components/ls-field-properties-signature/ls-field-properties-signature.d.ts +1 -1
- package/dist/types/components/ls-field-properties-text/ls-field-properties-text.d.ts +1 -1
- package/dist/types/components/ls-participant-manager/ls-participant-manager.d.ts +1 -1
- package/dist/types/components/ls-participant-select/ls-participant-select.d.ts +1 -1
- package/dist/types/components.d.ts +0 -12
- package/dist/types/types/RoleColor.d.ts +11 -2
- package/package.json +1 -1
- package/dist/components/p-Bh-iiZW1.js.map +0 -1
- package/dist/components/p-C00GqV9f.js +0 -26
- package/dist/components/p-C00GqV9f.js.map +0 -1
- package/dist/components/p-D4JCAjlc.js.map +0 -1
- package/dist/components/p-xCgJuAC2.js +0 -162
- package/dist/components/p-xCgJuAC2.js.map +0 -1
- package/dist/ls-document-viewer/p-3e954354.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DTkBayzz.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,q3IAAq3I;;MCQr4I,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;AACpB,IAAA,QAAQ;IAEhB,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE;YAChD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe;AACtC,gBAAA,KAAK,WAAW;AACd,oBAAA,OAAO,CAAA,CAAA,+BAAA,EAAA,EAA+B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACtE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,CAAA,CAAA,4BAAA,EAAA,EAA4B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACnE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,CAAA,CAAA,8BAAA,EAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACrE,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,CAAA,CAAA,2BAAA,EAAA,EAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AAClE,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,CAAA,CAAA,2BAAA,EAAA,EAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AAClE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA;AACE,oBAAA,OAAO,CAAA,CAAA,6BAAA,EAAA,EAA6B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;;;aAGjE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;AACnD,YAAA,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;;IAIpE,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,EACrC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties/ls-field-properties.css?tag=ls-field-properties&encapsulation=shadow","src/components/ls-field-properties/ls-field-properties.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n padding: 1rem;\n}\n\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: fit-content;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\n\n@Component({\n tag: 'ls-field-properties',\n styleUrl: 'ls-field-properties.css',\n shadow: true,\n})\nexport class LsFieldProperties {\n @Prop() dataItem: LSApiElement[];\n\n renderFields() {\n if (this.dataItem && this.dataItem?.length === 1) {\n switch (this.dataItem[0].formElementType) {\n case 'signature':\n return <ls-field-properties-signature dataItem={this.dataItem[0]} />\n case 'date':\n return <ls-field-properties-date dataItem={this.dataItem[0]} />\n case 'autodate':\n return <ls-field-properties-date dataItem={this.dataItem[0]} />\n case 'text':\n return <ls-field-properties-text dataItem={this.dataItem[0]} />\n case 'number':\n return <ls-field-properties-number dataItem={this.dataItem[0]} />\n case 'autosign':\n return <ls-field-properties-autosign dataItem={this.dataItem[0]} />\n case 'email':\n return <ls-field-properties-email dataItem={this.dataItem[0]} />\n case 'image':\n return <ls-field-properties-image dataItem={this.dataItem[0]} />\n case 'file':\n return <ls-field-properties-file dataItem={this.dataItem[0]} />\n default:\n return <ls-field-properties-general dataItem={this.dataItem[0]} />\n\n }\n } else if (this.dataItem && this.dataItem?.length > 1)\n return <ls-field-properties-multiple dataItem={this.dataItem} />\n\n }\n\n render() {\n return (\n <Host>\n {this.dataItem && this.renderFields()}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
|
|
2
|
-
import { d as defaultRolePalette } from './p-
|
|
2
|
+
import { d as defaultRolePalette } from './p-CuWkMoT7.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
|
|
4
4
|
|
|
5
5
|
const lsParticipantSelectCss = ":host{display:inline-block}*{margin:0}.dropdown{display:flex;align-items:center;position:relative}.dropdown-header{border-radius:0.625rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.selected-role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh;overflow-y:auto}.dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem}.dropdown-item.selected,.dropdown-item.selected:hover{background:var(--background-selected, #e0e2e5)}.dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.role-text{display:flex;flex-direction:column;width:100%}.dropdown-item .check-icon{color:var(--gray-40, #d8d9dc)}.dropdown-item.selected .check-icon{color:var(--check-icon-selected)}.role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;}.role-type{color:var(--gray-80, #787a80);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-item.selected .role-name{color:var(--role-name-selected)}.dropdown-item.selected .role-type{color:var(--role-type-selected)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}.expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.5rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
@@ -50,37 +50,37 @@ const LsParticipantSelect = /*@__PURE__*/ proxyCustomElement(class LsParticipant
|
|
|
50
50
|
console.log('Selected role:', this.selectedRole);
|
|
51
51
|
}
|
|
52
52
|
participantColor = (index) => {
|
|
53
|
-
return
|
|
53
|
+
return defaultRolePalette[index % 100] || defaultRolePalette[0];
|
|
54
54
|
};
|
|
55
55
|
render() {
|
|
56
56
|
console.log(this.selectedRole);
|
|
57
|
-
return (h(Host, { key: '
|
|
58
|
-
background:
|
|
59
|
-
color:
|
|
60
|
-
} }, h("ls-icon", { key: '
|
|
61
|
-
(this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: '
|
|
62
|
-
'--background-selected':
|
|
63
|
-
'--check-icon-selected':
|
|
64
|
-
}, 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: '
|
|
65
|
-
background:
|
|
66
|
-
color:
|
|
67
|
-
} }, h("ls-icon", { key: '
|
|
68
|
-
'--role-name-selected':
|
|
69
|
-
} }, 'Sender'), h("p", { key: '
|
|
70
|
-
'--role-type-selected':
|
|
71
|
-
} }, "You")), h("ls-icon", { key: '
|
|
72
|
-
'--background-selected':
|
|
73
|
-
'--check-icon-selected':
|
|
57
|
+
return (h(Host, { key: '376dc00f9ed35a608669050a14c3a6ec77222ae1' }, h("div", { key: 'bffe48d89c04e6d38de5a34d721fc62875233b8c', class: "dropdown" }, h("div", { key: '291784e958e45a72305fbdbbd220a3237e829e3b', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c4ae298b8fc164af5b3823952165885ece44a628', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f18b791336b7901257dae3215ed0ef4128928e1d', 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: '6334dacce4604c2b2a8208232e5e3e2dfbeda08d', 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: 'a00c1daded99250cea5638c25fde7449cea1fb3f', 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: '72c04a47d2856141e4d3083864f00c1ce2bc62ce', 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: 'f44c6d982de08655cdd15a03145b3a711d045df6', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: 'd83960f9c8999046c6e3e1137865e1036c651e85', class: 'selected-role-label', style: {
|
|
58
|
+
background: this.participantColor(this.selectedRole?.signerIndex).s20,
|
|
59
|
+
color: this.participantColor(this.selectedRole?.signerIndex).s80,
|
|
60
|
+
} }, h("ls-icon", { key: '733e9f601506e58fecd83f1a5062561ef68efb01', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
|
|
61
|
+
(this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'c5f307779432fdde633d661b19d213a8e0fbfdc3', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '5da68fd1dade4668364d2e328a6a404a772092eb', name: "chevron-down" }))), this.isOpen && (h("div", { key: '6545db8c8c0094cd863037f2e7c94c87e8a34f5b', class: "dropdown-list" }, h("div", { key: '4b4b466b9d9f553afb2dcbe4d1e1c623be4c3aa3', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
|
|
62
|
+
'--background-selected': defaultRolePalette[0].s10,
|
|
63
|
+
'--check-icon-selected': defaultRolePalette[0].s50,
|
|
64
|
+
}, 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: '9f4035308fc39587e417cf0a1e088a4175c118f9', class: 'role-icon', style: {
|
|
65
|
+
background: defaultRolePalette[0].s50,
|
|
66
|
+
color: defaultRolePalette[0].s80,
|
|
67
|
+
} }, h("ls-icon", { key: '282c618109165a412bf12d6d9eb17216f1136b0d', name: "user" })), h("div", { key: '1e45e9c7405abc4e230a28eb793d984a9a71434b', class: 'role-text' }, h("p", { key: '0971c5ec3fac86c604a27a9b258d1edc75116308', class: 'role-name', style: {
|
|
68
|
+
'--role-name-selected': defaultRolePalette[0].s80,
|
|
69
|
+
} }, 'Sender'), h("p", { key: '94047f15d4dd4046343924e7c553eb947c07e363', class: 'role-type', style: {
|
|
70
|
+
'--role-type-selected': defaultRolePalette[0].s80,
|
|
71
|
+
} }, "You")), h("ls-icon", { key: 'ec8d3927cd65ac9a2ed789c67f43c2556645cc7f', 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: {
|
|
72
|
+
'--background-selected': this.participantColor(r?.signerIndex).s10,
|
|
73
|
+
'--check-icon-selected': this.participantColor(r?.signerIndex).s50,
|
|
74
74
|
}, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
|
|
75
75
|
.querySelector('.check-icon')
|
|
76
76
|
?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
|
|
77
|
-
background: r.signerIndex > 100 ?
|
|
77
|
+
background: r.signerIndex > 100 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,
|
|
78
78
|
color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
|
|
79
79
|
} }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name', style: {
|
|
80
80
|
'--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
|
|
81
81
|
} }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), h("p", { class: 'role-type', style: {
|
|
82
82
|
'--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
|
|
83
|
-
} }, 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: '
|
|
83
|
+
} }, 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: 'b2f3b76d52dab109697f7edb8d81085c7237128f' })));
|
|
84
84
|
}
|
|
85
85
|
static get style() { return lsParticipantSelectCss; }
|
|
86
86
|
}, [257, "ls-participant-select", {
|
|
@@ -110,6 +110,6 @@ function defineCustomElement() {
|
|
|
110
110
|
defineCustomElement();
|
|
111
111
|
|
|
112
112
|
export { LsParticipantSelect as L, defineCustomElement as d };
|
|
113
|
-
//# sourceMappingURL=p-
|
|
113
|
+
//# sourceMappingURL=p-D_N3_nSq.js.map
|
|
114
114
|
|
|
115
|
-
//# sourceMappingURL=p-
|
|
115
|
+
//# sourceMappingURL=p-D_N3_nSq.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-D_N3_nSq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-participant-select/ls-participant-select.css?tag=ls-participant-select&encapsulation=shadow","src/components/ls-participant-select/ls-participant-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n* {\n margin: 0;\n}\n\n.dropdown {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.dropdown-header {\n border-radius: 0.625rem;\n border: 1px solid var(--gray-20, #edeff2);\n background: var(--gray-10, #f7f8fa);\n display: flex;\n padding: 0.125rem 0.125rem 0.125rem 0.5rem;\n align-items: center;\n gap: 0.5rem;\n}\n\n.placing-fields-text {\n color: var(--gray-90, #5e6066);\n text-align: center;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n margin: 0;\n}\n\n.selected-role-label {\n display: flex;\n padding: 0.125rem 0.375rem;\n justify-content: center;\n align-items: center;\n gap: 0.25rem;\n border-radius: 0.25rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.dropdown-list {\n position: absolute;\n top: 3rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: 18.5625rem;\n padding: 0.25rem;\n flex-direction: column;\n gap: 0.25rem;\n border-radius: 0.75rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: white;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n max-height: 40vh;\n overflow-y: auto;\n}\n\n.dropdown-item {\n display: flex;\n padding: 0.5rem 0.875rem 0.5rem 0.5rem;\n align-items: center;\n gap: 0.75rem;\n align-self: stretch;\n border-radius: 0.5rem;\n}\n\n.dropdown-item.selected,\n.dropdown-item.selected:hover {\n background: var(--background-selected, #e0e2e5);\n}\n\n.dropdown-item:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.role-icon {\n display: flex;\n padding: 0.5rem;\n border-radius: 0.625rem;\n}\n\n.role-text {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.dropdown-item .check-icon {\n color: var(--gray-40, #d8d9dc);\n}\n\n.dropdown-item.selected .check-icon {\n color: var(--check-icon-selected);\n}\n\n.role-name {\n color: var(--gray-100, #45484d);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1rem; /* 133.333% */\n}\n\n.role-type {\n color: var(--gray-80, #787a80);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.dropdown-item.selected .role-name {\n color: var(--role-name-selected);\n}\n\n.dropdown-item.selected .role-type {\n color: var(--role-type-selected);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: fit-content;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\n.expand-button {\n border: 0;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n border-radius: 0.5rem;\n justify-content: center;\n text-transform: capitalize;\n min-height: 2rem;\n min-width: 2rem;\n max-height: 2rem;\n max-width: 2rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-select',\n styleUrl: 'ls-participant-select.css',\n shadow: true\n})\nexport class LsParticipantSelect {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /**\n * The currently selected role.\n * {number}\n */\n @State() selectedRole: { signerIndex: number; name: string; roleType?: string } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };\n\n /**\n * The current template roles.\n * {LSApiRole}\n */\n @Prop() roles?: LSApiRole[] = [];\n\n @State() isOpen: boolean = false;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n // @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\n\n selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n this.selectedRole = role;\n this.isOpen = false;\n this.roleChange.emit(role.signerIndex);\n\n console.log('Selected role:', this.selectedRole);\n }\n\n participantColor = (index: number) => {\n return defaultRolePalette[index % 100] || defaultRolePalette[0];\n };\n\n render() {\n console.log(this.selectedRole);\n return (\n <Host>\n {/* <select onChange={(input) => {\n this.alter({ signer: parseInt((input.target as HTMLSelectElement).value) })\n }}>\n <option value=\"0\">Sender</option>\n {this.roles.map(r => <option value={r.signerIndex}>{r.name}</option>)}\n\n </select> */}\n <div class=\"dropdown\">\n <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" />\n <path\n 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\"\n fill=\"#46DBAA\"\n stroke=\"#F7F8FA\"\n />\n <path\n 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\"\n fill=\"#FAD232\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n stroke=\"#939599\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class={'placing-fields-text'}>Placing Fields for</p>\n <div\n class={'selected-role-label'}\n style={{\n background: this.participantColor(this.selectedRole?.signerIndex).s20,\n color: this.participantColor(this.selectedRole?.signerIndex).s80,\n }}\n >\n <ls-icon size=\"18\" name={this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n {this.selectedRole.name ||\n (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n </div>\n <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n <ls-icon name=\"chevron-down\"></ls-icon>\n </button>\n </div>\n {this.isOpen && (\n <div class=\"dropdown-list\">\n <div\n class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[0].s10,\n '--check-icon-selected': defaultRolePalette[0].s50,\n }}\n onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: defaultRolePalette[0].s50,\n color: defaultRolePalette[0].s80,\n }}\n >\n <ls-icon name=\"user\" />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[0].s80,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[0].s80,\n }}\n >\n You\n </p>\n </div>\n\n <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n </div>\n {this.roles.map(r => (\n <div\n class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': this.participantColor(r?.signerIndex).s10,\n '--check-icon-selected': this.participantColor(r?.signerIndex).s50,\n }}\n onClick={() => this.selectRole(r)}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement)\n .querySelector('.check-icon')\n ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: r.signerIndex > 100 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,\n color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n }}\n >\n <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,\n }}\n >\n {r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,\n }}\n >\n {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n </p>\n </div>\n <ls-icon\n class={'check-icon'}\n name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n solid={r.signerIndex === this.selectedRole?.signerIndex}\n />\n </div>\n ))}\n </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/esm/loader.js
CHANGED
|
@@ -4,7 +4,7 @@ export { s as setNonce } from './index-BwkWPcyG.js';
|
|
|
4
4
|
const defineCustomElements = async (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
6
|
await globalScripts();
|
|
7
|
-
return bootstrapLazy([["ls-document-options_37",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"
|
|
7
|
+
return bootstrapLazy([["ls-document-options_37",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"_group":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-document-options",{"template":[16]},null,{"template":["selectedHandler"]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"color":[1]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-field-properties-multiple",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-signature",{"dataItem":[1040,"data-item"],"fieldSet":[1,"field-set"]}],[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]}],[257,"ls-participant-select",{"dataItem":[1040,"data-item"],"roles":[16],"selectedRole":[32],"isOpen":[32]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-toggle"],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { defineCustomElements };
|
|
@@ -19901,26 +19901,40 @@ const findDimensions = (frameContainer, sourceField, pageHeight, pageWidth, zoom
|
|
|
19901
19901
|
};
|
|
19902
19902
|
|
|
19903
19903
|
// import { RoleColor } from "../../types/RoleColor";
|
|
19904
|
-
|
|
19905
|
-
|
|
19906
|
-
|
|
19907
|
-
|
|
19908
|
-
|
|
19909
|
-
|
|
19910
|
-
|
|
19911
|
-
|
|
19912
|
-
|
|
19913
|
-
|
|
19914
|
-
|
|
19915
|
-
|
|
19916
|
-
|
|
19917
|
-
|
|
19918
|
-
|
|
19919
|
-
|
|
19920
|
-
|
|
19921
|
-
|
|
19922
|
-
|
|
19923
|
-
|
|
19904
|
+
const defaultRolePalette = [
|
|
19905
|
+
{ s60: '#afb0b2', s100: '#45484d', s90: '#5e6066', s30: '#e0e2e5', s40: '#d8d9dc', s80: '#6f7176', s50: '#c8c9cc', s10: '#f7f8fa', s20: '#edeff2', description: 'gray' },
|
|
19906
|
+
{ s60: '#5684f0', s100: '#14287a', s90: '#233ead', s30: '#bed4fa', s40: '#a2bdf5', s80: '#2d4dcc', s50: '#78a3fa', s10: '#f0f6ff', s20: '#e0ecff', description: 'blue' },
|
|
19907
|
+
{ s60: '#46dbaa', s100: '#125241', s90: '#177559', s30: '#9df5d4', s40: '#72f0c2', s80: '#15946a', s50: '#57e5b1', s10: '#effff9', s20: '#c5fde8', description: 'green' },
|
|
19908
|
+
{ s60: '#f0b618', s100: '#70350d', s90: '#8a3f0e', s30: '#fcec9d', s40: '#ffe561', s80: '#9e5913', s50: '#fad232', s10: '#fffcef', s20: '#fff3c2', description: 'yellow' },
|
|
19909
|
+
{ s60: '#9956f0', s100: '#40147a', s90: '#5f23ad', s30: '#d6befa', s40: '#c6a2f5', s80: '#722dcc', s50: '#b078fa', s10: '#f4f0ff', s20: '#eee5ff', description: 'purple' },
|
|
19910
|
+
{ s60: '#46dbbd', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c5fcf1', description: 'teal' },
|
|
19911
|
+
{ s60: '#f056b2', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#ffe5f5', description: 'pink' },
|
|
19912
|
+
{ s60: '#bdf056', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#f6ffe5', description: 'lime' },
|
|
19913
|
+
{ s60: '#f64a44', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#fff0f0', s20: '#ffe1e0', description: 'red' },
|
|
19914
|
+
{ s60: '#48c5f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c7f1ff', description: 'lightblue' },
|
|
19915
|
+
{ s60: '#d156f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#fae5ff', description: 'aubergine' },
|
|
19916
|
+
{ s60: '#f09456', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#fff0e5', description: 'burnt' },
|
|
19917
|
+
{ s60: '#56f056', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#e5ffe5', description: 'truegreen' },
|
|
19918
|
+
{ s60: '#6b56f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#e9e5ff', description: 'indigo' },
|
|
19919
|
+
{ s60: '#46dbdb', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c5fcfc', description: 'cyan' },
|
|
19920
|
+
{ s60: 'rgb(70, 219, 170)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(239, 255, 249)', description: 'overflowcolor' },
|
|
19921
|
+
{ s60: 'rgb(240, 182, 24)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 252, 239)', description: 'overflowcolor' },
|
|
19922
|
+
{ s60: 'rgb(238, 229, 255)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(244, 240, 255)', description: 'overflowcolor' },
|
|
19923
|
+
{ s60: 'rgb(240, 86, 178)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 240, 249)', description: 'overflowcolor' },
|
|
19924
|
+
{ s60: 'rgb(189, 240, 86)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(250, 255, 240)', description: 'overflowcolor' },
|
|
19925
|
+
{ s60: 'rgb(246, 74, 68)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(246, 190, 188)', description: 'overflowcolor' },
|
|
19926
|
+
{ s60: 'rgb(58, 0, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(188, 169, 240)', description: 'overflowcolor' },
|
|
19927
|
+
{ s60: 'rgba(1, 179, 34, 0.69)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(135, 173, 158)', description: 'overflowcolor' },
|
|
19928
|
+
{ s60: 'rgb(201, 204, 0)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgba(246, 247, 203, 0.77)', description: 'overflowcolor' },
|
|
19929
|
+
{ s60: 'rgb(249, 55, 129)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 237, 244)', description: 'overflowcolor' },
|
|
19930
|
+
{ s60: 'rgb(0, 14, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(209, 212, 243)', description: 'overflowcolor' },
|
|
19931
|
+
{ s60: 'rgb(135, 173, 158)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(205, 244, 228)', description: 'overflowcolor' },
|
|
19932
|
+
{ s60: 'rgb(86, 199, 240)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(202, 236, 248)', description: 'overflowcolor' },
|
|
19933
|
+
{ s60: 'rgb(246, 205, 68)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(244, 240, 255)', description: 'overflowcolor' },
|
|
19934
|
+
{ s60: 'rgb(0, 94, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(188, 169, 240)', description: 'overflowcolor' },
|
|
19935
|
+
{ s60: 'rgba(179, 1, 63, 0.69)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(135, 173, 158)', description: 'overflowcolor' },
|
|
19936
|
+
];
|
|
19937
|
+
// export const defaultRolePalette: string[] = ['gray', 'blue', 'green', 'yellow', 'purple', 'teal', 'pink', 'lime', 'red', 'lightblue', 'aubergine', 'burnt', 'trueGreen', 'indigo', 'cyan'];
|
|
19924
19938
|
|
|
19925
19939
|
/**
|
|
19926
19940
|
* These utils are used to make document-viewer more readable
|
|
@@ -24776,11 +24790,6 @@ const LsDocumentViewer = class {
|
|
|
24776
24790
|
* {boolean}
|
|
24777
24791
|
*/
|
|
24778
24792
|
toolboxFilter = null;
|
|
24779
|
-
/**
|
|
24780
|
-
* Allows you to change the colours used for each role in the template.
|
|
24781
|
-
* {SignerColor[]}
|
|
24782
|
-
*/
|
|
24783
|
-
roleColors = defaultRolePalette;
|
|
24784
24793
|
//
|
|
24785
24794
|
// --- Event Emitters --- //
|
|
24786
24795
|
//
|
|
@@ -25032,10 +25041,10 @@ const LsDocumentViewer = class {
|
|
|
25032
25041
|
this.load();
|
|
25033
25042
|
}
|
|
25034
25043
|
signerColor = (index) => {
|
|
25035
|
-
return
|
|
25044
|
+
return defaultRolePalette[index % 100].s60 || defaultRolePalette[0].s60;
|
|
25036
25045
|
};
|
|
25037
25046
|
render() {
|
|
25038
|
-
return (h(Host, { key: '
|
|
25047
|
+
return (h(Host, { key: '859d2cc0c98f729ebacb16f36cee16dd28af7c2d' }, h(h.Fragment, null, h("div", { key: '4be8fb9ad4c7d583b474e3b23b1f1006ba1c2d08', class: "page-header" }, h("p", { key: '2cc24d403cc217a4e2f5b2ef109412a6396f2c4a', class: "header-text-1" }, "Template Creation"), h("p", { key: '3cc17aa5ef734022e85ef1e8501c9f1b22a8d5e9' }, "/"), h("p", { key: '5524c9eb62a096563eaad2f09af00c41df806ac7', class: "header-text-2" }, "Template Name")), h("form", { key: '3bc3f5317106ea2c4cabe42a70451906e0f13ac3', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
|
|
25039
25048
|
if (manager.detail === 'document') {
|
|
25040
25049
|
var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
|
|
25041
25050
|
documentManager.template = this._template;
|
|
@@ -25048,7 +25057,7 @@ const LsDocumentViewer = class {
|
|
|
25048
25057
|
} }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(this.signer) })) : (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", color: this.signerColor(this.signer) })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(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' })), this.showrightpanel && !this.displayTable && (h("div", { class: this.selected && 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 => {
|
|
25049
25058
|
this.selected = [];
|
|
25050
25059
|
e.preventDefault();
|
|
25051
|
-
} }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '
|
|
25060
|
+
} }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '396f65ae8dfd571d289bfc42816c040828e8fb88', id: "ls-mid-area" }, h("ls-toolbar", { key: '1a621e6b7c8dad1f0a4178f94ba9d069fb129a1d', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: 'eae5daf190f5e3bdd39823a97cec71cfb2a0fea9', class: 'document-frame-wrapper' }, h("div", { key: 'c97bb669bffc774f5b3eb9a3a30d73929c08e3a5', class: 'spacer' }), h("div", { key: 'd0c6f96d9a08ae6c0c792e2dc0ef36ef3a631b77', id: "ls-document-frame" }, h("canvas", { key: 'efcdc3c09c8336e3be0e51afa560b3755519e308', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: '298a8c1c28d7965e3a622006d2dd8de7005ba7b7', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '844cda3669af25400cc2b41094c3344c5cd60264', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'a170950405cde15290542c96fcdfc0609f81a552', editor: this }))))));
|
|
25052
25061
|
}
|
|
25053
25062
|
static get watchers() { return {
|
|
25054
25063
|
"mode": ["modeHandler"],
|
|
@@ -25057,7 +25066,7 @@ const LsDocumentViewer = class {
|
|
|
25057
25066
|
};
|
|
25058
25067
|
LsDocumentViewer.style = lsDocumentViewerCss;
|
|
25059
25068
|
|
|
25060
|
-
const lsEditorFieldCss = ":host{
|
|
25069
|
+
const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
|
|
25061
25070
|
|
|
25062
25071
|
const LsEditorField = class {
|
|
25063
25072
|
constructor(hostRef) {
|
|
@@ -25067,7 +25076,6 @@ const LsEditorField = class {
|
|
|
25067
25076
|
dataItem;
|
|
25068
25077
|
selected;
|
|
25069
25078
|
readonly;
|
|
25070
|
-
palette;
|
|
25071
25079
|
type;
|
|
25072
25080
|
page;
|
|
25073
25081
|
isEditing = false;
|
|
@@ -25158,7 +25166,7 @@ const LsEditorField = class {
|
|
|
25158
25166
|
this.sizeObserver.observe(this.component);
|
|
25159
25167
|
// New dropped components automatically need selecting.
|
|
25160
25168
|
if (this.selected) {
|
|
25161
|
-
this.component.style.background =
|
|
25169
|
+
this.component.style.background = this.participantColor(this.dataItem?.signer).s20;
|
|
25162
25170
|
this.component.style.opacity = '0.7';
|
|
25163
25171
|
this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
|
|
25164
25172
|
}
|
|
@@ -25168,13 +25176,13 @@ const LsEditorField = class {
|
|
|
25168
25176
|
}
|
|
25169
25177
|
}
|
|
25170
25178
|
participantColor = (index) => {
|
|
25171
|
-
return
|
|
25179
|
+
return defaultRolePalette[index % 100] || defaultRolePalette[0];
|
|
25172
25180
|
};
|
|
25173
25181
|
render() {
|
|
25174
|
-
return (h(Host, { key: '
|
|
25182
|
+
return (h(Host, { key: '3c8441e53f90eed0e0b778924f9191342f504a65', style: { border: `1px ${this.participantColor(this.dataItem?.signer).s60} solid` } }, h("div", { key: 'b81189da32a8a824d19a90b452117a3e820798e5', class: {
|
|
25175
25183
|
'ls-editor-field': true,
|
|
25176
25184
|
'is-selected': this.selected,
|
|
25177
|
-
} }, h("input", { key: '
|
|
25185
|
+
} }, h("input", { key: 'e339642324a7180e435f4d04eaff8823288ab4bb', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: 'af5b7435dab53aaf8b4ad0000b0e01116c97ef52', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
|
|
25178
25186
|
}
|
|
25179
25187
|
static get watchers() { return {
|
|
25180
25188
|
"selected": ["watchSelectedHandler"]
|
|
@@ -33203,30 +33211,30 @@ const LsParticipantManager = class {
|
|
|
33203
33211
|
this.mutate.emit(data);
|
|
33204
33212
|
}
|
|
33205
33213
|
participantColor = (index) => {
|
|
33206
|
-
return
|
|
33214
|
+
return defaultRolePalette[index % 100] || defaultRolePalette[0];
|
|
33207
33215
|
};
|
|
33208
33216
|
render() {
|
|
33209
|
-
return (h(Host, { key: '
|
|
33217
|
+
return (h(Host, { key: 'a46ae544ad9c0d0544b97503fb1310b5d08ac66b' }, h("div", { key: 'a440114a66fdf2c4d3218d21f708fca0d53d55dc', class: "ls-editor-infobox" }, h("h2", { key: 'e26cfb05079ea2ba83c224a57f3ba664c29a68b8', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'b9dbb2642df8f613d65decaac4d258632a4dde30', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '87cdf8bccdbea80b3f59021bd3cad25bd35e0a0f', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
|
|
33210
33218
|
return (h("div", { class: "participant-card", onClick: () => {
|
|
33211
33219
|
this.selectedHandler(r);
|
|
33212
33220
|
}, style: {
|
|
33213
|
-
background:
|
|
33214
|
-
border:
|
|
33221
|
+
background: this.participantColor(r?.signerIndex).s10,
|
|
33222
|
+
border: `1px solid ${this.participantColor(r?.signerIndex).s60}`,
|
|
33215
33223
|
marginTop: r.signerIndex > 100 && '-0.813rem',
|
|
33216
33224
|
}, onMouseEnter: e => e.currentTarget.querySelector('.innerButton')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.innerButton')?.classList.add('hidden') }, h("div", { class: 'participant-card-top-items' }, ' ', h("div", { class: 'role-label', style: {
|
|
33217
|
-
background:
|
|
33218
|
-
color:
|
|
33225
|
+
background: this.participantColor(r?.signerIndex).s20,
|
|
33226
|
+
color: this.participantColor(r?.signerIndex).s90,
|
|
33219
33227
|
} }, h("ls-icon", { name: r?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (index + 1)), h("div", { class: "innerButton hidden", onClick: () => {
|
|
33220
33228
|
this.deleteHandler(r);
|
|
33221
33229
|
} }, h("ls-icon", { name: "trash", size: "18", style: {
|
|
33222
33230
|
color: `var(--${this.participantColor(r?.signerIndex)}-40)`,
|
|
33223
33231
|
} }))), h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
|
|
33224
|
-
color:
|
|
33232
|
+
color: this.participantColor(r?.signerIndex).s100,
|
|
33225
33233
|
} }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
|
|
33226
|
-
color:
|
|
33234
|
+
color: this.participantColor(r?.signerIndex).s80,
|
|
33227
33235
|
textTransform: 'capitalize'
|
|
33228
33236
|
} }, r.roleType))));
|
|
33229
|
-
})), h("div", { key: '
|
|
33237
|
+
})), h("div", { key: 'c9ed429a2078fbb413c7458ae3fdcf07021336dd', class: 'add-participant-button' }, h("button", { key: '6dbeab14580ff816e163c7ed3db7cceb718b53eb', onClick: () => this.createHandler() }, h("ls-icon", { key: 'd20b391942678ea0e020a8b97af4c3cb8dfd5cf2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '4e62df970e619a42b532de88c8788469f8fb8e83' }, "Add Participant"))), h("slot", { key: '409964ed938991de4edb7f2a26bf76854c85f76b' })));
|
|
33230
33238
|
}
|
|
33231
33239
|
};
|
|
33232
33240
|
LsParticipantManager.style = lsParticipantManagerCss;
|
|
@@ -33277,37 +33285,37 @@ const LsParticipantSelect = class {
|
|
|
33277
33285
|
console.log('Selected role:', this.selectedRole);
|
|
33278
33286
|
}
|
|
33279
33287
|
participantColor = (index) => {
|
|
33280
|
-
return
|
|
33288
|
+
return defaultRolePalette[index % 100] || defaultRolePalette[0];
|
|
33281
33289
|
};
|
|
33282
33290
|
render() {
|
|
33283
33291
|
console.log(this.selectedRole);
|
|
33284
|
-
return (h(Host, { key: '
|
|
33285
|
-
background:
|
|
33286
|
-
color:
|
|
33287
|
-
} }, h("ls-icon", { key: '
|
|
33288
|
-
(this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: '
|
|
33289
|
-
'--background-selected':
|
|
33290
|
-
'--check-icon-selected':
|
|
33291
|
-
}, 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: '
|
|
33292
|
-
background:
|
|
33293
|
-
color:
|
|
33294
|
-
} }, h("ls-icon", { key: '
|
|
33295
|
-
'--role-name-selected':
|
|
33296
|
-
} }, 'Sender'), h("p", { key: '
|
|
33297
|
-
'--role-type-selected':
|
|
33298
|
-
} }, "You")), h("ls-icon", { key: '
|
|
33299
|
-
'--background-selected':
|
|
33300
|
-
'--check-icon-selected':
|
|
33292
|
+
return (h(Host, { key: '376dc00f9ed35a608669050a14c3a6ec77222ae1' }, h("div", { key: 'bffe48d89c04e6d38de5a34d721fc62875233b8c', class: "dropdown" }, h("div", { key: '291784e958e45a72305fbdbbd220a3237e829e3b', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c4ae298b8fc164af5b3823952165885ece44a628', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f18b791336b7901257dae3215ed0ef4128928e1d', 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: '6334dacce4604c2b2a8208232e5e3e2dfbeda08d', 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: 'a00c1daded99250cea5638c25fde7449cea1fb3f', 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: '72c04a47d2856141e4d3083864f00c1ce2bc62ce', 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: 'f44c6d982de08655cdd15a03145b3a711d045df6', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: 'd83960f9c8999046c6e3e1137865e1036c651e85', class: 'selected-role-label', style: {
|
|
33293
|
+
background: this.participantColor(this.selectedRole?.signerIndex).s20,
|
|
33294
|
+
color: this.participantColor(this.selectedRole?.signerIndex).s80,
|
|
33295
|
+
} }, h("ls-icon", { key: '733e9f601506e58fecd83f1a5062561ef68efb01', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
|
|
33296
|
+
(this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'c5f307779432fdde633d661b19d213a8e0fbfdc3', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '5da68fd1dade4668364d2e328a6a404a772092eb', name: "chevron-down" }))), this.isOpen && (h("div", { key: '6545db8c8c0094cd863037f2e7c94c87e8a34f5b', class: "dropdown-list" }, h("div", { key: '4b4b466b9d9f553afb2dcbe4d1e1c623be4c3aa3', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
|
|
33297
|
+
'--background-selected': defaultRolePalette[0].s10,
|
|
33298
|
+
'--check-icon-selected': defaultRolePalette[0].s50,
|
|
33299
|
+
}, 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: '9f4035308fc39587e417cf0a1e088a4175c118f9', class: 'role-icon', style: {
|
|
33300
|
+
background: defaultRolePalette[0].s50,
|
|
33301
|
+
color: defaultRolePalette[0].s80,
|
|
33302
|
+
} }, h("ls-icon", { key: '282c618109165a412bf12d6d9eb17216f1136b0d', name: "user" })), h("div", { key: '1e45e9c7405abc4e230a28eb793d984a9a71434b', class: 'role-text' }, h("p", { key: '0971c5ec3fac86c604a27a9b258d1edc75116308', class: 'role-name', style: {
|
|
33303
|
+
'--role-name-selected': defaultRolePalette[0].s80,
|
|
33304
|
+
} }, 'Sender'), h("p", { key: '94047f15d4dd4046343924e7c553eb947c07e363', class: 'role-type', style: {
|
|
33305
|
+
'--role-type-selected': defaultRolePalette[0].s80,
|
|
33306
|
+
} }, "You")), h("ls-icon", { key: 'ec8d3927cd65ac9a2ed789c67f43c2556645cc7f', 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: {
|
|
33307
|
+
'--background-selected': this.participantColor(r?.signerIndex).s10,
|
|
33308
|
+
'--check-icon-selected': this.participantColor(r?.signerIndex).s50,
|
|
33301
33309
|
}, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
|
|
33302
33310
|
.querySelector('.check-icon')
|
|
33303
33311
|
?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
|
|
33304
|
-
background: r.signerIndex > 100 ?
|
|
33312
|
+
background: r.signerIndex > 100 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,
|
|
33305
33313
|
color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
|
|
33306
33314
|
} }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name', style: {
|
|
33307
33315
|
'--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
|
|
33308
33316
|
} }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), h("p", { class: 'role-type', style: {
|
|
33309
33317
|
'--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
|
|
33310
|
-
} }, 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: '
|
|
33318
|
+
} }, 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: 'b2f3b76d52dab109697f7edb8d81085c7237128f' })));
|
|
33311
33319
|
}
|
|
33312
33320
|
};
|
|
33313
33321
|
LsParticipantSelect.style = lsParticipantSelectCss;
|