@nyaruka/temba-components 0.108.7 → 0.109.0

package/static/svg/work/traced/zap-fast.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.212 2.440 C 15.636 3.081,9.418 11.876,9.163 12.409 C 8.732 13.313,9.241 14.256,10.271 14.462 C 10.540 14.516,11.682 14.560,12.810 14.560 L 14.860 14.560 14.778 15.080 C 14.395 17.517,14.007 20.972,14.082 21.290 C 14.132 21.504,14.372 21.776,14.615 21.893 C 14.990 22.073,15.112 22.069,15.422 21.866 C 15.816 21.609,22.435 12.433,22.839 11.585 C 23.130 10.977,23.018 10.381,22.528 9.924 C 22.210 9.628,21.970 9.600,19.739 9.600 C 18.397 9.600,17.268 9.546,17.231 9.480 C 17.193 9.414,17.332 8.136,17.540 6.640 C 17.988 3.411,18.027 2.642,17.761 2.321 C 17.455 1.953,16.590 2.019,16.212 2.440 M3.291 5.851 C 2.918 6.225,2.973 6.975,3.396 7.271 C 3.684 7.473,4.271 7.520,6.498 7.520 C 8.910 7.520,9.288 7.485,9.602 7.230 C 9.999 6.909,10.077 6.222,9.760 5.840 C 9.458 5.476,3.657 5.486,3.291 5.851 M15.212 8.792 C 14.972 10.343,14.995 10.963,15.304 11.220 C 15.492 11.377,16.276 11.463,18.024 11.520 L 20.481 11.600 18.601 14.233 C 17.406 15.908,16.703 16.767,16.669 16.592 C 16.640 16.440,16.693 15.818,16.788 15.208 C 17.028 13.657,17.005 13.037,16.696 12.780 C 16.508 12.623,15.724 12.537,13.976 12.480 L 11.519 12.400 13.399 9.767 C 14.594 8.092,15.297 7.233,15.331 7.408 C 15.360 7.560,15.307 8.182,15.212 8.792 M1.280 11.360 C 1.104 11.536,0.960 11.824,0.960 12.000 C 0.960 12.176,1.104 12.464,1.280 12.640 C 1.575 12.935,1.813 12.960,4.311 12.960 C 6.931 12.960,7.030 12.948,7.271 12.604 C 7.606 12.126,7.584 11.744,7.200 11.360 C 6.906 11.066,6.667 11.040,4.240 11.040 C 1.813 11.040,1.574 11.066,1.280 11.360 M2.916 16.729 C 2.504 17.017,2.443 17.699,2.787 18.169 C 2.999 18.459,3.231 18.480,6.221 18.480 C 8.997 18.480,9.464 18.444,9.694 18.214 C 10.075 17.833,10.029 17.116,9.602 16.770 C 9.286 16.513,8.902 16.480,6.258 16.480 C 3.814 16.480,3.207 16.525,2.916 16.729 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/zap-fast.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 17.5H3.5M6.5 12H2M9 6.5H4M17 3L10.4036 12.235C10.1116 12.6438 9.96562 12.8481 9.97194 13.0185C9.97744 13.1669 10.0486 13.3051 10.1661 13.3958C10.3011 13.5 10.5522 13.5 11.0546 13.5H16L15 21L21.5964 11.765C21.8884 11.3562 22.0344 11.1519 22.0281 10.9815C22.0226 10.8331 21.9514 10.6949 21.8339 10.6042C21.6989 10.5 21.4478 10.5 20.9454 10.5H16L17 3Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/temba-modules.ts

@@ -61,6 +61,7 @@ import { ContactNotepad } from './src/contacts/ContactNotepad';
 import { OutboxMonitor } from './src/outboxmonitor/OutboxMonitor';
 import { ProgressBar } from './src/progress/ProgressBar';
 import { StartProgress } from './src/progress/StartProgress';
+import { ShortcutList } from './src/list/ShortcutList';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -132,3 +133,4 @@ addCustomElement('temba-contact-notepad', ContactNotepad);
 addCustomElement('temba-outbox-monitor', OutboxMonitor);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);
+addCustomElement('temba-shortcuts', ShortcutList);

package/test/temba-compose.test.ts

@@ -1,7 +1,6 @@
 import { assert, expect } from '@open-wc/testing';
 import { Compose } from '../src/compose/Compose';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
-import { Button } from '../src/button/Button';
 import { Completion } from '../src/completion/Completion';
 import { DEFAULT_MEDIA_ENDPOINT } from '../src/utils';
 import { Attachment } from '../src/interfaces';
@@ -265,10 +264,9 @@ describe('temba-compose chatbox', () => {
       button: true
     });
     await updateComponent(compose, getValidText());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-and-click-send',
       getClip(compose)
@@ -383,13 +381,14 @@ describe('temba-compose attachments', () => {
   it('attachments with success uploaded files and click send', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true
+      chatbox: true
     });
     await updateComponent(compose, null, getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
     await assertScreenshot(
       'compose/attachments-with-success-files-and-click-send',
       getClip(compose)
@@ -399,13 +398,12 @@ describe('temba-compose attachments', () => {
   it('attachments with success and failure uploaded files and click send', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true
+      chatbox: true
     });
     await updateComponent(compose, null, getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/attachments-with-all-files-and-click-send',
       getClip(compose)
@@ -522,10 +520,9 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       button: true
     });
     updateComponent(compose, getValidText());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-no-files-and-click-send',
       getClip(compose)
@@ -613,10 +610,9 @@ describe('temba-compose chatbox no text and attachments with files', () => {
       button: true
     });
     await updateComponent(compose, null, getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-no-text-attachments-with-success-files-and-click-send',
       getClip(compose)
@@ -630,10 +626,9 @@ describe('temba-compose chatbox no text and attachments with files', () => {
       button: true
     });
     await updateComponent(compose, null, getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-no-text-attachments-with-all-files-and-click-send',
       getClip(compose)
@@ -707,10 +702,9 @@ describe('temba-compose chatbox with text and attachments with files', () => {
       button: true
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-with-success-files-and-click-send',
       getClip(compose)
@@ -724,10 +718,9 @@ describe('temba-compose chatbox with text and attachments with files', () => {
       button: true
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-with-all-files-and-click-send',
       getClip(compose)

package/test/temba-contact-chat.test.ts

@@ -1,5 +1,4 @@
 import { useFakeTimers } from 'sinon';
-import { Button } from '../src/button/Button';
 import { Compose } from '../src/compose/Compose';
 import { ContactChat } from '../src/contacts/ContactChat';
 import { Attachment } from '../src/interfaces';
@@ -19,6 +18,7 @@ import {
   getValidText,
   updateComponent
 } from './temba-compose.test';
+import { Completion } from '../src/completion/Completion';
 
 let clock: any;
 mockNow('2021-03-31T00:31:00.000-00:00');
@@ -160,10 +160,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
     };
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-no-attachments-success',
@@ -193,10 +192,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-no-attachments-failure',
@@ -243,10 +241,9 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-attachments-no-text-success',
@@ -275,10 +272,9 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-attachments-no-text-failure',
@@ -319,10 +315,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     };
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-and-attachments-success',
@@ -352,10 +347,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-and-attachments-failure-text',
@@ -385,10 +379,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-and-attachments-failure-attachments',
@@ -420,10 +413,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-and-attachments-failure-text-and-attachments',
@@ -450,10 +442,9 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
       response_status
     );
 
-    const send = compose.shadowRoot.querySelector(
-      'temba-button#send-button'
-    ) as Button;
-    send.click();
+    // press enter
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
     await assertScreenshot(
       'contacts/compose-text-and-attachments-failure-generic',

package/test-assets/store/shortcuts.json

@@ -0,0 +1,14 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "name": "Rating",
+      "text": "How am I doing? Please review me on a scale of 1 to 5."
+    },
+    {
+      "name": "Busy",
+      "text": "Sorry, we are busy right now. We are trying to step up our spotted rabbit breeding program."
+    }
+  ]
+}

package/static/svg/work/traced/message-dots-circle.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.520 2.296 C 7.684 2.770,5.714 3.995,4.405 5.478 C 3.561 6.433,2.529 8.461,2.236 9.740 C 1.915 11.139,1.993 13.395,2.411 14.803 L 2.774 16.024 2.418 18.306 C 2.020 20.863,2.080 21.266,2.924 21.703 C 3.340 21.918,3.609 21.906,5.693 21.582 C 7.913 21.236,8.035 21.233,8.861 21.493 C 10.810 22.107,13.328 22.116,15.120 21.516 C 17.600 20.684,19.853 18.721,20.935 16.449 C 21.730 14.779,21.958 13.786,21.958 12.000 C 21.958 10.217,21.730 9.222,20.940 7.561 C 19.891 5.358,17.697 3.412,15.269 2.532 C 14.089 2.104,10.787 1.969,9.520 2.296 M14.093 4.293 C 17.050 5.065,19.398 7.695,19.867 10.760 C 20.268 13.373,19.492 15.730,17.612 17.618 C 15.878 19.358,13.943 20.110,11.600 19.955 C 10.896 19.908,9.840 19.707,9.254 19.508 L 8.189 19.147 6.254 19.466 C 4.519 19.753,4.320 19.760,4.318 19.533 C 4.318 19.394,4.439 18.508,4.589 17.564 C 4.859 15.858,4.859 15.841,4.504 14.759 C 3.487 11.656,4.150 8.621,6.331 6.393 C 7.804 4.888,9.881 4.018,12.000 4.018 C 12.572 4.018,13.514 4.142,14.093 4.293 M6.503 10.952 C 5.925 11.489,5.910 12.485,6.473 13.047 C 7.374 13.948,8.960 13.280,8.960 12.000 C 8.960 10.722,7.447 10.077,6.503 10.952 M10.982 10.982 C 10.065 11.899,10.703 13.440,12.000 13.440 C 13.297 13.440,13.935 11.899,13.018 10.982 C 12.438 10.401,11.562 10.401,10.982 10.982 M15.462 10.982 C 14.532 11.911,15.184 13.440,16.509 13.440 C 17.379 13.440,17.920 12.888,17.920 12.000 C 17.920 10.683,16.393 10.051,15.462 10.982 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/message-dots-circle.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 12H7.51M12 12H12.01M16.5 12H16.51M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 13.1971 3.23374 14.3397 3.65806 15.3845C3.73927 15.5845 3.77988 15.6845 3.798 15.7653C3.81572 15.8443 3.8222 15.9028 3.82221 15.9839C3.82222 16.0667 3.80718 16.1569 3.77711 16.3374L3.18413 19.8952C3.12203 20.2678 3.09098 20.4541 3.14876 20.5888C3.19933 20.7067 3.29328 20.8007 3.41118 20.8512C3.54589 20.909 3.73218 20.878 4.10476 20.8159L7.66265 20.2229C7.84309 20.1928 7.9333 20.1778 8.01613 20.1778C8.09715 20.1778 8.15566 20.1843 8.23472 20.202C8.31554 20.2201 8.41552 20.2607 8.61549 20.3419C9.6603 20.7663 10.8029 21 12 21ZM8 12C8 12.2761 7.77614 12.5 7.5 12.5C7.22386 12.5 7 12.2761 7 12C7 11.7239 7.22386 11.5 7.5 11.5C7.77614 11.5 8 11.7239 8 12ZM12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12ZM17 12C17 12.2761 16.7761 12.5 16.5 12.5C16.2239 12.5 16 12.2761 16 12C16 11.7239 16.2239 11.5 16.5 11.5C16.7761 11.5 17 11.7239 17 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>