legalesign-document-viewer 0.1.2 → 0.1.4
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_35.cjs.entry.js → ls-document-options_36.cjs.entry.js} +501 -128
- package/dist/cjs/ls-document-options_36.cjs.entry.js.map +1 -0
- package/dist/cjs/ls-document-viewer.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ls-document-viewer/adapter/LsDocumentAdapter.js +1 -1
- package/dist/collection/components/ls-document-viewer/adapter/LsDocumentAdapter.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/adapter/groupActions.js +96 -0
- package/dist/collection/components/ls-document-viewer/adapter/groupActions.js.map +1 -0
- package/dist/collection/components/ls-document-viewer/adapter/templateActions.js +7 -1
- package/dist/collection/components/ls-document-viewer/adapter/templateActions.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/defaultFieldIcons.js +19 -0
- package/dist/collection/components/ls-document-viewer/defaultFieldIcons.js.map +1 -0
- package/dist/collection/components/ls-document-viewer/defaultPalette.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/editorCalculator.js +2 -2
- package/dist/collection/components/ls-document-viewer/editorCalculator.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/editorUtils.js +31 -5
- package/dist/collection/components/ls-document-viewer/editorUtils.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.css +11 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +16 -11
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
- package/dist/collection/components/ls-editor-field/ls-editor-field.js +6 -4
- package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
- package/dist/collection/components/ls-field-alignment/ls-field-alignment.css +98 -28
- package/dist/collection/components/ls-field-alignment/ls-field-alignment.js +26 -20
- package/dist/collection/components/ls-field-alignment/ls-field-alignment.js.map +1 -1
- package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js +1 -1
- package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js.map +1 -1
- package/dist/collection/components/ls-field-distribute/ls-field-distribute.css +100 -33
- package/dist/collection/components/ls-field-distribute/ls-field-distribute.js +21 -15
- package/dist/collection/components/ls-field-distribute/ls-field-distribute.js.map +1 -1
- package/dist/collection/components/ls-field-footer/ls-field-footer.css +55 -0
- package/dist/collection/components/ls-field-footer/ls-field-footer.js +107 -0
- package/dist/collection/components/ls-field-footer/ls-field-footer.js.map +1 -0
- package/dist/collection/components/ls-field-format/ls-field-format.js +10 -10
- package/dist/collection/components/ls-field-placement/ls-field-placement.css +27 -9
- package/dist/collection/components/ls-field-placement/ls-field-placement.js +1 -1
- package/dist/collection/components/ls-field-placement/ls-field-placement.js.map +1 -1
- package/dist/collection/components/ls-field-properties/ls-field-properties.css +1 -0
- package/dist/collection/components/ls-field-properties/ls-field-properties.js +1 -1
- package/dist/collection/components/ls-field-properties-autosign/ls-field-properties-autosign.js +1 -1
- package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.css +173 -10
- package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js +36 -1
- package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js.map +1 -1
- package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.css +178 -4
- package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.js +36 -1
- package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.js.map +1 -1
- package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.css +178 -3
- package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.js +36 -1
- package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.js.map +1 -1
- package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.css +173 -10
- package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js +34 -1
- package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js.map +1 -1
- package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.css +178 -3
- package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js +36 -1
- package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js.map +1 -1
- package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.css +179 -3
- package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js +55 -1
- package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js.map +1 -1
- package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.css +178 -3
- package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.js +36 -1
- package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.js.map +1 -1
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.css +40 -4
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js +18 -3
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js.map +1 -1
- package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.css +177 -3
- package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js +36 -1
- package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js.map +1 -1
- package/dist/collection/components/ls-field-size/ls-field-size.css +102 -27
- package/dist/collection/components/ls-field-size/ls-field-size.js +2 -2
- package/dist/collection/components/ls-field-size/ls-field-size.js.map +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js +3 -3
- package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js +2 -2
- package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js +3 -3
- package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js +3 -3
- package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js +3 -3
- package/dist/collection/components/ls-formfield/ls-formfield.js +5 -5
- package/dist/collection/components/ls-icon/icons.js +20 -0
- package/dist/collection/components/ls-icon/icons.js.map +1 -1
- package/dist/collection/components/ls-icon/ls-icon.js +2 -2
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js +10 -6
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map +1 -1
- package/dist/collection/components/ls-participant-select/ls-participant-select.css +4 -6
- package/dist/collection/components/ls-participant-select/ls-participant-select.js +22 -6
- package/dist/collection/components/ls-participant-select/ls-participant-select.js.map +1 -1
- package/dist/collection/components/ls-statusbar/ls-statusbar.js +3 -3
- package/dist/collection/components/ls-toggle/ls-toggle.js +1 -1
- package/dist/collection/components/ls-toolbar/ls-toolbar.js +1 -1
- package/dist/collection/components/ls-toolbar/ls-toolbar.js.map +1 -1
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.css +3 -4
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js +26 -2
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js.map +1 -1
- package/dist/collection/types/Icon.js +1 -0
- package/dist/collection/types/Icon.js.map +1 -1
- package/dist/components/ls-document-options.js +1 -1
- package/dist/components/ls-document-viewer.js +169 -58
- package/dist/components/ls-document-viewer.js.map +1 -1
- package/dist/components/ls-editor-field.js +1 -1
- package/dist/components/ls-feature-column.js +1 -1
- package/dist/components/ls-field-alignment.js +1 -1
- package/dist/components/ls-field-dimensions.js +1 -1
- package/dist/components/ls-field-distribute.js +1 -1
- package/dist/components/ls-field-footer.d.ts +11 -0
- package/dist/components/ls-field-footer.js +9 -0
- package/dist/components/ls-field-footer.js.map +1 -0
- package/dist/components/ls-field-format.js +1 -1
- package/dist/components/ls-field-placement.js +1 -1
- package/dist/components/ls-field-properties-autosign.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-field-size.js +1 -1
- package/dist/components/ls-formfield.js +1 -1
- package/dist/components/ls-icon.js +1 -1
- package/dist/components/ls-number-input.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-radio-input.js +1 -1
- package/dist/components/ls-select-input.js +1 -1
- package/dist/components/ls-statusbar.js +1 -1
- package/dist/components/ls-text-input.js +1 -1
- package/dist/components/ls-textarea-input.js +1 -1
- package/dist/components/ls-toggle.js +1 -1
- package/dist/components/ls-toolbar.js +1 -1
- package/dist/components/ls-toolbox-field.js +1 -1
- package/dist/components/p-8Yvey07o.js +57 -0
- package/dist/components/p-8Yvey07o.js.map +1 -0
- package/dist/components/{p-Cs6tf1FE.js → p-9Z-GK0Bd.js} +3 -3
- package/dist/components/{p-Cs6tf1FE.js.map → p-9Z-GK0Bd.js.map} +1 -1
- package/dist/components/{p-DtHDNV_x.js → p-BFSBsh85.js} +24 -3
- package/dist/components/p-BFSBsh85.js.map +1 -0
- package/dist/components/p-BLkddRKK.js +77 -0
- package/dist/components/p-BLkddRKK.js.map +1 -0
- package/dist/components/{p-D2smwTu5.js → p-BM-Xo6D5.js} +7 -7
- package/dist/components/{p-D2smwTu5.js.map → p-BM-Xo6D5.js.map} +1 -1
- package/dist/components/{p-CjicL5jA.js → p-BPk0SaUp.js} +34 -8
- package/dist/components/p-BPk0SaUp.js.map +1 -0
- package/dist/components/p-BVXVFpxy.js +130 -0
- package/dist/components/p-BVXVFpxy.js.map +1 -0
- package/dist/components/{p-D7KC-w81.js → p-BdJAlep4.js} +10 -10
- package/dist/components/{p-D7KC-w81.js.map → p-BdJAlep4.js.map} +1 -1
- package/dist/components/{p-CpK4mw5O.js → p-BuX-_d2U.js} +3 -3
- package/dist/components/{p-CpK4mw5O.js.map → p-BuX-_d2U.js.map} +1 -1
- package/dist/components/{p-DTWaVEKo.js → p-BwymH8px.js} +53 -29
- package/dist/components/p-BwymH8px.js.map +1 -0
- package/dist/components/p-C00GqV9f.js.map +1 -1
- package/dist/components/{p-py-rQZsT.js → p-C9d-OiqW.js} +4 -4
- package/dist/components/p-C9d-OiqW.js.map +1 -0
- package/dist/components/p-CNDZcJZC.js +77 -0
- package/dist/components/p-CNDZcJZC.js.map +1 -0
- package/dist/components/p-CQr7nmKb.js +59 -0
- package/dist/components/p-CQr7nmKb.js.map +1 -0
- package/dist/components/p-CdEexh_g.js +84 -0
- package/dist/components/p-CdEexh_g.js.map +1 -0
- package/dist/components/{p-IGbuOsUA.js → p-CdL5cKO8.js} +4 -4
- package/dist/components/{p-IGbuOsUA.js.map → p-CdL5cKO8.js.map} +1 -1
- package/dist/components/p-ChfFmzMa.js +138 -0
- package/dist/components/p-ChfFmzMa.js.map +1 -0
- package/dist/components/{p-CnIzN0a9.js → p-CiKsFis4.js} +5 -5
- package/dist/components/{p-CnIzN0a9.js.map → p-CiKsFis4.js.map} +1 -1
- package/dist/components/{p-BlTHDG0s.js → p-CixKuBuL.js} +13 -13
- package/dist/components/{p-BlTHDG0s.js.map → p-CixKuBuL.js.map} +1 -1
- package/dist/components/{p-D1o9mMCC.js → p-CoH616os.js} +7 -25
- package/dist/components/p-CoH616os.js.map +1 -0
- package/dist/components/p-Cotorbsf.js +72 -0
- package/dist/components/p-Cotorbsf.js.map +1 -0
- package/dist/components/{p-GHcj9VUq.js → p-DIeSYRR1.js} +4 -4
- package/dist/components/{p-GHcj9VUq.js.map → p-DIeSYRR1.js.map} +1 -1
- package/dist/components/{p-D3p38qOI.js → p-DKOj6SYm.js} +4 -4
- package/dist/components/{p-D3p38qOI.js.map → p-DKOj6SYm.js.map} +1 -1
- package/dist/components/{p-D3GPRslH.js → p-DLF5DiJI.js} +10 -10
- package/dist/components/{p-D3GPRslH.js.map → p-DLF5DiJI.js.map} +1 -1
- package/dist/components/p-DOULSSR_.js +115 -0
- package/dist/components/p-DOULSSR_.js.map +1 -0
- package/dist/components/{p-CEGQ-SIb.js → p-Dc4pAKEn.js} +4 -4
- package/dist/components/{p-CEGQ-SIb.js.map → p-Dc4pAKEn.js.map} +1 -1
- package/dist/components/{p-RoGGAmRf.js → p-DeaQdy4U.js} +4 -4
- package/dist/components/{p-RoGGAmRf.js.map → p-DeaQdy4U.js.map} +1 -1
- package/dist/components/{p-8QmwtD0L.js → p-DkIrni0i.js} +9 -7
- package/dist/components/p-DkIrni0i.js.map +1 -0
- package/dist/components/p-DlVSEuX7.js +77 -0
- package/dist/components/p-DlVSEuX7.js.map +1 -0
- package/dist/components/p-DsRfjAri.js +77 -0
- package/dist/components/p-DsRfjAri.js.map +1 -0
- package/dist/components/p-DxZasSi4.js +91 -0
- package/dist/components/p-DxZasSi4.js.map +1 -0
- package/dist/components/p-TVDCAFDo.js +77 -0
- package/dist/components/p-TVDCAFDo.js.map +1 -0
- package/dist/components/{p-B9qKX3S0.js → p-V-QJ5j_K.js} +13 -9
- package/dist/components/p-V-QJ5j_K.js.map +1 -0
- package/dist/components/p-eh-K0ick.js +77 -0
- package/dist/components/p-eh-K0ick.js.map +1 -0
- package/dist/components/p-rAwrmsb9.js +75 -0
- package/dist/components/p-rAwrmsb9.js.map +1 -0
- package/dist/components/p-vll2Fgrb.js +160 -0
- package/dist/components/p-vll2Fgrb.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{ls-document-options_35.entry.js → ls-document-options_36.entry.js} +501 -129
- package/dist/esm/ls-document-options_36.entry.js.map +1 -0
- package/dist/esm/ls-document-viewer.js +1 -1
- package/dist/ls-document-viewer/defaultPalette-C00GqV9f.js.map +1 -1
- package/dist/ls-document-viewer/editorUtils-CHIJ1jsX.js +196 -0
- package/dist/ls-document-viewer/editorUtils-CHIJ1jsX.js.map +1 -0
- package/dist/ls-document-viewer/editorUtils-DsvPQaAu.js +197 -0
- package/dist/ls-document-viewer/editorUtils-DsvPQaAu.js.map +1 -0
- package/dist/ls-document-viewer/ls-document-viewer.entry.js +120 -15
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/ls-editor-field.entry.js +133 -0
- package/dist/ls-document-viewer/ls-field-properties-date.entry.js +34 -0
- package/dist/ls-document-viewer/ls-field-properties-email.entry.js +34 -0
- package/dist/ls-document-viewer/ls-field-properties-file.entry.js +34 -0
- package/dist/ls-document-viewer/ls-field-properties-general.entry.js +32 -0
- package/dist/ls-document-viewer/ls-field-properties-image.entry.js +34 -0
- package/dist/ls-document-viewer/ls-field-properties-number.entry.js +34 -0
- package/dist/ls-document-viewer/ls-field-properties-text.entry.js +34 -0
- package/dist/ls-document-viewer/ls-statusbar.entry.js +57 -0
- package/dist/ls-document-viewer/{p-85c0f6fa.entry.js → p-022e8e6d.entry.js} +21 -6
- package/dist/ls-document-viewer/p-022e8e6d.entry.js.map +1 -0
- package/dist/types/components/ls-document-viewer/adapter/LsDocumentAdapter.d.ts +1 -0
- package/dist/types/components/ls-document-viewer/adapter/groupActions.d.ts +2 -0
- package/dist/types/components/ls-document-viewer/defaultFieldIcons.d.ts +5 -0
- package/dist/types/components/ls-document-viewer/editorUtils.d.ts +6 -1
- package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +2 -0
- package/dist/types/components/ls-field-footer/ls-field-footer.d.ts +14 -0
- package/dist/types/components/ls-field-properties-date/ls-field-properties-date.d.ts +2 -0
- package/dist/types/components/ls-field-properties-email/ls-field-properties-email.d.ts +2 -0
- package/dist/types/components/ls-field-properties-file/ls-field-properties-file.d.ts +2 -0
- package/dist/types/components/ls-field-properties-general/ls-field-properties-general.d.ts +2 -0
- package/dist/types/components/ls-field-properties-image/ls-field-properties-image.d.ts +2 -0
- package/dist/types/components/ls-field-properties-multiple/ls-field-properties-multiple.d.ts +14 -0
- package/dist/types/components/ls-field-properties-number/ls-field-properties-number.d.ts +2 -0
- package/dist/types/components/ls-field-properties-signature/ls-field-properties-signature.d.ts +5 -0
- package/dist/types/components/ls-field-properties-text/ls-field-properties-text.d.ts +2 -0
- package/dist/types/components/ls-participant-select/ls-participant-select.d.ts +2 -0
- package/dist/types/components/ls-toolbox-field/ls-toolbox-field.d.ts +4 -0
- package/dist/types/components.d.ts +119 -0
- package/dist/types/types/Icon.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/ls-document-options_35.cjs.entry.js.map +0 -1
- package/dist/components/p-8QmwtD0L.js.map +0 -1
- package/dist/components/p-B1Q1LddX.js +0 -49
- package/dist/components/p-B1Q1LddX.js.map +0 -1
- package/dist/components/p-B1X25Dz_.js +0 -49
- package/dist/components/p-B1X25Dz_.js.map +0 -1
- package/dist/components/p-B9qKX3S0.js.map +0 -1
- package/dist/components/p-BI9SKPKN.js +0 -51
- package/dist/components/p-BI9SKPKN.js.map +0 -1
- package/dist/components/p-BNKSb1yR.js +0 -49
- package/dist/components/p-BNKSb1yR.js.map +0 -1
- package/dist/components/p-BxXqIouU.js +0 -49
- package/dist/components/p-BxXqIouU.js.map +0 -1
- package/dist/components/p-C93Q3D_9.js +0 -49
- package/dist/components/p-C93Q3D_9.js.map +0 -1
- package/dist/components/p-CF583nkL.js +0 -99
- package/dist/components/p-CF583nkL.js.map +0 -1
- package/dist/components/p-CTraMHE_.js +0 -49
- package/dist/components/p-CTraMHE_.js.map +0 -1
- package/dist/components/p-CgRZ91kw.js +0 -124
- package/dist/components/p-CgRZ91kw.js.map +0 -1
- package/dist/components/p-CjicL5jA.js.map +0 -1
- package/dist/components/p-Ct78kJaE.js +0 -49
- package/dist/components/p-Ct78kJaE.js.map +0 -1
- package/dist/components/p-D1o9mMCC.js.map +0 -1
- package/dist/components/p-D4wPRNKc.js +0 -86
- package/dist/components/p-D4wPRNKc.js.map +0 -1
- package/dist/components/p-DC7lKZUf.js +0 -49
- package/dist/components/p-DC7lKZUf.js.map +0 -1
- package/dist/components/p-DTWaVEKo.js.map +0 -1
- package/dist/components/p-DtHDNV_x.js.map +0 -1
- package/dist/components/p-Dxupmj0q.js +0 -63
- package/dist/components/p-Dxupmj0q.js.map +0 -1
- package/dist/components/p-RFw2Bsri.js +0 -72
- package/dist/components/p-RFw2Bsri.js.map +0 -1
- package/dist/components/p-pHw5Xziq.js +0 -154
- package/dist/components/p-pHw5Xziq.js.map +0 -1
- package/dist/components/p-py-rQZsT.js.map +0 -1
- package/dist/esm/ls-document-options_35.entry.js.map +0 -1
- package/dist/ls-document-viewer/editorUtils-DbS95k5h.js.map +0 -1
- package/dist/ls-document-viewer/ls-document-viewer.entry.esm.js.map +0 -1
- package/dist/ls-document-viewer/ls-document-viewer.entry.js.map +0 -1
- package/dist/ls-document-viewer/p-85c0f6fa.entry.js.map +0 -1
|
@@ -19845,7 +19845,7 @@ function addField(frame, data) {
|
|
|
19845
19845
|
node.style.left = Math.floor(data.left * this.zoom) + 'px';
|
|
19846
19846
|
node.style.height = Math.floor(data.height * this.zoom) + 'px';
|
|
19847
19847
|
node.style.width = Math.floor(data.width * this.zoom) + 'px';
|
|
19848
|
-
node.style.fontSize = Math.floor(data.fontSize) + 'pt';
|
|
19848
|
+
node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
|
|
19849
19849
|
node.style.alignContent = data.align;
|
|
19850
19850
|
node.style.fontFamily = data.fontName;
|
|
19851
19851
|
node.dataItem = data;
|
|
@@ -19857,7 +19857,7 @@ function moveField(item, data) {
|
|
|
19857
19857
|
item.style.left = Math.floor(data.left * this.zoom) + 'px';
|
|
19858
19858
|
item.style.height = Math.floor(data.height * this.zoom) + 'px';
|
|
19859
19859
|
item.style.width = Math.floor(data.width * this.zoom) + 'px';
|
|
19860
|
-
item.style.fontSize = Math.floor(data.fontSize) + 'pt';
|
|
19860
|
+
item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
|
|
19861
19861
|
item.style.fontFamily = data.fontName;
|
|
19862
19862
|
item.style.textAlign = data.align;
|
|
19863
19863
|
item.dataItem = data;
|
|
@@ -19958,12 +19958,30 @@ function debounce(func, timeout = 300) {
|
|
|
19958
19958
|
// if a mutation has created a new id then update the dataitem with OLD id to the new one
|
|
19959
19959
|
function matchData(data) {
|
|
19960
19960
|
const newObj = data.result;
|
|
19961
|
-
const
|
|
19962
|
-
console.log(fi, data);
|
|
19961
|
+
const prefix = atob(data.obj.id).substring(0, 3);
|
|
19963
19962
|
// because mutations return the ID back with the mutation name we just assume its the first (and only) JSON prop
|
|
19964
19963
|
const id = newObj[Object.keys(newObj)[0]];
|
|
19965
|
-
|
|
19966
|
-
|
|
19964
|
+
if (data.event.action === 'create') {
|
|
19965
|
+
if (prefix === 'ele') {
|
|
19966
|
+
const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id);
|
|
19967
|
+
fi.setAttribute('id', 'ls-field-' + id);
|
|
19968
|
+
fi.dataItem = { ...data.obj, id };
|
|
19969
|
+
}
|
|
19970
|
+
else if (prefix === 'rol') {
|
|
19971
|
+
var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
|
|
19972
|
+
this._template = { ...this._template, roles: [...this._template.roles, { ...data.obj, id }] };
|
|
19973
|
+
participantManager.template = this._template;
|
|
19974
|
+
}
|
|
19975
|
+
}
|
|
19976
|
+
else if (data.event.action === 'delete') {
|
|
19977
|
+
if (prefix === 'rol') {
|
|
19978
|
+
var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
|
|
19979
|
+
console.log(this._template);
|
|
19980
|
+
console.log(this._template.roles.filter(r => r.id !== id));
|
|
19981
|
+
this._template = { ...this._template, roles: this._template.roles.filter(r => r.id !== id) };
|
|
19982
|
+
participantManager.template = this._template;
|
|
19983
|
+
}
|
|
19984
|
+
}
|
|
19967
19985
|
}
|
|
19968
19986
|
// Utility function which extracts the type from any API id
|
|
19969
19987
|
function getApiType(obj) {
|
|
@@ -20070,7 +20088,15 @@ const validationTypes = [
|
|
|
20070
20088
|
{ id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },
|
|
20071
20089
|
{ id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
|
|
20072
20090
|
{ id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
|
|
20073
|
-
{
|
|
20091
|
+
{
|
|
20092
|
+
id: 76,
|
|
20093
|
+
description: 'File: zip with PDF (for internal view, signed PDF for signer)',
|
|
20094
|
+
formType: 'file',
|
|
20095
|
+
defaultHeight: 16,
|
|
20096
|
+
defaultWidth: 200,
|
|
20097
|
+
typeDefault: false,
|
|
20098
|
+
inputType: 'text',
|
|
20099
|
+
},
|
|
20074
20100
|
{ id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
|
|
20075
20101
|
{ id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
|
|
20076
20102
|
{ id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
|
|
@@ -24342,7 +24368,7 @@ const updateRole = (role) => {
|
|
|
24342
24368
|
};
|
|
24343
24369
|
|
|
24344
24370
|
// Add a role
|
|
24345
|
-
const updateTemplate =
|
|
24371
|
+
const updateTemplate = template => {
|
|
24346
24372
|
return `
|
|
24347
24373
|
mutation updateTemplate {
|
|
24348
24374
|
updateTemplate(input: {
|
|
@@ -24375,9 +24401,15 @@ const getTemplate = (id) => {
|
|
|
24375
24401
|
createdBy
|
|
24376
24402
|
lastSent
|
|
24377
24403
|
fixSignatureScale
|
|
24404
|
+
groupId
|
|
24378
24405
|
roles{
|
|
24379
24406
|
id
|
|
24407
|
+
name
|
|
24408
|
+
roleType
|
|
24380
24409
|
signerIndex
|
|
24410
|
+
ordinal
|
|
24411
|
+
signerParent
|
|
24412
|
+
experience
|
|
24381
24413
|
}
|
|
24382
24414
|
elementConnection {
|
|
24383
24415
|
templateElements {
|
|
@@ -24478,7 +24510,7 @@ class LsDocumentAdapter {
|
|
|
24478
24510
|
break;
|
|
24479
24511
|
}
|
|
24480
24512
|
const result = await this.execute(accessToken, query);
|
|
24481
|
-
return { result, obj };
|
|
24513
|
+
return { result, obj, event };
|
|
24482
24514
|
};
|
|
24483
24515
|
/**
|
|
24484
24516
|
* Run a general query or mutation against the GraphQL API.
|
|
@@ -24505,7 +24537,102 @@ class LsDocumentAdapter {
|
|
|
24505
24537
|
}
|
|
24506
24538
|
}
|
|
24507
24539
|
|
|
24508
|
-
const
|
|
24540
|
+
const getGroupData = (id) => {
|
|
24541
|
+
return `
|
|
24542
|
+
query getGroupData {
|
|
24543
|
+
group(id: "${id}"){
|
|
24544
|
+
id
|
|
24545
|
+
standardMessageConnection{
|
|
24546
|
+
messages {
|
|
24547
|
+
id
|
|
24548
|
+
name
|
|
24549
|
+
default
|
|
24550
|
+
body
|
|
24551
|
+
created
|
|
24552
|
+
modified
|
|
24553
|
+
}
|
|
24554
|
+
}
|
|
24555
|
+
scheduleConnection {
|
|
24556
|
+
schedules {
|
|
24557
|
+
id
|
|
24558
|
+
name
|
|
24559
|
+
items {
|
|
24560
|
+
id
|
|
24561
|
+
daysAfter
|
|
24562
|
+
frequency
|
|
24563
|
+
subject
|
|
24564
|
+
message
|
|
24565
|
+
when
|
|
24566
|
+
timeOfDay
|
|
24567
|
+
skipWeekend
|
|
24568
|
+
}
|
|
24569
|
+
default
|
|
24570
|
+
}
|
|
24571
|
+
}
|
|
24572
|
+
experienceConnection{
|
|
24573
|
+
experiences {
|
|
24574
|
+
id
|
|
24575
|
+
name
|
|
24576
|
+
language
|
|
24577
|
+
defaultExperience
|
|
24578
|
+
witnessSameDevice
|
|
24579
|
+
allowSignatureReuse
|
|
24580
|
+
attachDraft
|
|
24581
|
+
canReassign
|
|
24582
|
+
defaultReminderSubject
|
|
24583
|
+
defaultSubject
|
|
24584
|
+
finalSignerEmailSubHeader
|
|
24585
|
+
finalSignerEmailText
|
|
24586
|
+
footerTextColour
|
|
24587
|
+
forwarding
|
|
24588
|
+
penDiameter
|
|
24589
|
+
postSignAttach
|
|
24590
|
+
postSignEmail
|
|
24591
|
+
rejectedEmailSubheader
|
|
24592
|
+
senderName
|
|
24593
|
+
signatureAppendDate
|
|
24594
|
+
signatureDoneText
|
|
24595
|
+
signatureMouse
|
|
24596
|
+
signatureType
|
|
24597
|
+
signatureCertifiedType
|
|
24598
|
+
signatureUpload
|
|
24599
|
+
signatureAppend
|
|
24600
|
+
signatureAppendExtra
|
|
24601
|
+
signingPageText
|
|
24602
|
+
textBackgroundColour
|
|
24603
|
+
textFontColour
|
|
24604
|
+
typedSignatureFixedSize
|
|
24605
|
+
created
|
|
24606
|
+
modified
|
|
24607
|
+
witnessingRequiresSignerSMS
|
|
24608
|
+
witnessingRequiresWitnessSMS
|
|
24609
|
+
}
|
|
24610
|
+
}
|
|
24611
|
+
attachmentConnection {
|
|
24612
|
+
attachments {
|
|
24613
|
+
id
|
|
24614
|
+
filename
|
|
24615
|
+
autoAttach
|
|
24616
|
+
description
|
|
24617
|
+
created
|
|
24618
|
+
}
|
|
24619
|
+
}
|
|
24620
|
+
contactConnection {
|
|
24621
|
+
contacts{
|
|
24622
|
+
id
|
|
24623
|
+
firstName
|
|
24624
|
+
lastName
|
|
24625
|
+
email
|
|
24626
|
+
phoneNumber
|
|
24627
|
+
name
|
|
24628
|
+
}
|
|
24629
|
+
}
|
|
24630
|
+
}
|
|
24631
|
+
}
|
|
24632
|
+
`;
|
|
24633
|
+
};
|
|
24634
|
+
|
|
24635
|
+
const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{border-radius:16px;border:1px solid var(--gray-30, #edeff2);background:var(--white, #fff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;max-height:100%}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{display:flex;flex-direction:column;width:100%}.document-frame-wrapper{position:relative;padding:0 1.25rem;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow-y:auto}.spacer{min-height:5.5rem;width:100%}#ls-document-frame{position:relative;height:98vh;max-width:100%;max-height:100%;margin:0px;padding:2px;scrollbar-width:auto;scrollbar-color:auto}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;max-height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.hidden{visibility:hidden;display:none;width:0px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.fields-box{display:flex;flex-direction:column;gap:0.75rem}.page-header{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.field-properties-outer{position:relative;height:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
24509
24636
|
|
|
24510
24637
|
pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
|
|
24511
24638
|
const LsDocumentViewer = class {
|
|
@@ -24561,6 +24688,7 @@ const LsDocumentViewer = class {
|
|
|
24561
24688
|
pageNum = 1; // hardcoded to start at the page 1
|
|
24562
24689
|
signer = 0; // hardcoded to start at the page 1
|
|
24563
24690
|
_template;
|
|
24691
|
+
_group;
|
|
24564
24692
|
selected;
|
|
24565
24693
|
/**
|
|
24566
24694
|
* An ease of use property that will arrange document-viewer appropraitely.
|
|
@@ -24670,10 +24798,7 @@ const LsDocumentViewer = class {
|
|
|
24670
24798
|
mutateHandler(event) {
|
|
24671
24799
|
console.log(event);
|
|
24672
24800
|
if (this.token)
|
|
24673
|
-
event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result =>
|
|
24674
|
-
if (me.action === "create")
|
|
24675
|
-
matchData.bind(this)(result);
|
|
24676
|
-
}));
|
|
24801
|
+
event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
|
|
24677
24802
|
}
|
|
24678
24803
|
// Updates are internal event between LS controls not to be confused with mutate
|
|
24679
24804
|
updateHandler(event) {
|
|
@@ -24682,6 +24807,7 @@ const LsDocumentViewer = class {
|
|
|
24682
24807
|
}
|
|
24683
24808
|
// Send selection changes to bars and panels if in use.
|
|
24684
24809
|
selectFieldsHandler(event) {
|
|
24810
|
+
console.log(event.detail);
|
|
24685
24811
|
var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
|
|
24686
24812
|
if (toolbar)
|
|
24687
24813
|
toolbar.dataItem = event.detail;
|
|
@@ -24689,9 +24815,8 @@ const LsDocumentViewer = class {
|
|
|
24689
24815
|
if (propPanel)
|
|
24690
24816
|
propPanel.dataItem = event.detail;
|
|
24691
24817
|
}
|
|
24692
|
-
// Send selection changes to bars and panels
|
|
24818
|
+
// Send role selection changes to bars and panels
|
|
24693
24819
|
roleHandler(event) {
|
|
24694
|
-
console.log(event.detail);
|
|
24695
24820
|
this.signer = event.detail;
|
|
24696
24821
|
}
|
|
24697
24822
|
//
|
|
@@ -24766,6 +24891,7 @@ const LsDocumentViewer = class {
|
|
|
24766
24891
|
elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
|
|
24767
24892
|
roles: preparedRoles,
|
|
24768
24893
|
};
|
|
24894
|
+
console.log(this._template);
|
|
24769
24895
|
}
|
|
24770
24896
|
/**
|
|
24771
24897
|
* Render the page based on pageNumber
|
|
@@ -24824,7 +24950,6 @@ const LsDocumentViewer = class {
|
|
|
24824
24950
|
}
|
|
24825
24951
|
// internal forced change
|
|
24826
24952
|
syncChange(update) {
|
|
24827
|
-
console.log('sync');
|
|
24828
24953
|
if (getApiType(update.data) === 'element') {
|
|
24829
24954
|
if (update.action === 'create') {
|
|
24830
24955
|
const newData = { ...update.data, page: this.pageNum };
|
|
@@ -24891,10 +25016,12 @@ const LsDocumentViewer = class {
|
|
|
24891
25016
|
});
|
|
24892
25017
|
}
|
|
24893
25018
|
async load() {
|
|
25019
|
+
// Get all template and group listing data.
|
|
24894
25020
|
try {
|
|
24895
25021
|
const result = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
|
|
24896
25022
|
this.parseTemplate(JSON.stringify(result.template));
|
|
24897
|
-
|
|
25023
|
+
const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
|
|
25024
|
+
this._group = resultGroup.group;
|
|
24898
25025
|
this.initViewer();
|
|
24899
25026
|
}
|
|
24900
25027
|
catch (e) {
|
|
@@ -24905,8 +25032,11 @@ const LsDocumentViewer = class {
|
|
|
24905
25032
|
if (this.token && !this._template)
|
|
24906
25033
|
this.load();
|
|
24907
25034
|
}
|
|
25035
|
+
signerColor = (index) => {
|
|
25036
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25037
|
+
};
|
|
24908
25038
|
render() {
|
|
24909
|
-
return (h(Host, { key: '
|
|
25039
|
+
return (h(Host, { key: 'f0fc2b823aa34e9602080b6f43fa3d6a17644905' }, h(h.Fragment, null, h("div", { key: '9df7db9dd181820cc6c192edc1a93984a8a027a7', class: "page-header" }, h("p", { key: '43e253591b967eff115f0e95f39c42dda5370f65', class: "header-text-1" }, "Template Creation"), h("p", { key: '27a2c45ef973ed2a39a88506dd4a3e36748fa861' }, "/"), h("p", { key: 'a31c7b901fe689d11208fc7dccc76838fbb126d0', class: "header-text-2" }, "Template Name")), h("form", { key: '7bad0edc525c32943bea2a39eca6de3515287263', 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 => {
|
|
24910
25040
|
if (manager.detail === 'document') {
|
|
24911
25041
|
var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
|
|
24912
25042
|
documentManager.template = this._template;
|
|
@@ -24916,10 +25046,10 @@ const LsDocumentViewer = class {
|
|
|
24916
25046
|
participantManager.template = this._template;
|
|
24917
25047
|
}
|
|
24918
25048
|
this.manager = manager.detail;
|
|
24919
|
-
} }), 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" }, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature" }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials" }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender" }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date" }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol" }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text" }), h("div", { class: 'expand-fields-row' }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true
|
|
25049
|
+
} }), 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 => {
|
|
24920
25050
|
this.selected = [];
|
|
24921
25051
|
e.preventDefault();
|
|
24922
|
-
} }, 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: '
|
|
25052
|
+
} }, 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: '776dff168c249752f400db7b80e740f3e2684e60', id: "ls-mid-area" }, h("ls-toolbar", { key: '7084a21f22f891d6fb33c1642b6167dbe674268f', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: '8276d3e37a4171b82ab9d5d9913447a23e583d91', class: 'document-frame-wrapper' }, h("div", { key: '746d82daa6ebdd758c12f343d88ee7d8cc6742a6', class: 'spacer' }), h("div", { key: '4f5c297f03666429ad49331c768413b48a5ec397', id: "ls-document-frame" }, h("canvas", { key: 'f3042a35c1f9b9b91973cb87e11019a2488687a3', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: '9005b00b5e5b56c568a26ee79be8636c8280bb93', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '88ba70e9e18d000cca60eaaa77bf976e0e019fa6', id: "ls-box-selector" }))), h("ls-statusbar", { key: '634e045de512429e15fff2680def5ce870bf2142', editor: this }))))));
|
|
24923
25053
|
}
|
|
24924
25054
|
static get watchers() { return {
|
|
24925
25055
|
"mode": ["modeHandler"],
|
|
@@ -25005,6 +25135,7 @@ const LsEditorField = class {
|
|
|
25005
25135
|
}
|
|
25006
25136
|
else {
|
|
25007
25137
|
this.component.style.background = 'transparent';
|
|
25138
|
+
this.component.style.boxShadow = 'none';
|
|
25008
25139
|
}
|
|
25009
25140
|
}
|
|
25010
25141
|
onInputChange(e) {
|
|
@@ -25032,18 +25163,19 @@ const LsEditorField = class {
|
|
|
25032
25163
|
this.component.style.opacity = '0.7';
|
|
25033
25164
|
this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
|
|
25034
25165
|
}
|
|
25035
|
-
else
|
|
25166
|
+
else {
|
|
25036
25167
|
this.component.style.background = `transparent`;
|
|
25168
|
+
this.component.style.boxShadow = 'none';
|
|
25169
|
+
}
|
|
25037
25170
|
}
|
|
25038
25171
|
participantColor = (index) => {
|
|
25039
25172
|
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25040
25173
|
};
|
|
25041
25174
|
render() {
|
|
25042
|
-
|
|
25043
|
-
return (h(Host, { key: 'b9e35f54e8852fcdd156c1f092e5c3dc0b099e01', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '51e3a6f60ea26ba6987bfde2ec290675ab36ff4b', class: {
|
|
25175
|
+
return (h(Host, { key: 'f4ab6bc46e4cdbd1b2bd3b18d08703369af685b9', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '8b8a45c0acdc4342f95abf5884b60064408c2562', class: {
|
|
25044
25176
|
'ls-editor-field': true,
|
|
25045
25177
|
'is-selected': this.selected,
|
|
25046
|
-
} }, h("input", { key: '
|
|
25178
|
+
} }, h("input", { key: '18d0df23d55da5ca5e9a1ead1bf32797b21c8e70', 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: '1756931604edf30a6e30b055f56b70e07dd077a8', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
|
|
25047
25179
|
}
|
|
25048
25180
|
static get watchers() { return {
|
|
25049
25181
|
"selected": ["watchSelectedHandler"]
|
|
@@ -25115,7 +25247,7 @@ const LsFeatureColoumn = class {
|
|
|
25115
25247
|
};
|
|
25116
25248
|
LsFeatureColoumn.style = lsFeatureColumnCss;
|
|
25117
25249
|
|
|
25118
|
-
const lsFieldAlignmentCss = ":host{display:
|
|
25250
|
+
const lsFieldAlignmentCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
|
|
25119
25251
|
|
|
25120
25252
|
const LsFieldAlignment = class {
|
|
25121
25253
|
constructor(hostRef) {
|
|
@@ -25131,7 +25263,7 @@ const LsFieldAlignment = class {
|
|
|
25131
25263
|
alter(diff) {
|
|
25132
25264
|
console.log(diff);
|
|
25133
25265
|
const diffs = this.dataItem.map(c => {
|
|
25134
|
-
return { action:
|
|
25266
|
+
return { action: 'update', data: { ...c, ...diff } };
|
|
25135
25267
|
});
|
|
25136
25268
|
this.dataItem = diffs.map(d => d.data);
|
|
25137
25269
|
this.mutate.emit(diffs);
|
|
@@ -25139,18 +25271,19 @@ const LsFieldAlignment = class {
|
|
|
25139
25271
|
}
|
|
25140
25272
|
right() {
|
|
25141
25273
|
const rightmost = this.dataItem.reduce((rightmost, current) => {
|
|
25142
|
-
return
|
|
25274
|
+
return current.left + current.width < rightmost ? rightmost : current.left + current.width;
|
|
25143
25275
|
}, 0);
|
|
25144
25276
|
console.log(rightmost);
|
|
25145
|
-
const diffs = this.dataItem.map(
|
|
25277
|
+
const diffs = this.dataItem.map(c => {
|
|
25146
25278
|
const newLeft = rightmost - c.width;
|
|
25147
25279
|
return {
|
|
25148
|
-
action:
|
|
25280
|
+
action: 'update',
|
|
25281
|
+
data: {
|
|
25149
25282
|
...c,
|
|
25150
25283
|
left: newLeft,
|
|
25151
25284
|
ax: newLeft,
|
|
25152
|
-
bx: newLeft + c.width
|
|
25153
|
-
}
|
|
25285
|
+
bx: newLeft + c.width,
|
|
25286
|
+
},
|
|
25154
25287
|
};
|
|
25155
25288
|
});
|
|
25156
25289
|
this.dataItem = diffs.map(d => d.data);
|
|
@@ -25165,15 +25298,16 @@ const LsFieldAlignment = class {
|
|
|
25165
25298
|
console.log(addcentres);
|
|
25166
25299
|
const cp = addcentres / this.dataItem.length;
|
|
25167
25300
|
console.log('centerposition', cp);
|
|
25168
|
-
const diffs = this.dataItem.map(
|
|
25301
|
+
const diffs = this.dataItem.map(c => {
|
|
25169
25302
|
const newLeft = c.left + (cp - (c.left + c.width / 2));
|
|
25170
25303
|
return {
|
|
25171
|
-
action:
|
|
25304
|
+
action: 'update',
|
|
25305
|
+
data: {
|
|
25172
25306
|
...c,
|
|
25173
25307
|
left: newLeft,
|
|
25174
25308
|
ax: newLeft,
|
|
25175
|
-
bx: newLeft + c.width
|
|
25176
|
-
}
|
|
25309
|
+
bx: newLeft + c.width,
|
|
25310
|
+
},
|
|
25177
25311
|
};
|
|
25178
25312
|
});
|
|
25179
25313
|
console.log(diffs);
|
|
@@ -25199,15 +25333,16 @@ const LsFieldAlignment = class {
|
|
|
25199
25333
|
return total + (current.top + current.height / 2);
|
|
25200
25334
|
}, 0);
|
|
25201
25335
|
const cp = addmiddles / this.dataItem.length;
|
|
25202
|
-
const diffs = this.dataItem.map(
|
|
25336
|
+
const diffs = this.dataItem.map(c => {
|
|
25203
25337
|
const newTop = c.top + (cp - (c.top + c.height / 2));
|
|
25204
25338
|
return {
|
|
25205
|
-
action:
|
|
25339
|
+
action: 'update',
|
|
25340
|
+
data: {
|
|
25206
25341
|
...c,
|
|
25207
25342
|
top: newTop,
|
|
25208
25343
|
ay: newTop,
|
|
25209
|
-
by: newTop + c.height
|
|
25210
|
-
}
|
|
25344
|
+
by: newTop + c.height,
|
|
25345
|
+
},
|
|
25211
25346
|
};
|
|
25212
25347
|
});
|
|
25213
25348
|
this.dataItem = diffs.map(d => d.data);
|
|
@@ -25216,17 +25351,18 @@ const LsFieldAlignment = class {
|
|
|
25216
25351
|
}
|
|
25217
25352
|
bottom() {
|
|
25218
25353
|
const lowest = this.dataItem.reduce((acc, current) => {
|
|
25219
|
-
return acc >
|
|
25354
|
+
return acc > current.top + current.height ? acc : current.top + current.height;
|
|
25220
25355
|
}, 0);
|
|
25221
|
-
const diffs = this.dataItem.map(
|
|
25356
|
+
const diffs = this.dataItem.map(c => {
|
|
25222
25357
|
const newTop = lowest - c.height;
|
|
25223
25358
|
return {
|
|
25224
|
-
action:
|
|
25359
|
+
action: 'update',
|
|
25360
|
+
data: {
|
|
25225
25361
|
...c,
|
|
25226
25362
|
top: newTop,
|
|
25227
25363
|
ay: newTop,
|
|
25228
|
-
by: newTop + c.height
|
|
25229
|
-
}
|
|
25364
|
+
by: newTop + c.height,
|
|
25365
|
+
},
|
|
25230
25366
|
};
|
|
25231
25367
|
});
|
|
25232
25368
|
this.dataItem = diffs.map(d => d.data);
|
|
@@ -25234,7 +25370,9 @@ const LsFieldAlignment = class {
|
|
|
25234
25370
|
this.update.emit(diffs);
|
|
25235
25371
|
}
|
|
25236
25372
|
render() {
|
|
25237
|
-
return (h(Host, { key: '
|
|
25373
|
+
return (h(Host, { key: '18c2511fb41da7dbae34231108af7a0553ddd5e9' }, h("div", { key: '914df99828f9994f8398fe3cf1de0db1e8bb8bc0', class: 'ls-field-properties-section' }, h("div", { key: 'eb2a2ead947b5ccb161da1fb711ba0aecd4f1f1e', class: 'ls-field-properties-section-text' }, h("p", { key: 'eedf0321ec75bb9670e926a2951fd85cd02196f7', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '87ebbfeb998ce91a216b624332dc70019cd7a899', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '6fb940d7a554c6750eda85dced92a3e762ef5481', class: 'multi-button-group-row' }, h("div", { key: '0dae4f26f528c7797148101e5552856680d707b0', class: 'button-group' }, h("button", { key: '0184ce8b491fc9ac2775d10dd18402239352d8b4', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '2dd926828e25e526bdbbfe8f42a82ccf2f1d4383', name: "field-alignment-left" })), h("button", { key: 'a6115447dee38c833bd63c7bf773b8cd33645749', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '1d54aa128a5ae7353e2f976b5985f4523fccdc7b', name: "field-alignment-centre" })), h("button", { key: 'd61a31635f469007f65c1314c6f3404bfb7894f4', onClick: () => {
|
|
25374
|
+
this.right();
|
|
25375
|
+
}, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '6401e05b124c616922b7f5542d41de506fa1ae04', name: "field-alignment-right" }))), h("div", { key: '5a924ac1d3d04a626ffb8a19f95c4ee7c7a78d5b', class: 'button-group' }, h("button", { key: '3b03cbc294b1fae5e19465077880ad347c0b5251', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c16889d194be3d2b5f6dedb0a9db55902b125eef', name: "field-alignment-top" })), h("button", { key: '50e776898be6e43c642d666e76ef139f62ad014e', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '4d1b4051bc6eafb28ef20d96f1f7abf70cbc2338', name: "field-alignment-middle" })), h("button", { key: '405eca6c636b9e4fef7223bd0882f3b52d54166b', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'e4e82550d98afdacaa79cccef417128940e6d148', name: "field-alignment-bottom" }))))), h("slot", { key: '34964508c02209a6ccea4855cfec5d94078471ea' })));
|
|
25238
25376
|
}
|
|
25239
25377
|
};
|
|
25240
25378
|
LsFieldAlignment.style = lsFieldAlignmentCss;
|
|
@@ -25276,12 +25414,12 @@ const LsFieldDimensions = class {
|
|
|
25276
25414
|
}
|
|
25277
25415
|
}
|
|
25278
25416
|
render() {
|
|
25279
|
-
return (h(Host, { key: '
|
|
25417
|
+
return (h(Host, { key: '056c4e012cde64ce461fb954f393cc5eb264c4f1' }, this.isMultiple(this.dataItem) && (h("div", { key: '2cd01260598ea4f6cd7b40dffd502c6a642007c6', class: 'ls-field-properties-section' }, h("div", { key: 'e843fa2769ecb1889677ad85e87a79d1dc8b03f6', class: 'ls-field-properties-section-text' }, h("p", { key: '140e8ffaea2a163387345041f2039b68c8393012', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'abef468582e2e7829f869a14539c22f1db839169', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'dd5819291b738c8866f84d88d85f1f1d78c4987e', class: 'input-row' }, h("div", { key: '87d5c1913299a43e1cbd093e2c579591bdc80327', class: 'input-wrapper' }, h("ls-icon", { key: '861a92289f7383ab6773bca9b2e240332e720a04', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'aa1fc66abfa15670e682d39304178f91f3e9d05d', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '3c4293cae6df7fb0447c670e32f7fd4f2bcedfee', class: 'input-wrapper' }, h("ls-icon", { key: '4042d2ce39b5aa40e712673651ab82ee4c0e1ff2', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'd944e7c0f95b6351e655d8230128a160c5aca6b8', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '09932bc4e2e6cc4f2595f481889d1e9dccaa31b6', class: 'field-set' }, h("div", { key: 'a0d3fdf6312d4952292f81214817b85319749795', class: 'ls-field-properties-section' }, h("div", { key: '048272dea7043f05209e3319a3f4095607232641', class: 'ls-field-properties-section-text' }, h("p", { key: '692142057d98b1192a8a3fedb8ba807fb0ef27a4', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'd1d6b5ca74514d475e957c35b3554a215057f6ec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '3fc79c753561607272fc2a66a7a230160f4d1e58', class: 'input-row' }, h("div", { key: '6f0b824e7da82930e25759a617d8309c89c9a376', class: 'input-wrapper' }, h("ls-icon", { key: '73182488cca3bb85fc8ae40496e36beac68ec295', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '6fbaaeeaeae6d3b688725a2285d58ef0ac1e8219', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: 'f85adcc366ccb56ce1f25eba32c6ea4ed3947f67', class: 'input-wrapper' }, h("ls-icon", { key: '78c2d0da09465b932728c3a6ed1d3b14895f3687', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'f43725d395b60b393d7989b22198ffbfb8abed15', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '678e33f56594bde997a4d679fcf1d03672f9af44', class: 'ls-field-properties-section' }, h("div", { key: '3365548c87c4ac6f02c74fcf8b1780ebda03d4c4', class: 'ls-field-properties-section-text' }, h("p", { key: 'ce7c9653b7ddaf6b256a4cb4bef3cbe3bcddd65a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '13b174384f825593dc13d22ce6eb3ebb0b7eb954', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'c26db33451376140452a9d0722bae531e84a3382', class: 'button-group' }, h("button", { key: '8e1a002ea92227d531dd4d5f6760f4cb83866dd3', disabled: true }, h("ls-icon", { key: 'b11fb135a1183a4e5de10942852d3bc34f52f532', name: "field-scale" })), h("button", { key: '9a8a2aa33fd2ee14abb40e099e666f9f37137e25', disabled: true }, h("ls-icon", { key: '5fc371d3a123cc4848eb5514f90a6b6b61056e50', name: "field-match-width" })), h("button", { key: '1ec86eddacbbaa6061777562997634dd760d0fac', disabled: true }, h("ls-icon", { key: 'e2d3e787115ee66f61eda48d22be2d063beaac7e', name: "field-match-height" }))))))));
|
|
25280
25418
|
}
|
|
25281
25419
|
};
|
|
25282
25420
|
LsFieldDimensions.style = lsFieldDimensionsCss;
|
|
25283
25421
|
|
|
25284
|
-
const lsFieldDistributeCss = ":host{display:
|
|
25422
|
+
const lsFieldDistributeCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
|
|
25285
25423
|
|
|
25286
25424
|
const LsFieldDistribute = class {
|
|
25287
25425
|
constructor(hostRef) {
|
|
@@ -25298,7 +25436,7 @@ const LsFieldDistribute = class {
|
|
|
25298
25436
|
alter(diff) {
|
|
25299
25437
|
console.log(diff);
|
|
25300
25438
|
const diffs = this.dataItem.map(c => {
|
|
25301
|
-
return { action:
|
|
25439
|
+
return { action: 'update', data: { ...c, ...diff } };
|
|
25302
25440
|
});
|
|
25303
25441
|
this.dataItem = diffs.map(d => d.data);
|
|
25304
25442
|
this.mutate.emit(diffs);
|
|
@@ -25307,8 +25445,8 @@ const LsFieldDistribute = class {
|
|
|
25307
25445
|
distributeHorizontal() {
|
|
25308
25446
|
var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
|
|
25309
25447
|
var avgspace = 0;
|
|
25310
|
-
const sorted = this.dataItem.sort((a, b) =>
|
|
25311
|
-
if (spacing.value !==
|
|
25448
|
+
const sorted = this.dataItem.sort((a, b) => a.left - b.left);
|
|
25449
|
+
if (spacing.value !== '') {
|
|
25312
25450
|
avgspace = parseInt(spacing.value);
|
|
25313
25451
|
}
|
|
25314
25452
|
else {
|
|
@@ -25316,21 +25454,22 @@ const LsFieldDistribute = class {
|
|
|
25316
25454
|
for (var i = 1; i < sorted.length; i++) {
|
|
25317
25455
|
const c1 = sorted[i - 1];
|
|
25318
25456
|
const c2 = sorted[i];
|
|
25319
|
-
space = space + (
|
|
25457
|
+
space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);
|
|
25320
25458
|
}
|
|
25321
25459
|
avgspace = Math.floor(space / sorted.length);
|
|
25322
25460
|
}
|
|
25323
25461
|
var nextleft = sorted[0].left;
|
|
25324
|
-
const diffs = sorted.map(
|
|
25462
|
+
const diffs = sorted.map(c => {
|
|
25325
25463
|
const newLeft = nextleft;
|
|
25326
25464
|
nextleft = nextleft + c.width + avgspace;
|
|
25327
25465
|
return {
|
|
25328
|
-
action:
|
|
25466
|
+
action: 'update',
|
|
25467
|
+
data: {
|
|
25329
25468
|
...c,
|
|
25330
25469
|
left: newLeft,
|
|
25331
25470
|
ax: newLeft,
|
|
25332
|
-
bx: newLeft + c.width
|
|
25333
|
-
}
|
|
25471
|
+
bx: newLeft + c.width,
|
|
25472
|
+
},
|
|
25334
25473
|
};
|
|
25335
25474
|
});
|
|
25336
25475
|
this.dataItem = diffs.map(d => d.data);
|
|
@@ -25340,7 +25479,7 @@ const LsFieldDistribute = class {
|
|
|
25340
25479
|
distributeVertical() {
|
|
25341
25480
|
var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
|
|
25342
25481
|
var avgspace = 0;
|
|
25343
|
-
const sorted = this.dataItem.sort((a, b) =>
|
|
25482
|
+
const sorted = this.dataItem.sort((a, b) => a.top - b.top);
|
|
25344
25483
|
if (spacing.value !== '')
|
|
25345
25484
|
avgspace = parseInt(spacing.value);
|
|
25346
25485
|
else {
|
|
@@ -25348,21 +25487,22 @@ const LsFieldDistribute = class {
|
|
|
25348
25487
|
for (var i = 1; i < sorted.length; i++) {
|
|
25349
25488
|
const c1 = sorted[i - 1];
|
|
25350
25489
|
const c2 = sorted[i];
|
|
25351
|
-
space = space + (
|
|
25490
|
+
space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);
|
|
25352
25491
|
}
|
|
25353
25492
|
avgspace = Math.floor(space / sorted.length);
|
|
25354
25493
|
}
|
|
25355
25494
|
var buffer = sorted[0].top;
|
|
25356
|
-
const diffs = sorted.map(
|
|
25495
|
+
const diffs = sorted.map(c => {
|
|
25357
25496
|
const newTop = buffer;
|
|
25358
25497
|
buffer = buffer + c.height + avgspace;
|
|
25359
25498
|
return {
|
|
25360
|
-
action:
|
|
25499
|
+
action: 'update',
|
|
25500
|
+
data: {
|
|
25361
25501
|
...c,
|
|
25362
25502
|
top: newTop,
|
|
25363
25503
|
ay: newTop,
|
|
25364
|
-
by: newTop + c.height
|
|
25365
|
-
}
|
|
25504
|
+
by: newTop + c.height,
|
|
25505
|
+
},
|
|
25366
25506
|
};
|
|
25367
25507
|
});
|
|
25368
25508
|
this.dataItem = diffs.map(d => d.data);
|
|
@@ -25370,11 +25510,44 @@ const LsFieldDistribute = class {
|
|
|
25370
25510
|
this.update.emit(diffs);
|
|
25371
25511
|
}
|
|
25372
25512
|
render() {
|
|
25373
|
-
return (h(Host, { key: '
|
|
25513
|
+
return (h(Host, { key: '31c935ac5eeb7c9a73dc5ad5f941a2dcd4d3295b' }, h("div", { key: '8d168174c168f696027e15e54fd92f2f394b71b2', class: 'ls-field-properties-section' }, h("div", { key: 'e6e6a3b4835d0e091f951ddae3beeeb1895d52b2', class: 'ls-field-properties-section-text' }, h("p", { key: '5571e2d43ff44c17633fe0c61d756454fe41f4f9', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '1032830a8fbb0799b47c60990977d7a5bde7ef67', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: 'd2a7351957f694e3ed980b8b6ebd9730dfb0f035', class: 'button-group' }, h("button", { key: 'ca033084212230bb5ff9c9814384acdfd363231d', onClick: () => {
|
|
25514
|
+
this.distributeVertical();
|
|
25515
|
+
}, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c775cf090f32d07b879a4e09135f85b37e1658f1', name: "field-distribute-vertically" })), h("button", { key: '636d15dbbaa25c23abe8d7b399db1d2fcb154c8d', onClick: () => {
|
|
25516
|
+
this.distributeHorizontal();
|
|
25517
|
+
}, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: '36d0b1fce2431a7c34b786ae8afe068333950ec6', name: "field-distribute-horizontally" })))), h("div", { key: 'a8dc96e142e4b1397f9804dfdc55c23404998d1f', class: 'ls-field-properties-section' }, h("div", { key: '6d7e540f68b60df6e5a8059e7f3ebcb4002d378f', class: 'ls-field-properties-section-text' }, h("p", { key: '5c2aefd66af261b510310e793b1ccbea099a5e60', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '428e69290f2174a33f633ae345d9a2b352d828b8', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '25d85491487f497d4d1f8f4c3960a42ed42b529e', class: 'input-row' }, h("div", { key: 'ff7ed1bf39a83fef8db2fa29a2384a5869cb2650', class: 'input-wrapper' }, h("ls-icon", { key: '10af9dfa4c9f67f8e0985f01d63694d05a13b1a3', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '5fe66735a8f412a886cac76cbb5fc41339904fab', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), h("div", { key: '018e5b1ccfd5d1fe46d4760e0f259e2f4226f493', class: 'input-wrapper' }, h("ls-icon", { key: '5f89086d414185a7ef7a166aff86293d48daefa9', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'a694f799b6ddf191f4dc93b18cf7a90c2fd57760', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), h("slot", { key: 'adc96cac64ba94af217a91212e780e00655b250d' })));
|
|
25374
25518
|
}
|
|
25375
25519
|
};
|
|
25376
25520
|
LsFieldDistribute.style = lsFieldDistributeCss;
|
|
25377
25521
|
|
|
25522
|
+
const lsFieldFooterCss = ":host{display:block}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}";
|
|
25523
|
+
|
|
25524
|
+
const LsFieldFooter = class {
|
|
25525
|
+
constructor(hostRef) {
|
|
25526
|
+
registerInstance(this, hostRef);
|
|
25527
|
+
this.mutate = createEvent(this, "mutate");
|
|
25528
|
+
this.update = createEvent(this, "update");
|
|
25529
|
+
}
|
|
25530
|
+
/**
|
|
25531
|
+
* The selected items information (as JSON).
|
|
25532
|
+
* {LSApiElement[]}
|
|
25533
|
+
*/
|
|
25534
|
+
dataItem;
|
|
25535
|
+
mutate;
|
|
25536
|
+
update;
|
|
25537
|
+
deleteField = () => {
|
|
25538
|
+
this.update.emit([{ action: 'delete', data: this.dataItem }]);
|
|
25539
|
+
this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
|
|
25540
|
+
};
|
|
25541
|
+
duplicateField = () => {
|
|
25542
|
+
this.update.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
|
|
25543
|
+
this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
|
|
25544
|
+
};
|
|
25545
|
+
render() {
|
|
25546
|
+
return (h(Host, { key: 'd46fe451236281986f1e7a1a4e27c9ad4b9433d2' }, h("div", { key: 'd6e7c0b96b8b07c83c4863132c191bc86dfd103c', class: 'button-footer' }, h("button", { key: '16cc56e2701db07c0b1a0b65a2573cf3e36565c9', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: 'c5c0d8f6445ae55fad539b34100b9f2c332462db', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'a427630acdd345cccc8fcf15f175f872684e2bde', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '6630ba504e074deef33aa4064aa964408597564b', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'a6bba56933467a4d02d77af53154687fd8d66645' })));
|
|
25547
|
+
}
|
|
25548
|
+
};
|
|
25549
|
+
LsFieldFooter.style = lsFieldFooterCss;
|
|
25550
|
+
|
|
25378
25551
|
const lsFieldFormatCss = ":host{display:flex;flex-direction:row}.ls-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
25379
25552
|
|
|
25380
25553
|
const LsFieldFormat = class {
|
|
@@ -25399,30 +25572,30 @@ const LsFieldFormat = class {
|
|
|
25399
25572
|
this.update.emit(diffs);
|
|
25400
25573
|
}
|
|
25401
25574
|
render() {
|
|
25402
|
-
return (h(Host, { key: '
|
|
25575
|
+
return (h(Host, { key: '87a1481dfae83e9000fcd8372f5dcda740d0a8cb' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '73e8800061971f09ce5f198de0ce20b05b643fd8', class: 'ls-field-format-bar' }, h("div", { key: 'b16b871e8399430250f1fc7782f4cbe078865bc4', class: " input-wrapper" }, h("ls-icon", { key: 'c4b2b1cb98cbeb08b4e1979899a020c56a1c17b3', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '50ed9152533733b9ac1a409f7501fba333a1773a', onChange: input => {
|
|
25403
25576
|
this.alter({ fontName: input.target.value });
|
|
25404
|
-
}, class: 'has-leading-icon' }, h("option", { key: '
|
|
25577
|
+
}, class: 'has-leading-icon' }, h("option", { key: '08f846a77f4eb52862cc8bd2af00f17d2f9ad333', value: "arial" }, "Arial"), h("option", { key: 'f414dbc7662a502af008d5924d31591d564abff5', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '9f0b044404e41e1729f8e65ab7ddff7ccce158d7', value: "courier" }, "Courier"), h("option", { key: '03772f79ca32fba7f089d75e54f2db5a6ae3199d', value: "helvetica" }, "Helvetica"), h("option", { key: '58f3bdd4a2f1b3c1e9096b547255f863b612eafa', value: "verdana" }, "Verdana")), h("ls-icon", { key: 'f815be5900f9e17614aa7ac1223d703e744d8129', id: "selectorIcon", name: "selector" })), h("div", { key: 'ae3f39557288535143ed04cc0eeba2c1f93f0218', class: "input-wrapper" }, h("ls-icon", { key: '76667415983f8e27339a54f47015b7679055fe4d', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '5cc8c26f5540db91f2c313498a02dfc08f847d7a', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: 'f6b34b35ee676e4e944f719d5cfedbedbbb44eca', class: 'button-group' }, h("button", { key: '68aa5ac2abcbb678914637448dc0e1286dcd9f60', onClick: () => {
|
|
25405
25578
|
this.alter({ align: 'left' });
|
|
25406
|
-
} }, h("ls-icon", { key: '
|
|
25579
|
+
} }, h("ls-icon", { key: '978c2e4fbe2e4a86f2ec30fd73e84b519d0f3ccd', name: "menu-alt-2" })), h("button", { key: 'c7a4ba74b99c9959960e8c205cd95dd24ad6d142', onClick: () => {
|
|
25407
25580
|
this.alter({ align: 'center' });
|
|
25408
|
-
} }, h("ls-icon", { key: '
|
|
25581
|
+
} }, h("ls-icon", { key: '0835c5c00ca515f011cf8a691d1d12bf39ec5156', name: "menu-alt-5" })), h("button", { key: '4cf995ffc52a47700fefb7b0bb8f93d9a2095bf4', onClick: () => {
|
|
25409
25582
|
this.alter({ align: 'right' });
|
|
25410
|
-
} }, h("ls-icon", { key: '
|
|
25583
|
+
} }, h("ls-icon", { key: '9b4a269af491ed0d34d3e7a1111d07751af0e8b6', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: 'a1639d55878526264c0fdfc278f44584f25d532e', class: 'ls-field-format-bar' }, h("div", { key: 'a1337e8b1cc3742761188be5b4d35a395075a11c', class: "input-wrapper" }, h("ls-icon", { key: 'c1cfdbcab44f1758774abfabe9b6eb5a95572447', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: 'aa586a365349e10b2c09098ffe8295fbf01f4986', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '6c2404caa119edfabbd70b9697fd779c7fe55e5e', onChange: input => {
|
|
25411
25584
|
this.alter({ fontName: input.target.value });
|
|
25412
|
-
}, class: 'has-leading-icon' }, h("option", { key: '
|
|
25585
|
+
}, class: 'has-leading-icon' }, h("option", { key: '7f99c2c3ff9303d07374efbd2cbed51e840a6b07', value: "arial" }, "Arial"), h("option", { key: '33b215ab68d78df213e66a508c71326fe8f2c0df', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '74beff2c20bdb1f04c1ad493a0ab4f4b73723a5f', value: "courier" }, "Courier"), h("option", { key: 'cb71c7f9fb70efb13c899c014455296945e3f937', value: "helvetica" }, "Helvetica"), h("option", { key: '928d454bbf9015fcdcab4c3ed2f25591705304d2', value: "verdana" }, "Verdana"))), h("div", { key: 'e04d0a46ab3524a5bc3e1b2b58d351cc1e530057', class: "input-wrapper" }, h("ls-icon", { key: '34204ae09a79787e1acfaa7aec4d905b7c9f185c', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'fa2fa5b6c915f129ec756a203f1537629873b5ff', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
|
|
25413
25586
|
this.alter({ fontSize: input.target.value });
|
|
25414
|
-
}, class: 'has-leading-icon' })), h("div", { key: '
|
|
25587
|
+
}, class: 'has-leading-icon' })), h("div", { key: '1f979064c092b04c682fc2bde6852f3f948cda1f', class: 'button-group' }, h("button", { key: '6c41315e09d84762c74a225ca7862bc1ec17b9fa', onClick: () => {
|
|
25415
25588
|
this.alter({ align: 'left' });
|
|
25416
|
-
} }, h("ls-icon", { key: '
|
|
25589
|
+
} }, h("ls-icon", { key: '4cccc7b7c720e60e9279455ef91bb0c3f0b7b039', name: "menu-alt-2" })), h("button", { key: '531e37c5ce4b7c4c1d58f4c70eb308818e3ac3da', onClick: () => {
|
|
25417
25590
|
this.alter({ align: 'center' });
|
|
25418
|
-
} }, h("ls-icon", { key: '
|
|
25591
|
+
} }, h("ls-icon", { key: '0ed333cada71cd4916246d24f2fb14ac36b46965', name: "menu-alt-5" })), h("button", { key: '94d21c36f06d93a94aab142a56316f0f8c3c69c0', onClick: () => {
|
|
25419
25592
|
this.alter({ align: 'right' });
|
|
25420
|
-
} }, h("ls-icon", { key: '
|
|
25593
|
+
} }, h("ls-icon", { key: '303dd2ea923a4b0dce555b21ffbc23c3730c40ca', name: "menu-alt-3" })))))));
|
|
25421
25594
|
}
|
|
25422
25595
|
};
|
|
25423
25596
|
LsFieldFormat.style = lsFieldFormatCss;
|
|
25424
25597
|
|
|
25425
|
-
const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
|
|
25598
|
+
const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
|
|
25426
25599
|
|
|
25427
25600
|
const LsFieldPlacement = class {
|
|
25428
25601
|
constructor(hostRef) {
|
|
@@ -25459,7 +25632,7 @@ const LsFieldPlacement = class {
|
|
|
25459
25632
|
}
|
|
25460
25633
|
}
|
|
25461
25634
|
render() {
|
|
25462
|
-
return (h(Host, { key: '
|
|
25635
|
+
return (h(Host, { key: 'b177a99ffcb4fde8408326148b8ce77d6e67182e' }, this.isMultiple(this.dataItem) && (h("div", { key: '2115059af55775f217c258a2b1325ec301aef124', class: 'ls-field-properties-section' }, h("div", { key: '1796203332bc3bed40ed9cd1476b46bca79157fc', class: 'ls-field-properties-section-text' }, h("p", { key: '3369ba18dd537732bfc1a647aaa0bcc7a4f9f4b2', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '631b396d7e8eca43eeda1e4e5c30f4007dd50269', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '36a66f3f2dd69f97135d31a24c3ca17652772d5a', class: 'input-row' }, h("div", { key: '54a3f6ca14bbdf2b4854e716fc8edb03c3a0377e', class: 'input-wrapper' }, h("ls-icon", { key: 'e37871622caa8811130b0e70d3132e1372d008cc', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '6d1db1d3756e0ff25c7c0553dee26f6d0a3e3305', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ top: e.target.value }) })), h("div", { key: 'db6c1b3c235a4aa3604778123131cb7c9a669cc4', class: 'input-wrapper' }, h("ls-icon", { key: '998b63539de46fe19ced6ce8db40513823abd03b', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'dad95a2bfb80c74af431d9a1bc2223486fea05e1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ left: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '6a015090146c812554e7864c8c5d5f0a58c8dae4', class: 'field-set' }, h("div", { key: '3bec1b9351ab94a597de4558353aac392482c4ef', class: 'ls-field-properties-section' }, h("div", { key: '4ae7786982a6f9ca8268dac593ab65461ea4c0f9', class: 'ls-field-properties-section-text' }, h("p", { key: 'fb26f97aa12fab8758976ea4723e450f338fc7d9', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '67b2561850d59c1d34b672d7c8f317ee297f2dd7', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '03f959b41d217a68916df6d7094c766666f4b1f8', class: 'multi-button-group-row' }, h("div", { key: '22c542d77db67527b930b90cedfae90432f8ae41', class: 'button-group' }, h("button", { key: '24523466ae0dbfc17f4c51fe1088abb479626e53', onClick: () => this.alter({ left: 0 }) }, h("ls-icon", { key: '0b5d94181a4d0c4b87bf9f61052de5acbc3f2517', name: "field-alignment-left" })), h("button", { key: '9d262c51db3f4b2bd3264fb8697833bb36441d8b', disabled: true }, h("ls-icon", { key: '36bc7b3753a71e1963556567701b96ac6efbf9e4', name: "field-alignment-centre" })), h("button", { key: '2dec2561166ea581dc419934f08dda30caa29112', disabled: true }, h("ls-icon", { key: '70392cfecfa647c8e88295a3cdee08d59bc400d1', name: "field-alignment-right" }))), h("div", { key: 'a64537fc954be0c87d36f3ec448257de3548ae0f', class: 'button-group' }, h("button", { key: 'e8721c8ddaafe17893e8d6115e64bc5df83b4653', onClick: () => this.alter({ top: 0 }) }, h("ls-icon", { key: '16b47f99fe18db4ecb4bb2b711b9147d5721f428', name: "field-alignment-top" })), h("button", { key: 'cac48fe4d53f9aeb76f1a3f8b3fbcbcdd1afb224', disabled: true }, h("ls-icon", { key: 'bc0297d6b222886e09bb190678695f24e0f52b23', name: "field-alignment-middle" })), h("button", { key: '44d54b27d2f72e0769f399652fcc51e00b2a1b8f', disabled: true }, h("ls-icon", { key: '367a5ac69cf643cea71d730dc32059ef767dc940', name: "field-alignment-bottom" }))))), h("div", { key: 'd6c3bee8c8edfee5454e5595c14c3771497b00ef', class: 'ls-field-properties-section' }, h("div", { key: '2e619fb98e2d37e408b20ab38e2755ec5134e5f9', class: 'ls-field-properties-section-text' }, h("p", { key: '15971e94cc90e90c3d4a9480242ac3129206074f', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'ff46cf459b2cdcec46a77a44c5070d59cca08e85', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '69f7338e979e01c33cea42a15ee56a94fffd35d4', class: 'input-row' }, h("div", { key: '5ced6739a14b500d5f05e33040e245827ba86d42', class: 'input-wrapper' }, h("ls-icon", { key: 'a928d8ce74e00c1588b4e35e005da430dc87e4f3', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '4630c6e449e82499261338aff773b01aafa89888', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }) })), h("div", { key: 'ba26998241290de17a1f1c7b922187b10a24690c', class: 'input-wrapper' }, h("ls-icon", { key: '5ca0b818449a648cb53e3292f95d060b4bd17538', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'af8839028d5310e5bfd6e211f8513f5db69bf30c', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" })))), h("div", { key: '4619be4c5a343dd024a81529c1377b1f17c7e5bc', class: 'ls-field-properties-section' }, h("div", { key: '3b5425469e865b161045d8d451adf85729cd9960', class: 'ls-field-properties-section-text' }, h("p", { key: '789cf6f38966a01eae08a566e0e4163531309dc4', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'f9d30a98d11d7fbbe186ca8e2d9b42befb302b8b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '546ca427edb7ef8ca783ab61365923906955555f', class: 'button-group' }, h("button", { key: 'acc5401214b558744f1b66067d25aeae383d4ca6', disabled: true }, h("ls-icon", { key: '92170916ae903395fbac9850f76ff6151df9d4ad', name: "field-distribute-vertically" })), h("button", { key: 'acff43cbf2d8bf66844f54e3c584f7b3eabba6d7', disabled: true }, h("ls-icon", { key: 'f6340d50fe90bb86aa45dbe7a92d230b67958dc9', name: "field-distribute-horizontally" })))), h("div", { key: '8ee2e97e0eda589a2a5970069a4532dc6d40ce22', class: 'ls-field-properties-section' }, h("div", { key: '0ea4d3aa27f12f78dac7bc64c77e08ba026bfe7c', class: 'ls-field-properties-section-text' }, h("p", { key: 'cfe6e505e258ead4404a1f335fbfe34ca828d111', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'a0f84726326a04905b449af09e34a8c3ddb961b4', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '122dfcefeb52bd58b8cfd8bf2bbc2973c48a92eb', class: 'input-row' }, h("div", { key: '544e80a1935f4785f85283bbca238cdac6a47503', class: 'input-wrapper' }, h("ls-icon", { key: '5e53109292e2bc395dcebde922afde3092dc3aeb', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '01119934f6ca27eaed198e8d20e7e019925b62a6', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '7c90de7b3865bef2149cd35d5c6047dedec56303', class: 'input-wrapper' }, h("ls-icon", { key: '3507bca1a8243a48913c76e87a63382f9e132c66', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '5400cad90eaae4849227a76bb732afd623cb54fa', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
|
|
25463
25636
|
}
|
|
25464
25637
|
};
|
|
25465
25638
|
LsFieldPlacement.style = lsFieldPlacementCss;
|
|
@@ -25500,7 +25673,7 @@ const LsFieldProperties = class {
|
|
|
25500
25673
|
return h("ls-field-properties-multiple", { dataItem: this.dataItem });
|
|
25501
25674
|
}
|
|
25502
25675
|
render() {
|
|
25503
|
-
return (h(Host, { key: '
|
|
25676
|
+
return (h(Host, { key: '4f0c36a7bde5177369e905868caff830a71af2ff' }, this.dataItem && this.renderFields(), h("slot", { key: '80fc4787efdadb306ba926f895f45eaf84717d39' })));
|
|
25504
25677
|
}
|
|
25505
25678
|
};
|
|
25506
25679
|
LsFieldProperties.style = lsFieldPropertiesCss;
|
|
@@ -25513,130 +25686,284 @@ const LsFieldPropertiesAutosign = class {
|
|
|
25513
25686
|
}
|
|
25514
25687
|
dataItem;
|
|
25515
25688
|
render() {
|
|
25516
|
-
return (h(Host, { key: '
|
|
25689
|
+
return (h(Host, { key: '14e8816d8a1b469e277e7af51b2141e4338ba1e2' }, h("div", { key: '59f5e6ab5aa858f59082e36e7e74b60002e331ed', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: '14d7513183cbca4d203ce99b95d4e41f585d9b71' }, "Label: ", h("input", { key: '345895e5c19328992ae43a69c0b8e5eb2449b1ac', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '6b783594d4167a01a4deaf022d3f04d84a6897b7', dataItem: this.dataItem }), h("slot", { key: '5e05f3cee5def0994e9c9b7421d7ebbd34eb88e7' })));
|
|
25517
25690
|
}
|
|
25518
25691
|
};
|
|
25519
25692
|
LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
|
|
25520
25693
|
|
|
25521
|
-
const lsFieldPropertiesDateCss = ":host{display:
|
|
25694
|
+
const lsFieldPropertiesDateCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25522
25695
|
|
|
25523
25696
|
const LsFieldPropertiesDate = class {
|
|
25524
25697
|
constructor(hostRef) {
|
|
25525
25698
|
registerInstance(this, hostRef);
|
|
25526
25699
|
}
|
|
25527
25700
|
dataItem;
|
|
25701
|
+
fieldSet = 'content';
|
|
25702
|
+
signerColor = (index) => {
|
|
25703
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25704
|
+
};
|
|
25528
25705
|
render() {
|
|
25529
|
-
return (h(Host, { key: '
|
|
25706
|
+
return (h(Host, { key: 'b06a05273c080fa2adc6f509d119a0da69ddf46a' }, h("div", { key: '230e127b70cb0970e25d6ab2093c0638b23c36fa', class: 'tabs-container' }, h("button", { key: 'da64c8dbbe138e2f0a7642ac5f15b785aa37f642', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '1a5dd9d8d793a9fbe38c743b5be061017c7e5cfc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '74535a6f94e51d3ff5476a7b8aea87ed5638931a', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'be04d97b8543b8c16c1845651893018fca388b4b', 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: {
|
|
25707
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25708
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25709
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25710
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25711
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25712
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25713
|
+
} }, h("ls-icon", { name: "calender", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Date")))), 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
|
|
25714
|
+
.filter(type => type.formType === 'date')
|
|
25715
|
+
.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'd0f4de7d4aaefd389eaf32c828b2a546ac9dda60', class: 'button-footer' }, h("button", { key: 'cfdb665c27629f9ea5cdff3d6eb0727a55049b08', class: 'secondary' }, h("ls-icon", { key: 'e8f40090edd72678f25137f6ec642ee778780680', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '6e4cd8e4729ddf9ecb26432edae07d934f247f1a', class: 'destructive' }, h("ls-icon", { key: '12ba0890b9ef7a3cc697eacbae237317c6238600', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'c5705c26d5bd0eb3af5ffc06c1857ff9d64257de' })));
|
|
25530
25716
|
}
|
|
25531
25717
|
};
|
|
25532
25718
|
LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
|
|
25533
25719
|
|
|
25534
|
-
const lsFieldPropertiesEmailCss = ":host{display:
|
|
25720
|
+
const lsFieldPropertiesEmailCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25535
25721
|
|
|
25536
25722
|
const LsFieldPropertiesEmail = class {
|
|
25537
25723
|
constructor(hostRef) {
|
|
25538
25724
|
registerInstance(this, hostRef);
|
|
25539
25725
|
}
|
|
25540
25726
|
dataItem;
|
|
25727
|
+
fieldSet = 'content';
|
|
25728
|
+
signerColor = (index) => {
|
|
25729
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25730
|
+
};
|
|
25541
25731
|
render() {
|
|
25542
|
-
return (h(Host, { key: '
|
|
25732
|
+
return (h(Host, { key: 'a3dd378ca7a4657f444631bf34309b539c9922b0' }, h("div", { key: 'f3f0dcc6ffb58910fd2c370f82d3b91d892ee8e9', class: 'tabs-container' }, h("button", { key: '38e153312729d12fd99a3964ab674823bff8966a', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '3a4783712e34f526de913afd283dd6b02ec3d1d6', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '6fefa0a10ac674b6fed666bdc962be77252c01fe', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '6260c65ce6f49f215d964c7c7482a2857d4f8939', 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: {
|
|
25733
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25734
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25735
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25736
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25737
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25738
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25739
|
+
} }, h("ls-icon", { name: "at-symbol", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Email")))), 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
|
|
25740
|
+
.filter(type => type.formType === 'email')
|
|
25741
|
+
.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '0d3d291a2f590c13aa1b890432bf48212b9dd5b1', class: 'button-footer' }, h("button", { key: '90f886ce51be759a58afa1cd01f1ec03225ec755', class: 'secondary' }, h("ls-icon", { key: 'ea4d0f14452a816c03423ab423a9049dca5155be', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8bebe74cf0eade279e886c6b235269d4803370d0', class: 'destructive' }, h("ls-icon", { key: '39b4a3b7d93db99625be6628e52b65e4c4011614', name: "trash", size: "20" }), "Delete")), h("slot", { key: '568bd84291bf013457effe5cc1d759661644d24a' })));
|
|
25543
25742
|
}
|
|
25544
25743
|
};
|
|
25545
25744
|
LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
|
|
25546
25745
|
|
|
25547
|
-
const lsFieldPropertiesFileCss = ":host{display:
|
|
25746
|
+
const lsFieldPropertiesFileCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25548
25747
|
|
|
25549
25748
|
const LsFieldPropertiesFile = class {
|
|
25550
25749
|
constructor(hostRef) {
|
|
25551
25750
|
registerInstance(this, hostRef);
|
|
25552
25751
|
}
|
|
25553
25752
|
dataItem;
|
|
25753
|
+
fieldSet = 'content';
|
|
25754
|
+
signerColor = (index) => {
|
|
25755
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25756
|
+
};
|
|
25554
25757
|
render() {
|
|
25555
|
-
return (h(Host, { key: '
|
|
25758
|
+
return (h(Host, { key: 'c8e07d4787ce26212c42a9b943db4ee5d1b4ec1d' }, h("div", { key: 'bcf85e4e3c1cb558a3f58a3d292add6631c17512', class: 'tabs-container' }, h("button", { key: '82767a10336fc20609454a233c52c6ba66db2513', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '1341ceec3b916b8fd58b44ae73dfab2fb0b46345', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '67cb7586e9cbad65860b30d42c3cfb7016856dfc', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '354d56fa0aaccaa917997b6e68eba25521b8c7e7', 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: {
|
|
25759
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25760
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25761
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25762
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25763
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25764
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25765
|
+
} }, h("ls-icon", { name: "upload", size: "20" })), h("p", { class: 'ls-field-type-name' }, "File")))), 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
|
|
25766
|
+
.filter(type => type.formType === 'file')
|
|
25767
|
+
.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '6ab762d9b5eb86930776337353f29d423e013bed', class: 'button-footer' }, h("button", { key: '68d9c4e9495cba13cd9c99e234d2f865990f237c', class: 'secondary' }, h("ls-icon", { key: '0e0110b20dad1dd0e3d27f3acae18f5f9c133b40', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'dd26a1d8859a62b2cda8e2e526bc575cc7f2496a', class: 'destructive' }, h("ls-icon", { key: 'a701332630f5099106b710d7afbfe91d935ea533', name: "trash", size: "20" }), "Delete")), h("slot", { key: '50c5e590c316ab28c3ef71ed1b2eb4778b9fe2c5' })));
|
|
25556
25768
|
}
|
|
25557
25769
|
};
|
|
25558
25770
|
LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
|
|
25559
25771
|
|
|
25560
|
-
const lsFieldPropertiesGeneralCss = ":host{display:
|
|
25772
|
+
const lsFieldPropertiesGeneralCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25561
25773
|
|
|
25562
25774
|
const LsFieldPropertiesGeneral = class {
|
|
25563
25775
|
constructor(hostRef) {
|
|
25564
25776
|
registerInstance(this, hostRef);
|
|
25565
25777
|
}
|
|
25566
25778
|
dataItem;
|
|
25779
|
+
fieldSet = 'content';
|
|
25780
|
+
signerColor = (index) => {
|
|
25781
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25782
|
+
};
|
|
25567
25783
|
render() {
|
|
25568
|
-
return (h(Host, { key: '
|
|
25784
|
+
return (h(Host, { key: '66c7c1e07a4d46fe9272b8de3084c2446a7df45e' }, h("div", { key: '5656760e45235dc200c67a23029c6b46083ccd13', class: 'tabs-container' }, h("button", { key: '9784275994038a7fdee05ab1d32dd2c04746d243', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '85f90b1461e68df6bc363fb58430d79b79a67842', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '4ac939867be3e021852fcecf195a7e0f3908de4e', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '7e7029e78a0ff86e61823eecbc955a15772f00da', 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: {
|
|
25785
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25786
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25787
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25788
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25789
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25790
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25791
|
+
} }, h("ls-icon", { name: "field-placement", size: "20" })), h("p", { class: 'ls-field-type-name' }, "General Field")))), 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.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'bae5baaa40a845115568677631f393393354312e', class: 'button-footer' }, h("button", { key: 'c47c6ce5b6104a9c53e2e8376abf92b29a6385d2', class: 'secondary' }, h("ls-icon", { key: '8a53d65c2060cb3bdc9143403d7250cbefdfdac6', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'a0fa01929abbacec569bd449320cd9d720597e3d', class: 'destructive' }, h("ls-icon", { key: '4c6bb00579832f8e44c82b516cf3e47200d1ad71', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'b18c96fbcac26a8e5c73bd1d5f97f3d58f839d73' })));
|
|
25569
25792
|
}
|
|
25570
25793
|
};
|
|
25571
25794
|
LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
|
|
25572
25795
|
|
|
25573
|
-
const lsFieldPropertiesImageCss = ":host{display:
|
|
25796
|
+
const lsFieldPropertiesImageCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25574
25797
|
|
|
25575
25798
|
const LsFieldPropertiesImage = class {
|
|
25576
25799
|
constructor(hostRef) {
|
|
25577
25800
|
registerInstance(this, hostRef);
|
|
25578
25801
|
}
|
|
25579
25802
|
dataItem;
|
|
25803
|
+
fieldSet = 'content';
|
|
25804
|
+
signerColor = (index) => {
|
|
25805
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25806
|
+
};
|
|
25580
25807
|
render() {
|
|
25581
|
-
return (h(Host, { key: '
|
|
25808
|
+
return (h(Host, { key: '635907f2562fd34d194247189529350ce08472c1' }, h("div", { key: '29ebc137c3e2e94ef51d65a338feefdb5568e6f2', class: 'tabs-container' }, h("button", { key: '2589dd19e0cc82ae107a4cd7d59686a4d36650c0', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'c783bd7b3fc67ef709d09b3edcb1dea4ee4964f8', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'fd264269a617d7aada8808121566524bdff64ae6', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'a7f3daddab93c4dd0e5558c1ce6cbff94a49d0e6', 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: {
|
|
25809
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25810
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25811
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25812
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25813
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25814
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25815
|
+
} }, h("ls-icon", { name: "photograph", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Image")))), 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
|
|
25816
|
+
.filter(type => type.formType === 'image')
|
|
25817
|
+
.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '7a865a32f7df9ba68e422d8fed59ad2dc9da8390', class: 'button-footer' }, h("button", { key: '808702e7bbdaae99f009f1bee44055e6d251f2ff', class: 'secondary' }, h("ls-icon", { key: '378f763114db8cb053b78dc09c6e72423104b14c', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8e59f7c362245d958b1438d27ec0b825e561f0d2', class: 'destructive' }, h("ls-icon", { key: 'e093ee2b95bb0f7e2212f3fb8d2291833c788cb6', name: "trash", size: "20" }), "Delete")), h("slot", { key: '95136c1553098b6146b1f67ed17a38b30e727c2d' })));
|
|
25582
25818
|
}
|
|
25583
25819
|
};
|
|
25584
25820
|
LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
|
|
25585
25821
|
|
|
25586
|
-
const
|
|
25822
|
+
const defaultFieldIcons = {
|
|
25823
|
+
'signature': 'signature',
|
|
25824
|
+
'text': 'text',
|
|
25825
|
+
'signing date': 'auto-date',
|
|
25826
|
+
'date': 'calender',
|
|
25827
|
+
'initials': 'initials',
|
|
25828
|
+
'checkbox': 'check',
|
|
25829
|
+
'email': 'at-symbol',
|
|
25830
|
+
'number': 'hashtag',
|
|
25831
|
+
'image': 'photograph',
|
|
25832
|
+
'dropdown': 'document-text',
|
|
25833
|
+
'file': 'upload',
|
|
25834
|
+
'drawn field': 'pencil',
|
|
25835
|
+
'regular expression': 'code',
|
|
25836
|
+
};
|
|
25837
|
+
function getFieldIcon(key) {
|
|
25838
|
+
return defaultFieldIcons[key] || 'view-grid';
|
|
25839
|
+
}
|
|
25840
|
+
|
|
25841
|
+
const lsFieldPropertiesMultipleCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;text-transform:capitalize}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25587
25842
|
|
|
25588
25843
|
const LsFieldPropertiesMultiple = class {
|
|
25589
25844
|
constructor(hostRef) {
|
|
25590
25845
|
registerInstance(this, hostRef);
|
|
25591
25846
|
}
|
|
25592
25847
|
dataItem;
|
|
25848
|
+
fieldSet = 'content';
|
|
25849
|
+
signerColor = (index) => {
|
|
25850
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25851
|
+
};
|
|
25852
|
+
allSignersSame = () => {
|
|
25853
|
+
if (!this.dataItem || this.dataItem.length === 0)
|
|
25854
|
+
return { isSame: true, signer: undefined };
|
|
25855
|
+
const firstSigner = this.dataItem[0].signer;
|
|
25856
|
+
const allSame = this.dataItem.every(item => item.signer === firstSigner);
|
|
25857
|
+
return { isSame: allSame, signer: allSame ? firstSigner : 13 };
|
|
25858
|
+
};
|
|
25859
|
+
allLabelsSame = () => {
|
|
25860
|
+
if (!this.dataItem || this.dataItem.length === 0)
|
|
25861
|
+
return { isSame: true, label: undefined };
|
|
25862
|
+
const firstLabel = this.dataItem[0].label;
|
|
25863
|
+
const allSame = this.dataItem.every(item => item.label === firstLabel);
|
|
25864
|
+
return { isSame: allSame, label: allSame ? firstLabel : undefined };
|
|
25865
|
+
};
|
|
25866
|
+
allElementsSame = () => {
|
|
25867
|
+
if (!this.dataItem || this.dataItem.length === 0)
|
|
25868
|
+
return { isSame: true, elementType: 'mixed' };
|
|
25869
|
+
const firstElementType = this.dataItem[0].elementType;
|
|
25870
|
+
const allSame = this.dataItem.every(item => item.elementType === firstElementType);
|
|
25871
|
+
return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
|
|
25872
|
+
};
|
|
25593
25873
|
render() {
|
|
25594
|
-
return (h(Host, { key: '
|
|
25874
|
+
return (h(Host, { key: 'd47418c11bf08918bbc5de9815c9ed0060637730' }, h("div", { key: 'ffbe7dddad76d40c13d394b94f560bc28f0efd49', class: 'tabs-container' }, h("button", { key: '215fa1ffeb0fc0e7e5f5f74268245a0bfc24b578', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '38cbd8b91dc129be1398ba79384c316bee79eedc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '8ca2cb33b774b93d2a9ca2dd84dab64c5f757fec', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '584ff1cce354ad1f7326a73c3d2d6729dbaccac7', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("div", { class: 'field-set' }, h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-placement", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }))) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }), h("ls-field-size", { 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 Fields you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
|
|
25875
|
+
border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,
|
|
25876
|
+
background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
|
|
25877
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25878
|
+
border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
|
|
25879
|
+
color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
|
|
25880
|
+
background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
|
|
25881
|
+
} }, h("ls-icon", { name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), h("p", { class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), 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.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))))), h("ls-field-footer", { key: '4ac7b3459381ce8b58dbed6aa0de6612e26ecbb4' }), h("slot", { key: 'c07eed0aa02861a7cc12939dcb11c16ccfebb58c' })));
|
|
25595
25882
|
}
|
|
25596
25883
|
};
|
|
25597
25884
|
LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
|
|
25598
25885
|
|
|
25599
|
-
const lsFieldPropertiesNumberCss = ":host{display:
|
|
25886
|
+
const lsFieldPropertiesNumberCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25600
25887
|
|
|
25601
25888
|
const LsFieldPropertiesNumber = class {
|
|
25602
25889
|
constructor(hostRef) {
|
|
25603
25890
|
registerInstance(this, hostRef);
|
|
25604
25891
|
}
|
|
25605
25892
|
dataItem;
|
|
25893
|
+
fieldSet = 'content';
|
|
25894
|
+
signerColor = (index) => {
|
|
25895
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25896
|
+
};
|
|
25606
25897
|
render() {
|
|
25607
|
-
return (h(Host, { key: '
|
|
25898
|
+
return (h(Host, { key: 'e50acbaa72b3d4f4e71a1948d3de757583362b8b' }, h("div", { key: '09dd8369b976fe3cf3bcc84bc91ac4c1f553e454', class: 'tabs-container' }, h("button", { key: '41157341ca616277c51a6787cf6eec75b234600e', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'cc649303cc7a4bec0322f9cd6e9f2b68418b86b5', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'e84e1bae951d8a200fb0f93796a1e2a0069783d2', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '2f5621dbc686dcb5613f42537adcf6733809ed70', 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: {
|
|
25899
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25900
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25901
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25902
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25903
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25904
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25905
|
+
} }, h("ls-icon", { name: "hashtag", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Number")))), 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
|
|
25906
|
+
.filter(type => type.formType === 'number')
|
|
25907
|
+
.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '7eb13a8e3801d7e9a9908d9efa21703b47cbbeb9', class: 'button-footer' }, h("button", { key: '8376532dd6f07807bf824515146e4f6cd39f47fb', class: 'secondary' }, h("ls-icon", { key: '8a5b3635ba8ef24b4fedfb72b48681f672a9a5f1', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'c2af55b4f3f3dbf24ef8ea592812d98501d8d948', class: 'destructive' }, h("ls-icon", { key: 'befbf4e7e625d4bc26bfaadfc1f8c6b9494e9346', name: "trash", size: "20" }), "Delete")), h("slot", { key: '9323c591f57fe3e110a9850c0f6ae1fcc14ffc0d' })));
|
|
25608
25908
|
}
|
|
25609
25909
|
};
|
|
25610
25910
|
LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
|
|
25611
25911
|
|
|
25612
|
-
const lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem
|
|
25912
|
+
const lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25613
25913
|
|
|
25614
25914
|
const LsFieldPropertiesSignature = class {
|
|
25615
25915
|
constructor(hostRef) {
|
|
25616
25916
|
registerInstance(this, hostRef);
|
|
25617
25917
|
}
|
|
25918
|
+
/**
|
|
25919
|
+
* The selected items information (as JSON).
|
|
25920
|
+
* {LSApiElement[]}
|
|
25921
|
+
*/
|
|
25618
25922
|
dataItem;
|
|
25619
25923
|
fieldSet = 'content';
|
|
25924
|
+
signerColor = (index) => {
|
|
25925
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25926
|
+
};
|
|
25620
25927
|
render() {
|
|
25621
|
-
return (h(Host, { key: '
|
|
25928
|
+
return (h(Host, { key: 'bba78cf458f70fbc544cb60f680da3caaeb75dc2' }, h("div", { key: '0872f0b8f0ef07c26e5057dff8063a7585cbe209', class: 'tabs-container' }, h("button", { key: 'f70b0321dc59359a1b940d9c9c2bfc23c945e0f4', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '835388d8c1a7c9f196254f75cbe4ff19d1a12dbe', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '95cfe797b9abf9f90580a29e607c132295590719', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'a0b2c962acefbe939c3c41303f9def72bf10a0ed', 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: {
|
|
25929
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25930
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25931
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25932
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25933
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25934
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25935
|
+
} }, h("ls-icon", { name: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), 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("ls-field-footer", { key: '9a506f882be185fa072f577de42300275e7c6237', dataItem: this.dataItem }), h("slot", { key: '3c992d87c93531c50a6160f82c66b0ae83020ae3' })));
|
|
25622
25936
|
}
|
|
25623
25937
|
};
|
|
25624
25938
|
LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
|
|
25625
25939
|
|
|
25626
|
-
const lsFieldPropertiesTextCss = ":host{display:
|
|
25940
|
+
const lsFieldPropertiesTextCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
|
|
25627
25941
|
|
|
25628
25942
|
const LsFieldPropertiesText = class {
|
|
25629
25943
|
constructor(hostRef) {
|
|
25630
25944
|
registerInstance(this, hostRef);
|
|
25631
25945
|
}
|
|
25632
25946
|
dataItem;
|
|
25947
|
+
fieldSet = 'content';
|
|
25948
|
+
signerColor = (index) => {
|
|
25949
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
25950
|
+
};
|
|
25633
25951
|
render() {
|
|
25634
|
-
return (h(Host, { key: '
|
|
25952
|
+
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: {
|
|
25953
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
25954
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25955
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
25956
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25957
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
25958
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
25959
|
+
} }, 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
|
|
25960
|
+
.filter(type => type.formType === 'text')
|
|
25961
|
+
.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' })));
|
|
25635
25962
|
}
|
|
25636
25963
|
};
|
|
25637
25964
|
LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
|
|
25638
25965
|
|
|
25639
|
-
const lsFieldSizeCss = ":host{display:
|
|
25966
|
+
const lsFieldSizeCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
|
|
25640
25967
|
|
|
25641
25968
|
const LsFieldSize = class {
|
|
25642
25969
|
constructor(hostRef) {
|
|
@@ -25651,14 +25978,14 @@ const LsFieldSize = class {
|
|
|
25651
25978
|
// The source of the chain fires the mutation
|
|
25652
25979
|
alter(diff) {
|
|
25653
25980
|
const diffs = this.dataItem.map(c => {
|
|
25654
|
-
return { action:
|
|
25981
|
+
return { action: 'update', data: { ...c, ...diff } };
|
|
25655
25982
|
});
|
|
25656
25983
|
this.dataItem = diffs.map(d => d.data);
|
|
25657
25984
|
this.mutate.emit(diffs);
|
|
25658
25985
|
this.update.emit(diffs);
|
|
25659
25986
|
}
|
|
25660
25987
|
render() {
|
|
25661
|
-
return (h(Host, { key: '
|
|
25988
|
+
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' })));
|
|
25662
25989
|
}
|
|
25663
25990
|
};
|
|
25664
25991
|
LsFieldSize.style = lsFieldSizeCss;
|
|
@@ -25706,10 +26033,10 @@ const LsFormfield = class {
|
|
|
25706
26033
|
render() {
|
|
25707
26034
|
const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
|
|
25708
26035
|
const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
|
|
25709
|
-
return (h("host", { key: '
|
|
26036
|
+
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 ||
|
|
25710
26037
|
count ||
|
|
25711
26038
|
countMax ||
|
|
25712
|
-
(descriptionText && (h("div", { key: '
|
|
26039
|
+
(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))))))))));
|
|
25713
26040
|
}
|
|
25714
26041
|
static get watchers() { return {
|
|
25715
26042
|
"value": ["valueWatcher"]
|
|
@@ -25736,6 +26063,26 @@ const icons = [
|
|
|
25736
26063
|
/>
|
|
25737
26064
|
</svg>`,
|
|
25738
26065
|
},
|
|
26066
|
+
{
|
|
26067
|
+
name: 'auto-sign',
|
|
26068
|
+
svgSolid: html `No Solid`,
|
|
26069
|
+
svgOutline: html `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
26070
|
+
<path
|
|
26071
|
+
d="M2.56982 14.9622C9.47363 2.35513 4.24988 1.06281 3.25357 3.48957C2.25725 5.91634 2.31282 18.1037 6.76179 17.5019C8.62002 17.2506 10.5361 13.9836 10.5361 11.7403C10.5361 9.1703 8.37459 9.25167 7.82834 10.7181C6.98876 12.9721 7.80105 17.6966 10.5361 17.5019C12.137 17.388 12.2369 15.7379 12.2369 15.7379C12.2369 15.7379 12.5741 17.4006 13.8501 17.5019C15.1261 17.6032 15.5111 16.2249 15.5111 16.2249C15.5111 16.2249 15.9152 17.7481 17.6133 17.5019"
|
|
26072
|
+
stroke="currentColor"
|
|
26073
|
+
stroke-width="2"
|
|
26074
|
+
stroke-linecap="round"
|
|
26075
|
+
stroke-linejoin="round"
|
|
26076
|
+
/>
|
|
26077
|
+
<path
|
|
26078
|
+
d="M15.2217 5.6746L14.2694 2.5L13.317 5.6746L10.936 6.66667L13.317 7.65873L14.2694 10.8333L15.2217 7.65873L17.6027 6.66667L15.2217 5.6746Z"
|
|
26079
|
+
stroke="currentColor"
|
|
26080
|
+
stroke-width="2"
|
|
26081
|
+
stroke-linecap="round"
|
|
26082
|
+
stroke-linejoin="round"
|
|
26083
|
+
/>
|
|
26084
|
+
</svg> `,
|
|
26085
|
+
},
|
|
25739
26086
|
{
|
|
25740
26087
|
name: 'bell',
|
|
25741
26088
|
svgSolid: html `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
|
|
@@ -32340,6 +32687,7 @@ var IconEnum;
|
|
|
32340
32687
|
(function (IconEnum) {
|
|
32341
32688
|
// Hero Icons
|
|
32342
32689
|
IconEnum["MailIcon"] = "mail";
|
|
32690
|
+
IconEnum["AutoSign"] = "auto-sign";
|
|
32343
32691
|
IconEnum["BellIcon"] = "bell";
|
|
32344
32692
|
IconEnum["HomeIcon"] = "home";
|
|
32345
32693
|
IconEnum["BriefcaseIcon"] = "briefcase";
|
|
@@ -32720,7 +33068,7 @@ const LsIcon = class {
|
|
|
32720
33068
|
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.');
|
|
32721
33069
|
}
|
|
32722
33070
|
render() {
|
|
32723
|
-
return (h("host", { key: '
|
|
33071
|
+
return (h("host", { key: 'e53edb8f22349510399881fb8e76190b03209751' }, icons
|
|
32724
33072
|
?.filter((icon) => icon.name === this.name)
|
|
32725
33073
|
?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
|
|
32726
33074
|
height: `${this.size}px`,
|
|
@@ -32771,7 +33119,7 @@ const LsNumberInput = class {
|
|
|
32771
33119
|
? 'invalid'
|
|
32772
33120
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
32773
33121
|
const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
|
|
32774
|
-
return (h("host", { key: '
|
|
33122
|
+
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' })))));
|
|
32775
33123
|
}
|
|
32776
33124
|
};
|
|
32777
33125
|
LsNumberInput.style = lsNumberInputCss;
|
|
@@ -32801,22 +33149,25 @@ const LsParticipantManager = class {
|
|
|
32801
33149
|
}
|
|
32802
33150
|
deleteHandler(role) {
|
|
32803
33151
|
this.update.emit([{ action: 'delete', data: role }]);
|
|
33152
|
+
this.mutate.emit([{ action: 'delete', data: role }]);
|
|
32804
33153
|
}
|
|
32805
33154
|
swapHandler(role1, role2) {
|
|
32806
33155
|
this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
|
|
32807
33156
|
}
|
|
32808
33157
|
createHandler() {
|
|
33158
|
+
const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true);
|
|
32809
33159
|
const data = [
|
|
32810
33160
|
{
|
|
32811
33161
|
action: 'create',
|
|
32812
33162
|
data: {
|
|
32813
33163
|
id: btoa('rol' + crypto.randomUUID()),
|
|
32814
|
-
name: 'Signer ' + this.template.roles.length,
|
|
33164
|
+
name: 'Signer ' + (this.template.roles.length + 1),
|
|
32815
33165
|
roleType: 'SIGNER',
|
|
32816
|
-
signerIndex: this.template.roles.length,
|
|
33166
|
+
signerIndex: this.template.roles.length + 1,
|
|
32817
33167
|
ordinal: this.template.roles.length,
|
|
32818
33168
|
signerParent: null,
|
|
32819
|
-
experience:
|
|
33169
|
+
experience: defaultExperience.id,
|
|
33170
|
+
templateId: this.template.id
|
|
32820
33171
|
},
|
|
32821
33172
|
},
|
|
32822
33173
|
];
|
|
@@ -32827,7 +33178,7 @@ const LsParticipantManager = class {
|
|
|
32827
33178
|
return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
32828
33179
|
};
|
|
32829
33180
|
render() {
|
|
32830
|
-
return (h(Host, { key: '
|
|
33181
|
+
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) => {
|
|
32831
33182
|
return (h("div", { class: "participant-card", onClick: () => {
|
|
32832
33183
|
this.selectedHandler(r);
|
|
32833
33184
|
}, style: {
|
|
@@ -32845,13 +33196,14 @@ const LsParticipantManager = class {
|
|
|
32845
33196
|
color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
|
|
32846
33197
|
} }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
|
|
32847
33198
|
color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
|
|
32848
|
-
|
|
32849
|
-
|
|
33199
|
+
textTransform: 'capitalize'
|
|
33200
|
+
} }, r.roleType))));
|
|
33201
|
+
})), 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' })));
|
|
32850
33202
|
}
|
|
32851
33203
|
};
|
|
32852
33204
|
LsParticipantManager.style = lsParticipantManagerCss;
|
|
32853
33205
|
|
|
32854
|
-
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(--
|
|
33206
|
+
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)}";
|
|
32855
33207
|
|
|
32856
33208
|
const LsParticipantSelect = class {
|
|
32857
33209
|
constructor(hostRef) {
|
|
@@ -32865,7 +33217,7 @@ const LsParticipantSelect = class {
|
|
|
32865
33217
|
* The currently selected role.
|
|
32866
33218
|
* {number}
|
|
32867
33219
|
*/
|
|
32868
|
-
selectedRole = { signerIndex: 0, name: 'Sender' };
|
|
33220
|
+
selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };
|
|
32869
33221
|
/**
|
|
32870
33222
|
* The current template roles.
|
|
32871
33223
|
* {LSApiRole}
|
|
@@ -32897,21 +33249,37 @@ const LsParticipantSelect = class {
|
|
|
32897
33249
|
console.log('Selected role:', this.selectedRole);
|
|
32898
33250
|
}
|
|
32899
33251
|
participantColor = (index) => {
|
|
32900
|
-
return index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
33252
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
32901
33253
|
};
|
|
32902
33254
|
render() {
|
|
32903
|
-
|
|
33255
|
+
console.log(this.selectedRole);
|
|
33256
|
+
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: {
|
|
32904
33257
|
background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
|
|
32905
33258
|
color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
|
|
32906
|
-
} }, h("ls-icon", { key: '
|
|
33259
|
+
} }, 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 ||
|
|
33260
|
+
(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: {
|
|
33261
|
+
'--background-selected': `var(--${defaultRolePalette[0]}-10)`,
|
|
33262
|
+
'--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,
|
|
33263
|
+
}, 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: {
|
|
32907
33264
|
background: `var(--${defaultRolePalette[0]}-40)`,
|
|
32908
33265
|
color: `var(--${defaultRolePalette[0]}-80)`,
|
|
32909
|
-
} }, h("ls-icon", { key: '
|
|
33266
|
+
} }, h("ls-icon", { key: 'f8285a338ea604f76b1a1dc7e3f716e7c99890fe', name: "user" })), h("div", { key: '2678585faff4e351e0d4ab14b3ad198e2dd7a89c', class: 'role-text' }, h("p", { key: '5e4aaa375421f9a5f7a03c4c937f7f43bf29906b', class: 'role-name', style: {
|
|
33267
|
+
'--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
|
|
33268
|
+
} }, 'Sender'), h("p", { key: '16bc966af7ea7462505ac34806b98ac94295ee61', class: 'role-type', style: {
|
|
33269
|
+
'--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
|
|
33270
|
+
} }, "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: {
|
|
33271
|
+
'--background-selected': `var(--${this.participantColor(r?.signerIndex)}-10)`,
|
|
33272
|
+
'--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,
|
|
33273
|
+
}, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
|
|
32910
33274
|
.querySelector('.check-icon')
|
|
32911
33275
|
?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
|
|
32912
33276
|
background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
|
|
32913
33277
|
color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
|
|
32914
|
-
} }, h("ls-icon", { name: r.
|
|
33278
|
+
} }, 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: {
|
|
33279
|
+
'--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
|
|
33280
|
+
} }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), h("p", { class: 'role-type', style: {
|
|
33281
|
+
'--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
|
|
33282
|
+
} }, 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' })));
|
|
32915
33283
|
}
|
|
32916
33284
|
};
|
|
32917
33285
|
LsParticipantSelect.style = lsParticipantSelectCss;
|
|
@@ -32932,7 +33300,7 @@ const LsRadioInput = class {
|
|
|
32932
33300
|
render() {
|
|
32933
33301
|
const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
|
|
32934
33302
|
const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
|
|
32935
|
-
return (h("label", { key: '
|
|
33303
|
+
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))));
|
|
32936
33304
|
}
|
|
32937
33305
|
};
|
|
32938
33306
|
LsRadioInput.style = lsRadioInputCss;
|
|
@@ -32969,7 +33337,7 @@ const LsSelectInput = class {
|
|
|
32969
33337
|
: displayOnly
|
|
32970
33338
|
? 'displayOnly'
|
|
32971
33339
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
32972
|
-
return (h("host", { key: '
|
|
33340
|
+
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' })))));
|
|
32973
33341
|
}
|
|
32974
33342
|
};
|
|
32975
33343
|
LsSelectInput.style = lsSelectInputCss;
|
|
@@ -33015,11 +33383,11 @@ const LsStatusbar = class {
|
|
|
33015
33383
|
}
|
|
33016
33384
|
render() {
|
|
33017
33385
|
console.log('editor', this.editor);
|
|
33018
|
-
return (h(Host, { key: '
|
|
33386
|
+
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: () => {
|
|
33019
33387
|
this.editor.pagePrev();
|
|
33020
|
-
} }, h("ls-icon", { key: '
|
|
33388
|
+
} }, h("ls-icon", { key: '47661f31d5e771a3e5fa5b33679afe6c4e2c851b', name: "chevron-left" })), h("p", { key: 'b707b96884c61814dc82e331c0bb4d132b093fd3' }, "1 / 2"), h("button", { key: '23c87501b81c71dc9c1ac7f2e861467138a4d71c', onClick: () => {
|
|
33021
33389
|
this.editor.pageNext();
|
|
33022
|
-
} }, h("ls-icon", { key: '
|
|
33390
|
+
} }, h("ls-icon", { key: '6f6f802e9237a16f1ac83b094b79918e89f47cd0', name: "chevron-right" }))), h("slot", { key: '555034a1229da45a3ce6e00a814ceedd6e72f4b6' })));
|
|
33023
33391
|
}
|
|
33024
33392
|
};
|
|
33025
33393
|
LsStatusbar.style = lsStatusbarCss;
|
|
@@ -33059,7 +33427,7 @@ const LsTextInput = class {
|
|
|
33059
33427
|
: dirty && !valid
|
|
33060
33428
|
? 'invalid'
|
|
33061
33429
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
33062
|
-
return (h(Host, { key: '
|
|
33430
|
+
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 })))));
|
|
33063
33431
|
}
|
|
33064
33432
|
};
|
|
33065
33433
|
LsTextInput.style = lsTextInputCss;
|
|
@@ -33095,7 +33463,7 @@ const LsTextareaInput = class {
|
|
|
33095
33463
|
: displayOnly
|
|
33096
33464
|
? 'displayOnly'
|
|
33097
33465
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
33098
|
-
return (h("host", { key: '
|
|
33466
|
+
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 }))))));
|
|
33099
33467
|
}
|
|
33100
33468
|
};
|
|
33101
33469
|
LsTextareaInput.style = lsTextareaInputCss;
|
|
@@ -33107,7 +33475,7 @@ const LsToggle = class {
|
|
|
33107
33475
|
registerInstance(this, hostRef);
|
|
33108
33476
|
}
|
|
33109
33477
|
render() {
|
|
33110
|
-
return (h(Host, { key: '
|
|
33478
|
+
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' })));
|
|
33111
33479
|
}
|
|
33112
33480
|
};
|
|
33113
33481
|
LsToggle.style = lsToggleCss;
|
|
@@ -33150,12 +33518,12 @@ const LsToolbar = class {
|
|
|
33150
33518
|
this.update.emit(diffs);
|
|
33151
33519
|
}
|
|
33152
33520
|
render() {
|
|
33153
|
-
return (h(Host, { key: '
|
|
33521
|
+
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' })));
|
|
33154
33522
|
}
|
|
33155
33523
|
};
|
|
33156
33524
|
LsToolbar.style = lsToolbarCss;
|
|
33157
33525
|
|
|
33158
|
-
const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--
|
|
33526
|
+
const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}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)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
33159
33527
|
|
|
33160
33528
|
const LsToolboxField = class {
|
|
33161
33529
|
constructor(hostRef) {
|
|
@@ -33183,6 +33551,10 @@ const LsToolboxField = class {
|
|
|
33183
33551
|
* The starting width of this control type in pixels.
|
|
33184
33552
|
*/
|
|
33185
33553
|
defaultWidth;
|
|
33554
|
+
/**
|
|
33555
|
+
* The signer color of the element
|
|
33556
|
+
*/
|
|
33557
|
+
color = 'primary';
|
|
33186
33558
|
handleDragStart(event) {
|
|
33187
33559
|
// Add the target element's id to the data transfer object
|
|
33188
33560
|
event.dataTransfer.setData('application/json', JSON.stringify({
|
|
@@ -33200,12 +33572,12 @@ const LsToolboxField = class {
|
|
|
33200
33572
|
}
|
|
33201
33573
|
}
|
|
33202
33574
|
render() {
|
|
33203
|
-
return (h(Host, { key: '
|
|
33575
|
+
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" })));
|
|
33204
33576
|
}
|
|
33205
33577
|
};
|
|
33206
33578
|
LsToolboxField.style = lsToolboxFieldCss;
|
|
33207
33579
|
|
|
33208
|
-
export { LsDocumentOptions as ls_document_options, LsDocumentViewer as ls_document_viewer, LsEditorField as ls_editor_field, LsEditorTable as ls_editor_table, LsFeatureColoumn as ls_feature_column, LsFieldAlignment as ls_field_alignment, LsFieldDimensions as ls_field_dimensions, LsFieldDistribute as ls_field_distribute, LsFieldFormat as ls_field_format, LsFieldPlacement as ls_field_placement, LsFieldProperties as ls_field_properties, LsFieldPropertiesAutosign as ls_field_properties_autosign, LsFieldPropertiesDate as ls_field_properties_date, LsFieldPropertiesEmail as ls_field_properties_email, LsFieldPropertiesFile as ls_field_properties_file, LsFieldPropertiesGeneral as ls_field_properties_general, LsFieldPropertiesImage as ls_field_properties_image, LsFieldPropertiesMultiple as ls_field_properties_multiple, LsFieldPropertiesNumber as ls_field_properties_number, LsFieldPropertiesSignature as ls_field_properties_signature, LsFieldPropertiesText as ls_field_properties_text, LsFieldSize as ls_field_size, LsFormfield as ls_formfield, LsIcon as ls_icon, LsNumberInput as ls_number_input, LsParticipantManager as ls_participant_manager, LsParticipantSelect as ls_participant_select, LsRadioInput as ls_radio_input, LsSelectInput as ls_select_input, LsStatusbar as ls_statusbar, LsTextInput as ls_text_input, LsTextareaInput as ls_textarea_input, LsToggle as ls_toggle, LsToolbar as ls_toolbar, LsToolboxField as ls_toolbox_field };
|
|
33209
|
-
//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-dimensions.ls-field-distribute.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.entry.js.map
|
|
33580
|
+
export { LsDocumentOptions as ls_document_options, LsDocumentViewer as ls_document_viewer, LsEditorField as ls_editor_field, LsEditorTable as ls_editor_table, LsFeatureColoumn as ls_feature_column, LsFieldAlignment as ls_field_alignment, LsFieldDimensions as ls_field_dimensions, LsFieldDistribute as ls_field_distribute, LsFieldFooter as ls_field_footer, LsFieldFormat as ls_field_format, LsFieldPlacement as ls_field_placement, LsFieldProperties as ls_field_properties, LsFieldPropertiesAutosign as ls_field_properties_autosign, LsFieldPropertiesDate as ls_field_properties_date, LsFieldPropertiesEmail as ls_field_properties_email, LsFieldPropertiesFile as ls_field_properties_file, LsFieldPropertiesGeneral as ls_field_properties_general, LsFieldPropertiesImage as ls_field_properties_image, LsFieldPropertiesMultiple as ls_field_properties_multiple, LsFieldPropertiesNumber as ls_field_properties_number, LsFieldPropertiesSignature as ls_field_properties_signature, LsFieldPropertiesText as ls_field_properties_text, LsFieldSize as ls_field_size, LsFormfield as ls_formfield, LsIcon as ls_icon, LsNumberInput as ls_number_input, LsParticipantManager as ls_participant_manager, LsParticipantSelect as ls_participant_select, LsRadioInput as ls_radio_input, LsSelectInput as ls_select_input, LsStatusbar as ls_statusbar, LsTextInput as ls_text_input, LsTextareaInput as ls_textarea_input, LsToggle as ls_toggle, LsToolbar as ls_toolbar, LsToolboxField as ls_toolbox_field };
|
|
33581
|
+
//# sourceMappingURL=ls-document-options.ls-document-viewer.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.entry.js.map
|
|
33210
33582
|
|
|
33211
|
-
//# sourceMappingURL=ls-document-
|
|
33583
|
+
//# sourceMappingURL=ls-document-options_36.entry.js.map
|