legalesign-document-viewer 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/dist/cjs/{index-DqDUg8D7.js → index-CWaAWf3g.js} +41 -2
  2. package/dist/cjs/index-CWaAWf3g.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/ls-document-options_37.cjs.entry.js +13 -13
  5. package/dist/cjs/ls-document-options_37.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ls-document-viewer.cjs.js +2 -2
  7. package/dist/collection/components/ls-editor-field/ls-editor-field.js +3 -3
  8. package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
  9. package/dist/collection/components/ls-participant-select/ls-participant-select.js +9 -9
  10. package/dist/collection/components/ls-participant-select/ls-participant-select.js.map +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/ls-document-options.js +1 -1
  13. package/dist/components/ls-document-viewer.js +37 -37
  14. package/dist/components/ls-editor-field.js +1 -1
  15. package/dist/components/ls-editor-table.js +1 -1
  16. package/dist/components/ls-feature-column.js +1 -1
  17. package/dist/components/ls-field-alignment.js +1 -1
  18. package/dist/components/ls-field-dimensions.js +1 -1
  19. package/dist/components/ls-field-distribute.js +1 -1
  20. package/dist/components/ls-field-footer.js +1 -1
  21. package/dist/components/ls-field-format.js +1 -1
  22. package/dist/components/ls-field-placement.js +1 -1
  23. package/dist/components/ls-field-properties-advanced.js +1 -1
  24. package/dist/components/ls-field-properties-autosign.js +1 -1
  25. package/dist/components/ls-field-properties-date.js +1 -1
  26. package/dist/components/ls-field-properties-email.js +1 -1
  27. package/dist/components/ls-field-properties-file.js +1 -1
  28. package/dist/components/ls-field-properties-general.js +1 -1
  29. package/dist/components/ls-field-properties-image.js +1 -1
  30. package/dist/components/ls-field-properties-multiple.js +1 -1
  31. package/dist/components/ls-field-properties-number.js +1 -1
  32. package/dist/components/ls-field-properties-signature.js +1 -1
  33. package/dist/components/ls-field-properties-text.js +1 -1
  34. package/dist/components/ls-field-properties.js +1 -1
  35. package/dist/components/ls-field-size.js +1 -1
  36. package/dist/components/ls-formfield.js +1 -1
  37. package/dist/components/ls-icon.js +1 -1
  38. package/dist/components/ls-number-input.js +1 -1
  39. package/dist/components/ls-participant-manager.js +1 -1
  40. package/dist/components/ls-participant-select.js +1 -1
  41. package/dist/components/ls-radio-input.js +1 -1
  42. package/dist/components/ls-select-input.js +1 -1
  43. package/dist/components/ls-statusbar.js +1 -1
  44. package/dist/components/ls-text-input.js +1 -1
  45. package/dist/components/ls-textarea-input.js +1 -1
  46. package/dist/components/ls-toggle.js +1 -1
  47. package/dist/components/ls-toolbar.js +1 -1
  48. package/dist/components/ls-toolbox-field.js +1 -1
  49. package/dist/components/{p-CtMHOHAp.js → p-2ULkKils.js} +4 -4
  50. package/dist/components/{p-CtMHOHAp.js.map → p-2ULkKils.js.map} +1 -1
  51. package/dist/components/{p-BSN2cMdj.js → p-3_nsqlNn.js} +9 -9
  52. package/dist/components/{p-BSN2cMdj.js.map → p-3_nsqlNn.js.map} +1 -1
  53. package/dist/components/{p-ucaurEVy.js → p-56r-ypr7.js} +9 -9
  54. package/dist/components/{p-ucaurEVy.js.map → p-56r-ypr7.js.map} +1 -1
  55. package/dist/components/{p-Bh-iiZW1.js → p-B-g7m2UJ.js} +4 -4
  56. package/dist/components/{p-Bh-iiZW1.js.map → p-B-g7m2UJ.js.map} +1 -1
  57. package/dist/components/{p-1Ir9-yQU.js → p-BF_3dXnS.js} +22 -22
  58. package/dist/components/{p-1Ir9-yQU.js.map → p-BF_3dXnS.js.map} +1 -1
  59. package/dist/components/{p-Bby5tjrS.js → p-BXSGBDON.js} +4 -4
  60. package/dist/components/{p-Bby5tjrS.js.map → p-BXSGBDON.js.map} +1 -1
  61. package/dist/components/{p-lTOSc-NN.js → p-BnHqb3W4.js} +4 -4
  62. package/dist/components/{p-lTOSc-NN.js.map → p-BnHqb3W4.js.map} +1 -1
  63. package/dist/components/{p-CfCokEUT.js → p-BnqFMDnT.js} +3 -3
  64. package/dist/components/{p-CfCokEUT.js.map → p-BnqFMDnT.js.map} +1 -1
  65. package/dist/components/{p-DCLBmOtj.js → p-CEfOBipU.js} +9 -9
  66. package/dist/components/{p-DCLBmOtj.js.map → p-CEfOBipU.js.map} +1 -1
  67. package/dist/components/{p-JBc2BCIT.js → p-CHWN2qrD.js} +4 -4
  68. package/dist/components/{p-JBc2BCIT.js.map → p-CHWN2qrD.js.map} +1 -1
  69. package/dist/components/{p-p3xY_X0j.js → p-CJbhxoKd.js} +3 -3
  70. package/dist/components/{p-p3xY_X0j.js.map → p-CJbhxoKd.js.map} +1 -1
  71. package/dist/components/{p-DjavAQqZ.js → p-CPOG-QV-.js} +4 -4
  72. package/dist/components/{p-DjavAQqZ.js.map → p-CPOG-QV-.js.map} +1 -1
  73. package/dist/components/{p-EsA1p6L3.js → p-CWERIrvc.js} +8 -8
  74. package/dist/components/{p-EsA1p6L3.js.map → p-CWERIrvc.js.map} +1 -1
  75. package/dist/components/{p-DzHh5tyo.js → p-CwuBDnrW.js} +9 -9
  76. package/dist/components/{p-DzHh5tyo.js.map → p-CwuBDnrW.js.map} +1 -1
  77. package/dist/components/{p-BCpsA9BY.js → p-D0LHlPhk.js} +4 -4
  78. package/dist/components/{p-BCpsA9BY.js.map → p-D0LHlPhk.js.map} +1 -1
  79. package/dist/components/{p-DjfDnBZ1.js → p-D4FyBAwx.js} +41 -2
  80. package/dist/components/p-D4FyBAwx.js.map +1 -0
  81. package/dist/components/{p-C6YMMVJ1.js → p-D4TZL9Lo.js} +9 -9
  82. package/dist/components/{p-C6YMMVJ1.js.map → p-D4TZL9Lo.js.map} +1 -1
  83. package/dist/components/{p-DEE854iZ.js → p-D6Q_jl_P.js} +11 -11
  84. package/dist/components/{p-DEE854iZ.js.map → p-D6Q_jl_P.js.map} +1 -1
  85. package/dist/components/{p-DasXNgMG.js → p-DCWGO2re.js} +7 -8
  86. package/dist/components/p-DCWGO2re.js.map +1 -0
  87. package/dist/components/{p-BPkbTOIU.js → p-DEVuVmw0.js} +3 -3
  88. package/dist/components/{p-BPkbTOIU.js.map → p-DEVuVmw0.js.map} +1 -1
  89. package/dist/components/{p-aOAZ6c8y.js → p-DJ_qA817.js} +9 -9
  90. package/dist/components/{p-aOAZ6c8y.js.map → p-DJ_qA817.js.map} +1 -1
  91. package/dist/components/{p-DVz19y7K.js → p-DMi8aFQC.js} +4 -4
  92. package/dist/components/{p-DVz19y7K.js.map → p-DMi8aFQC.js.map} +1 -1
  93. package/dist/components/p-DMtzm95I.js +114 -0
  94. package/dist/components/p-DMtzm95I.js.map +1 -0
  95. package/dist/components/{p-Dsf8KDrt.js → p-DSU4J2Gn.js} +6 -6
  96. package/dist/components/{p-Dsf8KDrt.js.map → p-DSU4J2Gn.js.map} +1 -1
  97. package/dist/components/{p-Bpzk1RMu.js → p-DhYwFcgK.js} +4 -4
  98. package/dist/components/{p-Bpzk1RMu.js.map → p-DhYwFcgK.js.map} +1 -1
  99. package/dist/components/{p-C9AqDCzm.js → p-DhuvePr2.js} +3 -3
  100. package/dist/components/{p-C9AqDCzm.js.map → p-DhuvePr2.js.map} +1 -1
  101. package/dist/components/{p-Dzn5xAM4.js → p-DnsNIGVk.js} +7 -7
  102. package/dist/components/{p-Dzn5xAM4.js.map → p-DnsNIGVk.js.map} +1 -1
  103. package/dist/components/{p-BsqbS8f_.js → p-DouPKI_J.js} +4 -4
  104. package/dist/components/{p-BsqbS8f_.js.map → p-DouPKI_J.js.map} +1 -1
  105. package/dist/components/{p-CttUZd3c.js → p-RlB1gbu7.js} +4 -4
  106. package/dist/components/{p-CttUZd3c.js.map → p-RlB1gbu7.js.map} +1 -1
  107. package/dist/components/{p-B7VyU7YH.js → p-YikYGiof.js} +9 -9
  108. package/dist/components/{p-B7VyU7YH.js.map → p-YikYGiof.js.map} +1 -1
  109. package/dist/components/{p-DY_A9zAm.js → p-ZtWDjd0j.js} +4 -4
  110. package/dist/components/{p-DY_A9zAm.js.map → p-ZtWDjd0j.js.map} +1 -1
  111. package/dist/components/{p-3LU2FV3W.js → p-_IQrSD16.js} +4 -4
  112. package/dist/components/{p-3LU2FV3W.js.map → p-_IQrSD16.js.map} +1 -1
  113. package/dist/components/{p-iC6XYfS_.js → p-fH5Kamtp.js} +4 -4
  114. package/dist/components/{p-iC6XYfS_.js.map → p-fH5Kamtp.js.map} +1 -1
  115. package/dist/components/{p-rEZh-cMt.js → p-joCRxi9a.js} +7 -7
  116. package/dist/components/{p-rEZh-cMt.js.map → p-joCRxi9a.js.map} +1 -1
  117. package/dist/components/{p-DzmtJl3e.js → p-kCPFyJUc.js} +4 -4
  118. package/dist/components/{p-DzmtJl3e.js.map → p-kCPFyJUc.js.map} +1 -1
  119. package/dist/components/{p-BneR1hef.js → p-tWjfhi4s.js} +11 -11
  120. package/dist/components/{p-BneR1hef.js.map → p-tWjfhi4s.js.map} +1 -1
  121. package/dist/components/{p-DoywjJAr.js → p-xWvsUhQg.js} +4 -4
  122. package/dist/components/{p-DoywjJAr.js.map → p-xWvsUhQg.js.map} +1 -1
  123. package/dist/esm/{index-BwkWPcyG.js → index-DUl1siho.js} +41 -2
  124. package/dist/esm/index-DUl1siho.js.map +1 -0
  125. package/dist/esm/loader.js +3 -3
  126. package/dist/esm/ls-document-options_37.entry.js +13 -13
  127. package/dist/esm/ls-document-options_37.entry.js.map +1 -1
  128. package/dist/esm/ls-document-viewer.js +3 -3
  129. package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
  130. package/dist/ls-document-viewer/p-DUl1siho.js +3 -0
  131. package/dist/ls-document-viewer/p-DUl1siho.js.map +1 -0
  132. package/dist/ls-document-viewer/{p-79589774.entry.js → p-e9d177d1.entry.js} +6 -6
  133. package/dist/ls-document-viewer/{p-79589774.entry.js.map → p-e9d177d1.entry.js.map} +1 -1
  134. package/package.json +1 -1
  135. package/dist/cjs/index-DqDUg8D7.js.map +0 -1
  136. package/dist/components/p-CuNrTyGb.js +0 -115
  137. package/dist/components/p-CuNrTyGb.js.map +0 -1
  138. package/dist/components/p-DasXNgMG.js.map +0 -1
  139. package/dist/components/p-DjfDnBZ1.js.map +0 -1
  140. package/dist/esm/index-BwkWPcyG.js.map +0 -1
  141. package/dist/ls-document-viewer/p-BwkWPcyG.js +0 -3
  142. package/dist/ls-document-viewer/p-BwkWPcyG.js.map +0 -1
package/dist/components/{p-C6YMMVJ1.js → p-D4TZL9Lo.js} RENAMED
@@ -1,12 +1,12 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
2
2
  import { d as defaultRolePalette } from './p-C00GqV9f.js';
3
3
  import { v as validationTypes } from './p-DqJ_uIFZ.js';
4
- import { d as defineCustomElement$6 } from './p-iC6XYfS_.js';
5
- import { d as defineCustomElement$5 } from './p-3LU2FV3W.js';
6
- import { d as defineCustomElement$4 } from './p-DoywjJAr.js';
7
- import { d as defineCustomElement$3 } from './p-CfCokEUT.js';
8
- import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
9
- import { d as defineCustomElement$1 } from './p-BPkbTOIU.js';
4
+ import { d as defineCustomElement$6 } from './p-fH5Kamtp.js';
5
+ import { d as defineCustomElement$5 } from './p-_IQrSD16.js';
6
+ import { d as defineCustomElement$4 } from './p-xWvsUhQg.js';
7
+ import { d as defineCustomElement$3 } from './p-BnqFMDnT.js';
8
+ import { d as defineCustomElement$2 } from './p-CJbhxoKd.js';
9
+ import { d as defineCustomElement$1 } from './p-DEVuVmw0.js';
10
10
 
11
11
  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)}";
12
12
 
@@ -82,6 +82,6 @@ function defineCustomElement() {
82
82
  defineCustomElement();
83
83
 
84
84
  export { LsFieldPropertiesGeneral as L, defineCustomElement as d };
85
- //# sourceMappingURL=p-C6YMMVJ1.js.map
85
+ //# sourceMappingURL=p-D4TZL9Lo.js.map
86
86
 
87
- //# sourceMappingURL=p-C6YMMVJ1.js.map
87
+ //# sourceMappingURL=p-D4TZL9Lo.js.map
package/dist/components/{p-C6YMMVJ1.js.map → p-D4TZL9Lo.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-C6YMMVJ1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-general/ls-field-properties-general.css?tag=ls-field-properties-general&encapsulation=shadow","src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-field-properties-general',\n styleUrl: 'ls-field-properties-general.css',\n shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\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\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-properties-advanced dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"field-placement\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>General Field</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes.map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <ls-field-footer dataItem={this.dataItem} />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-D4TZL9Lo.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-general/ls-field-properties-general.css?tag=ls-field-properties-general&encapsulation=shadow","src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-field-properties-general',\n styleUrl: 'ls-field-properties-general.css',\n shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\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\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-properties-advanced dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"field-placement\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>General Field</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes.map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <ls-field-footer dataItem={this.dataItem} />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-DEE854iZ.js → p-D6Q_jl_P.js} RENAMED
@@ -1,13 +1,13 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
2
2
  import { d as defaultRolePalette } from './p-C00GqV9f.js';
3
- import { d as defineCustomElement$8 } from './p-DzmtJl3e.js';
4
- import { d as defineCustomElement$7 } from './p-iC6XYfS_.js';
5
- import { d as defineCustomElement$6 } from './p-CttUZd3c.js';
6
- import { d as defineCustomElement$5 } from './p-3LU2FV3W.js';
7
- import { d as defineCustomElement$4 } from './p-DoywjJAr.js';
8
- import { d as defineCustomElement$3 } from './p-Bpzk1RMu.js';
9
- import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
10
- import { d as defineCustomElement$1 } from './p-BPkbTOIU.js';
3
+ import { d as defineCustomElement$8 } from './p-kCPFyJUc.js';
4
+ import { d as defineCustomElement$7 } from './p-fH5Kamtp.js';
5
+ import { d as defineCustomElement$6 } from './p-RlB1gbu7.js';
6
+ import { d as defineCustomElement$5 } from './p-_IQrSD16.js';
7
+ import { d as defineCustomElement$4 } from './p-xWvsUhQg.js';
8
+ import { d as defineCustomElement$3 } from './p-DhYwFcgK.js';
9
+ import { d as defineCustomElement$2 } from './p-CJbhxoKd.js';
10
+ import { d as defineCustomElement$1 } from './p-DEVuVmw0.js';
11
11
 
12
12
  const defaultFieldIcons = {
13
13
  'signature': 'signature',
@@ -133,6 +133,6 @@ function defineCustomElement() {
133
133
  defineCustomElement();
134
134
 
135
135
  export { LsFieldPropertiesMultiple as L, defineCustomElement as d };
136
- //# sourceMappingURL=p-DEE854iZ.js.map
136
+ //# sourceMappingURL=p-D6Q_jl_P.js.map
137
137
 
138
- //# sourceMappingURL=p-DEE854iZ.js.map
138
+ //# sourceMappingURL=p-D6Q_jl_P.js.map
package/dist/components/{p-DEE854iZ.js.map → p-D6Q_jl_P.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-DEE854iZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-viewer/defaultFieldIcons.ts","src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":["import { Icon } from \"../../components\";\n\nexport const defaultFieldIcons: { [key: string]: Icon } = {\n 'signature': 'signature',\n 'text': 'text',\n 'signing date': 'auto-date',\n 'date': 'calender',\n 'initials': 'initials',\n 'checkbox': 'check',\n 'email': 'at-symbol',\n 'number': 'hashtag',\n 'image': 'photograph',\n 'dropdown': 'document-text',\n 'file': 'upload',\n 'drawn field': 'pencil',\n 'regular expression': 'code',\n};\n\nexport function getFieldIcon(key: string): Icon | undefined {\n return defaultFieldIcons[key] || 'view-grid';\n}\n\n",":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n text-transform: capitalize;\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n tag: 'ls-field-properties-multiple',\n styleUrl: 'ls-field-properties-multiple.css',\n shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n @Prop() dataItem: LSApiElement[];\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'placement';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n allSignersSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, signer: undefined };\n const firstSigner = this.dataItem[0].signer;\n const allSame = this.dataItem.every(item => item.signer === firstSigner);\n return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n };\n\n allLabelsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, label: undefined };\n const firstLabel = this.dataItem[0].label;\n const allSame = this.dataItem.every(item => item.label === firstLabel);\n return { isSame: allSame, label: allSame ? firstLabel : undefined };\n };\n\n allElementsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n const firstElementType = this.dataItem[0].elementType;\n const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n };\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 <div class={'field-set'}>\n <ls-field-alignment dataItem={this.dataItem} />\n <ls-field-placement dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n\n </div>\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-size 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 Fields 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.allSignersSame().signer)}-30)`,\n background: `var(--${this.signerColor(this.allSignersSame().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.allSignersSame().signer)}-60)`,\n color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>\n {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n </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.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n <ls-field-footer />\n \n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-D6Q_jl_P.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-viewer/defaultFieldIcons.ts","src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":["import { Icon } from \"../../components\";\n\nexport const defaultFieldIcons: { [key: string]: Icon } = {\n 'signature': 'signature',\n 'text': 'text',\n 'signing date': 'auto-date',\n 'date': 'calender',\n 'initials': 'initials',\n 'checkbox': 'check',\n 'email': 'at-symbol',\n 'number': 'hashtag',\n 'image': 'photograph',\n 'dropdown': 'document-text',\n 'file': 'upload',\n 'drawn field': 'pencil',\n 'regular expression': 'code',\n};\n\nexport function getFieldIcon(key: string): Icon | undefined {\n return defaultFieldIcons[key] || 'view-grid';\n}\n\n",":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n text-transform: capitalize;\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n tag: 'ls-field-properties-multiple',\n styleUrl: 'ls-field-properties-multiple.css',\n shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n @Prop() dataItem: LSApiElement[];\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'placement';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n allSignersSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, signer: undefined };\n const firstSigner = this.dataItem[0].signer;\n const allSame = this.dataItem.every(item => item.signer === firstSigner);\n return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n };\n\n allLabelsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, label: undefined };\n const firstLabel = this.dataItem[0].label;\n const allSame = this.dataItem.every(item => item.label === firstLabel);\n return { isSame: allSame, label: allSame ? firstLabel : undefined };\n };\n\n allElementsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n const firstElementType = this.dataItem[0].elementType;\n const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n };\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 <div class={'field-set'}>\n <ls-field-alignment dataItem={this.dataItem} />\n <ls-field-placement dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n\n </div>\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-size 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 Fields 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.allSignersSame().signer)}-30)`,\n background: `var(--${this.signerColor(this.allSignersSame().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.allSignersSame().signer)}-60)`,\n color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>\n {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n </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.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n <ls-field-footer />\n \n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-DasXNgMG.js → p-DCWGO2re.js} RENAMED
@@ -1,14 +1,13 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
2
2
  import { b as getInputType } from './p-DqJ_uIFZ.js';
3
3
  import { d as defaultRolePalette } from './p-C00GqV9f.js';
4
4
 
5
- const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
5
+ const lsEditorFieldCss = ".sc-ls-editor-field-h{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable.sc-ls-editor-field{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field.sc-ls-editor-field{opacity:0.7}.ls-editor-field-editable.sc-ls-editor-field:focus{outline:none}.ls-editor-field-draggable.sc-ls-editor-field{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field.sc-ls-editor-field{display:none}input.sc-ls-editor-field{all:unset}.draggable-input.sc-ls-editor-field{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input.sc-ls-editor-field{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
6
6
 
7
7
  const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField extends H {
8
8
  constructor() {
9
9
  super();
10
10
  this.__registerHost();
11
- this.__attachShadow();
12
11
  }
13
12
  get component() { return this; }
14
13
  dataItem;
@@ -118,16 +117,16 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
118
117
  return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
119
118
  };
120
119
  render() {
121
- return (h(Host, { key: 'f4ab6bc46e4cdbd1b2bd3b18d08703369af685b9', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '8b8a45c0acdc4342f95abf5884b60064408c2562', class: {
120
+ return (h(Host, { key: '3e1e8db101142c0b41d87329ee1e68f1d84df4ff', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: 'e70b51032d1be5979fa95afc11cb2840a095fbf1', class: {
122
121
  'ls-editor-field': true,
123
122
  'is-selected': this.selected,
124
- } }, 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))));
123
+ } }, h("input", { key: '5e05cebdbc9c14fe68615bea96ca0b5722c75db9', 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: 'c3103645989b909e717283107693ae3bdbeb3294', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
125
124
  }
126
125
  static get watchers() { return {
127
126
  "selected": ["watchSelectedHandler"]
128
127
  }; }
129
128
  static get style() { return lsEditorFieldCss; }
130
- }, [257, "ls-editor-field", {
129
+ }, [258, "ls-editor-field", {
131
130
  "dataItem": [1040, "data-item"],
132
131
  "selected": [4],
133
132
  "readonly": [4],
@@ -157,6 +156,6 @@ function defineCustomElement() {
157
156
  defineCustomElement();
158
157
 
159
158
  export { LsEditorField as L, defineCustomElement as d };
160
- //# sourceMappingURL=p-DasXNgMG.js.map
159
+ //# sourceMappingURL=p-DCWGO2re.js.map
161
160
 
162
- //# sourceMappingURL=p-DasXNgMG.js.map
161
+ //# sourceMappingURL=p-DCWGO2re.js.map
package/dist/components/p-DCWGO2re.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-DCWGO2re.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-field/ls-editor-field.css?tag=ls-editor-field&encapsulation=scoped","src/components/ls-editor-field/ls-editor-field.tsx"],"sourcesContent":[":host {\n display: block;\n position: absolute;\n margin: 0px;\n padding: 0px 0px 0px 0px;\n isolation: isolate;\n}\n\n.ls-editor-field-editable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n\n /* no extra spaces */\n white-space: nowrap;\n margin: 0;\n padding: 0px 0px 0px 0px;\n /* default widths */\n min-width: 2em;\n height: 100%;\n width: 100%;\n}\n\n.ls-editor-field {\n opacity: 0.7;\n}\n\n.ls-editor-field-editable:focus {\n outline: none;\n}\n\n.ls-editor-field-draggable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n\n /* no extra spaces */\n white-space: nowrap;\n\n /* default widths */\n min-width: 2px;\n height: 98%;\n width: 98%;\n}\n\n/* .is-selected {\n border: 1px dotted rgb(193, 26, 26);\n} */\n\n.hidden-field {\n display: none;\n}\n\ninput {\n all: unset;\n}\n\n.draggable-input {\n font-family: inherit;\n font-size: inherit;\n position: relative;\n height: 95%;\n width: 95%;\n}\n\n.editing-input {\n caret-color: rgb(15 23 42);\n caret-shape: auto;\n height: 100%;\n width: 100%;\n}","import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-editor-field',\n styleUrl: 'ls-editor-field.css',\n scoped: true\n})\nexport class LsEditorField {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement;\n @Prop() selected: boolean;\n @Prop() readonly: boolean;\n @Prop() palette: string[];\n @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n @Prop() page: { height: number; width: number };\n @State() isEditing: boolean = false;\n @State() heldEdge: string = null;\n @State() isEdgeDragging: boolean = false;\n @State() innerValue: string;\n private sizeObserver: ResizeObserver;\n\n @Listen('keydown')\n handleInput(e: KeyboardEvent) {\n if (e.code === 'Enter') {\n this.isEditing = false;\n this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n }\n }\n\n @Listen('mousemove', { capture: true })\n handleMouseMove(e) {\n if (this.readonly) return;\n if (!e.clientX) return;\n\n // Determine which edge is being moved over and what cursor to show.\n if (Math.abs(e.offsetX) < 5) {\n this.component.style.cursor = 'ew-resize';\n } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n this.component.style.cursor = 'ew-resize';\n } else if (Math.abs(e.offsetY) < 5) {\n this.component.style.cursor = 'ns-resize';\n } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n this.component.style.cursor = 'ns-resize';\n } else {\n this.component.style.cursor = 'move';\n }\n }\n\n @Listen('dblclick', { capture: true })\n handleDoubleClick() {\n if (this.readonly) return;\n this.isEditing = true;\n this.heldEdge = null;\n this.isEdgeDragging = false;\n this.sizeObserver.disconnect();\n this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n console.log(editbox);\n\n if (editbox) {\n editbox.className = 'ls-editor-field-editable';\n editbox.focus();\n }\n }\n\n @Listen('dragstart', { capture: false, passive: false })\n handleDragStart(event) {\n console.log('dragstart ls-editor-field', event, this.type);\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n type: this.type,\n }),\n );\n event.dataTransfer.dropEffect = 'move';\n }\n\n @Watch('selected')\n watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n if (_newValue) {\n this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n this.component.style.opacity = '0.7';\n this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n } else {\n this.component.style.background = 'transparent';\n this.component.style.boxShadow = 'none';\n }\n }\n\n onInputChange(e) {\n // console.log(\"INPUT CHANGE\", e);\n this.innerValue = e.target.value;\n }\n\n componentDidLoad() {\n this.sizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n if (entry.contentRect) {\n // const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n // console.log(editbox)\n // editbox.style.height = entry.contentRect.height + \"px\"\n // editbox.style.width = entry.contentRect.width + \"px\"\n\n movebox.style.height = entry.contentRect.height + 'px';\n movebox.style.width = entry.contentRect.width + 'px';\n }\n }\n });\n\n this.sizeObserver.observe(this.component);\n\n // New dropped components automatically need selecting.\n if (this.selected) {\n this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n this.component.style.opacity = '0.7';\n this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n } else {\n this.component.style.background = `transparent`;\n this.component.style.boxShadow = 'none';\n }\n }\n\n participantColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host style={{ border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` }}>\n <div\n class={{\n 'ls-editor-field': true,\n 'is-selected': this.selected,\n }}\n >\n <input\n id=\"editing-input\"\n class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n type={getInputType(this.dataItem.validation).inputType}\n value={this.dataItem?.value || this.innerValue}\n onChange={e => this.onInputChange(e)}\n />\n <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n {this.innerValue || this.dataItem?.label || this.dataItem?.formElementType}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-BPkbTOIU.js → p-DEVuVmw0.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
2
2
 
3
3
  const lsToggleCss = ":host{display:block}.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #EDEFF2);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-60, #4456F6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456F6);outline:4px solid var(--primary-20, #E3E6FF)}input:checked+.slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}";
4
4
 
@@ -29,6 +29,6 @@ function defineCustomElement() {
29
29
  defineCustomElement();
30
30
 
31
31
  export { LsToggle as L, defineCustomElement as d };
32
- //# sourceMappingURL=p-BPkbTOIU.js.map
32
+ //# sourceMappingURL=p-DEVuVmw0.js.map
33
33
 
34
- //# sourceMappingURL=p-BPkbTOIU.js.map
34
+ //# sourceMappingURL=p-DEVuVmw0.js.map
package/dist/components/{p-BPkbTOIU.js.map → p-DEVuVmw0.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-BPkbTOIU.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k0BAAk0B;;MCOz0B,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACnB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAI,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAQ,CAC5B,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle&encapsulation=shadow","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: inline-block;\n width: 2.75rem;\n height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--gray-20, #EDEFF2);\n -webkit-transition: .4s;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.25rem;\n width: 1.25rem;\n left: 0.125rem;\n bottom: 0.125rem;\n background-color: white;\n -webkit-transition: .4s;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: var(--primary-60, #4456F6);\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px var(--primary-60, #4456F6);\n outline: 4px solid var(--primary-20, #E3E6FF);\n}\n\ninput:checked + .slider:before {\n -webkit-transform: translateX(1.25rem);\n -ms-transform: translateX(1.25rem);\n transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n\n\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-toggle',\n styleUrl: 'ls-toggle.css',\n shadow: true,\n})\nexport class LsToggle {\n render() {\n return (\n <Host>\n <label class=\"switch\">\n <input type=\"checkbox\" />\n <span class=\"slider round\"></span>\n </label>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-DEVuVmw0.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k0BAAk0B;;MCOz0B,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACnB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAI,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAQ,CAC5B,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle&encapsulation=shadow","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: inline-block;\n width: 2.75rem;\n height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--gray-20, #EDEFF2);\n -webkit-transition: .4s;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.25rem;\n width: 1.25rem;\n left: 0.125rem;\n bottom: 0.125rem;\n background-color: white;\n -webkit-transition: .4s;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: var(--primary-60, #4456F6);\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px var(--primary-60, #4456F6);\n outline: 4px solid var(--primary-20, #E3E6FF);\n}\n\ninput:checked + .slider:before {\n -webkit-transform: translateX(1.25rem);\n -ms-transform: translateX(1.25rem);\n transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n\n\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-toggle',\n styleUrl: 'ls-toggle.css',\n shadow: true,\n})\nexport class LsToggle {\n render() {\n return (\n <Host>\n <label class=\"switch\">\n <input type=\"checkbox\" />\n <span class=\"slider round\"></span>\n </label>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-aOAZ6c8y.js → p-DJ_qA817.js} RENAMED
@@ -1,10 +1,10 @@
1
- import { p as proxyCustomElement, H, h } from './p-DjfDnBZ1.js';
2
- import { d as defineCustomElement$6 } from './p-p3xY_X0j.js';
3
- import { d as defineCustomElement$5 } from './p-DY_A9zAm.js';
4
- import { d as defineCustomElement$4 } from './p-BsqbS8f_.js';
5
- import { d as defineCustomElement$3 } from './p-Bby5tjrS.js';
6
- import { d as defineCustomElement$2 } from './p-JBc2BCIT.js';
7
- import { d as defineCustomElement$1 } from './p-lTOSc-NN.js';
1
+ import { p as proxyCustomElement, H, h } from './p-D4FyBAwx.js';
2
+ import { d as defineCustomElement$6 } from './p-CJbhxoKd.js';
3
+ import { d as defineCustomElement$5 } from './p-ZtWDjd0j.js';
4
+ import { d as defineCustomElement$4 } from './p-DouPKI_J.js';
5
+ import { d as defineCustomElement$3 } from './p-BXSGBDON.js';
6
+ import { d as defineCustomElement$2 } from './p-CHWN2qrD.js';
7
+ import { d as defineCustomElement$1 } from './p-BnHqb3W4.js';
8
8
 
9
9
  const lsFormfieldCss = "* {\n box-sizing: border-box;\n margin: 0;\n}\n\n.formfield-host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n width: 100%;\n}\n\n.formfield-top-elements {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 0.5rem;\n\n ls-icon {\n color: var(--gray-80, #787A80);\n }\n\n .formfield-label {\n color: var(--gray-100, #45484D);\n /* text-base/leading-6/font-medium */\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem; /* 150% */\n }\n}\n\n.formfield-bottom-elements {\n position: relative;\n min-height: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: fit-content;\n padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n color: var(--Grey-80, #6C6E73);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n color: var(--red-70, #DC2721);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n gap: 0.125rem;\n align-items: center;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n text-align: right;\n}\n\n.formfield-count {\n display: flex;\n align-items: center;\n color: var(--Grey-70, #6C6E73);\n gap: 0.125rem;\n}\n\n.formfield-count-error {\n display: flex;\n align-items: center;\n gap: 0.125rem;\n color: var(--red-70, #DC2721);\n}\n\n\n";
10
10
 
@@ -133,6 +133,6 @@ function defineCustomElement() {
133
133
  defineCustomElement();
134
134
 
135
135
  export { LsFormfield as L, defineCustomElement as d };
136
- //# sourceMappingURL=p-aOAZ6c8y.js.map
136
+ //# sourceMappingURL=p-DJ_qA817.js.map
137
137
 
138
- //# sourceMappingURL=p-aOAZ6c8y.js.map
138
+ //# sourceMappingURL=p-DJ_qA817.js.map
package/dist/components/{p-aOAZ6c8y.js.map → p-DJ_qA817.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-aOAZ6c8y.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/ls-formfield.css?tag=ls-formfield","src/components/ls-formfield/ls-formfield.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n margin: 0;\n}\n\n.formfield-host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n width: 100%;\n}\n\n.formfield-top-elements {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 0.5rem;\n\n ls-icon {\n color: var(--gray-80, #787A80);\n }\n\n .formfield-label {\n color: var(--gray-100, #45484D);\n /* text-base/leading-6/font-medium */\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem; /* 150% */\n }\n}\n\n.formfield-bottom-elements {\n position: relative;\n min-height: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: fit-content;\n padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n color: var(--Grey-80, #6C6E73);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n color: var(--red-70, #DC2721);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n gap: 0.125rem;\n align-items: center;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n text-align: right;\n}\n\n.formfield-count {\n display: flex;\n align-items: center;\n color: var(--Grey-70, #6C6E73);\n gap: 0.125rem;\n}\n\n.formfield-count-error {\n display: flex;\n align-items: center;\n gap: 0.125rem;\n color: var(--red-70, #DC2721);\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { State, Watch } from '@stencil/core/internal';\n\n@Component({\n tag: 'ls-formfield',\n styleUrl: 'ls-formfield.css',\n shadow: false,\n})\nexport class LsFormfield {\n @Prop() name: string;\n @Prop() fieldId: string;\n @Prop() label?: string;\n @Prop() as?: 'text' | 'select' | 'radio' | 'textarea' | 'password' | 'number' | 'displayonly' = 'text';\n @Prop({ mutable: true }) value?: string | number;\n @Prop() placeholder?: string;\n @Prop() descriptionText?: string;\n @Prop() errorText?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() infoTooltipText?: string;\n @Prop() hoverTooltipText?: string;\n @Prop() disabled: boolean;\n @Prop() extraLabel: 'optional' | 'required' | 'none' = 'none';\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() count: boolean;\n @Prop() countMax?: number;\n @Prop() buttonClick?: () => void;\n @Prop() buttonIcon?: Icon;\n @Prop() labelIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n @State() _value: string;\n\n @Watch('value')\n valueWatcher(newValue: string) {\n this._value = newValue;\n }\n\n componentWillLoad() {\n this.valueWatcher(this?.value?.toString());\n }\n\n handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n render() {\n const {\n name,\n fieldId,\n label,\n as,\n value,\n placeholder,\n descriptionText,\n errorText,\n aria,\n infoTooltipText,\n disabled,\n extraLabel,\n valid,\n dirty,\n count,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n labelIcon,\n } = this;\n\n const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';\n\n return (\n <host class=\"formfield-host\">\n {label?.length > 1 || extraLabel !== 'none' && (\n <div class=\"formfield-top-elements\">\n <div class=\"formfield-left-side\">\n {labelIcon && <ls-icon name={labelIcon}></ls-icon>}\n <label htmlFor={name} class=\"formfield-label\">\n {label}\n </label>\n {infoTooltipText && <ls-icon name={'information-circle'}></ls-icon>}\n </div>\n\n {extraLabel === 'optional' ? (\n <ls-label text=\"Optional\" colour=\"gray\" type=\"low\"></ls-label>\n ) : extraLabel === 'required' ? (\n <ls-label text=\"Required\" colour=\"gray\" type=\"low\"></ls-label>\n ) : (\n ''\n )}\n </div>\n )}\n {as === 'text' ? (\n <ls-text-input\n id={fieldId}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n onInput={(event: InputEvent) => this.handleChange(event)}\n ></ls-text-input>\n ) : as === 'select' ? (\n <ls-select-input\n id={name}\n name={name}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n >\n <slot></slot>\n </ls-select-input>\n ) : as === 'radio' ? (\n <ls-radio-input radioId={label} label={value?.toString()} icon={fieldIcon} name={name} disabled={disabled} />\n ) : as === 'textarea' ? (\n <ls-textarea-input\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'password' ? (\n <ls-text-input\n type=\"password\"\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'displayonly' ? (\n <ls-text-input\n type=\"displayonly\"\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'number' ? (\n <ls-number-input\n type=\"ls\"\n id={name}\n name={name}\n value={Number(value)}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : (\n <p>placeholder</p>\n )}\n {errorText ||\n count ||\n countMax ||\n (descriptionText && (\n <div class=\"formfield-bottom-elements\">\n {errorText && !valid ? <p class=\"formfield-error-text\">{errorText}</p> : descriptionText ? <p class=\"formfield-description-text\">{descriptionText}</p> : ''}\n {count && (\n <div class=\"formfield-count-container\">\n <p class={countClass}>{value?.toString()?.length}</p>\n {countMax > 0 && (\n <div class={countClass}>\n <p>/</p>\n <p>{countMax}</p>\n </div>\n )}\n </div>\n )}\n </div>\n ))}\n </host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-DJ_qA817.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/ls-formfield.css?tag=ls-formfield","src/components/ls-formfield/ls-formfield.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n margin: 0;\n}\n\n.formfield-host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n width: 100%;\n}\n\n.formfield-top-elements {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 0.5rem;\n\n ls-icon {\n color: var(--gray-80, #787A80);\n }\n\n .formfield-label {\n color: var(--gray-100, #45484D);\n /* text-base/leading-6/font-medium */\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem; /* 150% */\n }\n}\n\n.formfield-bottom-elements {\n position: relative;\n min-height: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: fit-content;\n padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n color: var(--Grey-80, #6C6E73);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n color: var(--red-70, #DC2721);\n width: 100%;\n /* text-xs/leading-4/font-light */\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n gap: 0.125rem;\n align-items: center;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem; /* 133.333% */\n text-align: right;\n}\n\n.formfield-count {\n display: flex;\n align-items: center;\n color: var(--Grey-70, #6C6E73);\n gap: 0.125rem;\n}\n\n.formfield-count-error {\n display: flex;\n align-items: center;\n gap: 0.125rem;\n color: var(--red-70, #DC2721);\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { State, Watch } from '@stencil/core/internal';\n\n@Component({\n tag: 'ls-formfield',\n styleUrl: 'ls-formfield.css',\n shadow: false,\n})\nexport class LsFormfield {\n @Prop() name: string;\n @Prop() fieldId: string;\n @Prop() label?: string;\n @Prop() as?: 'text' | 'select' | 'radio' | 'textarea' | 'password' | 'number' | 'displayonly' = 'text';\n @Prop({ mutable: true }) value?: string | number;\n @Prop() placeholder?: string;\n @Prop() descriptionText?: string;\n @Prop() errorText?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() infoTooltipText?: string;\n @Prop() hoverTooltipText?: string;\n @Prop() disabled: boolean;\n @Prop() extraLabel: 'optional' | 'required' | 'none' = 'none';\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() count: boolean;\n @Prop() countMax?: number;\n @Prop() buttonClick?: () => void;\n @Prop() buttonIcon?: Icon;\n @Prop() labelIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n @State() _value: string;\n\n @Watch('value')\n valueWatcher(newValue: string) {\n this._value = newValue;\n }\n\n componentWillLoad() {\n this.valueWatcher(this?.value?.toString());\n }\n\n handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n render() {\n const {\n name,\n fieldId,\n label,\n as,\n value,\n placeholder,\n descriptionText,\n errorText,\n aria,\n infoTooltipText,\n disabled,\n extraLabel,\n valid,\n dirty,\n count,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n labelIcon,\n } = this;\n\n const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';\n\n return (\n <host class=\"formfield-host\">\n {label?.length > 1 || extraLabel !== 'none' && (\n <div class=\"formfield-top-elements\">\n <div class=\"formfield-left-side\">\n {labelIcon && <ls-icon name={labelIcon}></ls-icon>}\n <label htmlFor={name} class=\"formfield-label\">\n {label}\n </label>\n {infoTooltipText && <ls-icon name={'information-circle'}></ls-icon>}\n </div>\n\n {extraLabel === 'optional' ? (\n <ls-label text=\"Optional\" colour=\"gray\" type=\"low\"></ls-label>\n ) : extraLabel === 'required' ? (\n <ls-label text=\"Required\" colour=\"gray\" type=\"low\"></ls-label>\n ) : (\n ''\n )}\n </div>\n )}\n {as === 'text' ? (\n <ls-text-input\n id={fieldId}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n onInput={(event: InputEvent) => this.handleChange(event)}\n ></ls-text-input>\n ) : as === 'select' ? (\n <ls-select-input\n id={name}\n name={name}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n >\n <slot></slot>\n </ls-select-input>\n ) : as === 'radio' ? (\n <ls-radio-input radioId={label} label={value?.toString()} icon={fieldIcon} name={name} disabled={disabled} />\n ) : as === 'textarea' ? (\n <ls-textarea-input\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'password' ? (\n <ls-text-input\n type=\"password\"\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'displayonly' ? (\n <ls-text-input\n type=\"displayonly\"\n id={name}\n name={name}\n value={value?.toString()}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : as === 'number' ? (\n <ls-number-input\n type=\"ls\"\n id={name}\n name={name}\n value={Number(value)}\n countMax={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={extraLabel === 'required'}\n disabled={disabled}\n valid={valid}\n dirty={dirty}\n buttonIcon={buttonIcon}\n buttonClick={buttonClick}\n fieldIcon={fieldIcon}\n />\n ) : (\n <p>placeholder</p>\n )}\n {errorText ||\n count ||\n countMax ||\n (descriptionText && (\n <div class=\"formfield-bottom-elements\">\n {errorText && !valid ? <p class=\"formfield-error-text\">{errorText}</p> : descriptionText ? <p class=\"formfield-description-text\">{descriptionText}</p> : ''}\n {count && (\n <div class=\"formfield-count-container\">\n <p class={countClass}>{value?.toString()?.length}</p>\n {countMax > 0 && (\n <div class={countClass}>\n <p>/</p>\n <p>{countMax}</p>\n </div>\n )}\n </div>\n )}\n </div>\n ))}\n </host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-DVz19y7K.js → p-DMi8aFQC.js} RENAMED
@@ -1,5 +1,5 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
2
- import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D4FyBAwx.js';
2
+ import { d as defineCustomElement$1 } from './p-CJbhxoKd.js';
3
3
 
4
4
  const lsFeatureColumnCss = ":host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}";
5
5
 
@@ -55,6 +55,6 @@ function defineCustomElement() {
55
55
  defineCustomElement();
56
56
 
57
57
  export { LsFeatureColoumn as L, defineCustomElement as d };
58
- //# sourceMappingURL=p-DVz19y7K.js.map
58
+ //# sourceMappingURL=p-DMi8aFQC.js.map
59
59
 
60
- //# sourceMappingURL=p-DVz19y7K.js.map
60
+ //# sourceMappingURL=p-DMi8aFQC.js.map
package/dist/components/{p-DVz19y7K.js.map → p-DMi8aFQC.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-DVz19y7K.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /**\n * Determines / sets which of the far left 'managers' is active.\n * {'document' | 'toolbox' | 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-DMi8aFQC.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /**\n * Determines / sets which of the far left 'managers' is active.\n * {'document' | 'toolbox' | 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}