@nyaruka/temba-components 0.58.8 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/.devcontainer/devcontainer.json +8 -1
  2. package/CHANGELOG.md +15 -0
  3. package/dist/{82b805ce.js → 0ee54bae.js} +54 -55
  4. package/dist/index.js +54 -55
  5. package/dist/static/svg/index.svg +1 -1
  6. package/dist/sw.js +1 -1
  7. package/dist/sw.js.map +1 -1
  8. package/dist/templates/components-body.html +1 -1
  9. package/dist/templates/components-head.html +1 -1
  10. package/out-tsc/src/compose/Compose.js +59 -24
  11. package/out-tsc/src/compose/Compose.js.map +1 -1
  12. package/out-tsc/src/contacts/ContactHistory.js +3 -1
  13. package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
  14. package/out-tsc/src/contacts/events.js +47 -52
  15. package/out-tsc/src/contacts/events.js.map +1 -1
  16. package/out-tsc/src/interfaces.js.map +1 -1
  17. package/out-tsc/src/vectoricon/index.js +4 -1
  18. package/out-tsc/src/vectoricon/index.js.map +1 -1
  19. package/out-tsc/test/temba-compose.test.js +9 -9
  20. package/out-tsc/test/temba-compose.test.js.map +1 -1
  21. package/package.json +2 -2
  22. package/src/compose/Compose.ts +57 -24
  23. package/src/contacts/ContactHistory.ts +4 -0
  24. package/src/contacts/events.ts +77 -53
  25. package/src/interfaces.ts +0 -1
  26. package/src/vectoricon/index.ts +4 -1
  27. package/static/svg/index.svg +1 -1
  28. package/static/svg/work/traced/message-check-circle.svg +1 -0
  29. package/static/svg/work/traced/message-notification-circle.svg +1 -0
  30. package/static/svg/work/traced/message-x-circle.svg +1 -0
  31. package/static/svg/work/used/message-check-circle.svg +3 -0
  32. package/static/svg/work/used/message-notification-circle.svg +3 -0
  33. package/static/svg/work/used/message-x-circle.svg +3 -0
  34. package/test/temba-compose.test.ts +11 -17
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.840 2.379 C 8.309 2.819,7.213 3.500,5.826 4.876 C 4.428 6.263,3.729 7.450,3.283 9.194 C 2.965 10.442,2.971 12.441,3.298 13.840 L 3.559 14.960 2.500 16.973 C 1.383 19.095,1.238 19.715,1.720 20.310 C 2.181 20.879,2.908 20.931,5.920 20.610 C 8.703 20.314,8.728 20.314,9.931 20.636 C 11.396 21.028,13.453 21.062,14.806 20.717 C 16.548 20.272,17.737 19.572,19.126 18.174 C 21.174 16.113,21.933 14.317,21.947 11.501 C 21.956 9.707,21.683 8.598,20.830 6.970 C 19.715 4.840,17.308 2.938,14.952 2.325 C 13.682 1.994,11.083 2.021,9.840 2.379 M13.937 4.163 C 15.338 4.429,16.716 5.171,17.773 6.227 C 20.699 9.153,20.700 13.869,17.776 16.780 C 15.671 18.875,13.154 19.462,10.063 18.578 C 9.048 18.288,8.921 18.287,6.425 18.548 C 5.003 18.697,3.840 18.794,3.840 18.764 C 3.840 18.733,4.236 17.967,4.720 17.061 C 5.613 15.388,5.748 14.810,5.437 13.991 C 5.347 13.755,5.206 13.084,5.123 12.501 C 4.791 10.156,5.539 7.901,7.200 6.240 C 9.010 4.430,11.423 3.686,13.937 4.163 M13.579 10.027 L 11.531 12.054 10.732 11.307 C 10.150 10.763,9.804 10.560,9.456 10.560 C 8.941 10.560,8.480 11.038,8.480 11.573 C 8.480 11.930,10.637 14.211,11.169 14.417 C 11.750 14.641,12.209 14.299,14.680 11.801 C 16.632 9.827,16.960 9.424,16.960 8.997 C 16.960 8.457,16.491 8.000,15.938 8.000 C 15.755 8.000,14.788 8.830,13.579 10.027 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.021 2.334 C 8.509 2.700,7.243 3.467,5.826 4.874 C 4.428 6.263,3.728 7.452,3.283 9.194 C 2.965 10.442,2.971 12.441,3.298 13.840 L 3.559 14.960 2.500 16.973 C 1.383 19.095,1.238 19.715,1.720 20.310 C 2.181 20.879,2.908 20.931,5.920 20.610 C 8.703 20.314,8.728 20.314,9.931 20.636 C 11.396 21.028,13.453 21.062,14.806 20.717 C 16.538 20.274,17.737 19.571,19.139 18.174 C 20.546 16.772,21.240 15.616,21.669 13.964 C 22.131 12.179,21.900 11.360,20.932 11.360 C 20.361 11.360,20.062 11.777,19.842 12.880 C 19.308 15.553,17.225 17.911,14.735 18.661 C 13.499 19.034,11.414 19.005,10.065 18.596 C 9.033 18.284,8.957 18.283,6.425 18.548 C 5.003 18.697,3.840 18.794,3.840 18.764 C 3.840 18.733,4.236 17.967,4.720 17.061 C 5.613 15.388,5.748 14.810,5.437 13.991 C 5.347 13.755,5.209 13.108,5.131 12.554 C 4.577 8.642,7.219 4.938,11.120 4.158 C 12.238 3.935,12.640 3.639,12.640 3.040 C 12.640 2.113,11.834 1.895,10.021 2.334 M16.178 2.501 C 12.873 4.148,13.585 9.231,17.211 9.875 C 20.067 10.383,22.426 7.988,21.850 5.166 C 21.334 2.634,18.542 1.323,16.178 2.501 M18.895 4.248 C 19.489 4.555,19.999 5.364,19.999 6.000 C 19.999 6.991,18.990 8.000,18.000 8.000 C 17.025 8.000,16.002 6.993,16.001 6.032 C 15.999 5.027,16.992 4.002,17.968 4.001 C 18.214 4.000,18.631 4.111,18.895 4.248 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.840 2.379 C 8.309 2.819,7.213 3.500,5.826 4.876 C 4.428 6.263,3.729 7.450,3.283 9.194 C 2.965 10.442,2.971 12.441,3.298 13.840 L 3.559 14.960 2.500 16.973 C 1.383 19.095,1.238 19.715,1.720 20.310 C 2.181 20.879,2.908 20.931,5.920 20.610 C 8.703 20.314,8.728 20.314,9.931 20.636 C 11.396 21.028,13.453 21.062,14.806 20.717 C 16.548 20.272,17.737 19.572,19.126 18.174 C 21.174 16.113,21.933 14.317,21.947 11.501 C 21.956 9.707,21.683 8.598,20.830 6.970 C 19.715 4.840,17.308 2.938,14.952 2.325 C 13.682 1.994,11.083 2.021,9.840 2.379 M13.937 4.163 C 15.338 4.429,16.716 5.171,17.773 6.227 C 20.699 9.153,20.700 13.869,17.776 16.780 C 15.671 18.875,13.154 19.462,10.063 18.578 C 9.048 18.288,8.921 18.287,6.425 18.548 C 5.003 18.697,3.840 18.794,3.840 18.764 C 3.840 18.733,4.236 17.967,4.720 17.061 C 5.613 15.388,5.748 14.810,5.437 13.991 C 5.347 13.755,5.206 13.084,5.123 12.501 C 4.791 10.156,5.539 7.901,7.200 6.240 C 9.010 4.430,11.423 3.686,13.937 4.163 M9.292 8.422 C 9.109 8.653,8.960 8.948,8.960 9.077 C 8.960 9.206,9.440 9.808,10.026 10.416 L 11.092 11.520 10.026 12.624 C 9.440 13.232,8.960 13.847,8.960 13.992 C 8.960 14.332,9.668 15.040,10.008 15.040 C 10.153 15.040,10.768 14.560,11.376 13.974 L 12.480 12.908 13.584 13.974 C 14.192 14.560,14.794 15.040,14.923 15.040 C 15.338 15.040,16.000 14.395,16.000 13.991 C 16.000 13.737,15.649 13.234,14.967 12.511 L 13.934 11.416 14.967 10.393 C 16.081 9.289,16.226 8.866,15.680 8.320 C 15.134 7.774,14.711 7.919,13.607 9.033 L 12.584 10.066 11.489 9.033 C 10.259 7.873,9.819 7.751,9.292 8.422 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9.49962 11.5L11.4996 13.5L15.9996 9M12.4996 20C17.194 20 20.9996 16.1944 20.9996 11.5C20.9996 6.80558 17.194 3 12.4996 3C7.8052 3 3.99962 6.80558 3.99962 11.5C3.99962 12.45 4.15547 13.3636 4.443 14.2166C4.55119 14.5376 4.60529 14.6981 4.61505 14.8214C4.62469 14.9432 4.6174 15.0286 4.58728 15.1469C4.55677 15.2668 4.48942 15.3915 4.35472 15.6408L2.71906 18.6684C2.48575 19.1002 2.36909 19.3161 2.3952 19.4828C2.41794 19.6279 2.50337 19.7557 2.6288 19.8322C2.7728 19.9201 3.01692 19.8948 3.50517 19.8444L8.62619 19.315C8.78127 19.299 8.85881 19.291 8.92949 19.2937C8.999 19.2963 9.04807 19.3029 9.11586 19.3185C9.18478 19.3344 9.27145 19.3678 9.44478 19.4345C10.3928 19.7998 11.4228 20 12.4996 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.707 3.03647C7.38421 3.43621 3.99962 7.07285 3.99962 11.5C3.99962 12.45 4.15547 13.3636 4.44299 14.2166C4.55119 14.5376 4.60529 14.6981 4.61505 14.8214C4.62469 14.9432 4.6174 15.0286 4.58728 15.1469C4.55677 15.2668 4.48942 15.3915 4.35472 15.6408L2.71906 18.6684C2.48575 19.1002 2.36909 19.3161 2.3952 19.4828C2.41794 19.6279 2.50337 19.7557 2.6288 19.8322C2.7728 19.9201 3.01692 19.8948 3.50517 19.8444L8.62619 19.315C8.78121 19.299 8.85882 19.291 8.92949 19.2937C8.999 19.2963 9.04807 19.3029 9.11586 19.3185C9.18478 19.3344 9.27145 19.3678 9.44478 19.4345C10.3928 19.7998 11.4228 20 12.4996 20C16.9304 20 20.5694 16.6098 20.9641 12.2819M20.1209 3.87868C21.2925 5.05025 21.2925 6.94975 20.1209 8.12132C18.9494 9.29289 17.0499 9.29289 15.8783 8.12132C14.7067 6.94975 14.7067 5.05025 15.8783 3.87868C17.0499 2.70711 18.9494 2.70711 20.1209 3.87868Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9.99962 9L14.9996 14M14.9996 9L9.99962 14M12.4996 20C17.194 20 20.9996 16.1944 20.9996 11.5C20.9996 6.80558 17.194 3 12.4996 3C7.8052 3 3.99962 6.80558 3.99962 11.5C3.99962 12.45 4.15547 13.3636 4.443 14.2166C4.55119 14.5376 4.60529 14.6981 4.61505 14.8214C4.62469 14.9432 4.6174 15.0286 4.58728 15.1469C4.55677 15.2668 4.48942 15.3915 4.35472 15.6408L2.71906 18.6684C2.48575 19.1002 2.36909 19.3161 2.3952 19.4828C2.41794 19.6279 2.50337 19.7557 2.6288 19.8322C2.7728 19.9201 3.01692 19.8948 3.50517 19.8444L8.62619 19.315C8.78127 19.299 8.85881 19.291 8.92949 19.2937C8.999 19.2963 9.04807 19.3029 9.11586 19.3185C9.18478 19.3344 9.27145 19.3678 9.44478 19.4345C10.3928 19.7998 11.4228 20 12.4996 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -24,7 +24,7 @@ export const updateComponent = async (
24
24
  attachments?: Attachment[],
25
25
  errorAttachments?: Attachment[]
26
26
  ): Promise<void> => {
27
- compose.currentText = text ? text : '';
27
+ compose.initialText = text ? text : '';
28
28
  compose.currentAttachments = attachments ? attachments : [];
29
29
  compose.failedAttachments = errorAttachments ? errorAttachments : [];
30
30
  await compose.updateComplete;
@@ -276,10 +276,8 @@ describe('temba-compose chatbox', () => {
276
276
  button: true,
277
277
  });
278
278
  await updateComponent(compose, getValidText());
279
- const completion = compose.shadowRoot.querySelector(
280
- 'temba-completion'
281
- ) as Completion;
282
- completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
279
+ const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
280
+ chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
283
281
  await assertScreenshot(
284
282
  'compose/chatbox-with-text-and-hit-enter',
285
283
  getClip(compose)
@@ -548,10 +546,8 @@ describe('temba-compose chatbox with text and attachments no files', () => {
548
546
  button: true,
549
547
  });
550
548
  await updateComponent(compose, getValidText());
551
- const completion = compose.shadowRoot.querySelector(
552
- 'temba-completion'
553
- ) as Completion;
554
- completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
549
+ const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
550
+ chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
555
551
  await assertScreenshot(
556
552
  'compose/chatbox-with-text-attachments-no-files-and-hit-enter',
557
553
  getClip(compose)
@@ -774,10 +770,8 @@ describe('temba-compose chatbox with text and attachments with files', () => {
774
770
  button: true,
775
771
  });
776
772
  await updateComponent(compose, getValidText(), getValidAttachments());
777
- const completion = compose.shadowRoot.querySelector(
778
- 'temba-completion'
779
- ) as Completion;
780
- completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
773
+ const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
774
+ chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
781
775
  await assertScreenshot(
782
776
  'compose/chatbox-with-text-attachments-with-success-files-and-hit-enter',
783
777
  getClip(compose)
@@ -796,10 +790,10 @@ describe('temba-compose chatbox with text and attachments with files', () => {
796
790
  getValidAttachments(),
797
791
  getInvalidAttachments()
798
792
  );
799
- const completion = compose.shadowRoot.querySelector(
800
- 'temba-completion'
801
- ) as Completion;
802
- completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
793
+ const chatbox = compose.shadowRoot.querySelector(
794
+ '.chatbox'
795
+ ) as HTMLInputElement;
796
+ chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
803
797
  const newClip = getClip(compose);
804
798
  await assertScreenshot(
805
799
  'compose/chatbox-with-text-attachments-with-all-files-and-hit-enter',