legalesign-document-viewer 0.2.2 → 0.2.5

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 (141) hide show
  1. package/dist/cjs/{index-CWaAWf3g.js → index-DqDUg8D7.js} +2 -41
  2. package/dist/cjs/index-DqDUg8D7.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/ls-document-options_37.cjs.entry.js +5 -5
  5. package/dist/cjs/ls-document-options_37.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ls-document-viewer.cjs.js +2 -2
  7. package/dist/collection/components/ls-editor-field/ls-editor-field.js +3 -3
  8. package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
  9. package/dist/collection/components/ls-participant-select/ls-participant-select.js +1 -1
  10. package/dist/collection/components/ls-participant-select/ls-participant-select.js.map +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/ls-document-options.js +1 -1
  13. package/dist/components/ls-document-viewer.js +37 -37
  14. package/dist/components/ls-editor-field.js +1 -1
  15. package/dist/components/ls-editor-table.js +1 -1
  16. package/dist/components/ls-feature-column.js +1 -1
  17. package/dist/components/ls-field-alignment.js +1 -1
  18. package/dist/components/ls-field-dimensions.js +1 -1
  19. package/dist/components/ls-field-distribute.js +1 -1
  20. package/dist/components/ls-field-footer.js +1 -1
  21. package/dist/components/ls-field-format.js +1 -1
  22. package/dist/components/ls-field-placement.js +1 -1
  23. package/dist/components/ls-field-properties-advanced.js +1 -1
  24. package/dist/components/ls-field-properties-autosign.js +1 -1
  25. package/dist/components/ls-field-properties-date.js +1 -1
  26. package/dist/components/ls-field-properties-email.js +1 -1
  27. package/dist/components/ls-field-properties-file.js +1 -1
  28. package/dist/components/ls-field-properties-general.js +1 -1
  29. package/dist/components/ls-field-properties-image.js +1 -1
  30. package/dist/components/ls-field-properties-multiple.js +1 -1
  31. package/dist/components/ls-field-properties-number.js +1 -1
  32. package/dist/components/ls-field-properties-signature.js +1 -1
  33. package/dist/components/ls-field-properties-text.js +1 -1
  34. package/dist/components/ls-field-properties.js +1 -1
  35. package/dist/components/ls-field-size.js +1 -1
  36. package/dist/components/ls-formfield.js +1 -1
  37. package/dist/components/ls-icon.js +1 -1
  38. package/dist/components/ls-number-input.js +1 -1
  39. package/dist/components/ls-participant-manager.js +1 -1
  40. package/dist/components/ls-participant-select.js +1 -1
  41. package/dist/components/ls-radio-input.js +1 -1
  42. package/dist/components/ls-select-input.js +1 -1
  43. package/dist/components/ls-statusbar.js +1 -1
  44. package/dist/components/ls-text-input.js +1 -1
  45. package/dist/components/ls-textarea-input.js +1 -1
  46. package/dist/components/ls-toggle.js +1 -1
  47. package/dist/components/ls-toolbar.js +1 -1
  48. package/dist/components/ls-toolbox-field.js +1 -1
  49. package/dist/components/{p-BF_3dXnS.js → p-1Ir9-yQU.js} +22 -22
  50. package/dist/components/{p-BF_3dXnS.js.map → p-1Ir9-yQU.js.map} +1 -1
  51. package/dist/components/{p-_IQrSD16.js → p-3LU2FV3W.js} +4 -4
  52. package/dist/components/{p-_IQrSD16.js.map → p-3LU2FV3W.js.map} +1 -1
  53. package/dist/components/{p-YikYGiof.js → p-B7VyU7YH.js} +9 -9
  54. package/dist/components/{p-YikYGiof.js.map → p-B7VyU7YH.js.map} +1 -1
  55. package/dist/components/{p-D0LHlPhk.js → p-BCpsA9BY.js} +4 -4
  56. package/dist/components/{p-D0LHlPhk.js.map → p-BCpsA9BY.js.map} +1 -1
  57. package/dist/components/{p-DEVuVmw0.js → p-BPkbTOIU.js} +3 -3
  58. package/dist/components/{p-DEVuVmw0.js.map → p-BPkbTOIU.js.map} +1 -1
  59. package/dist/components/{p-3_nsqlNn.js → p-BSN2cMdj.js} +9 -9
  60. package/dist/components/{p-3_nsqlNn.js.map → p-BSN2cMdj.js.map} +1 -1
  61. package/dist/components/{p-BXSGBDON.js → p-Bby5tjrS.js} +4 -4
  62. package/dist/components/{p-BXSGBDON.js.map → p-Bby5tjrS.js.map} +1 -1
  63. package/dist/components/{p-B-g7m2UJ.js → p-Bh-iiZW1.js} +4 -4
  64. package/dist/components/{p-B-g7m2UJ.js.map → p-Bh-iiZW1.js.map} +1 -1
  65. package/dist/components/{p-tWjfhi4s.js → p-BneR1hef.js} +11 -11
  66. package/dist/components/{p-tWjfhi4s.js.map → p-BneR1hef.js.map} +1 -1
  67. package/dist/components/{p-DhYwFcgK.js → p-Bpzk1RMu.js} +4 -4
  68. package/dist/components/{p-DhYwFcgK.js.map → p-Bpzk1RMu.js.map} +1 -1
  69. package/dist/components/{p-DouPKI_J.js → p-BsqbS8f_.js} +4 -4
  70. package/dist/components/{p-DouPKI_J.js.map → p-BsqbS8f_.js.map} +1 -1
  71. package/dist/components/{p-D4TZL9Lo.js → p-C6YMMVJ1.js} +9 -9
  72. package/dist/components/{p-D4TZL9Lo.js.map → p-C6YMMVJ1.js.map} +1 -1
  73. package/dist/components/{p-DhuvePr2.js → p-C9AqDCzm.js} +3 -3
  74. package/dist/components/{p-DhuvePr2.js.map → p-C9AqDCzm.js.map} +1 -1
  75. package/dist/components/{p-BnqFMDnT.js → p-CfCokEUT.js} +3 -3
  76. package/dist/components/{p-BnqFMDnT.js.map → p-CfCokEUT.js.map} +1 -1
  77. package/dist/components/{p-2ULkKils.js → p-CtMHOHAp.js} +4 -4
  78. package/dist/components/{p-2ULkKils.js.map → p-CtMHOHAp.js.map} +1 -1
  79. package/dist/components/{p-RlB1gbu7.js → p-CttUZd3c.js} +4 -4
  80. package/dist/components/{p-RlB1gbu7.js.map → p-CttUZd3c.js.map} +1 -1
  81. package/dist/components/{p-DMtzm95I.js → p-D4JCAjlc.js} +7 -6
  82. package/dist/components/p-D4JCAjlc.js.map +1 -0
  83. package/dist/components/{p-CEfOBipU.js → p-DCLBmOtj.js} +9 -9
  84. package/dist/components/{p-CEfOBipU.js.map → p-DCLBmOtj.js.map} +1 -1
  85. package/dist/components/{p-D6Q_jl_P.js → p-DEE854iZ.js} +11 -11
  86. package/dist/components/{p-D6Q_jl_P.js.map → p-DEE854iZ.js.map} +1 -1
  87. package/dist/components/{p-DMi8aFQC.js → p-DVz19y7K.js} +4 -4
  88. package/dist/components/{p-DMi8aFQC.js.map → p-DVz19y7K.js.map} +1 -1
  89. package/dist/components/{p-ZtWDjd0j.js → p-DY_A9zAm.js} +4 -4
  90. package/dist/components/{p-ZtWDjd0j.js.map → p-DY_A9zAm.js.map} +1 -1
  91. package/dist/components/{p-DSU4J2Gn.js → p-D_ZsRxGa.js} +6 -6
  92. package/dist/components/{p-DSU4J2Gn.js.map → p-D_ZsRxGa.js.map} +1 -1
  93. package/dist/components/{p-DCWGO2re.js → p-DasXNgMG.js} +8 -7
  94. package/dist/components/p-DasXNgMG.js.map +1 -0
  95. package/dist/components/{p-CPOG-QV-.js → p-DjavAQqZ.js} +4 -4
  96. package/dist/components/{p-CPOG-QV-.js.map → p-DjavAQqZ.js.map} +1 -1
  97. package/dist/components/{p-D4FyBAwx.js → p-DjfDnBZ1.js} +2 -41
  98. package/dist/components/p-DjfDnBZ1.js.map +1 -0
  99. package/dist/components/{p-xWvsUhQg.js → p-DoywjJAr.js} +4 -4
  100. package/dist/components/{p-xWvsUhQg.js.map → p-DoywjJAr.js.map} +1 -1
  101. package/dist/components/{p-CwuBDnrW.js → p-DzHh5tyo.js} +9 -9
  102. package/dist/components/{p-CwuBDnrW.js.map → p-DzHh5tyo.js.map} +1 -1
  103. package/dist/components/{p-kCPFyJUc.js → p-DzmtJl3e.js} +4 -4
  104. package/dist/components/{p-kCPFyJUc.js.map → p-DzmtJl3e.js.map} +1 -1
  105. package/dist/components/{p-DnsNIGVk.js → p-Dzn5xAM4.js} +7 -7
  106. package/dist/components/{p-DnsNIGVk.js.map → p-Dzn5xAM4.js.map} +1 -1
  107. package/dist/components/{p-CWERIrvc.js → p-EsA1p6L3.js} +8 -8
  108. package/dist/components/{p-CWERIrvc.js.map → p-EsA1p6L3.js.map} +1 -1
  109. package/dist/components/{p-CHWN2qrD.js → p-JBc2BCIT.js} +4 -4
  110. package/dist/components/{p-CHWN2qrD.js.map → p-JBc2BCIT.js.map} +1 -1
  111. package/dist/components/{p-DJ_qA817.js → p-aOAZ6c8y.js} +9 -9
  112. package/dist/components/{p-DJ_qA817.js.map → p-aOAZ6c8y.js.map} +1 -1
  113. package/dist/components/{p-fH5Kamtp.js → p-iC6XYfS_.js} +4 -4
  114. package/dist/components/{p-fH5Kamtp.js.map → p-iC6XYfS_.js.map} +1 -1
  115. package/dist/components/{p-BnHqb3W4.js → p-lTOSc-NN.js} +4 -4
  116. package/dist/components/{p-BnHqb3W4.js.map → p-lTOSc-NN.js.map} +1 -1
  117. package/dist/components/{p-CJbhxoKd.js → p-p3xY_X0j.js} +3 -3
  118. package/dist/components/{p-CJbhxoKd.js.map → p-p3xY_X0j.js.map} +1 -1
  119. package/dist/components/{p-joCRxi9a.js → p-rEZh-cMt.js} +7 -7
  120. package/dist/components/{p-joCRxi9a.js.map → p-rEZh-cMt.js.map} +1 -1
  121. package/dist/components/{p-56r-ypr7.js → p-ucaurEVy.js} +9 -9
  122. package/dist/components/{p-56r-ypr7.js.map → p-ucaurEVy.js.map} +1 -1
  123. package/dist/esm/{index-DUl1siho.js → index-BwkWPcyG.js} +2 -41
  124. package/dist/esm/index-BwkWPcyG.js.map +1 -0
  125. package/dist/esm/loader.js +3 -3
  126. package/dist/esm/ls-document-options_37.entry.js +5 -5
  127. package/dist/esm/ls-document-options_37.entry.js.map +1 -1
  128. package/dist/esm/ls-document-viewer.js +3 -3
  129. package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
  130. package/dist/ls-document-viewer/p-BwkWPcyG.js +3 -0
  131. package/dist/ls-document-viewer/p-BwkWPcyG.js.map +1 -0
  132. package/dist/ls-document-viewer/{p-e9d177d1.entry.js → p-d59db988.entry.js} +6 -6
  133. package/dist/ls-document-viewer/{p-e9d177d1.entry.js.map → p-d59db988.entry.js.map} +1 -1
  134. package/package.json +1 -1
  135. package/dist/cjs/index-CWaAWf3g.js.map +0 -1
  136. package/dist/components/p-D4FyBAwx.js.map +0 -1
  137. package/dist/components/p-DCWGO2re.js.map +0 -1
  138. package/dist/components/p-DMtzm95I.js.map +0 -1
  139. package/dist/esm/index-DUl1siho.js.map +0 -1
  140. package/dist/ls-document-viewer/p-DUl1siho.js +0 -3
  141. package/dist/ls-document-viewer/p-DUl1siho.js.map +0 -1
package/dist/components/{p-joCRxi9a.js → p-rEZh-cMt.js} RENAMED
@@ -1,10 +1,10 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
2
2
  import { v as validationTypes } from './p-DqJ_uIFZ.js';
3
3
  import { d as defaultRolePalette } from './p-C00GqV9f.js';
4
- import { d as defineCustomElement$4 } from './p-fH5Kamtp.js';
5
- import { d as defineCustomElement$3 } from './p-xWvsUhQg.js';
6
- import { d as defineCustomElement$2 } from './p-CJbhxoKd.js';
7
- import { d as defineCustomElement$1 } from './p-DEVuVmw0.js';
4
+ import { d as defineCustomElement$4 } from './p-iC6XYfS_.js';
5
+ import { d as defineCustomElement$3 } from './p-DoywjJAr.js';
6
+ import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
7
+ import { d as defineCustomElement$1 } from './p-BPkbTOIU.js';
8
8
 
9
9
  const lsFieldPropertiesTextCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
10
10
 
@@ -72,6 +72,6 @@ function defineCustomElement() {
72
72
  defineCustomElement();
73
73
 
74
74
  export { LsFieldPropertiesText as L, defineCustomElement as d };
75
- //# sourceMappingURL=p-joCRxi9a.js.map
75
+ //# sourceMappingURL=p-rEZh-cMt.js.map
76
76
 
77
- //# sourceMappingURL=p-joCRxi9a.js.map
77
+ //# sourceMappingURL=p-rEZh-cMt.js.map
package/dist/components/{p-joCRxi9a.js.map → p-rEZh-cMt.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-joCRxi9a.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-text/ls-field-properties-text.css?tag=ls-field-properties-text&encapsulation=shadow","src/components/ls-field-properties-text/ls-field-properties-text.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-text',\n styleUrl: 'ls-field-properties-text.css',\n shadow: true,\n})\nexport class LsFieldPropertiesText {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"text\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Text</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes\n .filter(type => type.formType === 'text')\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <div class={'button-footer'}>\n <button class={'secondary'}>\n <ls-icon name=\"field-duplicate\" size=\"20\" />\n Duplicate\n </button>\n <button class={'destructive'}>\n <ls-icon name=\"trash\" size=\"20\" />\n Delete\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-rEZh-cMt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-text/ls-field-properties-text.css?tag=ls-field-properties-text&encapsulation=shadow","src/components/ls-field-properties-text/ls-field-properties-text.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-text',\n styleUrl: 'ls-field-properties-text.css',\n shadow: true,\n})\nexport class LsFieldPropertiesText {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"text\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Text</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes\n .filter(type => type.formType === 'text')\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <div class={'button-footer'}>\n <button class={'secondary'}>\n <ls-icon name=\"field-duplicate\" size=\"20\" />\n Duplicate\n </button>\n <button class={'destructive'}>\n <ls-icon name=\"trash\" size=\"20\" />\n Delete\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/{p-56r-ypr7.js → p-ucaurEVy.js} RENAMED
@@ -1,12 +1,12 @@
1
- import { p as proxyCustomElement, H, h, d as Host } from './p-D4FyBAwx.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
2
2
  import { v as validationTypes } from './p-DqJ_uIFZ.js';
3
3
  import { d as defaultRolePalette } from './p-C00GqV9f.js';
4
- import { d as defineCustomElement$6 } from './p-fH5Kamtp.js';
5
- import { d as defineCustomElement$5 } from './p-_IQrSD16.js';
6
- import { d as defineCustomElement$4 } from './p-xWvsUhQg.js';
7
- import { d as defineCustomElement$3 } from './p-BnqFMDnT.js';
8
- import { d as defineCustomElement$2 } from './p-CJbhxoKd.js';
9
- import { d as defineCustomElement$1 } from './p-DEVuVmw0.js';
4
+ import { d as defineCustomElement$6 } from './p-iC6XYfS_.js';
5
+ import { d as defineCustomElement$5 } from './p-3LU2FV3W.js';
6
+ import { d as defineCustomElement$4 } from './p-DoywjJAr.js';
7
+ import { d as defineCustomElement$3 } from './p-CfCokEUT.js';
8
+ import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
9
+ import { d as defineCustomElement$1 } from './p-BPkbTOIU.js';
10
10
 
11
11
  const lsFieldPropertiesEmailCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
12
12
 
@@ -84,6 +84,6 @@ function defineCustomElement() {
84
84
  defineCustomElement();
85
85
 
86
86
  export { LsFieldPropertiesEmail as L, defineCustomElement as d };
87
- //# sourceMappingURL=p-56r-ypr7.js.map
87
+ //# sourceMappingURL=p-ucaurEVy.js.map
88
88
 
89
- //# sourceMappingURL=p-56r-ypr7.js.map
89
+ //# sourceMappingURL=p-ucaurEVy.js.map
package/dist/components/{p-56r-ypr7.js.map → p-ucaurEVy.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-56r-ypr7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-email',\n styleUrl: 'ls-field-properties-email.css',\n shadow: true,\n})\nexport class LsFieldPropertiesEmail {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-properties-advanced dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"at-symbol\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Email</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes\n .filter(type => type.formType === 'email')\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <ls-field-footer dataItem={this.dataItem} />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-ucaurEVy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-email',\n styleUrl: 'ls-field-properties-email.css',\n shadow: true,\n})\nexport class LsFieldPropertiesEmail {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-properties-advanced dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"at-symbol\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Email</p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes\n .filter(type => type.formType === 'email')\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <ls-field-footer dataItem={this.dataItem} />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/{index-DUl1siho.js → index-BwkWPcyG.js} RENAMED
@@ -185,9 +185,6 @@ var flush = () => {
185
185
  };
186
186
  var nextTick = (cb) => promiseResolve().then(cb);
187
187
  var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
188
-
189
- // src/utils/helpers.ts
190
- var isDef = (v) => v != null && v !== void 0;
191
188
  var isComplexType = (o) => {
192
189
  o = typeof o;
193
190
  return o === "object" || o === "function";
@@ -807,9 +804,6 @@ function sortedAttrNames(attrNames) {
807
804
  attrNames
808
805
  );
809
806
  }
810
-
811
- // src/runtime/vdom/vdom-render.ts
812
- var scopeId;
813
807
  var contentRef;
814
808
  var hostTagName;
815
809
  var useNativeShadowDom = false;
@@ -864,9 +858,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
864
858
  {
865
859
  updateElement(null, newVNode2, isSvgMode);
866
860
  }
867
- if (isDef(scopeId) && elm["s-si"] !== scopeId) {
868
- elm.classList.add(elm["s-si"] = scopeId);
869
- }
870
861
  if (newVNode2.$children$) {
871
862
  for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
872
863
  childNode = createElm(oldParentVNode, newVNode2, i2);
@@ -897,9 +888,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
897
888
  putBackInOriginalLocation(oldParentVNode.$elm$, false);
898
889
  }
899
890
  }
900
- {
901
- addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode == null ? void 0 : oldParentVNode.$elm$);
902
- }
903
891
  }
904
892
  }
905
893
  return elm;
@@ -1154,34 +1142,10 @@ var markSlotContentForRelocation = (elm) => {
1154
1142
  }
1155
1143
  };
1156
1144
  var insertBefore = (parent, newNode, reference) => {
1157
- if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
1158
- addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
1159
- }
1160
1145
  {
1161
1146
  return parent == null ? void 0 : parent.insertBefore(newNode, reference);
1162
1147
  }
1163
1148
  };
1164
- function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
1165
- var _a, _b;
1166
- let scopeId2;
1167
- if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
1168
- const scopeName = slotNode["s-sn"];
1169
- const hostName = slotNode["s-hn"];
1170
- (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
1171
- if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
1172
- let child = (oldParent.__childNodes || oldParent.childNodes)[0];
1173
- let found = false;
1174
- while (child) {
1175
- if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
1176
- found = true;
1177
- break;
1178
- }
1179
- child = child.nextSibling;
1180
- }
1181
- if (!found) oldParent.classList.remove(scopeId2 + "-s");
1182
- }
1183
- }
1184
- }
1185
1149
  var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1186
1150
  var _a, _b, _c, _d;
1187
1151
  const hostElm = hostRef.$hostElement$;
@@ -1201,9 +1165,6 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1201
1165
  rootVnode.$flags$ |= 4 /* isHost */;
1202
1166
  hostRef.$vnode$ = rootVnode;
1203
1167
  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
1204
- {
1205
- scopeId = hostElm["s-sc"];
1206
- }
1207
1168
  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
1208
1169
  {
1209
1170
  contentRef = hostElm["s-cr"];
@@ -1974,6 +1935,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
1974
1935
  var setNonce = (nonce) => plt.$nonce$ = nonce;
1975
1936
 
1976
1937
  export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1977
- //# sourceMappingURL=index-DUl1siho.js.map
1938
+ //# sourceMappingURL=index-BwkWPcyG.js.map
1978
1939
 
1979
- //# sourceMappingURL=index-DUl1siho.js.map
1940
+ //# sourceMappingURL=index-BwkWPcyG.js.map