legalesign-document-viewer 0.4.10 → 0.5.0

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 (160) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/ls-document-options_46.cjs.entry.js +84 -129
  3. package/dist/cjs/ls-document-viewer.cjs.js +1 -1
  4. package/dist/collection/components/ls-document-options/ls-document-options.js +0 -1
  5. package/dist/collection/components/ls-document-options/ls-document-options.js.map +1 -1
  6. package/dist/collection/components/ls-document-viewer/editorCalculator.js +4 -6
  7. package/dist/collection/components/ls-document-viewer/editorCalculator.js.map +1 -1
  8. package/dist/collection/components/ls-document-viewer/editorUtils.js +1 -2
  9. package/dist/collection/components/ls-document-viewer/editorUtils.js.map +1 -1
  10. package/dist/collection/components/ls-document-viewer/keyHandlers.js +0 -4
  11. package/dist/collection/components/ls-document-viewer/keyHandlers.js.map +1 -1
  12. package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +5 -40
  13. package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
  14. package/dist/collection/components/ls-document-viewer/mouseHandlers.js +8 -8
  15. package/dist/collection/components/ls-document-viewer/mouseHandlers.js.map +1 -1
  16. package/dist/collection/components/ls-editor-field/ls-editor-field.js +5 -6
  17. package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
  18. package/dist/collection/components/ls-field-alignment/ls-field-alignment.js +2 -7
  19. package/dist/collection/components/ls-field-alignment/ls-field-alignment.js.map +1 -1
  20. package/dist/collection/components/ls-field-content/ls-field-content.js +2 -3
  21. package/dist/collection/components/ls-field-content/ls-field-content.js.map +1 -1
  22. package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js +3 -5
  23. package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js.map +1 -1
  24. package/dist/collection/components/ls-field-distribute/ls-field-distribute.js +6 -33
  25. package/dist/collection/components/ls-field-distribute/ls-field-distribute.js.map +1 -1
  26. package/dist/collection/components/ls-field-footer/ls-field-footer.js +24 -13
  27. package/dist/collection/components/ls-field-footer/ls-field-footer.js.map +1 -1
  28. package/dist/collection/components/ls-field-format/ls-field-format.js +11 -34
  29. package/dist/collection/components/ls-field-format/ls-field-format.js.map +1 -1
  30. package/dist/collection/components/ls-field-placement/ls-field-placement.js +1 -25
  31. package/dist/collection/components/ls-field-placement/ls-field-placement.js.map +1 -1
  32. package/dist/collection/components/ls-field-properties-advanced/ls-field-properties-advanced.js +2 -26
  33. package/dist/collection/components/ls-field-properties-advanced/ls-field-properties-advanced.js.map +1 -1
  34. package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js +1 -1
  35. package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js.map +1 -1
  36. package/dist/collection/components/ls-field-size/ls-field-size.js +1 -24
  37. package/dist/collection/components/ls-field-size/ls-field-size.js.map +1 -1
  38. package/dist/collection/components/ls-participant-card/ls-participant-card.js +8 -33
  39. package/dist/collection/components/ls-participant-card/ls-participant-card.js.map +1 -1
  40. package/dist/collection/components/ls-title-input/ls-title-input.js +1 -24
  41. package/dist/collection/components/ls-title-input/ls-title-input.js.map +1 -1
  42. package/dist/collection/components/ls-toolbar/ls-toolbar.js +1 -2
  43. package/dist/collection/components/ls-toolbar/ls-toolbar.js.map +1 -1
  44. package/dist/components/ls-document-options.js +1 -1
  45. package/dist/components/ls-document-viewer.js +33 -46
  46. package/dist/components/ls-document-viewer.js.map +1 -1
  47. package/dist/components/ls-editor-field.js +1 -1
  48. package/dist/components/ls-field-alignment.js +1 -1
  49. package/dist/components/ls-field-content.js +1 -1
  50. package/dist/components/ls-field-dimensions.js +1 -1
  51. package/dist/components/ls-field-distribute.js +1 -1
  52. package/dist/components/ls-field-footer.js +1 -1
  53. package/dist/components/ls-field-format.js +1 -1
  54. package/dist/components/ls-field-placement.js +1 -1
  55. package/dist/components/ls-field-properties-advanced.js +1 -1
  56. package/dist/components/ls-field-properties-autosign.js +1 -1
  57. package/dist/components/ls-field-properties-date.js +1 -1
  58. package/dist/components/ls-field-properties-dropdown.js +6 -6
  59. package/dist/components/ls-field-properties-email.js +1 -1
  60. package/dist/components/ls-field-properties-file.js +1 -1
  61. package/dist/components/ls-field-properties-general.js +1 -1
  62. package/dist/components/ls-field-properties-image.js +1 -1
  63. package/dist/components/ls-field-properties-multiple.js +1 -1
  64. package/dist/components/ls-field-properties-number.js +1 -1
  65. package/dist/components/ls-field-properties-signature.js +1 -1
  66. package/dist/components/ls-field-properties-text.js +1 -1
  67. package/dist/components/ls-field-properties.js +1 -1
  68. package/dist/components/ls-field-size.js +1 -1
  69. package/dist/components/ls-participant-card.js +1 -1
  70. package/dist/components/ls-participant-manager.js +1 -1
  71. package/dist/components/ls-statusbar.js +1 -1
  72. package/dist/components/ls-title-input.js +1 -1
  73. package/dist/components/ls-toolbar.js +1 -1
  74. package/dist/components/{p-DR6nQwpS.js → p-BxPfWmRj.js} +17 -24
  75. package/dist/components/p-BxPfWmRj.js.map +1 -0
  76. package/dist/components/{p-DL5OFC6L.js → p-C6TaBByt.js} +8 -8
  77. package/dist/components/{p-DL5OFC6L.js.map → p-C6TaBByt.js.map} +1 -1
  78. package/dist/components/{p-DsHIGb44.js → p-C9CUft6J.js} +4 -8
  79. package/dist/components/p-C9CUft6J.js.map +1 -0
  80. package/dist/components/{p--CN66FDL.js → p-CDGosSW8.js} +8 -8
  81. package/dist/components/{p--CN66FDL.js.map → p-CDGosSW8.js.map} +1 -1
  82. package/dist/components/{p-BNetnt57.js → p-CDgBo5Zz.js} +8 -8
  83. package/dist/components/{p-BNetnt57.js.map → p-CDgBo5Zz.js.map} +1 -1
  84. package/dist/components/{p-C6vXxe-0.js → p-CGQK3l8F.js} +24 -13
  85. package/dist/components/p-CGQK3l8F.js.map +1 -0
  86. package/dist/components/{p-n8Mvlim4.js → p-CPZtW_1V.js} +2 -3
  87. package/dist/components/p-CPZtW_1V.js.map +1 -0
  88. package/dist/components/{p-BMH2H6ZU.js → p-C_uR3x8J.js} +8 -8
  89. package/dist/components/{p-BMH2H6ZU.js.map → p-C_uR3x8J.js.map} +1 -1
  90. package/dist/components/{p-C3WsOnJj.js → p-CgKvhxXq.js} +3 -3
  91. package/dist/components/{p-C3WsOnJj.js.map → p-CgKvhxXq.js.map} +1 -1
  92. package/dist/components/{p-BwLBJKzU.js → p-Co-Giqfy.js} +13 -16
  93. package/dist/components/p-Co-Giqfy.js.map +1 -0
  94. package/dist/components/{p-B016luU7.js → p-Czz58vGf.js} +8 -8
  95. package/dist/components/{p-B016luU7.js.map → p-Czz58vGf.js.map} +1 -1
  96. package/dist/components/{p-WBcBFI9v.js → p-DGiUKXDO.js} +21 -21
  97. package/dist/components/{p-WBcBFI9v.js.map → p-DGiUKXDO.js.map} +1 -1
  98. package/dist/components/{p-SBrheH1U.js → p-DMZN9Rei.js} +8 -8
  99. package/dist/components/{p-SBrheH1U.js.map → p-DMZN9Rei.js.map} +1 -1
  100. package/dist/components/{p-Dhhv3wHm.js → p-DYQekJvr.js} +5 -7
  101. package/dist/components/p-DYQekJvr.js.map +1 -0
  102. package/dist/components/{p-DY-DgM1S.js → p-D_mOmvQA.js} +3 -3
  103. package/dist/components/{p-DY-DgM1S.js.map → p-D_mOmvQA.js.map} +1 -1
  104. package/dist/components/{p-C5h5dv41.js → p-DoAxt8ZN.js} +3 -6
  105. package/dist/components/p-DoAxt8ZN.js.map +1 -0
  106. package/dist/components/{p-BkY_IdVa.js → p-DpHCeHja.js} +4 -5
  107. package/dist/components/p-DpHCeHja.js.map +1 -0
  108. package/dist/components/{p-CYmYmhQR.js → p-DsR1ud4V.js} +12 -16
  109. package/dist/components/p-DsR1ud4V.js.map +1 -0
  110. package/dist/components/{p-CNL8fkln.js → p-DskHTNiF.js} +10 -10
  111. package/dist/components/p-DskHTNiF.js.map +1 -0
  112. package/dist/components/{p-DJ2drrXa.js → p-HpepQ3-E.js} +8 -8
  113. package/dist/components/{p-DJ2drrXa.js.map → p-HpepQ3-E.js.map} +1 -1
  114. package/dist/components/{p-wqey-dda.js → p-JIZHOmMy.js} +3 -6
  115. package/dist/components/p-JIZHOmMy.js.map +1 -0
  116. package/dist/components/{p-5KCL3hvK.js → p-KMRQyALr.js} +3 -7
  117. package/dist/components/p-KMRQyALr.js.map +1 -0
  118. package/dist/components/{p-BNg8t35-.js → p-YcP4tU0u.js} +4 -9
  119. package/dist/components/p-YcP4tU0u.js.map +1 -0
  120. package/dist/components/{p-VTbVKsqR.js → p-aA8RuwY_.js} +5 -6
  121. package/dist/components/p-aA8RuwY_.js.map +1 -0
  122. package/dist/components/{p-DVjWdmVm.js → p-iIvOyhST.js} +5 -5
  123. package/dist/components/{p-DVjWdmVm.js.map → p-iIvOyhST.js.map} +1 -1
  124. package/dist/components/{p-SRaB2k2a.js → p-w39shV-b.js} +8 -8
  125. package/dist/components/{p-SRaB2k2a.js.map → p-w39shV-b.js.map} +1 -1
  126. package/dist/components/{p-GUP3f2W9.js → p-w7mOEBr4.js} +10 -15
  127. package/dist/components/p-w7mOEBr4.js.map +1 -0
  128. package/dist/esm/loader.js +1 -1
  129. package/dist/esm/ls-document-options_46.entry.js +84 -129
  130. package/dist/esm/ls-document-viewer.js +1 -1
  131. package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
  132. package/dist/ls-document-viewer/{p-44b51bdb.entry.js → p-20b9c119.entry.js} +5 -5
  133. package/dist/ls-document-viewer/p-20b9c119.entry.js.map +1 -0
  134. package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +0 -2
  135. package/dist/types/components/ls-field-distribute/ls-field-distribute.d.ts +0 -1
  136. package/dist/types/components/ls-field-footer/ls-field-footer.d.ts +4 -1
  137. package/dist/types/components/ls-field-format/ls-field-format.d.ts +0 -1
  138. package/dist/types/components/ls-field-placement/ls-field-placement.d.ts +0 -1
  139. package/dist/types/components/ls-field-properties-advanced/ls-field-properties-advanced.d.ts +0 -1
  140. package/dist/types/components/ls-field-size/ls-field-size.d.ts +0 -1
  141. package/dist/types/components/ls-participant-card/ls-participant-card.d.ts +0 -1
  142. package/dist/types/components/ls-title-input/ls-title-input.d.ts +0 -1
  143. package/dist/types/components.d.ts +2 -18
  144. package/package.json +1 -1
  145. package/dist/components/p-5KCL3hvK.js.map +0 -1
  146. package/dist/components/p-BNg8t35-.js.map +0 -1
  147. package/dist/components/p-BkY_IdVa.js.map +0 -1
  148. package/dist/components/p-BwLBJKzU.js.map +0 -1
  149. package/dist/components/p-C5h5dv41.js.map +0 -1
  150. package/dist/components/p-C6vXxe-0.js.map +0 -1
  151. package/dist/components/p-CNL8fkln.js.map +0 -1
  152. package/dist/components/p-CYmYmhQR.js.map +0 -1
  153. package/dist/components/p-DR6nQwpS.js.map +0 -1
  154. package/dist/components/p-Dhhv3wHm.js.map +0 -1
  155. package/dist/components/p-DsHIGb44.js.map +0 -1
  156. package/dist/components/p-GUP3f2W9.js.map +0 -1
  157. package/dist/components/p-VTbVKsqR.js.map +0 -1
  158. package/dist/components/p-n8Mvlim4.js.map +0 -1
  159. package/dist/components/p-wqey-dda.js.map +0 -1
  160. package/dist/ls-document-viewer/p-44b51bdb.entry.js.map +0 -1
package/dist/collection/components/ls-field-distribute/ls-field-distribute.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,GAAG,EAAE,MAAM,mCAAmC,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAOlE,MAAM,OAAO,iBAAiB;IAI5B,QAAQ,CAAiB;IAOzB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAC3B,SAAS,CAAc;IAElC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,oBAAoB;QAClB,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,yBAAyB,CAAqB,CAAC;QACtG,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7D,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAG9B,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YAC3C,OAAO,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC7E,CAAC,EAAE,QAAQ,CAAC,CAAC;QACb,wDAAwD;QACxD,MAAM,UAAU,GAAW,SAAS,GAAG,QAAQ,CAAC;QAEhD,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACzB,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC1D,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAC1C,OAAO,WAAW,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK;mBAChG,KAAK,KAAK,CAAC;mBACX,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;QAClC,CAAC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAoB,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAEvD,OAAO;gBACL,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE;oBACJ,GAAG,CAAC;oBACJ,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;iBACtD;aAClB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE3D,IAAI,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAE3B,MAAM,KAAK,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5C,MAAM,MAAM,GAAG,MAAM,CAAC;YACtB,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,OAAO,CAAC;YACrC,MAAM,MAAM,GAAG;gBACb,GAAG,CAAC;gBACJ,GAAG,EAAE,MAAM;aACI,CAAC;YAElB,OAAO;gBACL,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC;oBACf,CAAC,CAAE;wBACD,GAAG,CAAC;wBACJ,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;qBAC5B;oBAClB,CAAC,CAAC,MAAM;aACX,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,aAAa,CAAC,OAAe;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE3D,IAAI,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE5B,MAAM,KAAK,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5C,MAAM,OAAO,GAAG,MAAM,CAAC;YACvB,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC;YACpC,MAAM,MAAM,GAAG;gBACb,GAAG,CAAC;gBACJ,IAAI,EAAE,OAAO;aACE,CAAC;YAElB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;YAEjC,OAAO;gBACL,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC;oBACf,CAAC,CAAE;wBACD,GAAG,CAAC;wBACJ,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC;qBAC1B;oBAClB,CAAC,CAAC,MAAM;aACX,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAqB,CAAC;QACpG,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE3D,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACrD,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YAC5C,OAAO,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC7E,CAAC,EAAE,OAAO,CAAC,CAAC;QACZ,wDAAwD;QACxD,MAAM,WAAW,GAAW,UAAU,GAAG,OAAO,CAAC;QAEjD,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACzB,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAC1C,OAAO,WAAW,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK;mBAChG,KAAK,KAAK,CAAC;mBACX,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;QAClC,CAAC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAoB,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAEvD,OAAO;gBACL,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE;oBACJ,GAAG,CAAC;oBACJ,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;iBACrD;aAClB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B;gBACvC,4DAAK,KAAK,EAAE,kCAAkC;oBAC5C,0DAAG,KAAK,EAAE,mCAAmC,mBAAkB;oBAC/D,0DAAG,KAAK,EAAE,yCAAyC,oDAAmD,CAClG;gBACN,4DAAK,KAAK,EAAE,cAAc;oBACxB,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,kBAAkB,EAAE,CAAC;wBAC5B,CAAC,gBACU,wCAAwC,kBACtC,uCAAuC;wBAEpD,gEAAS,IAAI,EAAC,6BAA6B,GAAW,CAC/C;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,oBAAoB,EAAE,CAAC;wBAC9B,CAAC,gBACU,0CAA0C,kBACxC,yCAAyC;wBAEtD,gEAAS,IAAI,EAAC,+BAA+B,GAAW,CACjD,CACL,CACF;YACN,4DAAK,KAAK,EAAE,6BAA6B;gBACvC,4DAAK,KAAK,EAAE,kCAAkC;oBAC5C,0DAAG,KAAK,EAAE,mCAAmC,UAAS;oBACtD,0DAAG,KAAK,EAAE,yCAAyC,wDAAuD,CACtG;gBACN,4DAAK,KAAK,EAAE,WAAW;oBACrB,4DAAK,KAAK,EAAE,eAAe,kBAAe,0CAA0C;wBAClF,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,6BAA6B,GAAW;wBAC7E,8DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,kBAAkB,EACzB,EAAE,EAAC,uBAAuB,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE;gCACZ,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;4BACnE,CAAC,EACD,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,GACT,CACE;oBACN,4DAAK,KAAK,EAAE,eAAe,kBAAe,4CAA4C;wBACpF,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,+BAA+B,GAAW;wBAC/E,8DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,kBAAkB,EACzB,EAAE,EAAC,yBAAyB,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE;gCACZ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;4BACrE,CAAC,EACD,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,GACT,CACE,CACF,CACF;YACN,mEAAY,EAAE,EAAC,mBAAmB,GAAG;YACrC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { oob } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\nimport { outOfBounds } from '../ls-document-viewer/mouseHandlers';\n\n@Component({\n tag: 'ls-field-distribute',\n styleUrl: 'ls-field-distribute.css',\n shadow: true,\n})\nexport class LsFieldDistribute {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n distributeHorizontal() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n if (sorted.length < 3) return;\n\n\n var avgspace = 0;\n const leftmost = sorted[0].left + sorted[0].width / 2;\n const rightmost = sorted.reduce((acc, cur) => {\n return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;\n }, leftmost);\n // find total width between centre first and centre last\n const totalWidth: number = rightmost - leftmost;\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n avgspace = Math.floor(totalWidth / (sorted.length - 1));\n }\n\n const filtered = sorted.filter((c, index) => {\n return outOfBounds({ ...c, left: Math.floor(leftmost - (c.width / 2) + avgspace * index) }) === false\n && index !== 0\n && index !== sorted.length - 1\n });\n\n const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n return {\n action: 'update',\n data: {\n ...c,\n left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n gapVertical(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + spacing;\n const target = {\n ...c,\n top: newTop,\n } as LSApiElement;\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.height - c.height - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n gapHorizontal(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = buffer;\n buffer = buffer + c.width + spacing;\n const target = {\n ...c,\n left: newLeft,\n } as LSApiElement;\n\n console.log(target, oob(target));\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.width - c.width - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n distributeVertical() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n const topmost = sorted[0].top + sorted[0].height / 2;\n const bottommost = sorted.reduce((acc, cur) => {\n return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;\n }, topmost);\n // find total width between centre first and centre last\n const totalHeight: number = bottommost - topmost;\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n avgspace = Math.floor(totalHeight / (sorted.length - 1));\n }\n\n const filtered = sorted.filter((c, index) => {\n return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false\n && index !== 0\n && index !== sorted.length - 1\n });\n\n const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n return {\n action: 'update',\n data: {\n ...c,\n top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.distributeVertical();\n }}\n aria-label=\"Distribute selected fields vertically.\"\n data-tooltip=\"Distribute selected fields vertically\"\n >\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.distributeHorizontal();\n }}\n aria-label=\"Distribute selected fields horizontally.\"\n data-tooltip=\"Distribute selected fields horizontally\"\n >\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set vertical gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-vertical-space\"\n onChange={e => {\n this.gapVertical(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set horizontal gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-horizontal-space\"\n onChange={e => {\n this.gapHorizontal(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n </div>\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" />\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { oob } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\nimport { outOfBounds } from '../ls-document-viewer/mouseHandlers';\n\n@Component({\n tag: 'ls-field-distribute',\n styleUrl: 'ls-field-distribute.css',\n shadow: true,\n})\nexport class LsFieldDistribute {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n distributeHorizontal() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n if (sorted.length < 3) return;\n\n\n var avgspace = 0;\n const leftmost = sorted[0].left + sorted[0].width / 2;\n const rightmost = sorted.reduce((acc, cur) => {\n return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;\n }, leftmost);\n // find total width between centre first and centre last\n const totalWidth: number = rightmost - leftmost;\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n avgspace = Math.floor(totalWidth / (sorted.length - 1));\n }\n\n const filtered = sorted.filter((c, index) => {\n return outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false\n && index !== 0\n && index !== sorted.length - 1\n });\n\n const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n return {\n action: 'update',\n data: {\n ...c,\n left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n gapVertical(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + spacing;\n const target = {\n ...c,\n top: newTop,\n } as LSApiElement;\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.height - c.height - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n gapHorizontal(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = buffer;\n buffer = buffer + c.width + spacing;\n const target = {\n ...c,\n left: newLeft,\n } as LSApiElement;\n\n console.log(target, oob(target));\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.width - c.width - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n distributeVertical() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n const topmost = sorted[0].top + sorted[0].height / 2;\n const bottommost = sorted.reduce((acc, cur) => {\n return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;\n }, topmost);\n // find total width between centre first and centre last\n const totalHeight: number = bottommost - topmost;\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n avgspace = Math.floor(totalHeight / (sorted.length - 1));\n }\n\n const filtered = sorted.filter((c, index) => {\n return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false\n && index !== 0\n && index !== sorted.length - 1\n });\n\n const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n return {\n action: 'update',\n data: {\n ...c,\n top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.distributeVertical();\n }}\n aria-label=\"Distribute selected fields vertically.\"\n data-tooltip=\"Distribute selected fields vertically\"\n >\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.distributeHorizontal();\n }}\n aria-label=\"Distribute selected fields horizontally.\"\n data-tooltip=\"Distribute selected fields horizontally\"\n >\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set vertical gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-vertical-space\"\n onChange={e => {\n this.gapVertical(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set horizontal gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-horizontal-space\"\n onChange={e => {\n this.gapHorizontal(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n </div>\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" />\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/ls-field-footer/ls-field-footer.js CHANGED
@@ -8,22 +8,33 @@ export class LsFieldFooter {
8
8
  mutate;
9
9
  update;
10
10
  selectFields;
11
+ isSingle(dt) {
12
+ return dt.length === undefined;
13
+ }
14
+ isMultiple(dt) {
15
+ return typeof dt.length === 'number';
16
+ }
17
+ getItems() {
18
+ if (this.isSingle(this.dataItem)) {
19
+ return [this.dataItem];
20
+ }
21
+ return this.dataItem;
22
+ }
11
23
  deleteField = () => {
12
- this.update.emit([{ action: 'delete', data: this.dataItem }]);
13
- this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
24
+ this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di }; }));
14
25
  };
15
26
  duplicateField = () => {
16
- const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };
17
- const newTop = this.dataItem.top + this.dataItem.height;
18
- if (newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {
19
- newItem.top = newTop;
20
- }
21
- this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);
22
- this.mutate.emit([{ action: 'create', data: newItem }]);
23
- // this.selectFields.emit([newItem]);
27
+ this.getItems().forEach(current => {
28
+ const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };
29
+ const newTop = current.top + current.height;
30
+ if (newTop + current.height < current.pageDimensions.height) {
31
+ newItem.top = newTop;
32
+ }
33
+ this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);
34
+ });
24
35
  };
25
36
  render() {
26
- return (h(Host, { key: 'ad5bcbff8ba0e0e8c485029195401793a3d44947' }, h("div", { key: '5122544f2c7bcd02af2acbff8da7dd466e74d813', class: 'button-footer' }, h("button", { key: '7f82dfccee2e4d673305f5863534b80a1ad4e358', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: 'b30334400042a8fc7881d2a05ced2f397cd61a4e', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), h("button", { key: '43be4c1016e2f7e50ceb40546e92933099be5400', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: 'dbbc47115c04eb8f29dcb10a60178d55c256242c', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), h("slot", { key: 'da837305b7587c89e70abbb31563b1a5c161086e' })));
37
+ return (h(Host, { key: 'b304511650fb8ab792ee4112ce4eb6ecabfad7b1' }, h("div", { key: 'ffb272b2be2e33164600f4751d91df4aabe6a37d', class: 'button-footer' }, h("button", { key: '4186e5559318e08134f5d3d3eef95be7dd277583', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '421a920a74da3f785236ca4051df988bada70e2d', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), h("button", { key: 'd7f34ff31f29b11d3d1801bdf4d88fe23e8d5c9d', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '91abcc24bf4bea621252a5982442d38a7a36644d', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), h("slot", { key: 'df560039d19466975b12468042f2bfd0a3b81b6f' })));
27
38
  }
28
39
  static get is() { return "ls-field-footer"; }
29
40
  static get encapsulation() { return "shadow"; }
@@ -43,8 +54,8 @@ export class LsFieldFooter {
43
54
  "type": "unknown",
44
55
  "mutable": true,
45
56
  "complexType": {
46
- "original": "LSApiElement",
47
- "resolved": "{ id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"image\" | \"dropdown\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
57
+ "original": "LSApiElement | LSApiElement[]",
58
+ "resolved": "LSApiElement[] | { id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"image\" | \"dropdown\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
48
59
  "references": {
49
60
  "LSApiElement": {
50
61
  "location": "import",
package/dist/collection/components/ls-field-footer/ls-field-footer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAe;IAMvB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QACxD,IAAG,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACvE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACxD,qCAAqC;IACvC,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAG;gCAE1C;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,GAAG;6BAEtD,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-footer',\n styleUrl: 'ls-field-footer.css',\n shadow: true,\n})\nexport class LsFieldFooter {\n /**\n * The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement;\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n selectFields: EventEmitter<LSApiElement[]>;\n\n deleteField = () => {\n this.update.emit([{ action: 'delete', data: this.dataItem }]);\n this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n }\n\n duplicateField = () => {\n const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n const newTop = this.dataItem.top + this.dataItem.height;\n if(newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {\n newItem.top = newTop;\n }\n this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n this.mutate.emit([{ action: 'create', data: newItem }]);\n // this.selectFields.emit([newItem]);\n }\n\n render() {\n return (\n <Host>\n <div class={'button-footer'}>\n <button class={'secondary'} onClick={() => this.duplicateField()}>\n <ls-icon name=\"field-duplicate\" size=\"1.25rem\" />\n Duplicate\n </button>\n <button class={'destructive'} onClick={() => this.deleteField()}>\n <ls-icon name=\"trash\" size=\"1.25rem\" color='var(--red-60)' />\n Delete\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAgC;IAMxC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,QAAQ,CAAC,EAAiC;QACxC,OAAQ,EAAqB,CAAC,MAAM,KAAK,SAAS,CAAC;IACrD,CAAC;IAED,UAAU,CAAC,EAAiC;QAC1C,OAAO,OAAQ,EAAqB,CAAC,MAAM,KAAK,QAAQ,CAAC;IAC3D,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC;IACzF,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAChC,MAAM,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;YACtE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC;YAC5C,IAAI,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;gBAC5D,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;YACvB,CAAC;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAG;gCAE1C;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,GAAG;6BAEtD,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-footer',\n styleUrl: 'ls-field-footer.css',\n shadow: true,\n})\nexport class LsFieldFooter {\n /**\n * The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement | LSApiElement[];\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n selectFields: EventEmitter<LSApiElement[]>;\n\n isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getItems(): LSApiElement[] {\n if (this.isSingle(this.dataItem)) {\n return [this.dataItem];\n }\n return this.dataItem;\n }\n\n deleteField = () => {\n this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di } }));\n }\n\n duplicateField = () => {\n this.getItems().forEach(current => {\n const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };\n const newTop = current.top + current.height;\n if (newTop + current.height < current.pageDimensions.height) {\n newItem.top = newTop;\n }\n this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n });\n }\n\n render() {\n return (\n <Host>\n <div class={'button-footer'}>\n <button class={'secondary'} onClick={() => this.duplicateField()}>\n <ls-icon name=\"field-duplicate\" size=\"1.25rem\" />\n Duplicate\n </button>\n <button class={'destructive'} onClick={() => this.deleteField()}>\n <ls-icon name=\"trash\" size=\"1.25rem\" color='var(--red-60)' />\n Delete\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/ls-field-format/ls-field-format.js CHANGED
@@ -3,7 +3,6 @@ import { attachAllTooltips } from "../../utils/tooltip";
3
3
  export class LsFieldFormat {
4
4
  dataItem;
5
5
  mutate;
6
- update;
7
6
  component;
8
7
  handleKeyDown = (event) => {
9
8
  event.stopPropagation();
@@ -32,7 +31,6 @@ export class LsFieldFormat {
32
31
  });
33
32
  this.dataItem = diffs.map(d => d.data);
34
33
  this.mutate.emit(diffs);
35
- this.update.emit(diffs);
36
34
  }
37
35
  componentDidLoad() {
38
36
  attachAllTooltips(this.component.shadowRoot);
@@ -47,31 +45,31 @@ export class LsFieldFormat {
47
45
  return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
48
46
  };
49
47
  render() {
50
- return (h(Host, { key: 'f09669b903371ee341bcad9d0c690c73564796fc', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: 'c88a63694f4c7badef501d1d6e6065e1e2f8b0c1', class: 'ls-field-format-bar' }, h("div", { key: '14b3550fa16813865c4640bf789ec59de23f9841', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: 'cb1c66047558d46587d5ed10858e5de853930d2f', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '467779af8ae5de655a3f94eaa1d93401c8c21b6e', id: "ls-toolbar-font-select", onChange: input => {
48
+ return (h(Host, { key: '2febff4877dec0adfb5d71c5f98064739e1cb048', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '40ecbca3f11893001206f172fdcc095dcbb8cc80', class: 'ls-field-format-bar' }, h("div", { key: '50365c3d96ece24129314ed7362a12732c90adf8', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '7abb18b79ce54cd10d03ae2b6bf7755210c87e75', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '10dc6add8b33c982dec5807a711bb9c6bab69d65', id: "ls-toolbar-font-select", onChange: input => {
51
49
  this.alter({ fontName: input.target.value });
52
- }, class: 'has-leading-icon' }, h("option", { key: 'ab2adc71db5cb0304d3ef0e88cd39f9c3b0695ff', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: 'b87685950342e18f67136c15b626ecddf594f9f1', value: "arial" }, "Arial"), h("option", { key: '23c3c6f267862f66649517e165fbd3b4168fb12b', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'd5df1c563bff199141bb1e3abe57aeaac20e680a', value: "courier" }, "Courier"), h("option", { key: 'd9e693b2a601ae8373e7bed6f6f63b5176f0f53f', value: "helvetica" }, "Helvetica"), h("option", { key: '53ff1c000a0a20c574ae4a0efe783a297a5a3e9e', value: "verdana" }, "Verdana")), h("ls-icon", { key: '56b5f263672aabc30b7a4fecdaf0b29dd645e239', id: "selectorIcon", name: "selector" })), h("div", { key: '1fe61ed2c6e16e2c9a58c1a349a7991dfed9bc5b', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '80a2dfae58c432af9860811270ef14887ef1dba9', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '5b662354c0bfaa6cdc9d6c085f2732b238a9a675', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
50
+ }, class: 'has-leading-icon' }, h("option", { key: '095097496e0a5570943ad483b628e35aae980ae7', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: 'bdec564e84e8856ba2a76a954c8619e265ace754', value: "arial" }, "Arial"), h("option", { key: 'fbd43ae7332189f128c56f92eb2533733680cd80', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'd0335e99d771789f722aaadf4230ccc31ea8a5df', value: "courier" }, "Courier"), h("option", { key: 'd9cc11757352ab6be9878b88b1c549c791c82779', value: "helvetica" }, "Helvetica"), h("option", { key: '3375f3d30fddd0d7de6b5b7f2ab9febd23166680', value: "verdana" }, "Verdana")), h("ls-icon", { key: '5188818c50510b4cc8da9bd7c98cde7f5b505642', id: "selectorIcon", name: "selector" })), h("div", { key: '4db7c26767369994c1d95100fc5f21751efd84b0', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: 'e8c0eee85932d18bc845769e1e8ef6d5747cc347', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'a3d24673e0a2dec7b6b1d54002c4cfd7015323d0', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
53
51
  if (input.target.value === '')
54
52
  return;
55
53
  this.alter({ fontSize: input.target.value });
56
- }, class: 'has-leading-icon' })), h("div", { key: 'bdc70a6f70ac24ede3e375da95a31b09fc6e0cab', class: 'button-group' }, h("button", { key: '93bd2e0f321a7630e4a5203c607b9ae97896820a', onClick: () => {
54
+ }, class: 'has-leading-icon' })), h("div", { key: '118011caf609420d103dca5aedec499d0303eeda', class: 'button-group' }, h("button", { key: '5eed2838a98ede95838bf3133f8642b6ff60aecb', onClick: () => {
57
55
  this.alter({ align: 'left' });
58
- }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: '75ceda811a343eb024c8eacfa863d7d1ec0fa538', name: "menu-alt-2" })), h("button", { key: '1fbfcfdfe4b60992ad507f87c281bde9e1cfb6ac', onClick: () => {
56
+ }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: 'a06ba7d34c0ae7f44b02434b5deb1258d55f5a83', name: "menu-alt-2" })), h("button", { key: 'b9e6efe9f6320301386f64b8b1256eea01a142ab', onClick: () => {
59
57
  this.alter({ align: 'center' });
60
- }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '225df89a538e7e67c4bc95a309afd5167b67b6ce', name: "menu-alt-5" })), h("button", { key: 'b8cbc695c18f0a556ab6a83e00b2cf0da78ce8f5', onClick: () => {
58
+ }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: 'bd8a286ea76add2e60093a245869d40785b6e2d4', name: "menu-alt-5" })), h("button", { key: '81cb6def72ee8d51e455291f93d349dc5eed4315', onClick: () => {
61
59
  this.alter({ align: 'right' });
62
- }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'd3d569ce70e69c8425449549b6563eb1d966de18', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '93cea0ccee515f28a1464bb86847998866ff28c9', class: 'ls-field-format-bar' }, h("div", { key: '8bf4b19264ec43d4880c0f1afd49bc0e95653ccb', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '00fc36a118fed88906b6dc6f10d4c5b572c9415a', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '631f24095b4735af86670d4464dc0dfe82722160', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '1ec3611079e764e9e052fafa18ed73bd2879a3b2', id: "ls-toolbar-font-select", onChange: input => {
60
+ }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'f11af16c93bad521bba0e1b4c0f4d5343e42d853', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '642496b309e0ea729063daa7f90d665a4b79e622', class: 'ls-field-format-bar' }, h("div", { key: '058d36a9258d3a839aecfd6e6a263fc3fa86d637', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '757aecdbe113df3391046735295e94eb762bfa7a', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '7dbc085ec4583952acc129d7bf90d0454a9593db', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '7bd9b7527286ff946aeef9ef6822f63efbfb51d9', id: "ls-toolbar-font-select", onChange: input => {
63
61
  this.alter({ fontName: input.target.value });
64
- }, class: 'has-leading-icon' }, h("option", { key: 'b4e20742209d89cf2f81724e56cf4e271b242efe', value: "arial" }, "Arial"), h("option", { key: '90e07a1b1642602cb82a17d55c47fa151dd042cc', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'a1be70434a95b0032f7e0bd742a5493f4191e552', value: "courier" }, "Courier"), h("option", { key: 'cf58305e89c6cd764563564b4b8c4c97d3148837', value: "helvetica" }, "Helvetica"), h("option", { key: 'aee06cd107c49e5efccdc188439e51b341aef443', value: "verdana" }, "Verdana"))), h("div", { key: 'd96af2693b5160f090877ae272235e6e4c199be0', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '054ac7cfdca186932b67186e1af9b4fc207ac8af', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '25e2bc4275d0f94a09b1dcccb62521c2aa2c33c2', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
62
+ }, class: 'has-leading-icon' }, h("option", { key: '8360b7525a706d83fbb71c6360d720ecc7665c9f', value: "arial" }, "Arial"), h("option", { key: 'bb4b4aba366ed7b28cd30c8d09f6955443f21547', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '1a25159c21514bbf65bccb351d366a8d8ddc4d6c', value: "courier" }, "Courier"), h("option", { key: 'f63e8cb76ea72af5ad5d2e947cbc34ef13cbf818', value: "helvetica" }, "Helvetica"), h("option", { key: 'f5c81a38eacce8c0e059a7b53d7c8b8b7f24524d', value: "verdana" }, "Verdana"))), h("div", { key: '9dd75e7f634664d54f227f8a14c02776ae77baa6', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '68b63c5e021facce3e62cd1e8dc6b61f28fb5be2', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '444572a1f8620c21e03570c5efbbde5938fb0882', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
65
63
  if (input.target.value === '')
66
64
  return;
67
65
  this.alter({ fontSize: input.target.value });
68
- }, class: 'has-leading-icon' })), h("div", { key: 'e7b8af56e32c8cc09e5090391c164edab53de5a6', class: 'button-group' }, h("button", { key: 'abf70e78272b06353a074b093f0a316bb4bb4188', onClick: () => {
66
+ }, class: 'has-leading-icon' })), h("div", { key: '1e44265fe1d9584b064dd80cd1c99efd631ee05b', class: 'button-group' }, h("button", { key: '9eb6dcba91bc226f8e8b0096fb8e3195058710ff', onClick: () => {
69
67
  this.alter({ align: 'left' });
70
- }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: 'f7dd25decd2cd245141f8e00cc79096c283323ac', name: "menu-alt-2" })), h("button", { key: '5c68ddd64a36d8a8b486db63fa4831522a021c8d', onClick: () => {
68
+ }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: '20414ba17f91b462979b78017d8af7180a33c34b', name: "menu-alt-2" })), h("button", { key: '6321ba075e9059a2c1ef3a4b052783686b265f03', onClick: () => {
71
69
  this.alter({ align: 'center' });
72
- }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '023ad09061b00186dca7da21df38a5a478cdeed1', name: "menu-alt-5" })), h("button", { key: 'db06134b4512dbdb1d8de66975e6aca1496a24c4', onClick: () => {
70
+ }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '55cfc3f4653c6ca86d5fd7dbfe57c1076363552b', name: "menu-alt-5" })), h("button", { key: '35f0b7b03c2293f48f84bb011833be7514de46f7', onClick: () => {
73
71
  this.alter({ align: 'right' });
74
- }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'ddc4dfb005babf7dfe1d7cf9cc95d8ccd80c9031', name: "menu-alt-3" }))))), h("ls-tooltip", { key: 'd1f71302cf1ad18577e416d6cbca86a1c442c4c8', id: "ls-tooltip-master" })));
72
+ }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: '1d389afb29a9f96cb0ffe16bf129b3e5e7e153e9', name: "menu-alt-3" }))))), h("ls-tooltip", { key: '1453c1f8b125c9caf780bdcfb378878fd2cbbe27', id: "ls-tooltip-master" })));
75
73
  }
76
74
  static get is() { return "ls-field-format"; }
77
75
  static get encapsulation() { return "shadow"; }
@@ -134,27 +132,6 @@ export class LsFieldFormat {
134
132
  }
135
133
  }
136
134
  }
137
- }, {
138
- "method": "update",
139
- "name": "update",
140
- "bubbles": true,
141
- "cancelable": true,
142
- "composed": true,
143
- "docs": {
144
- "tags": [],
145
- "text": ""
146
- },
147
- "complexType": {
148
- "original": "LSMutateEvent[]",
149
- "resolved": "LSMutateEvent[]",
150
- "references": {
151
- "LSMutateEvent": {
152
- "location": "import",
153
- "path": "../../components",
154
- "id": "src/components.d.ts::LSMutateEvent"
155
- }
156
- }
157
- }
158
135
  }];
159
136
  }
160
137
  static get elementRef() { return "component"; }
package/dist/collection/components/ls-field-format/ls-field-format.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n @Element() component: HTMLElement;\n\n private handleKeyDown = (event: KeyboardEvent) => {\n event.stopPropagation();\n };\n\n private handleKeyUp = (event: KeyboardEvent) => {\n event.stopPropagation();\n };\n\n // Send selection changes to bars and panels if in use.\n @Watch('dataItem')\n selectFieldsHandler() {\n if (this.dataItem.length > 0) {\n var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n if (selFont) selFont.value = this.allElementsSame()?.fontName;\n var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n }\n attachAllTooltips(this.component.shadowRoot);\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n allElementsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return;\n const firstFontName = this.dataItem[0].fontName;\n const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n const firstFontSize = this.dataItem[0].fontSize;\n const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n };\n\n render() {\n return (\n <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id=\"ls-toolbar-font-select\"\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n Mixed\n </option>\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n id=\"ls-toolbar-font-size\"\n type='number'\n min=\"4\"\n value={this.allElementsSame()?.fontSize}\n onChange={input => {\n if ((input.target as HTMLInputElement).value === '') return;\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n data-tooltip=\"Align Text Left\"\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n data-tooltip=\"Align Text Center\"\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n data-tooltip=\"Align Text Right\"\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id=\"ls-toolbar-font-select\"\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n id=\"ls-toolbar-font-size\"\n type=\"number\"\n min=\"4\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n if ((input.target as HTMLInputElement).value === '') return;\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n data-tooltip=\"Align Text Left\"\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n data-tooltip=\"Align Text Center\"\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n data-tooltip=\"Align Text Right\"\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/* <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Element() component: HTMLElement;\n\n private handleKeyDown = (event: KeyboardEvent) => {\n event.stopPropagation();\n };\n\n private handleKeyUp = (event: KeyboardEvent) => {\n event.stopPropagation();\n };\n\n // Send selection changes to bars and panels if in use.\n @Watch('dataItem')\n selectFieldsHandler() {\n if (this.dataItem.length > 0) {\n var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n if (selFont) selFont.value = this.allElementsSame()?.fontName;\n var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n }\n attachAllTooltips(this.component.shadowRoot);\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n allElementsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return;\n const firstFontName = this.dataItem[0].fontName;\n const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n const firstFontSize = this.dataItem[0].fontSize;\n const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n };\n\n render() {\n return (\n <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id=\"ls-toolbar-font-select\"\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n Mixed\n </option>\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n id=\"ls-toolbar-font-size\"\n type='number'\n min=\"4\"\n value={this.allElementsSame()?.fontSize}\n onChange={input => {\n if ((input.target as HTMLInputElement).value === '') return;\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n data-tooltip=\"Align Text Left\"\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n data-tooltip=\"Align Text Center\"\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n data-tooltip=\"Align Text Right\"\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id=\"ls-toolbar-font-select\"\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n id=\"ls-toolbar-font-size\"\n type=\"number\"\n min=\"4\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n if ((input.target as HTMLInputElement).value === '') return;\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n data-tooltip=\"Align Text Left\"\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n data-tooltip=\"Align Text Center\"\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n data-tooltip=\"Align Text Right\"\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/* <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/ls-field-placement/ls-field-placement.js CHANGED
@@ -4,7 +4,6 @@ export class LsFieldPlacement {
4
4
  component;
5
5
  dataItem;
6
6
  mutate;
7
- update;
8
7
  isSingle(dt) {
9
8
  return dt.length === undefined;
10
9
  }
@@ -29,13 +28,11 @@ export class LsFieldPlacement {
29
28
  });
30
29
  this.dataItem = diffs.map(d => d.data);
31
30
  this.mutate.emit(diffs);
32
- this.update.emit(diffs);
33
31
  }
34
32
  else {
35
33
  const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
36
34
  this.dataItem = singleDiff.data;
37
35
  this.mutate.emit([singleDiff]);
38
- this.update.emit([singleDiff]);
39
36
  }
40
37
  }
41
38
  center() {
@@ -54,7 +51,7 @@ export class LsFieldPlacement {
54
51
  attachAllTooltips(this.component.shadowRoot);
55
52
  }
56
53
  render() {
57
- return (h(Host, { key: '2891a22cc782d26e8019f621139dbb9cfa7912ae' }, this.isMultiple(this.dataItem) && (h("div", { key: 'fca4cfba664c7dcc850247145a19155359778fd6', class: 'ls-field-properties-section' }, h("div", { key: '6840302fca04a9512675d308a0faf89f588e4c92', class: 'ls-field-properties-section-text' }, h("p", { key: 'f148990ba318730ecd8f63dc2a1e07dbfe2e0758', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'b6e3392804efacfa479b8352fe9220aa202386ac', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c23a0dc256c248870b945337ff3699ee34faca3', class: 'input-row' }, h("div", { key: 'eb3c8491792b11452959601a11d0bb45576112ce', class: 'input-wrapper' }, h("ls-icon", { key: 'e0ef76fb7b4209ea9fca1f69ca063d9db54cab3e', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '366b808ac6308e7a4c753473db2a906bfb81fe5c', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'cc27cf6674efd760f0bf72ba0879750bd3ec58d5', class: 'input-wrapper' }, h("ls-icon", { key: '215d388859634b7ba8bae7772bc2f123bf5072e4', id: "selectLeadingIcon", name: "y" }), h("input", { key: '2679e4e35dcb2529dceab7628e51a06ebf2cb084', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '36051ca4885a6f000e62b98e93a8cee9275cec56', class: 'field-set' }, h("div", { key: '71f569f20e1cc8a1afdd07979d277cb046832d02', class: 'ls-field-properties-section' }, h("div", { key: 'c3221f6b321a2fe37bb5950bfed9c17d89b4ec06', class: 'ls-field-properties-section-text' }, h("p", { key: 'cac50315a0bf1e69fcda4836b294aded0b9c5b38', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '57d46a199248986056fa2283a3f983f788ca015f', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '600507c665204c312ec88d7dae69f1fd943492e0', class: 'multi-button-group-row' }, h("div", { key: 'bddd2f75ef7695d6f8e8eaebdd8cee1bf3e6f838', class: 'button-group' }, h("button", { key: '00e1849e66a0852577a94889839efe43c1b1c81a', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '9f54b7db1137cef47089564d53e36b3e95a130ee', name: "field-alignment-left" })), h("button", { key: 'c32102532ba8914bfe3ef7345d9a542f5fb3a61b', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b4c4383eadcef61117f3b048bd2b3178b3c0a038', name: "field-alignment-centre" })), h("button", { key: 'bb859c7f759609101af575a282c5f64dabe69c09', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '688b723605ec157fae2b659bd4d88b08fd897353', name: "field-alignment-right" }))), h("div", { key: 'ed944060fff8351aaa7fd42649cd6447a3961004', class: 'button-group' }, h("button", { key: '808bc6db4bd34934b4aa2f6b7fe47bc561041d7c', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '7215638df9c08fac87e730b9db6963bdaabb6679', name: "field-alignment-top" })), h("button", { key: '740fb0baef8a931ff8f9e3998a048e57e1f73868', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: '75151df5e47d9a6f2bdccfcc9de925fd19e7274d', name: "field-alignment-middle" })), h("button", { key: 'd92b4595a17ce95ed97d116a8ec1f1ac848cf45e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4b46bcab1783eae38c8135cb435123ebf635678b', name: "field-alignment-bottom" }))))), h("div", { key: '3ab3f3ba7a84f9e10590b3e74441f11115fcfcca', class: 'ls-field-properties-section' }, h("div", { key: '2d2bc1642911a36943f543aaea4e1113f6d90468', class: 'ls-field-properties-section-text' }, h("p", { key: '2716c6bd177cee3a74b57f27fceb802f99d00153', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '12b0116cf566e8fbd8c716ce30ff50547f075eeb', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c9d57d5988ac74a052d1e8b48891b9e49689f18', class: 'input-row' }, h("div", { key: '80f2dc6d84b2460f9119a4ad6c38cd23754b3f95', class: 'input-wrapper' }, h("ls-icon", { key: 'b5ce0258e81146a5e69ee892db47026af0e4b857', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'e1364c47bb93b6486e6a43e1c8375646cc90b19e', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'd1785c7797954a99563205073b080fecd91ae9cd', class: 'input-wrapper' }, h("ls-icon", { key: '1c4a39e9dbf1b538c1c5330799d73749421efe40', id: "selectLeadingIcon", name: "y" }), h("input", { key: '1577cc2f618217940a68522e511be25906f93af1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: 'e07c33f5a5a0076f9e9d4762280deda6acb70c13', class: 'ls-field-properties-section' }, h("div", { key: '2164bb922476bb458aadb653ddf56811afd6bada', class: 'ls-field-properties-section-text' }, h("p", { key: 'deb4e93fe9730ad60df1ead15d6fd1125e5f1c7b', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '85be0bf98871e745aeab85a7b3d5e7c7679bbbc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '5ea831b28aac09f5379e9fb227f6331ccb496682', class: 'button-group' }, h("button", { key: '8ed8a6be64facd93648d027fde2916a67f42c29c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '136027ff733b7a222ecbe244bd0fb36ff3652427', name: "field-distribute-vertically" })), h("button", { key: '3408c19d67284f7ea72d73281315be8d8d233f5e', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '0360b37978f388df95806681c652f535e0eeafdb', name: "field-distribute-horizontally" })))), h("div", { key: '44bcfa853a0eaa54b06923d31706d2fa9734e866', class: 'ls-field-properties-section' }, h("div", { key: '7d5949bcc965f4ed677fb6296f541587ad2d78f0', class: 'ls-field-properties-section-text' }, h("p", { key: '4c19bf6ad558044ccd57f959b95cfaf9137d80fe', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '293c1c62bbf46e56b2ab4cbe95926c8baec55a9c', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: 'c27747a77cce6f8e59f297c68e58c0ad3844a4a7', class: 'input-row' }, h("div", { key: '26961c543f14fe3cc3fab27264c1900e85540e95', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '960ecb65e5729f20baa8e6c3ca091ee8e64d880b', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '43057c9c211ab5e6b9d6c0df9867cc6a64b2729b', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '5ffd08a406bac946193b108a8ff7cf215b0d1d1a', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '84979d224cbeead196f6e06cd1e1ec0de3b92fb4', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '1f1b03545533e57fad828649407e14ede6f41fbe', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'f04cdce03dae2e63bec8d9588eff9f2e15ad16ff', id: "ls-tooltip-master" })));
54
+ return (h(Host, { key: 'c634a96d87d02843dbe72f677aa6e7b14694f581' }, this.isMultiple(this.dataItem) && (h("div", { key: '044ff815e3f26547f78bb2482e7e47b796066b3e', class: 'ls-field-properties-section' }, h("div", { key: 'cf68b63b5038dc0dcd7b415b14753772768cb20e', class: 'ls-field-properties-section-text' }, h("p", { key: '309b54d667bcfcd0d82fd0601836d9020bc1c549', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '933ef9c922d40f5ec67369d2935c7470fc7a1d98', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'fad7b3df23e164bc0ac188e795a4cd5c34b21035', class: 'input-row' }, h("div", { key: '42bd70ecfbeee0532ab121ed3313450c65b2ec8b', class: 'input-wrapper' }, h("ls-icon", { key: '4bf6f52036de2c329cd3d1ad286fa01a4ec8f990', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'd81850eb0e5b7a7f95c36625a77a1410cd880ce7', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '9ac1ceae38f27ccd59da01eda945fceedd267c0d', class: 'input-wrapper' }, h("ls-icon", { key: 'd967fac0657315ad403ef0068beab8d69df89cd7', id: "selectLeadingIcon", name: "y" }), h("input", { key: '58250555187ab6fab6e646c5b491e02126eb1d94', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '5eb0b5f2e221377d12cb9c4dae3e62dfa375f56a', class: 'field-set' }, h("div", { key: '074e855bae1efabd0608f679b17f744c29d2c13c', class: 'ls-field-properties-section' }, h("div", { key: 'bbb011ac0c0e891254a356fcb27768a5f12ac551', class: 'ls-field-properties-section-text' }, h("p", { key: '6bf7a08225bf1ea325781fd9e5ad353d268a93d3', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '28e764426c670d4d77ade31d225acf06e948fb96', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '5279c5a19011d2e3e10027d5ed252fe14b3c78a7', class: 'multi-button-group-row' }, h("div", { key: '8e89191e1f792dd1ee2aaee7b36730232d573c4e', class: 'button-group' }, h("button", { key: '3b3f60acb8a82eb8a551d52fae1e7c9162fefc2e', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '4e228bb4c09c9b00bab056bb496c12572f6b151a', name: "field-alignment-left" })), h("button", { key: '7a05f93a649be5f222c498edbbb93e32b725537c', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b7a1d02377861f25d78f2d69586a5cf5b021ac5e', name: "field-alignment-centre" })), h("button", { key: 'ad8bc98aa32bea2be3da0d8374a5c8fd84448378', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '7ea2cb0d65a64050cac2e06746a3044567f8ef30', name: "field-alignment-right" }))), h("div", { key: '276a46d5023fb0581c68b995f1ba990049b1707f', class: 'button-group' }, h("button", { key: '639559ce5ed812963a3c44e10d3afcc3f0b8ddd2', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '699da10bf15c17cb15c4557aad53fbb8fed66852', name: "field-alignment-top" })), h("button", { key: '1b39193438fa81f8a49a8f312762060614de60df', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: 'ce845282439d102477a1a05910cd6bd15775942a', name: "field-alignment-middle" })), h("button", { key: 'b162767b02693c5961dfc84fafdcfb85912ea09e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4ace10a21e3264b4236ff3618d4db5129bc6329a', name: "field-alignment-bottom" }))))), h("div", { key: 'e5f446913a0790e9e048c1343507b64c17572790', class: 'ls-field-properties-section' }, h("div", { key: '75d1af4c23dd81ee0c4db9cd92752c8d27cde953', class: 'ls-field-properties-section-text' }, h("p", { key: 'edb2296be70eb3daebb56266e421592957b6c37b', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '6315f4791e5a5ad707dba570417308e65b4e9a9e', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '2c9dfe5c74dcad282fd216d3e300571722204a2a', class: 'input-row' }, h("div", { key: '6562ff2e2d84f36f709b69fd2f5b09eba8f36bc8', class: 'input-wrapper' }, h("ls-icon", { key: 'e845b49ad34a27e84bbeb33ab8bcd87d80fdda29', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'ff42359ab105d12a8a6580972e0c974714c64a87', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '7e6d15ebe386d96d0f13b555f3bdf917e1fd0831', class: 'input-wrapper' }, h("ls-icon", { key: 'a98e37e9fa71467ab4d13cbd8d38357311f1f225', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'ad3c14a161a8f7624f6afe122f65f0140db17391', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: 'cbe1a006c7963f3848f86321f5938426c8a6f066', class: 'ls-field-properties-section' }, h("div", { key: '661acc6cbc0a5e51bed406e20746e0b290af3768', class: 'ls-field-properties-section-text' }, h("p", { key: 'a0d739ef2e67b863340f091322f233594938a1b6', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '1991851f81de9de4431fd61d84e6b51eb484f96b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '8d44dfaf9fb36a3353e678fcda20d6e521bedcc0', class: 'button-group' }, h("button", { key: '169c38f14e14d0a7e35742a878ff992f1203265c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '602ffcf4bc0abc0f78b841071833387a3b3db2ea', name: "field-distribute-vertically" })), h("button", { key: '81cbf088282c93b47e5aa367ce38fbea83a86b28', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '9b45920bd267d4b846475d3cd5196c27310d3482', name: "field-distribute-horizontally" })))), h("div", { key: '7ee0dbb4a04f2c85231c7a1e2abea068158dc679', class: 'ls-field-properties-section' }, h("div", { key: 'c9ad0439b1497431f6b6de46aad5edeee84842eb', class: 'ls-field-properties-section-text' }, h("p", { key: '50de6dcd1cad58aa989030b37aeb0e997963db05', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '7add4b16b05b484c4033309286ad1eae9770de45', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '529a5c5a0f098f4f46a0025836ec75cf5553336a', class: 'input-row' }, h("div", { key: '2784028e38a8bcac7e0527b8fe2a727a35204056', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '1daf9dba08891570496a039667a007d7b0f6c113', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '8fbba7e8ac95e7b060003d735021a3fcfe4ee1fe', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: 'dafd6d4add86fb81ef89b57c1761dd685577924b', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '45e20ce1cb261cfbaa3566bf407affb6d2630dd0', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: 'a8711242e79a07b3a31eb53464304607dbb45607', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'e852290e234a73d02f5307dab93b5c94ff401c83', id: "ls-tooltip-master" })));
58
55
  }
59
56
  static get is() { return "ls-field-placement"; }
60
57
  static get encapsulation() { return "shadow"; }
@@ -117,27 +114,6 @@ export class LsFieldPlacement {
117
114
  }
118
115
  }
119
116
  }
120
- }, {
121
- "method": "update",
122
- "name": "update",
123
- "bubbles": true,
124
- "cancelable": true,
125
- "composed": true,
126
- "docs": {
127
- "tags": [],
128
- "text": ""
129
- },
130
- "complexType": {
131
- "original": "LSMutateEvent[]",
132
- "resolved": "LSMutateEvent[]",
133
- "references": {
134
- "LSMutateEvent": {
135
- "location": "import",
136
- "path": "../../types/LSMutateEvent",
137
- "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
138
- }
139
- }
140
- }
141
117
  }];
142
118
  }
143
119
  static get elementRef() { return "component"; }
package/dist/collection/components/ls-field-placement/ls-field-placement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-placement',\n styleUrl: 'ls-field-placement.css',\n shadow: true,\n})\nexport class LsFieldPlacement {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getValue(key) {\n if (this.isMultiple(this.dataItem)) {\n return \"\";\n } else if (this.isSingle(this.dataItem)) {\n return this.dataItem[key]\n }\n return ''\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n this.update.emit([singleDiff]);\n }\n }\n\n center() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n }\n\n right() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n }\n\n middle() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n }\n\n bottom() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n />\n </div>\n </div>\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\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'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"top-location\"\n id=\"top-location\"\n value={this.dataItem?.left}\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n value={this.dataItem?.top}\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n width=\"30\"\n />\n </div>\n </div>\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'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\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'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n </div>\n </div>\n </div>\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-placement',\n styleUrl: 'ls-field-placement.css',\n shadow: true,\n})\nexport class LsFieldPlacement {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getValue(key) {\n if (this.isMultiple(this.dataItem)) {\n return \"\";\n } else if (this.isSingle(this.dataItem)) {\n return this.dataItem[key]\n }\n return ''\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n }\n }\n\n center() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n }\n\n right() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n }\n\n middle() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n }\n\n bottom() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n />\n </div>\n </div>\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\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'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"top-location\"\n id=\"top-location\"\n value={this.dataItem?.left}\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n value={this.dataItem?.top}\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n width=\"30\"\n />\n </div>\n </div>\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'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\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'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n </div>\n </div>\n </div>\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}