legalesign-document-viewer 0.1.2 → 0.1.3
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 +109 -51
- package/dist/cjs/ls-document-options_35.cjs.entry.js.map +1 -1
- package/dist/cjs/ls-document-viewer.cjs.js +1 -1
- package/dist/collection/components/ls-document-viewer/defaultPalette.js.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/ls-document-viewer.css +11 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +8 -6
- 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 -3
- package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
- 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.js +1 -1
- package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js +1 -1
- package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js +1 -1
- package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.js +1 -1
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.css +49 -4
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js +12 -1
- 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.js +1 -1
- package/dist/collection/components/ls-field-size/ls-field-size.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js +1 -1
- package/dist/collection/components/ls-formfield/ls-formfield.js +2 -2
- package/dist/collection/components/ls-icon/ls-icon.js +1 -1
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js +2 -2
- package/dist/collection/components/ls-participant-select/ls-participant-select.js +4 -4
- 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-toolbox-field/ls-toolbox-field.css +3 -4
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js +25 -1
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js.map +1 -1
- package/dist/components/ls-document-options.js +1 -1
- package/dist/components/ls-document-viewer.js +45 -43
- 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-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-B9qKX3S0.js → p-6hZjNCO9.js} +5 -5
- package/dist/components/{p-B9qKX3S0.js.map → p-6hZjNCO9.js.map} +1 -1
- package/dist/components/{p-B1X25Dz_.js → p-B2NrT7P4.js} +5 -5
- package/dist/components/{p-B1X25Dz_.js.map → p-B2NrT7P4.js.map} +1 -1
- package/dist/components/{p-DC7lKZUf.js → p-B3WqeRix.js} +5 -5
- package/dist/components/{p-DC7lKZUf.js.map → p-B3WqeRix.js.map} +1 -1
- package/dist/components/{p-CF583nkL.js → p-BBfc4kkx.js} +7 -7
- package/dist/components/{p-CF583nkL.js.map → p-BBfc4kkx.js.map} +1 -1
- package/dist/components/{p-CEGQ-SIb.js → p-BDgNCPwS.js} +4 -4
- package/dist/components/{p-CEGQ-SIb.js.map → p-BDgNCPwS.js.map} +1 -1
- package/dist/components/{p-BxXqIouU.js → p-BEtorVYP.js} +5 -5
- package/dist/components/{p-BxXqIouU.js.map → p-BEtorVYP.js.map} +1 -1
- package/dist/components/p-BHOXtRwH.js +74 -0
- package/dist/components/p-BHOXtRwH.js.map +1 -0
- package/dist/components/{p-BlTHDG0s.js → p-BIp2Inn2.js} +3 -3
- package/dist/components/{p-BlTHDG0s.js.map → p-BIp2Inn2.js.map} +1 -1
- package/dist/components/{p-8QmwtD0L.js → p-BM12bWfu.js} +9 -6
- package/dist/components/p-BM12bWfu.js.map +1 -0
- package/dist/components/{p-D2smwTu5.js → p-B_eQ2Gz-.js} +7 -7
- package/dist/components/{p-D2smwTu5.js.map → p-B_eQ2Gz-.js.map} +1 -1
- package/dist/components/{p-Ct78kJaE.js → p-Bl6sK4Wf.js} +5 -5
- package/dist/components/{p-Ct78kJaE.js.map → p-Bl6sK4Wf.js.map} +1 -1
- package/dist/components/{p-DtHDNV_x.js → p-BoA6mH9f.js} +3 -3
- package/dist/components/{p-DtHDNV_x.js.map → p-BoA6mH9f.js.map} +1 -1
- package/dist/components/{p-CgRZ91kw.js → p-BuHDdmKo.js} +3 -3
- package/dist/components/{p-CgRZ91kw.js.map → p-BuHDdmKo.js.map} +1 -1
- package/dist/components/p-C-B8sqqJ.js +77 -0
- package/dist/components/p-C-B8sqqJ.js.map +1 -0
- package/dist/components/p-C00GqV9f.js.map +1 -1
- package/dist/components/p-CTKLmmO3.js +72 -0
- package/dist/components/p-CTKLmmO3.js.map +1 -0
- package/dist/components/{p-RoGGAmRf.js → p-CToSoYU7.js} +4 -4
- package/dist/components/{p-RoGGAmRf.js.map → p-CToSoYU7.js.map} +1 -1
- package/dist/components/{p-CnIzN0a9.js → p-Ciz2QmDr.js} +5 -5
- package/dist/components/{p-CnIzN0a9.js.map → p-Ciz2QmDr.js.map} +1 -1
- package/dist/components/{p-D3p38qOI.js → p-D4hGTY-V.js} +4 -4
- package/dist/components/{p-D3p38qOI.js.map → p-D4hGTY-V.js.map} +1 -1
- package/dist/components/{p-py-rQZsT.js → p-D8LhlUeT.js} +3 -3
- package/dist/components/{p-py-rQZsT.js.map → p-D8LhlUeT.js.map} +1 -1
- package/dist/components/{p-D3GPRslH.js → p-DBphBrvt.js} +10 -10
- package/dist/components/{p-D3GPRslH.js.map → p-DBphBrvt.js.map} +1 -1
- package/dist/components/{p-B1Q1LddX.js → p-DFgg8jhU.js} +5 -5
- package/dist/components/{p-B1Q1LddX.js.map → p-DFgg8jhU.js.map} +1 -1
- package/dist/components/{p-BI9SKPKN.js → p-DKmDGdr_.js} +3 -3
- package/dist/components/{p-BI9SKPKN.js.map → p-DKmDGdr_.js.map} +1 -1
- package/dist/components/{p-DTWaVEKo.js → p-DQthTAGK.js} +17 -17
- package/dist/components/p-DQthTAGK.js.map +1 -0
- package/dist/components/{p-pHw5Xziq.js → p-DS45bzgL.js} +3 -3
- package/dist/components/{p-pHw5Xziq.js.map → p-DS45bzgL.js.map} +1 -1
- package/dist/components/p-DT0wHPjN.js +77 -0
- package/dist/components/p-DT0wHPjN.js.map +1 -0
- package/dist/components/{p-GHcj9VUq.js → p-DXP-R4_o.js} +4 -4
- package/dist/components/{p-GHcj9VUq.js.map → p-DXP-R4_o.js.map} +1 -1
- package/dist/components/{p-D7KC-w81.js → p-DlfoNwRm.js} +10 -10
- package/dist/components/{p-D7KC-w81.js.map → p-DlfoNwRm.js.map} +1 -1
- package/dist/components/{p-CpK4mw5O.js → p-Eq1IwvY5.js} +3 -3
- package/dist/components/{p-CpK4mw5O.js.map → p-Eq1IwvY5.js.map} +1 -1
- package/dist/components/{p-D1o9mMCC.js → p-PVKJexBt.js} +9 -9
- package/dist/components/{p-D1o9mMCC.js.map → p-PVKJexBt.js.map} +1 -1
- package/dist/components/p-R3D1POuE.js +77 -0
- package/dist/components/p-R3D1POuE.js.map +1 -0
- package/dist/components/p-X9ibhDjX.js +91 -0
- package/dist/components/p-X9ibhDjX.js.map +1 -0
- package/dist/components/{p-CjicL5jA.js → p-YpxkkST1.js} +3 -3
- package/dist/components/{p-CjicL5jA.js.map → p-YpxkkST1.js.map} +1 -1
- package/dist/components/{p-IGbuOsUA.js → p-aHGDKnIY.js} +4 -4
- package/dist/components/{p-IGbuOsUA.js.map → p-aHGDKnIY.js.map} +1 -1
- package/dist/components/{p-Cs6tf1FE.js → p-cFB-6W0U.js} +3 -3
- package/dist/components/{p-Cs6tf1FE.js.map → p-cFB-6W0U.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ls-document-options_35.entry.js +109 -51
- package/dist/esm/ls-document-options_35.entry.js.map +1 -1
- package/dist/esm/ls-document-viewer.js +1 -1
- package/dist/ls-document-viewer/{editorUtils-DbS95k5h.js.map → editorUtils-ClLXAGwA.js.map} +1 -1
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/{p-85c0f6fa.entry.js → p-9946fb79.entry.js} +5 -5
- package/dist/ls-document-viewer/p-9946fb79.entry.js.map +1 -0
- package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +1 -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-signature/ls-field-properties-signature.d.ts +1 -0
- package/dist/types/components/ls-toolbox-field/ls-toolbox-field.d.ts +4 -0
- package/dist/types/components.d.ts +34 -0
- package/package.json +1 -1
- package/dist/components/p-8QmwtD0L.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-C93Q3D_9.js +0 -49
- package/dist/components/p-C93Q3D_9.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-D4wPRNKc.js +0 -86
- package/dist/components/p-D4wPRNKc.js.map +0 -1
- package/dist/components/p-DTWaVEKo.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/ls-document-viewer/ls-document-viewer.entry.esm.js.map +0 -1
- package/dist/ls-document-viewer/ls-document-viewer.entry.js +0 -24928
- 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
package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: 1rem;
|
|
5
5
|
width: 100%;
|
|
6
|
+
height: 100%;
|
|
6
7
|
position: relative;
|
|
7
8
|
}
|
|
8
9
|
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
flex-direction: column;
|
|
22
23
|
gap: 1rem;
|
|
23
24
|
width: 100%;
|
|
24
|
-
}
|
|
25
|
+
}
|
|
25
26
|
|
|
26
27
|
.ls-field-properties-section {
|
|
27
28
|
display: flex;
|
|
@@ -115,7 +116,7 @@
|
|
|
115
116
|
justify-content: center;
|
|
116
117
|
align-items: center;
|
|
117
118
|
cursor: pointer;
|
|
118
|
-
padding: 0.5rem
|
|
119
|
+
padding: 0.5rem;
|
|
119
120
|
border-radius: 0.625rem;
|
|
120
121
|
font-size: 0.875rem;
|
|
121
122
|
font-style: normal;
|
|
@@ -132,6 +133,24 @@
|
|
|
132
133
|
.ls-tab:not(.active):hover {
|
|
133
134
|
background: var(--gray-10, #f7f8fa);
|
|
134
135
|
}
|
|
136
|
+
|
|
137
|
+
.button-footer {
|
|
138
|
+
display: flex;
|
|
139
|
+
padding-top: 1rem;
|
|
140
|
+
border-top: 1px solid var(--gray-20, #f0f1f2);
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
justify-content: flex-end;
|
|
143
|
+
gap: 0.75rem;
|
|
144
|
+
margin-top: auto;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.scrolling-container {
|
|
148
|
+
overflow-y: auto;
|
|
149
|
+
padding: 0 1rem;
|
|
150
|
+
margin: 0 -1rem;
|
|
151
|
+
height: calc(100% - 10.938rem);
|
|
152
|
+
}
|
|
153
|
+
|
|
135
154
|
/* Global Styles */
|
|
136
155
|
|
|
137
156
|
p {
|
|
@@ -356,6 +375,8 @@ input[type='checkbox']:disabled:checked {
|
|
|
356
375
|
}
|
|
357
376
|
|
|
358
377
|
button {
|
|
378
|
+
display: flex;
|
|
379
|
+
gap: 0.5rem;
|
|
359
380
|
border: 0;
|
|
360
381
|
appearance: button;
|
|
361
382
|
cursor: pointer;
|
|
@@ -365,6 +386,7 @@ button {
|
|
|
365
386
|
border-radius: var(--radius-lg);
|
|
366
387
|
background-color: var(--primary-60, #4456f6);
|
|
367
388
|
color: white;
|
|
389
|
+
font-weight: 500;
|
|
368
390
|
text-transform: capitalize;
|
|
369
391
|
min-height: 2.25rem;
|
|
370
392
|
min-width: 2.25rem;
|
|
@@ -381,6 +403,31 @@ button.tertiaryGrey:hover {
|
|
|
381
403
|
background: var(--gray-10, #f7f8fa);
|
|
382
404
|
}
|
|
383
405
|
|
|
406
|
+
button.secondary {
|
|
407
|
+
border: 1px solid var(--gray-50, #c8c9cc);
|
|
408
|
+
background: var(--white, #fff);
|
|
409
|
+
color: var(--gray-90, #5e6066);
|
|
410
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
button.secondary:hover {
|
|
414
|
+
border: 1px solid var(--gray-50, #c8c9cc);
|
|
415
|
+
background: var(--gray-10, #f7f8fa);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
button.destructive {
|
|
419
|
+
border: 1px solid var(--red-60, #f04438);
|
|
420
|
+
background-color: white;
|
|
421
|
+
color: var(--red-60);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
button.destructive:hover {
|
|
425
|
+
border: 1px solid var(--red-70, #d92d20);
|
|
426
|
+
background: var(--red-10, #fff1f0);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
|
|
430
|
+
|
|
384
431
|
.button-group {
|
|
385
432
|
display: flex;
|
|
386
433
|
border-radius: 0.5rem;
|
|
@@ -414,5 +461,3 @@ button.tertiaryGrey:hover {
|
|
|
414
461
|
.button-group > :not(:first-child) {
|
|
415
462
|
border-left: 1px solid var(--gray-30, #e0e2e5);
|
|
416
463
|
}
|
|
417
|
-
|
|
418
|
-
|
package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
+
import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
|
|
2
3
|
export class LsFieldPropertiesSignature {
|
|
3
4
|
dataItem;
|
|
4
5
|
fieldSet = 'content';
|
|
6
|
+
signerColor = (index) => {
|
|
7
|
+
return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
8
|
+
};
|
|
5
9
|
render() {
|
|
6
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: 'df0094f1092e955e6dd14b91a7e67e7c03b18ee2' }, h("div", { key: '93e2fc1e8d557cebcd9c898ed318a5c63b01719f', class: 'tabs-container' }, h("button", { key: '5ac877ef74986931e2f2c3d1521f14f09776dadd', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '10e426f98422863ce40b7026ad3af7fda567615f', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'a452edbb8356e27c53637d90bb30175c4ec78303', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'b91ec8aa31925a648ce5c94243e2056c05f4bbf1', 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: {
|
|
11
|
+
border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
|
|
12
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
13
|
+
} }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
|
|
14
|
+
border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
15
|
+
color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
|
|
16
|
+
background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
|
|
17
|
+
} }, 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("div", { key: '386d082d5cc813c9c195ecc7ece0855b86e0cd7c', class: 'button-footer' }, h("button", { key: '35d6174b961aa32db31047c7b401553ccb82f579', class: 'secondary' }, h("ls-icon", { key: 'f901fbf9aa48417f2ea0a2a8fc527fa6e90cca33', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8be34a33298fde349fa6a7d42e8c4d5c44eb756d', class: 'destructive' }, h("ls-icon", { key: 'a56208fc1ae308a1f8eace45c0a5c5d5d35a12d7', name: "trash", size: "20" }), "Delete")), h("slot", { key: '5facdb89f9df774f31a1218b268746b418f8e3c3' })));
|
|
7
18
|
}
|
|
8
19
|
static get is() { return "ls-field-properties-signature"; }
|
|
9
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-signature',\n styleUrl: 'ls-field-properties-signature.css',\n shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"signature\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Signature</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n <div class={'button-footer'}>\n <button class={'secondary'}>\n <ls-icon name=\"field-duplicate\" size=\"20\" />\n Duplicate\n </button>\n <button class={'destructive'}>\n <ls-icon name=\"trash\" size=\"20\" />\n Delete\n </button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class LsFieldPropertiesText {
|
|
3
3
|
dataItem;
|
|
4
4
|
render() {
|
|
5
|
-
return (h(Host, { key: '
|
|
5
|
+
return (h(Host, { key: 'a4db8b126a38153d494b6a2e4005d08b93455f21' }, h("div", { key: '220eac7c15bf25713e9d7688410fb7a19fd08a0e', class: "ls-field-properties-section" }, "Text Field"), h("div", { key: 'e93bac0aac9e1db6e73c59a5ccedc74ebc6112de' }, "Label: ", h("input", { key: '23fa2aaa09a4923ff6d15647b6ed5c868d769388', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4bf078ffa799a5ca66f95de683957675d7dcb406', dataItem: this.dataItem }), h("slot", { key: '91fd6d676d88d718f84aca7a9b3742f8a5523053' })));
|
|
6
6
|
}
|
|
7
7
|
static get is() { return "ls-field-properties-text"; }
|
|
8
8
|
static get encapsulation() { return "shadow"; }
|
|
@@ -14,7 +14,7 @@ export class LsFieldSize {
|
|
|
14
14
|
this.update.emit(diffs);
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: '370469e2e9bbfb5d9c1b034aa5a6056c125b1563' }, h("div", { key: 'b5807f2770fd9cfd9fc257aec00c113ffb3e22b4', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '31f39a39290f7edf4669f30ffe20cd5056aa07e6', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", 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("svg", { key: '50e12865b2fb41cce603a8017793dda5283efaef', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '281ec1021546c1701f6984c5d47f0812c11ecff7', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '2ddfd3aafb6d8f45f9807a71e892ff8faf2485b9', class: "ls-round-button", 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("svg", { key: 'e39193ff14ed9dd817268fab706d662df75b68de', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2d6c9aefe4da11be709b88d9745e646273885c9', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '692649a6564f3df46d04360108fecf1bad055bb7', class: "ls-round-button", 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("svg", { key: '7905e0ab8fd9d51fe6823ada2dbe50a6f5c0e51e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '51fef530c0a273c0850cd859ae3db3af51213110', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'e5a1ccbd3d3fac7280a9273ca2c19ed672ca1d89' })));
|
|
18
18
|
}
|
|
19
19
|
static get is() { return "ls-field-size"; }
|
|
20
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -34,7 +34,7 @@ export class LsNumberInput {
|
|
|
34
34
|
? 'invalid'
|
|
35
35
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
36
36
|
const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
|
|
37
|
-
return (h("host", { key: '
|
|
37
|
+
return (h("host", { key: '794d35ed6560fe1ec5798e54ef29306978d03d50', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '4f87d8841c7888ef60dc49f1858611c60830c5e1', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: 'd21f4db0b255d2615dec43e8b0ea0acc83e8f8fe', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'd5e398cf289a86f6bbe4634347e1cf199e9fe1de', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '8ba911402323ee7c7eb91124f3fa3a988f439e1f', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '203390784de95eaf47fe1b2f8e44d0370dd08ddd', 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: '432584cb1e38877df70256a331a62478b386d6cb', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'acada7eab9b490d2505fcd2c0d1bb08ba0ae7d8f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: 'dbc5e58f0d8310445d4717b110ec6ee59c349513', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'a5974c1990792c95f1aa6d260ba53720ac33afdb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'a9a50f10982d7d357f0ea69eea951a534b7e5dec', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '1553817d47191ba8eacfc68cabe0896613f2d7e5', id: 'buttonIcon', name: 'plus-sm' })))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "ls-number-input"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -11,7 +11,7 @@ export class LsRadioInput {
|
|
|
11
11
|
render() {
|
|
12
12
|
const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
|
|
13
13
|
const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
|
|
14
|
-
return (h("label", { key: '
|
|
14
|
+
return (h("label", { key: '621ef21ba0ad35eea192888b38baa71cb0b7b5c0', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '81ab1231ce9321fc949126ec4f3b41e1a45a7229', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '96b420d8564684aebc9e26240e9435adeb89f295', class: 'spanContainer' }, h("span", { key: 'd5ae7c5e0b47868453aef50429609060fc0d6989' }, icon && h("ls-icon", { key: 'c40866a3d56e08c08cb5c44e0a296902fb96df9e', name: icon, size: "16" })), h("span", { key: '4efebbaf9020a29f8c2b439d45f772b902f7019d' }, label))));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "ls-radio-input"; }
|
|
17
17
|
static get originalStyleUrls() {
|
|
@@ -27,7 +27,7 @@ export class LsSelectInput {
|
|
|
27
27
|
: displayOnly
|
|
28
28
|
? 'displayOnly'
|
|
29
29
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
30
|
-
return (h("host", { key: '
|
|
30
|
+
return (h("host", { key: '23a3bd28d346226d7c5c6797a8fb8235bc826ca3', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'e3e62e3955940b53fbfe77109de407049ddc33ca', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '538f2ffec923748499d56619db951587421bb0cc', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '703df2c5108e0e968be453c13db77da508f4675f' })), h("div", { key: '3ff197806e02d925e5d677b472a2502784cac157', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '4eb47121bc35a79ae4fb3b763c38b8d5a68f62ed', 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' })))));
|
|
31
31
|
}
|
|
32
32
|
static get is() { return "ls-select-input"; }
|
|
33
33
|
static get originalStyleUrls() {
|
|
@@ -30,7 +30,7 @@ export class LsTextInput {
|
|
|
30
30
|
: dirty && !valid
|
|
31
31
|
? 'invalid'
|
|
32
32
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: 'ece2114bb17097f9748baf7b5ba7816c940b0da3', class: 'host' }, fieldIcon && (h("ls-icon", { key: '42566241f476a8d076379977825a021568d2eaff', 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: 'f23fd439c838e6433856b1a8c844f3885c1afcd5', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'dcad35ca05b968901cb7477aeede0d6267b23d41', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '76fc749f7551b089f38cb7def68dac0b62ed350e', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '52f58af15ca770863e09bb4c46f4017304a5effb', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '73f521570c8846caa8ca5f5e2b50bf9602544782', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "ls-text-input"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js
CHANGED
|
@@ -26,7 +26,7 @@ export class LsTextareaInput {
|
|
|
26
26
|
: displayOnly
|
|
27
27
|
? 'displayOnly'
|
|
28
28
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
29
|
-
return (h("host", { key: '
|
|
29
|
+
return (h("host", { key: '33417515941cf937c4734d99c744cac2050c1517', class: 'host' }, fieldIcon && (h("ls-icon", { key: '3d0d5ffe3a48a0bcdd034d7956b32536e645fa43', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '7bed853348e26ea3436cd98b3f8fe44ac644a70f', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: '7ac04c2c6fea8dd58d54573bd242be1dd9603f53', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'd01bd35115a651fe7cbd752dfbdf49625cdcc1a1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '43dc1db404f654aaa6d38d7cb71b1b0eebae6fb2', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'facf4fbde3b718a93d7198ed4f77bd293b8df5f5', id: 'buttonIcon', name: buttonIcon }))))));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "ls-textarea-input"; }
|
|
32
32
|
static get encapsulation() { return "shadow"; }
|
|
@@ -37,10 +37,10 @@ export class LsFormfield {
|
|
|
37
37
|
render() {
|
|
38
38
|
const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
|
|
39
39
|
const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
|
|
40
|
-
return (h("host", { key: '
|
|
40
|
+
return (h("host", { key: '1a31b37448b48d4d89b7c73e8ac26e951b3eacc1', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: 'e652e0b4d24b3c79c722ffbdcc7487478285db5f', class: "formfield-top-elements" }, h("div", { key: '384366ebbf68834977299e5e6e676343e06bbe01', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: 'c8d197bbeca42e72a9c69faa4cef98274be8b1f1', name: labelIcon }), h("label", { key: 'bae645add69fe37ac8cde9eef4c0b38566ed7bd4', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '1d7a22559e0cbaa31cd9634f003a24b5e4533f67', 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 ||
|
|
41
41
|
count ||
|
|
42
42
|
countMax ||
|
|
43
|
-
(descriptionText && (h("div", { key: '
|
|
43
|
+
(descriptionText && (h("div", { key: '28d90f818b3d0b80d5d2f2af79dcdf84c4f169b8', 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: '36d89672d85a3a702fdef0be12e85864e8592e83', class: "formfield-count-container" }, h("p", { key: 'a936d3309ba99a82378596b6c6b01a1b63b6508e', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '11436b2e9bfd90c1bf9bb0c092d575b04312ad6f', class: countClass }, h("p", { key: 'c294b63dc89642ec8d18871ab7929225d34a252a' }, "/"), h("p", { key: '12e3ae9fa67ce3a12fecd935b0db5d66661f7082' }, countMax))))))))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "ls-formfield"; }
|
|
46
46
|
static get originalStyleUrls() {
|
|
@@ -24,7 +24,7 @@ export class LsIcon {
|
|
|
24
24
|
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.');
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (h("host", { key: '
|
|
27
|
+
return (h("host", { key: '50d59c76f04664a23e2ba5c2c841f600efec02c1' }, icons
|
|
28
28
|
?.filter((icon) => icon.name === this.name)
|
|
29
29
|
?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
|
|
30
30
|
height: `${this.size}px`,
|
|
@@ -44,7 +44,7 @@ export class LsParticipantManager {
|
|
|
44
44
|
return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
45
45
|
};
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: '846505f31da41d85e4aae5119637975ce94f736d' }, h("div", { key: 'fee2a1a3cc304c61a915a9583372263148acc4cc', class: "ls-editor-infobox" }, h("h2", { key: '706f3d3c7a15d132fd4e449d4dc6544076f27ab6', class: "toolbox-section-title" }, "Participants"), h("p", { key: '57fa9b430561cb6439ef5c60141d5d9ffbd115ee', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: 'e21c5e1ce563b6acc7c3135581ae23d45fcff829', class: "participant-list" }, this.template?.roles.map((r, index) => {
|
|
48
48
|
return (h("div", { class: "participant-card", onClick: () => {
|
|
49
49
|
this.selectedHandler(r);
|
|
50
50
|
}, style: {
|
|
@@ -63,7 +63,7 @@ export class LsParticipantManager {
|
|
|
63
63
|
} }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
|
|
64
64
|
color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
|
|
65
65
|
} }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
|
|
66
|
-
})), h("div", { key: '
|
|
66
|
+
})), h("div", { key: '8d8b004e6e30e748a63c63b4315fdd58d1748aab', class: 'add-participant-button' }, h("button", { key: '41312ffdafec9bca1a0e3ef7b0e554d74739f957', onClick: () => this.createHandler() }, h("ls-icon", { key: '03cbcf950e7a61b7a35083034dfe160e6537d7b2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '2644a582f45a54ca06661d21cc47d81cb224c94d' }, "Add Participant"))), h("slot", { key: '2eb37c729f03886331c2bb0fe28c77bb26b2e232' })));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "ls-participant-manager"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,18 +41,18 @@ export class LsParticipantSelect {
|
|
|
41
41
|
return index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
|
|
42
42
|
};
|
|
43
43
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
44
|
+
return (h(Host, { key: 'adc06aa02f40eb9f365bd054fdbc17ec37ff8716' }, h("div", { key: 'c9c48044bdd4b590145f459ab299e76accef6ffa', class: "dropdown" }, h("div", { key: '9895a30c6a2e6962feedfd09436d7f6b45c2e6be', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '216a68483c4ba3463e9bd49a7c228e57b00fa2a7', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e09aa4f1fd4f13dc58bf4c0849f1fd78cb80dda8', 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: 'f2fdb78217f014be89293f38d858154d0913e5a5', 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: '6d67903da3a1d5ccadb81e6d52cd745d7de2267b', 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: 'ae2f8081640fe8f320a8445b451ab75c51ff7415', 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: '5e9fe963642411d4e55a96d5582836400f3dd374', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '8ffffe29c80d7c4eb1891659c709378a9c3f6fc9', class: 'selected-role-label', style: {
|
|
45
45
|
background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
|
|
46
46
|
color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
|
|
47
|
-
} }, h("ls-icon", { key: '
|
|
47
|
+
} }, h("ls-icon", { key: 'adf53e3bfec038ea29501a9a345660e05e2df96b', size: "18", name: this.selectedRole?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature' }), this.selectedRole.name || `Participant ${this.selectedRole.signerIndex}`), h("button", { key: 'c5ad6fe12825485d2b07d2e24ff96914cc1c8713', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '2f8b34f2f213b794e8c08d56834de53608e86ae6', name: "chevron-down" }))), this.isOpen && (h("div", { key: '025633acc266061aae0ff2e71c1a8288d8419aa0', class: "dropdown-list" }, h("div", { key: 'c3bb123591c89ca9ddc165e45974c463e416cf0c', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole({ signerIndex: 0, name: '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: '7b7e2539026fcc467985871a8a3ec5090a990690', class: 'role-icon', style: {
|
|
48
48
|
background: `var(--${defaultRolePalette[0]}-40)`,
|
|
49
49
|
color: `var(--${defaultRolePalette[0]}-80)`,
|
|
50
|
-
} }, h("ls-icon", { key: '
|
|
50
|
+
} }, h("ls-icon", { key: 'f5c41d6441598e8e5521b03b68036fca4334deb6', name: "user" })), h("div", { key: '9ff52f210dbc37b22ad8fbfc11ca5c97f4e93e0f', class: 'role-text' }, h("p", { key: '4264fc560cd02f2f4b569be4ae3b4dba7a27984f', class: 'role-name' }, 'Sender'), h("p", { key: '916b0b78771ad2f57286ac851da0024b2090046e', class: 'role-type' }, "You")), h("ls-icon", { key: 'ee7a56441d57d661c79981b51aee2e6f4fbc30e6', 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', onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
|
|
51
51
|
.querySelector('.check-icon')
|
|
52
52
|
?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
|
|
53
53
|
background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
|
|
54
54
|
color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
|
|
55
|
-
} }, h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : '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: '
|
|
55
|
+
} }, h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : '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: '3051c3214e714789a52a94b06044deb2e6b61066' })));
|
|
56
56
|
}
|
|
57
57
|
static get is() { return "ls-participant-select"; }
|
|
58
58
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,11 +36,11 @@ export class LsStatusbar {
|
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
38
|
console.log('editor', this.editor);
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '29e74976e7444161b89f0fa80ba142eff3032d63' }, h("div", { key: '4503a9ff460e9266d8432e1ad8d0927753fc46c6', class: "status-bar-section" }, h("button", { key: 'bca26ed3b8d5b788b0a4359e5d5ddd793a3e98a7', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'f249a5e2adcf4395caf67dbd584ca463084a4830', name: "zoom-out" })), h("div", { key: 'aa832c008d5f55566c3bb2986fe39dc32158f8cf' }, h("input", { key: '12562098a3495a8b5daefaaa56241ce7ac72cae2', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '2d37fb2a3dd4834ac8eab5471e6d5382a5cbe4b2', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '885fb40cafe1d04a5fc2282f0488167e3787104b', name: "zoom-in" }))), h("div", { key: '3fb58e160add6ec615df61d7c31727ffba1073d3', class: "status-bar-section" }, h("button", { key: '26b3681201915faecfa5c54093dc7f6f4c2e2bae', onClick: () => this.fitWidth() }, h("ls-icon", { key: 'cde71d2e228468736d6f61d8dbb9a985d56ed87b', name: "fit-width" })), h("button", { key: '03ce74b5f0669a43ee1630b6c99eb583f5572d6a', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'c7ca92cc5ca9ea331f933b523fd451d9cca494bf', name: "fit-height" }))), h("div", { key: 'd6677fed47861805989c4a52cfbfcf6754857864', class: "status-bar-section" }, h("button", { key: '0d5a5616e15f68911efce0573507337491c7e304', onClick: () => {
|
|
40
40
|
this.editor.pagePrev();
|
|
41
|
-
} }, h("ls-icon", { key: '
|
|
41
|
+
} }, h("ls-icon", { key: '599d5eee4d7aae6719972efd8c150a90d3a61245', name: "chevron-left" })), h("p", { key: 'afbbd26449146e65a5f44e21bf49095da39bc59d' }, "1 / 2"), h("button", { key: 'b751678f28ac886ff4aba3df87d7368e1b80d504', onClick: () => {
|
|
42
42
|
this.editor.pageNext();
|
|
43
|
-
} }, h("ls-icon", { key: '
|
|
43
|
+
} }, h("ls-icon", { key: '95175e526b2e7361d94d6ae1d1b704b402ae17ba', name: "chevron-right" }))), h("slot", { key: '35082524ac623c9146016b6c7fb344365e48625c' })));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "ls-statusbar"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class LsToggle {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '14aa511f200cbc949d135b07cb07a70b7edfbdcf' }, h("label", { key: 'f994ca1531ab9080830b74c751965475308f3572', class: "switch" }, h("input", { key: 'be377728a99b1163f6d61e8d3ffe12d2f9da205a', type: "checkbox" }), h("span", { key: 'a8498a99718af2a5be833eef6b6d95d76aae29ff', class: "slider round" })), h("slot", { key: 'bd760e7276a77d97bba2799beff818aef974d2ee' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "ls-toggle"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,7 +30,7 @@ export class LsToolbar {
|
|
|
30
30
|
this.update.emit(diffs);
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { 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: '7790e788903c493268ab783df10ebce9662afc84' })));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "ls-toolbar"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
padding: 0.5rem;
|
|
16
16
|
align-items: center;
|
|
17
17
|
border-radius: 0.5rem;
|
|
18
|
-
border: 1px solid var(--
|
|
19
|
-
background: var(--
|
|
18
|
+
border: 1px solid var(--signer-color);
|
|
19
|
+
background: var(--signer-color-light);
|
|
20
20
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
21
|
-
color: var(--
|
|
21
|
+
color: var(--signer-color);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.toolbox-field-label {
|
|
@@ -308,4 +308,3 @@ button.tertiaryGrey:hover {
|
|
|
308
308
|
.button-group > :not(:first-child) {
|
|
309
309
|
border-left: 1px solid var(--gray-30, #e0e2e5);
|
|
310
310
|
}
|
|
311
|
-
|
|
@@ -22,6 +22,10 @@ export class LsToolboxField {
|
|
|
22
22
|
* The starting width of this control type in pixels.
|
|
23
23
|
*/
|
|
24
24
|
defaultWidth;
|
|
25
|
+
/**
|
|
26
|
+
* The signer color of the element
|
|
27
|
+
*/
|
|
28
|
+
color = 'primary';
|
|
25
29
|
handleDragStart(event) {
|
|
26
30
|
// Add the target element's id to the data transfer object
|
|
27
31
|
event.dataTransfer.setData('application/json', JSON.stringify({
|
|
@@ -39,7 +43,7 @@ export class LsToolboxField {
|
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: '14ad8062f22a1d3eb0130dbd26bf06c522c6b4e6', draggable: "true" }, h("div", { key: 'd4da463a5786f80d87d472ab19e812c4d4395f35', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: 'a2453e407f4681bfc14ea9b4d01d54d8ae00a47f', name: this.icon, size: "20" })), h("p", { key: '61b6673d2b2af3a80e049bcccf01be4c94eabbe7', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '53a1e91ee1ddc89e1e6835c7e96efb56583fbce5', name: "drag-vertical", size: "16", color: "#787a80" })));
|
|
43
47
|
}
|
|
44
48
|
static get is() { return "ls-toolbox-field"; }
|
|
45
49
|
static get encapsulation() { return "shadow"; }
|
|
@@ -194,6 +198,26 @@ export class LsToolboxField {
|
|
|
194
198
|
"getter": false,
|
|
195
199
|
"setter": false,
|
|
196
200
|
"reflect": false
|
|
201
|
+
},
|
|
202
|
+
"color": {
|
|
203
|
+
"type": "string",
|
|
204
|
+
"attribute": "color",
|
|
205
|
+
"mutable": false,
|
|
206
|
+
"complexType": {
|
|
207
|
+
"original": "string",
|
|
208
|
+
"resolved": "string",
|
|
209
|
+
"references": {}
|
|
210
|
+
},
|
|
211
|
+
"required": false,
|
|
212
|
+
"optional": false,
|
|
213
|
+
"docs": {
|
|
214
|
+
"tags": [],
|
|
215
|
+
"text": "The signer color of the element"
|
|
216
|
+
},
|
|
217
|
+
"getter": false,
|
|
218
|
+
"setter": false,
|
|
219
|
+
"reflect": false,
|
|
220
|
+
"defaultValue": "'primary'"
|
|
197
221
|
}
|
|
198
222
|
};
|
|
199
223
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IAEnB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;
|
|
1
|
+
{"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IAEnB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;IAE7B;;OAEG;IACK,KAAK,GAAW,SAAS,CAAC;IAGlC,eAAe,CAAC,KAAK;QACnB,0DAA0D;QAC1D,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CACH,CAAC;QACF,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;IACzC,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAC,MAAM;YACpB,4DAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,SAAS,IAAI,CAAC,KAAK,MAAM,EAAE,gBAAgB,EAAE,SAAS,IAAI,CAAC,KAAK,MAAM,EAAE;gBACvI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAClC;YACN,0DAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAK;YAC/C,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\n shadow: true,\n})\nexport class LsToolboxField {\n /**\n * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n */\n @Prop() formElementType: string;\n @Prop() elementType: string;\n @Prop() validation: number = 0;\n\n /**\n * The text to display for this field type.\n */\n @Prop() label: string;\n\n /**\n * The icon to display for this field type.\n */\n @Prop() icon: Icon;\n\n /**\n * The starting height of this control type in pixels.\n */\n @Prop() defaultHeight: number;\n /**\n * The starting width of this control type in pixels.\n */\n @Prop() defaultWidth: number;\n\n /**\n * The signer color of the element\n */\n @Prop() color: string = 'primary';\n\n @Listen('dragstart')\n handleDragStart(event) {\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n formElementType: this.formElementType,\n elementType: this.elementType,\n validation: this.validation,\n defaultHeight: this.defaultHeight,\n defaultWidth: this.defaultWidth,\n }),\n );\n event.dataTransfer.dropEffect = 'copy';\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowDown') {\n console.log('down arrow pressed');\n }\n }\n\n render() {\n return (\n <Host draggable=\"true\">\n <div class=\"toolbox-field-icon\" style={{ '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` }}>\n <ls-icon name={this.icon} size=\"20\" />\n </div>\n <p class=\"toolbox-field-label\">{this.label}</p>\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-DlfoNwRm.js';
|
|
2
2
|
|
|
3
3
|
const LsDocumentOptions = LsDocumentOptions$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|