@aquera/nile-elements 0.0.12 → 0.0.14

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 (188) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.d.ts +3 -0
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js +3 -0
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js.map +1 -1
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js +1 -1
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.d.ts +3 -2
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js +70 -23
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js +1 -0
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.d.ts +1 -0
  12. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js +15 -8
  13. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js.map +1 -1
  14. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.css.js +10 -0
  15. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
  16. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.d.ts +8 -0
  17. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.js +56 -6
  18. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
  19. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/array-loop.d.ts +5 -0
  20. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/array-loop.js +5 -0
  21. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/array-loop.js.map +1 -0
  22. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/document.d.ts +1 -1
  23. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/document.js +1 -1
  24. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/document.js.map +1 -1
  25. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.d.ts +2 -0
  26. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.js +2 -0
  27. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.js.map +1 -1
  28. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/integer.d.ts +5 -0
  29. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/integer.js +5 -0
  30. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/integer.js.map +1 -0
  31. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js +7 -0
  32. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js.map +1 -1
  33. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js +11 -0
  34. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
  35. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js +10 -1
  36. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
  37. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +2 -1
  38. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +34 -20
  39. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  40. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  41. package/demo/filenames.txt +1 -1
  42. package/dist/index.cjs.js +1 -1
  43. package/dist/index.esm.js +1 -1
  44. package/dist/index.iife.js +104 -57
  45. package/dist/internal/enum.cjs.js +1 -1
  46. package/dist/internal/enum.cjs.js.map +1 -1
  47. package/dist/internal/enum.esm.js +1 -1
  48. package/dist/nile-badge/index.cjs.js +1 -1
  49. package/dist/nile-badge/index.esm.js +1 -1
  50. package/dist/nile-badge/nile-badge.cjs.js +1 -1
  51. package/dist/nile-badge/nile-badge.cjs.js.map +1 -1
  52. package/dist/nile-badge/nile-badge.esm.js +1 -1
  53. package/dist/nile-button/index.cjs.js +1 -1
  54. package/dist/nile-button/index.esm.js +1 -1
  55. package/dist/nile-button/nile-button.cjs.js +1 -1
  56. package/dist/nile-button/nile-button.cjs.js.map +1 -1
  57. package/dist/nile-button/nile-button.esm.js +1 -1
  58. package/dist/nile-content-editor/nile-content-editor.cjs.js +1 -1
  59. package/dist/nile-content-editor/nile-content-editor.cjs.js.map +1 -1
  60. package/dist/nile-content-editor/nile-content-editor.css.cjs.js +1 -1
  61. package/dist/nile-content-editor/nile-content-editor.css.cjs.js.map +1 -1
  62. package/dist/nile-content-editor/nile-content-editor.css.esm.js +1 -1
  63. package/dist/nile-content-editor/nile-content-editor.esm.js +13 -13
  64. package/dist/nile-dialog/index.cjs.js +1 -1
  65. package/dist/nile-dialog/index.esm.js +1 -1
  66. package/dist/nile-dialog/nile-dialog.cjs.js +1 -1
  67. package/dist/nile-dialog/nile-dialog.cjs.js.map +1 -1
  68. package/dist/nile-dialog/nile-dialog.esm.js +1 -1
  69. package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
  70. package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
  71. package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
  72. package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
  73. package/dist/nile-error-message/nile-error-message.css.esm.js +1 -0
  74. package/dist/nile-error-message/nile-error-message.esm.js +13 -10
  75. package/dist/nile-form-help-text/index.cjs.js +1 -1
  76. package/dist/nile-form-help-text/index.esm.js +1 -1
  77. package/dist/nile-form-help-text/nile-form-help-text.cjs.js +1 -1
  78. package/dist/nile-form-help-text/nile-form-help-text.cjs.js.map +1 -1
  79. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js +1 -1
  80. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js.map +1 -1
  81. package/dist/nile-form-help-text/nile-form-help-text.css.esm.js +10 -0
  82. package/dist/nile-form-help-text/nile-form-help-text.esm.js +16 -5
  83. package/dist/nile-icon/icons/svg/array-loop.cjs.js +2 -0
  84. package/dist/nile-icon/icons/svg/array-loop.cjs.js.map +1 -0
  85. package/dist/nile-icon/icons/svg/array-loop.esm.js +1 -0
  86. package/dist/nile-icon/icons/svg/document.cjs.js +1 -1
  87. package/dist/nile-icon/icons/svg/document.cjs.js.map +1 -1
  88. package/dist/nile-icon/icons/svg/document.esm.js +1 -1
  89. package/dist/nile-icon/icons/svg/index.cjs.js +1 -1
  90. package/dist/nile-icon/icons/svg/index.esm.js +1 -1
  91. package/dist/nile-icon/icons/svg/integer.cjs.js +2 -0
  92. package/dist/nile-icon/icons/svg/integer.cjs.js.map +1 -0
  93. package/dist/nile-icon/icons/svg/integer.esm.js +1 -0
  94. package/dist/nile-icon/index.cjs.js +1 -1
  95. package/dist/nile-icon/index.cjs.js.map +1 -1
  96. package/dist/nile-icon/index.esm.js +2 -2
  97. package/dist/nile-icon-button/index.cjs.js +1 -1
  98. package/dist/nile-icon-button/index.esm.js +1 -1
  99. package/dist/nile-icon-button/nile-icon-button.cjs.js +1 -1
  100. package/dist/nile-icon-button/nile-icon-button.cjs.js.map +1 -1
  101. package/dist/nile-icon-button/nile-icon-button.esm.js +1 -1
  102. package/dist/nile-input/index.cjs.js +1 -1
  103. package/dist/nile-input/index.esm.js +1 -1
  104. package/dist/nile-input/nile-input.cjs.js +1 -1
  105. package/dist/nile-input/nile-input.cjs.js.map +1 -1
  106. package/dist/nile-input/nile-input.esm.js +1 -1
  107. package/dist/nile-menu-item/index.cjs.js +1 -1
  108. package/dist/nile-menu-item/index.esm.js +1 -1
  109. package/dist/nile-menu-item/nile-menu-item.cjs.js +1 -1
  110. package/dist/nile-menu-item/nile-menu-item.cjs.js.map +1 -1
  111. package/dist/nile-menu-item/nile-menu-item.esm.js +1 -1
  112. package/dist/nile-option/index.cjs.js +1 -1
  113. package/dist/nile-option/index.esm.js +1 -1
  114. package/dist/nile-option/nile-option.cjs.js +1 -1
  115. package/dist/nile-option/nile-option.cjs.js.map +1 -1
  116. package/dist/nile-option/nile-option.esm.js +1 -1
  117. package/dist/nile-select/index.cjs.js +1 -1
  118. package/dist/nile-select/index.esm.js +1 -1
  119. package/dist/nile-select/nile-select.cjs.js +1 -1
  120. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  121. package/dist/nile-select/nile-select.css.cjs.js +1 -1
  122. package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
  123. package/dist/nile-select/nile-select.css.esm.js +11 -0
  124. package/dist/nile-select/nile-select.esm.js +8 -2
  125. package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
  126. package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
  127. package/dist/nile-switcher/nile-switcher.esm.js +43 -38
  128. package/dist/nile-tag/index.cjs.js +1 -1
  129. package/dist/nile-tag/index.esm.js +1 -1
  130. package/dist/nile-tag/nile-tag.cjs.js +1 -1
  131. package/dist/nile-tag/nile-tag.cjs.js.map +1 -1
  132. package/dist/nile-tag/nile-tag.esm.js +1 -1
  133. package/dist/src/internal/enum.d.ts +3 -0
  134. package/dist/src/internal/enum.js +3 -0
  135. package/dist/src/internal/enum.js.map +1 -1
  136. package/dist/src/nile-content-editor/nile-content-editor.css.js +1 -1
  137. package/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
  138. package/dist/src/nile-content-editor/nile-content-editor.d.ts +3 -2
  139. package/dist/src/nile-content-editor/nile-content-editor.js +70 -23
  140. package/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
  141. package/dist/src/nile-error-message/nile-error-message.css.js +1 -0
  142. package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  143. package/dist/src/nile-error-message/nile-error-message.d.ts +1 -0
  144. package/dist/src/nile-error-message/nile-error-message.js +15 -8
  145. package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
  146. package/dist/src/nile-form-help-text/nile-form-help-text.css.js +10 -0
  147. package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
  148. package/dist/src/nile-form-help-text/nile-form-help-text.d.ts +8 -0
  149. package/dist/src/nile-form-help-text/nile-form-help-text.js +56 -6
  150. package/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
  151. package/dist/src/nile-icon/icons/svg/array-loop.d.ts +5 -0
  152. package/dist/src/nile-icon/icons/svg/array-loop.js +5 -0
  153. package/dist/src/nile-icon/icons/svg/array-loop.js.map +1 -0
  154. package/dist/src/nile-icon/icons/svg/document.d.ts +1 -1
  155. package/dist/src/nile-icon/icons/svg/document.js +1 -1
  156. package/dist/src/nile-icon/icons/svg/document.js.map +1 -1
  157. package/dist/src/nile-icon/icons/svg/index.d.ts +2 -0
  158. package/dist/src/nile-icon/icons/svg/index.js +2 -0
  159. package/dist/src/nile-icon/icons/svg/index.js.map +1 -1
  160. package/dist/src/nile-icon/icons/svg/integer.d.ts +5 -0
  161. package/dist/src/nile-icon/icons/svg/integer.js +5 -0
  162. package/dist/src/nile-icon/icons/svg/integer.js.map +1 -0
  163. package/dist/src/nile-option/nile-option.js +7 -0
  164. package/dist/src/nile-option/nile-option.js.map +1 -1
  165. package/dist/src/nile-select/nile-select.css.js +11 -0
  166. package/dist/src/nile-select/nile-select.css.js.map +1 -1
  167. package/dist/src/nile-select/nile-select.js +10 -1
  168. package/dist/src/nile-select/nile-select.js.map +1 -1
  169. package/dist/src/nile-switcher/nile-switcher.d.ts +2 -1
  170. package/dist/src/nile-switcher/nile-switcher.js +34 -20
  171. package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  172. package/dist/tsconfig.tsbuildinfo +1 -1
  173. package/package.json +1 -1
  174. package/src/internal/enum.ts +3 -0
  175. package/src/nile-content-editor/nile-content-editor.css.ts +1 -1
  176. package/src/nile-content-editor/nile-content-editor.ts +78 -29
  177. package/src/nile-error-message/nile-error-message.css.ts +1 -0
  178. package/src/nile-error-message/nile-error-message.ts +17 -9
  179. package/src/nile-form-help-text/nile-form-help-text.css.ts +10 -0
  180. package/src/nile-form-help-text/nile-form-help-text.ts +73 -26
  181. package/src/nile-icon/icons/svg/array-loop.ts +5 -0
  182. package/src/nile-icon/icons/svg/document.ts +1 -1
  183. package/src/nile-icon/icons/svg/index.ts +2 -0
  184. package/src/nile-icon/icons/svg/integer.ts +5 -0
  185. package/src/nile-option/nile-option.ts +9 -0
  186. package/src/nile-select/nile-select.css.ts +11 -0
  187. package/src/nile-select/nile-select.ts +10 -1
  188. package/src/nile-switcher/nile-switcher.ts +51 -24
@@ -14,4 +14,7 @@ export declare const KeyCode: {
14
14
  ARROW_UP: string;
15
15
  ARROW_RIGHT: string;
16
16
  ARROW_DOWN: string;
17
+ CUT: string;
18
+ COPY: string;
19
+ PASTE: string;
17
20
  };
@@ -14,5 +14,8 @@ export const KeyCode = {
14
14
  ARROW_UP: 'ArrowUp',
15
15
  ARROW_RIGHT: 'ArrowRight',
16
16
  ARROW_DOWN: 'ArrowDown',
17
+ CUT: 'KeyX',
18
+ COPY: 'Copy',
19
+ PASTE: 'Paste',
17
20
  };
18
21
  //# sourceMappingURL=enum.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"enum.js","sourceRoot":"","sources":["../../../src/internal/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,WAAW;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,WAAW;CACxB,CAAC","sourcesContent":["export const KeyCode = {\n BACKSPACE: 'Backspace',\n TAB: 'Tab',\n ENTER: 'Enter',\n SHIFT: 'ShiftLeft', // or 'ShiftRight'\n CTRL: 'ControlLeft', // or 'ControlRight'\n ESCAPE: 'Escape',\n SPACE: 'Space',\n PAGE_UP: 'PageUp',\n PAGE_DOWN: 'PageDown',\n END: 'End',\n HOME: 'Home',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n};\n"]}
1
+ {"version":3,"file":"enum.js","sourceRoot":"","sources":["../../../src/internal/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,WAAW;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,WAAW;IACvB,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export const KeyCode = {\n BACKSPACE: 'Backspace',\n TAB: 'Tab',\n ENTER: 'Enter',\n SHIFT: 'ShiftLeft', // or 'ShiftRight'\n CTRL: 'ControlLeft', // or 'ControlRight'\n ESCAPE: 'Escape',\n SPACE: 'Space',\n PAGE_UP: 'PageUp',\n PAGE_DOWN: 'PageDown',\n END: 'End',\n HOME: 'Home',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n CUT: 'KeyX',\n COPY: 'Copy',\n PASTE: 'Paste',\n};\n"]}
@@ -23,7 +23,7 @@ export const styles = css `
23
23
 
24
24
  .dropdown-position {
25
25
  position: relative;
26
- bottom: 60px;
26
+ bottom: 20px;
27
27
  }
28
28
  .content-editable-input {
29
29
  box-sizing: border-box;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * AttributeExpression CSS\n */\nexport const styles = css`\n :host {\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n }\n\n .content-editable-wrapper {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n }\n\n .dropdown-position {\n position: relative;\n bottom: 60px;\n }\n .content-editable-input {\n box-sizing: border-box;\n width: 100%;\n padding: 9px;\n border: 1px solid #c7ced4;\n border-radius: 4px;\n overflow-x: auto;\n overflow-anchor: none;\n scrollbar-width: none;\n -ms-overflow-style: none;\n cursor: text;\n white-space: nowrap;\n background-color: #ffffff;\n height: 38px;\n }\n .content-editable-input:focus {\n outline: none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .read-only {\n cursor: not-allowed;\n }\n\n .chips {\n display: inline;\n background: #e5e9eb;\n color: #000;\n border-radius: 4px;\n padding: 6px;\n height: 24px;\n line-height: 10px;\n margin-left: 3px;\n letter-spacing: 0.2px;\n }\n\n .text-area {\n height: 120px;\n overflow: scroll;\n line-height: 26px;\n }\n\n .text-area .chips {\n padding: 4px 8px;\n }\n\n .chip-error {\n background: #f3a5aa;\n }\n .nile-options-container {\n box-sizing: border-box;\n background-color: #ffffff;\n border: 1px solid #c7ced4;\n overflow: auto;\n max-height: 150px;\n }\n\n label {\n display: inline-block;\n margin-bottom: 6px;\n font-family: 'colfax-medium';\n }\n\n .asterik {\n color: #e5434d;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * AttributeExpression CSS\n */\nexport const styles = css`\n :host {\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n }\n\n .content-editable-wrapper {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n }\n\n .dropdown-position {\n position: relative;\n bottom: 20px;\n }\n .content-editable-input {\n box-sizing: border-box;\n width: 100%;\n padding: 9px;\n border: 1px solid #c7ced4;\n border-radius: 4px;\n overflow-x: auto;\n overflow-anchor: none;\n scrollbar-width: none;\n -ms-overflow-style: none;\n cursor: text;\n white-space: nowrap;\n background-color: #ffffff;\n height: 38px;\n }\n .content-editable-input:focus {\n outline: none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .read-only {\n cursor: not-allowed;\n }\n\n .chips {\n display: inline;\n background: #e5e9eb;\n color: #000;\n border-radius: 4px;\n padding: 6px;\n height: 24px;\n line-height: 10px;\n margin-left: 3px;\n letter-spacing: 0.2px;\n }\n\n .text-area {\n height: 120px;\n overflow: scroll;\n line-height: 26px;\n }\n\n .text-area .chips {\n padding: 4px 8px;\n }\n\n .chip-error {\n background: #f3a5aa;\n }\n .nile-options-container {\n box-sizing: border-box;\n background-color: #ffffff;\n border: 1px solid #c7ced4;\n overflow: auto;\n max-height: 150px;\n }\n\n label {\n display: inline-block;\n margin-bottom: 6px;\n font-family: 'colfax-medium';\n }\n\n .asterik {\n color: #e5434d;\n }\n`;\n\nexport default [styles];\n"]}
@@ -42,17 +42,18 @@ export declare class NileContentEditor extends NileElement {
42
42
  setInitialValues(): void;
43
43
  addOpenListeners(): void;
44
44
  removeOpenListeners(): void;
45
+ handleClipboardEvent(event: Event): Promise<void>;
45
46
  toggleDropdown(value: boolean): void;
46
47
  handleOutsideClick(event: Event): void;
47
48
  handleTypeChange(): void;
48
49
  disconnectedCallback(): void;
49
- handlePaste(event: ClipboardEvent): void;
50
50
  private handlekeyDown;
51
51
  filterOptions(): void;
52
52
  generateValuesFromHTMLTags(string: any): string;
53
53
  generateHTMLTagsWithValues(string: any): string;
54
+ setError(option: any): string;
54
55
  emitInputChange(): void;
55
- insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node): void;
56
+ insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node): void;
56
57
  handleOptions(option: any): void;
57
58
  renderAutoOptions(): TemplateResult;
58
59
  render(): TemplateResult;
@@ -44,6 +44,7 @@ let NileContentEditor = class NileContentEditor extends NileElement {
44
44
  }
45
45
  connectedCallback() {
46
46
  this.handleOutsideClick = this.handleOutsideClick.bind(this);
47
+ this.handleClipboardEvent = this.handleClipboardEvent.bind(this);
47
48
  super.connectedCallback();
48
49
  this.emit('nile-init');
49
50
  this.addOpenListeners();
@@ -57,9 +58,39 @@ let NileContentEditor = class NileContentEditor extends NileElement {
57
58
  }
58
59
  addOpenListeners() {
59
60
  window.addEventListener('click', this.handleOutsideClick);
61
+ window.addEventListener('cut', this.handleClipboardEvent);
62
+ window.addEventListener('copy', this.handleClipboardEvent);
63
+ window.addEventListener('paste', this.handleClipboardEvent);
60
64
  }
61
65
  removeOpenListeners() {
62
66
  window.removeEventListener('click', this.handleOutsideClick);
67
+ window.removeEventListener('cut', this.handleClipboardEvent);
68
+ window.removeEventListener('copy', this.handleClipboardEvent);
69
+ window.removeEventListener('paste', this.handleClipboardEvent);
70
+ }
71
+ async handleClipboardEvent(event) {
72
+ const selectedText = window?.getSelection()?.toString();
73
+ switch (event.type) {
74
+ case 'cut':
75
+ case 'copy':
76
+ if (!!selectedText)
77
+ await navigator.clipboard.writeText(selectedText);
78
+ document.execCommand(event.type);
79
+ break;
80
+ case 'paste':
81
+ event.preventDefault();
82
+ let pastedText = await navigator.clipboard.readText();
83
+ pastedText = pastedText
84
+ .replace(/<(|\/)(html|body|meta|span)[^>]*?>/gi, '')
85
+ .trim();
86
+ document.execCommand('insertText', false, pastedText);
87
+ break;
88
+ default:
89
+ break;
90
+ }
91
+ setTimeout(() => {
92
+ this.emitInputChange();
93
+ });
63
94
  }
64
95
  toggleDropdown(value) {
65
96
  this.openDropdown = value;
@@ -77,19 +108,15 @@ let NileContentEditor = class NileContentEditor extends NileElement {
77
108
  this.removeOpenListeners();
78
109
  this.emit('nile-destroy');
79
110
  }
80
- handlePaste(event) {
81
- event.preventDefault();
82
- if (event.clipboardData) {
83
- let text = event.clipboardData.getData('text/plain');
84
- document.execCommand('insertText', false, text);
85
- }
86
- this.emitInputChange();
87
- }
88
111
  handlekeyDown(event) {
89
112
  if (event.code === KeyCode.ENTER && this.type === 'text') {
90
113
  event.preventDefault();
91
114
  return;
92
115
  }
116
+ if ([KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&
117
+ (event.ctrlKey || event.metaKey)) {
118
+ return;
119
+ }
93
120
  if (event.code === KeyCode.ESCAPE) {
94
121
  event.preventDefault();
95
122
  this.toggleDropdown(false);
@@ -99,18 +126,19 @@ let NileContentEditor = class NileContentEditor extends NileElement {
99
126
  const value = this.contentEditor.innerText;
100
127
  this.emitInputChange();
101
128
  if (value.includes(this.tagIdentifier)) {
102
- this.toggleDropdown(true);
129
+ this.insertNodes(this.contentEditor, this.contentEditor.childNodes);
103
130
  this.filterOptions();
131
+ this.toggleDropdown(true);
104
132
  }
105
133
  else {
106
134
  this.toggleDropdown(false);
107
135
  }
108
- });
136
+ }, 10);
109
137
  }
110
138
  filterOptions() {
111
139
  this.filteredOptions = this.options;
112
140
  if (!!this.options.length && !!this.filteredValue) {
113
- this.filteredOptions = this.options.filter(item => item.startsWith(this.filteredValue));
141
+ this.filteredOptions = this.options.filter(item => item.includes(this.filteredValue));
114
142
  }
115
143
  else {
116
144
  this.filteredOptions = this.options;
@@ -128,12 +156,16 @@ let NileContentEditor = class NileContentEditor extends NileElement {
128
156
  var result = string.replace(pattern, (match, option) => {
129
157
  return this.options.includes(option)
130
158
  ? '<span class="chips" contenteditable="false">' + option + '</span>'
131
- : '<span class="chips chip-error" contenteditable="false">' +
132
- option +
133
- '</span>';
159
+ : this.setError(option);
134
160
  });
135
161
  return result;
136
162
  }
163
+ setError(option) {
164
+ this.error = true;
165
+ return ('<span class="chips chip-error" contenteditable="false">' +
166
+ option +
167
+ '</span>');
168
+ }
137
169
  emitInputChange() {
138
170
  if (this.contentEditor) {
139
171
  let fieldValue = this.contentEditor.innerHTML;
@@ -141,21 +173,34 @@ let NileContentEditor = class NileContentEditor extends NileElement {
141
173
  fieldValue = this.generateValuesFromHTMLTags(fieldValue);
142
174
  }
143
175
  fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
144
- fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
176
+ fieldValue = fieldValue.replace('<br>', '');
145
177
  this.emit('nile-change', {
146
178
  value: this.generateValuesFromHTMLTags(fieldValue),
147
179
  });
148
180
  }
149
181
  }
150
182
  insertNodes(parentNode, childNodes, autoOptionsTag) {
151
- Array.from(childNodes).map((node, index) => {
183
+ [...childNodes].forEach((node, index) => {
152
184
  if (node.hasChildNodes()) {
153
- this.insertNodes(node, node.childNodes, autoOptionsTag);
185
+ if (autoOptionsTag) {
186
+ this.insertNodes(node, node.childNodes, autoOptionsTag);
187
+ }
188
+ else {
189
+ this.insertNodes(node, node.childNodes);
190
+ }
154
191
  }
155
192
  else {
156
193
  if (node.nodeValue?.includes(this.tagIdentifier)) {
157
- parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(this.tagIdentifier + this.filteredValue, '');
158
- parentNode.childNodes[index].after(autoOptionsTag);
194
+ if (autoOptionsTag) {
195
+ parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(this.tagIdentifier + this.filteredValue, '');
196
+ parentNode.childNodes[index].after(autoOptionsTag);
197
+ }
198
+ this.filteredValue =
199
+ parentNode?.childNodes[index]?.nodeValue
200
+ ?.split(this.tagIdentifier)
201
+ .slice(1)
202
+ .join() || '';
203
+ return;
159
204
  }
160
205
  }
161
206
  });
@@ -200,6 +245,7 @@ let NileContentEditor = class NileContentEditor extends NileElement {
200
245
  <nile-popup
201
246
  .active="${live(this.openDropdown)}"
202
247
  sync="width"
248
+ strategy="fixed"
203
249
  placement="bottom"
204
250
  class=${classMap({
205
251
  dropdown: true,
@@ -211,11 +257,12 @@ let NileContentEditor = class NileContentEditor extends NileElement {
211
257
  ${this.showLabel && this.labelText
212
258
  ? html `<label class="ods-label">${this.labelText} </label> ${this
213
259
  .required
214
- ? html `<sapn class="asterik">*</span>`
260
+ ? html `<span class="asterik">*</span>`
215
261
  : ''}`
216
262
  : ''}
217
263
  <div
218
264
  contenteditable="${!readonly}"
265
+ spellcheck="false"
219
266
  class=${classMap({
220
267
  'content-editable-input': true,
221
268
  error: hasError || hasErrorMessage,
@@ -223,7 +270,6 @@ let NileContentEditor = class NileContentEditor extends NileElement {
223
270
  'text-area': type === 'text-area' ? true : false,
224
271
  })}
225
272
  @keydown=${this.handlekeyDown}
226
- @paste=${this.handlePaste}
227
273
  ></div>
228
274
  ${hasHelpText
229
275
  ? html `
@@ -238,8 +284,9 @@ let NileContentEditor = class NileContentEditor extends NileElement {
238
284
  `
239
285
  : ``}
240
286
  </div>
241
-
242
- ${this.renderAutoOptions()}
287
+ ${this.filteredOptions && !!this.filteredOptions.length
288
+ ? this.renderAutoOptions()
289
+ : null}
243
290
  </nile-popup>
244
291
  `;
245
292
  }
@@ -1 +1 @@
1
- {"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { KeyCode } from '../internal/enum';\nimport { live } from 'lit/directives/live.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() filteredOptions: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') contentEditor: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() openDropdown = false;\n\n tagIdentifier = '$';\n\n filteredValue = '';\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'readonly' }) readonly = false;\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n @property({ attribute: 'error' }) error = false;\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n this.handleOutsideClick = this.handleOutsideClick.bind(this);\n super.connectedCallback();\n this.emit('nile-init');\n this.addOpenListeners();\n this.setInitialValues();\n }\n\n setInitialValues() {\n this.updateComplete.then(res => {\n if (res && !!this.value)\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n this.value\n );\n });\n }\n\n addOpenListeners() {\n window.addEventListener('click', this.handleOutsideClick);\n }\n\n removeOpenListeners() {\n window.removeEventListener('click', this.handleOutsideClick);\n }\n\n toggleDropdown(value: boolean) {\n this.openDropdown = value;\n }\n\n handleOutsideClick(event: Event) {\n if (event && event.target) {\n this.toggleDropdown(false);\n }\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.emit('nile-destroy');\n }\n\n handlePaste(event: ClipboardEvent) {\n event.preventDefault();\n if (event.clipboardData) {\n let text = event.clipboardData.getData('text/plain');\n document.execCommand('insertText', false, text);\n }\n this.emitInputChange();\n }\n\n private handlekeyDown(event: any) {\n if (event.code === KeyCode.ENTER && this.type === 'text') {\n event.preventDefault();\n return;\n }\n if (event.code === KeyCode.ESCAPE) {\n event.preventDefault();\n this.toggleDropdown(false);\n return;\n }\n setTimeout(() => {\n const value = this.contentEditor.innerText;\n this.emitInputChange();\n if (value.includes(this.tagIdentifier)) {\n this.toggleDropdown(true);\n this.filterOptions();\n } else {\n this.toggleDropdown(false);\n }\n });\n }\n\n filterOptions() {\n this.filteredOptions = this.options;\n if (!!this.options.length && !!this.filteredValue) {\n this.filteredOptions = this.options.filter(item =>\n item.startsWith(this.filteredValue)\n );\n } else {\n this.filteredOptions = this.options;\n }\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>';\n });\n return result;\n }\n\n emitInputChange(): void {\n if (this.contentEditor) {\n let fieldValue = this.contentEditor.innerHTML;\n\n if (this.contentEditor.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/&nbsp;/g, ' ');\n fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n }\n\n insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {\n Array.from(childNodes).map((node: Node, index: number) => {\n if (node.hasChildNodes()) {\n this.insertNodes(node, node.childNodes, autoOptionsTag);\n } else {\n if (node.nodeValue?.includes(this.tagIdentifier)) {\n parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(\n this.tagIdentifier + this.filteredValue,\n ''\n );\n parentNode.childNodes[index].after(autoOptionsTag);\n }\n }\n });\n }\n\n handleOptions(option: any): void {\n this.toggleDropdown(false);\n let autoOptionsTag = document.createElement('span');\n autoOptionsTag.setAttribute('class', 'chips');\n autoOptionsTag.setAttribute('contentEditable', 'false');\n autoOptionsTag.innerText = option;\n this.insertNodes(\n this.contentEditor,\n this.contentEditor.childNodes,\n autoOptionsTag\n );\n this.filteredOptions = this.options;\n this.filteredValue = '';\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}\"\n >\n ${this.filteredOptions &&\n this.filteredOptions.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasError = !!this.error;\n const hasErrorMessage = !!this.errorMessage;\n const readonly = !!this.readonly;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${live(this.openDropdown)}\"\n sync=\"width\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<sapn class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"${!readonly}\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasError || hasErrorMessage,\n 'read-only': readonly,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n @paste=${this.handlePaste}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n\n ${this.renderAutoOptions()}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { KeyCode } from '../internal/enum';\nimport { live } from 'lit/directives/live.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() filteredOptions: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') contentEditor: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() openDropdown = false;\n\n tagIdentifier = '$';\n\n filteredValue = '';\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'readonly' }) readonly = false;\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n @property({ attribute: 'error' }) error = false;\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n this.handleOutsideClick = this.handleOutsideClick.bind(this);\n this.handleClipboardEvent = this.handleClipboardEvent.bind(this);\n super.connectedCallback();\n this.emit('nile-init');\n this.addOpenListeners();\n this.setInitialValues();\n }\n\n setInitialValues() {\n this.updateComplete.then(res => {\n if (res && !!this.value)\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n this.value\n );\n });\n }\n\n addOpenListeners() {\n window.addEventListener('click', this.handleOutsideClick);\n window.addEventListener('cut', this.handleClipboardEvent);\n window.addEventListener('copy', this.handleClipboardEvent);\n window.addEventListener('paste', this.handleClipboardEvent);\n }\n\n removeOpenListeners() {\n window.removeEventListener('click', this.handleOutsideClick);\n window.removeEventListener('cut', this.handleClipboardEvent);\n window.removeEventListener('copy', this.handleClipboardEvent);\n window.removeEventListener('paste', this.handleClipboardEvent);\n }\n\n async handleClipboardEvent(event: Event) {\n const selectedText = window?.getSelection()?.toString();\n switch (event.type) {\n case 'cut':\n case 'copy':\n if (!!selectedText) await navigator.clipboard.writeText(selectedText);\n document.execCommand(event.type);\n break;\n case 'paste':\n event.preventDefault();\n let pastedText = await navigator.clipboard.readText();\n pastedText = pastedText\n .replace(/<(|\\/)(html|body|meta|span)[^>]*?>/gi, '')\n .trim();\n document.execCommand('insertText', false, pastedText);\n break;\n default:\n break;\n }\n setTimeout(() => {\n this.emitInputChange();\n });\n }\n\n toggleDropdown(value: boolean) {\n this.openDropdown = value;\n }\n\n handleOutsideClick(event: Event) {\n if (event && event.target) {\n this.toggleDropdown(false);\n }\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.emit('nile-destroy');\n }\n\n private handlekeyDown(event: any) {\n if (event.code === KeyCode.ENTER && this.type === 'text') {\n event.preventDefault();\n return;\n }\n if (\n [KeyCode.CUT, KeyCode.COPY, KeyCode.PASTE].includes(event.code) &&\n (event.ctrlKey || event.metaKey)\n ) {\n return;\n }\n if (event.code === KeyCode.ESCAPE) {\n event.preventDefault();\n this.toggleDropdown(false);\n return;\n }\n setTimeout(() => {\n const value = this.contentEditor.innerText;\n this.emitInputChange();\n if (value.includes(this.tagIdentifier)) {\n this.insertNodes(this.contentEditor, this.contentEditor.childNodes);\n this.filterOptions();\n this.toggleDropdown(true);\n } else {\n this.toggleDropdown(false);\n }\n }, 10);\n }\n\n filterOptions() {\n this.filteredOptions = this.options;\n if (!!this.options.length && !!this.filteredValue) {\n this.filteredOptions = this.options.filter(item =>\n item.includes(this.filteredValue)\n );\n } else {\n this.filteredOptions = this.options;\n }\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : this.setError(option);\n });\n return result;\n }\n\n setError(option: any) {\n this.error = true;\n return (\n '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>'\n );\n }\n\n emitInputChange(): void {\n if (this.contentEditor) {\n let fieldValue = this.contentEditor.innerHTML;\n if (this.contentEditor.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/&nbsp;/g, ' ');\n fieldValue = fieldValue.replace('<br>', '');\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n }\n\n insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag?: Node) {\n [...childNodes].forEach((node: Node, index: number) => {\n if (node.hasChildNodes()) {\n if (autoOptionsTag) {\n this.insertNodes(node, node.childNodes, autoOptionsTag);\n } else {\n this.insertNodes(node, node.childNodes);\n }\n } else {\n if (node.nodeValue?.includes(this.tagIdentifier)) {\n if (autoOptionsTag) {\n parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(\n this.tagIdentifier + this.filteredValue,\n ''\n );\n parentNode.childNodes[index].after(autoOptionsTag);\n }\n this.filteredValue =\n parentNode?.childNodes[index]?.nodeValue\n ?.split(this.tagIdentifier)\n .slice(1)\n .join() || '';\n return;\n }\n }\n });\n }\n\n handleOptions(option: any): void {\n this.toggleDropdown(false);\n let autoOptionsTag = document.createElement('span');\n autoOptionsTag.setAttribute('class', 'chips');\n autoOptionsTag.setAttribute('contentEditable', 'false');\n autoOptionsTag.innerText = option;\n this.insertNodes(\n this.contentEditor,\n this.contentEditor.childNodes,\n autoOptionsTag\n );\n this.filteredOptions = this.options;\n this.filteredValue = '';\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}\"\n >\n ${this.filteredOptions &&\n this.filteredOptions.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasError = !!this.error;\n const hasErrorMessage = !!this.errorMessage;\n const readonly = !!this.readonly;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${live(this.openDropdown)}\"\n sync=\"width\"\n strategy=\"fixed\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<span class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"${!readonly}\"\n spellcheck=\"false\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasError || hasErrorMessage,\n 'read-only': readonly,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n ${this.filteredOptions && !!this.filteredOptions.length\n ? this.renderAutoOptions()\n : null}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
@@ -28,6 +28,7 @@ export const styles = css `
28
28
 
29
29
  .nile-error-message__response {
30
30
  color: var(--nile-colors-dark-500);
31
+ margin-top:6px;
31
32
  }
32
33
 
33
34
  .nile-error-message__icon {
@@ -1 +1 @@
1
- {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n word-break: break-all;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-500);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n }\n\n .nile-error-message__response-expanded {\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: 100px;\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 12px;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n word-break: break-all;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-500);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n margin-top:6px;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n }\n\n .nile-error-message__response-expanded {\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: 100px;\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 12px;\n }\n`;\n\nexport default [styles];\n"]}
@@ -7,6 +7,7 @@ export declare class NileErrorMessage extends LitElement {
7
7
  static get styles(): CSSResultArray;
8
8
  errorMessage: string;
9
9
  errorResponse: string;
10
+ errorResponseLong: string;
10
11
  isExpanded: boolean;
11
12
  private readonly MAX_LENGTH;
12
13
  /**
@@ -48,14 +48,18 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
48
48
 
49
49
 
50
50
  ${this.errorResponse
51
- ? html ` <span class="nile-error-message__response"
52
- >${this.getTruncatedResponse()}</span
53
- >
51
+ ? html `
52
+ <div class="nile-error-message__response">
53
+ ${this.errorResponse}
54
+ ${this.errorResponseLong
55
+ ? html `
54
56
  <span
55
- class="nile-error-message__more-button"
56
- @click=${this.toggleExpanded}
57
- >${this.isExpanded ? 'View Less' : 'View More'}</span
58
- >`
57
+ class="nile-error-message__more-button"
58
+ @click=${this.toggleExpanded}
59
+ >${this.isExpanded ? 'View Less' : 'View More'}</span
60
+ >` : ``}
61
+ </div>
62
+ `
59
63
  : ``}
60
64
 
61
65
  <div
@@ -63,7 +67,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
63
67
  ? 'expanded'
64
68
  : 'collapsed'}"
65
69
  >
66
- ${this.errorResponse}
70
+ ${this.errorResponseLong}
67
71
  </div>
68
72
  </div>
69
73
  `;
@@ -75,6 +79,9 @@ __decorate([
75
79
  __decorate([
76
80
  property({ type: String })
77
81
  ], NileErrorMessage.prototype, "errorResponse", void 0);
82
+ __decorate([
83
+ property({ type: String })
84
+ ], NileErrorMessage.prototype, "errorResponseLong", void 0);
78
85
  __decorate([
79
86
  property({ type: Boolean })
80
87
  ], NileErrorMessage.prototype, "isExpanded", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAO1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IAsD5C,CAAC;IAtEQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;YAC/C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SACjE;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;mBACG,IAAI,CAAC,oBAAoB,EAAE;;;;yBAIrB,IAAI,CAAC,cAAc;mBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;gBAC9C;YACN,CAAC,CAAC,EAAE;;;yDAG2C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,aAAa;;;KAGzB,CAAC;IACJ,CAAC;CACF,CAAA;AAhEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAdjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuE5B;SAvEY,gBAAgB","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /**\n * Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n */\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /**\n * Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"#E5434D\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html` <span class=\"nile-error-message__response\"\n >${this.getTruncatedResponse()}</span\n >\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}</span\n >`\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponse}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA0D5C,CAAC;IA9EQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;YAC/C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SACjE;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;cAC9C,CAAA,CAAC,CAAA,EAAE;;aAEJ;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AAxEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+E5B;SA/EY,gBAAgB","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n // Extended error information\n @property({ type: String })\n errorResponseLong: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /**\n * Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n */\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /**\n * Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"#E5434D\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}</span\n >`:``}\n </div>\n `\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponseLong}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}
@@ -24,8 +24,18 @@ export const styles = css `
24
24
  line-height: 12px;
25
25
  letter-spacing: 0.2px;
26
26
  margin-top: 6px;
27
+ margin-right: 4px;
28
+ width: auto;
27
29
  }
28
30
 
31
+ .nile-form-help-text__more-button {
32
+ display: inline-flex;
33
+ gap: 4px;
34
+ color: var(--nile-colors-primary-600);
35
+ cursor: pointer;
36
+ white-space: nowrap;
37
+ align-items: center
38
+ }
29
39
  `;
30
40
  export default [styles];
31
41
  //# sourceMappingURL=nile-form-help-text.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * FormHelpText CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n .nile-form-help-text {\n display: flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n }\n\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * FormHelpText CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n .nile-form-help-text {\n display: flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n margin-right: 4px;\n width: auto;\n }\n\n .nile-form-help-text__more-button {\n display: inline-flex;\n gap: 4px;\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n align-items: center\n }\n`;\n\nexport default [styles];\n"]}
@@ -17,6 +17,14 @@ export declare class NileFormHelpText extends LitElement {
17
17
  * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
18
18
  */
19
19
  static get styles(): CSSResultArray;
20
+ isExpanded: boolean;
21
+ fullText: string;
22
+ displayedText: string;
23
+ slotElement: HTMLSlotElement;
24
+ connectedCallback(): void;
25
+ firstUpdated(): void;
26
+ handleSlotChange(): void;
27
+ toggleExpanded(): void;
20
28
  /**
21
29
  * Render method
22
30
  * @slot This is a slot test
@@ -5,8 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { __decorate } from "tslib";
8
- import { LitElement, html } from 'lit-element';
9
- import { customElement } from 'lit/decorators.js';
8
+ import { LitElement, html, property } from 'lit-element';
9
+ import { customElement, query } from 'lit/decorators.js';
10
10
  import { styles } from './nile-form-help-text.css';
11
11
  /**
12
12
  * Nile icon component.
@@ -15,6 +15,12 @@ import { styles } from './nile-form-help-text.css';
15
15
  *
16
16
  */
17
17
  let NileFormHelpText = class NileFormHelpText extends LitElement {
18
+ constructor() {
19
+ super(...arguments);
20
+ this.isExpanded = false;
21
+ this.fullText = '';
22
+ this.displayedText = '';
23
+ }
18
24
  /**
19
25
  * The styles for FormHelpText
20
26
  * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -22,6 +28,25 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
22
28
  static get styles() {
23
29
  return [styles];
24
30
  }
31
+ connectedCallback() {
32
+ super.connectedCallback();
33
+ requestAnimationFrame(() => {
34
+ this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
35
+ });
36
+ }
37
+ firstUpdated() {
38
+ this.handleSlotChange();
39
+ }
40
+ handleSlotChange() {
41
+ const nodes = this.slotElement.assignedNodes({ flatten: true });
42
+ const textContent = nodes.map(node => node.textContent).join('');
43
+ this.fullText = textContent;
44
+ this.displayedText = textContent.length > 50 ? `${textContent.substring(0, 47)}...` : textContent;
45
+ }
46
+ toggleExpanded() {
47
+ this.isExpanded = !this.isExpanded;
48
+ this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, 47)}...`;
49
+ }
25
50
  /* #endregion */
26
51
  /* #region Methods */
27
52
  /**
@@ -29,13 +54,38 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
29
54
  * @slot This is a slot test
30
55
  */
31
56
  render() {
57
+ const showMoreButton = this.fullText.length > 50;
58
+ const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
32
59
  return html `
33
- <div class="nile-form-help-text">
34
- <slot> </slot>
35
- </div>
36
- `;
60
+ <div class="nile-form-help-text" part="container">
61
+ <slot hidden></slot>
62
+ <div part="text">${this.displayedText}
63
+ ${showMoreButton ? html `
64
+ <span
65
+ class="nile-form-help-text__more-button"
66
+ part="toggle-button"
67
+ @click=${this.toggleExpanded}
68
+ >${this.isExpanded ? 'View Less' : 'View More'}
69
+ <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
70
+ </span>
71
+ ` : ''}
72
+ </div>
73
+ </div>
74
+ `;
37
75
  }
38
76
  };
77
+ __decorate([
78
+ property({ type: Boolean })
79
+ ], NileFormHelpText.prototype, "isExpanded", void 0);
80
+ __decorate([
81
+ property({ type: String })
82
+ ], NileFormHelpText.prototype, "fullText", void 0);
83
+ __decorate([
84
+ property({ type: String })
85
+ ], NileFormHelpText.prototype, "displayedText", void 0);
86
+ __decorate([
87
+ query('slot')
88
+ ], NileFormHelpText.prototype, "slotElement", void 0);
39
89
  NileFormHelpText = __decorate([
40
90
  customElement('nile-form-help-text')
41
91
  ], NileFormHelpText);
@@ -1 +1 @@
1
- {"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAA2C,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAE/C;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2B5B;SA3BY,gBAAgB;AA6B7B,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n\n\t/**\n\t * The styles for FormHelpText\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n <div class=\"nile-form-help-text\">\n <slot> </slot>\n </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-help-text': NileFormHelpText;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n /**\n * The styles for FormHelpText\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n @property({ type: String })\n fullText: string = '';\n\n @property({ type: String })\n displayedText: string = '';\n\n @query('slot')\n slotElement!: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n requestAnimationFrame(() => {\n this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));\n });\n }\n\n firstUpdated() {\n this.handleSlotChange();\n }\n\n handleSlotChange() {\n const nodes = this.slotElement.assignedNodes({flatten: true});\n const textContent = nodes.map(node => node.textContent).join('');\n this.fullText = textContent;\n this.displayedText = textContent.length > 50 ? `${textContent.substring(0, 47)}...` : textContent;\n }\n\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, 47)}...`;\n }\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n const showMoreButton = this.fullText.length > 50;\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-form-help-text\" part=\"container\">\n <slot hidden></slot>\n <div part=\"text\">${this.displayedText}\n ${showMoreButton ? html`\n <span\n class=\"nile-form-help-text__more-button\"\n part=\"toggle-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span>\n ` : ''}\n </div>\n </div>\n `;\n }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-help-text': NileFormHelpText;\n }\n}\n"]}
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Do not edit directly
3
+ */
4
+ declare const _default: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMi4zNCI+PHBhdGggZD0ibTEwLjM4LDYuNTloLjM4di0uODRoLS4zOGMtLjg2LDAtMS4zMi0uNS0xLjMyLTEuMzZ2LTIuMzdjMC0uNDctLjEtLjg3LS4zLTEuMTloMHMwLS4wMi0uMDEtLjAyaDBjLS4zMy0uNTEtLjkzLS44MS0xLjgtLjgxaC0uOTJ2Ljg0aC43NWMuOTMsMCwxLjI1LjQ0LDEuMjUsMS4yM3YyLjQxYzAsLjk0LjQyLDEuNTUsMS4zMSwxLjctLjg5LjE1LTEuMzEuNzUtMS4zMSwxLjd2Mi40MWMwLC43OC0uMzIsMS4yMy0xLjI1LDEuMjNoLS43NXYuODRoLjkyYy44NywwLDEuNDctLjMsMS44LS44MmgwczAtLjAxLjAxLS4wMmgwYy4yLS4zMi4zLS43Mi4zLTEuMTl2LTIuMzdjMC0uODYuNDYtMS4zNiwxLjMyLTEuMzZaIi8+PHBhdGggZD0ibTE1LjYyLDUuNzVjLS44NiwwLTEuMzItLjUtMS4zMi0xLjM2di0yLjM3YzAtMS4yNC0uNy0yLjAyLTIuMTItMi4wMmgtLjJjLjI1LjI2LjQzLjU3LjU0Ljg5LjU0LjE0Ljc1LjU1Ljc1LDEuMTd2Mi40MWMwLC45NC40MiwxLjU1LDEuMzEsMS43LS44OS4xNS0xLjMxLjc1LTEuMzEsMS43djIuNDFjMCwuNjItLjIsMS4wMy0uNzUsMS4xNy0uMTIuMzMtLjI5LjYzLS41NC44OWguMmMxLjQxLDAsMi4xMi0uNzgsMi4xMi0yLjAydi0yLjM3YzAtLjg2LjQ2LTEuMzYsMS4zMi0xLjM2aC4zOHYtLjg0aC0uMzhaIi8+PHBhdGggZD0ibTEzLjEsNi41OWguMzh2LS44NGgtLjM4Yy0uODYsMC0xLjMyLS41LTEuMzItMS4zNnYtMi4zN2MwLTEuMjQtLjctMi4wMi0yLjEyLTIuMDJoLS40OWMuMjQuMjUuNDEuNTMuNTIuODQuNzguMDYsMS4wNS41LDEuMDUsMS4yMnYyLjQxYzAsLjk0LjQyLDEuNTUsMS4zMSwxLjctLjg5LjE1LTEuMzEuNzUtMS4zMSwxLjd2Mi40MWMwLC43Mi0uMjgsMS4xNi0xLjA1LDEuMjItLjEyLjMxLS4yOS41OS0uNTIuODRoLjQ5YzEuNDEsMCwyLjEyLS43OCwyLjEyLTIuMDJ2LTIuMzdjMC0uODYuNDYtMS4zNiwxLjMyLTEuMzZaIi8+PHBhdGggZD0ibTEuNywyLjAydjIuMzdjMCwuODYtLjQ2LDEuMzYtMS4zMiwxLjM2aC0uMzh2Ljg0aC4zOGMuODYsMCwxLjMyLjUsMS4zMiwxLjM2djIuMzdjMCwxLjI0LjcsMi4wMiwyLjEyLDIuMDJoLjkydi0uODRoLS43NWMtLjkzLDAtMS4yNS0uNDQtMS4yNS0xLjIzdi0yLjQxYzAtLjk0LS40Mi0xLjU1LTEuMzEtMS43Ljg5LS4xNSwxLjMxLS43NSwxLjMxLTEuN3YtMi40MWMwLS43OC4zMi0xLjIzLDEuMjUtMS4yM2guNzV2LS44NGgtLjkyQzIuNCwwLDEuNy43OCwxLjcsMi4wMloiLz48L3N2Zz4=";
5
+ export default _default;