@nyaruka/temba-components 0.58.1 → 0.58.8

package/static/svg/work/traced/dots-grid.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="M3.931 3.351 C 2.953 3.996,2.722 5.358,3.445 6.217 C 4.250 7.174,5.530 7.245,6.394 6.381 C 8.024 4.751,5.854 2.083,3.931 3.351 M10.864 3.406 C 9.804 4.119,9.742 5.543,10.729 6.489 C 11.136 6.879,11.356 6.960,12.000 6.960 C 12.644 6.960,12.864 6.879,13.271 6.489 C 15.082 4.753,12.940 2.009,10.864 3.406 M17.950 3.364 C 16.872 4.022,16.705 5.481,17.606 6.381 C 18.181 6.957,18.854 7.126,19.594 6.882 C 21.185 6.357,21.465 4.272,20.069 3.351 C 19.463 2.952,18.618 2.957,17.950 3.364 M3.815 10.441 C 2.951 11.171,2.791 12.223,3.406 13.136 C 4.119 14.196,5.543 14.258,6.489 13.271 C 6.882 12.860,6.960 12.647,6.960 11.977 C 6.960 11.256,6.900 11.121,6.362 10.628 C 5.856 10.164,5.648 10.080,5.002 10.081 C 4.446 10.081,4.125 10.179,3.815 10.441 M10.737 10.490 C 9.524 11.511,9.949 13.488,11.471 13.908 C 12.950 14.316,14.313 12.938,13.902 11.450 C 13.540 10.139,11.786 9.607,10.737 10.490 M17.638 10.628 C 17.100 11.121,17.040 11.256,17.040 11.977 C 17.040 12.647,17.118 12.860,17.511 13.271 C 17.770 13.541,18.226 13.830,18.525 13.912 C 20.136 14.357,21.512 12.572,20.728 11.056 C 20.394 10.409,19.799 10.080,18.963 10.080 C 18.357 10.080,18.135 10.172,17.638 10.628 M4.226 17.182 C 3.497 17.508,3.040 18.173,3.040 18.910 C 3.040 20.182,3.832 20.960,5.128 20.960 C 6.445 20.960,7.381 19.407,6.801 18.185 C 6.336 17.205,5.182 16.756,4.226 17.182 M11.280 17.178 C 9.804 17.849,9.575 19.727,10.864 20.594 C 11.534 21.045,12.385 21.066,13.070 20.648 C 13.707 20.259,13.964 19.791,13.964 19.015 C 13.964 17.636,12.491 16.628,11.280 17.178 M18.441 17.073 C 17.937 17.170,17.166 17.988,17.040 18.559 C 16.786 19.716,17.750 20.960,18.900 20.960 C 20.168 20.960,20.960 20.172,20.960 18.910 C 20.960 18.157,20.493 17.496,19.738 17.181 C 19.205 16.958,19.089 16.948,18.441 17.073 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/layers-three-01.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="M6.355 3.692 C 0.868 6.448,0.642 6.611,1.182 7.435 C 1.370 7.721,2.987 8.613,6.564 10.402 C 9.377 11.809,11.823 12.960,12.000 12.960 C 12.177 12.960,14.689 11.776,17.581 10.329 C 22.109 8.065,22.855 7.641,22.944 7.286 C 23.001 7.059,22.971 6.729,22.877 6.554 C 22.624 6.082,12.634 1.117,11.961 1.129 C 11.619 1.134,9.691 2.016,6.355 3.692 M15.999 5.109 L 19.757 7.000 15.879 8.941 L 12.000 10.881 8.121 8.941 L 4.243 7.000 8.001 5.109 C 10.069 4.068,11.868 3.217,12.000 3.217 C 12.132 3.217,13.931 4.068,15.999 5.109 M1.418 11.203 C 1.069 11.407,0.911 12.089,1.122 12.483 C 1.351 12.912,11.371 17.920,12.000 17.920 C 12.706 17.920,22.685 12.892,22.896 12.430 C 23.135 11.904,22.834 11.235,22.298 11.100 C 21.943 11.011,20.975 11.436,16.932 13.454 L 11.998 15.917 7.118 13.478 C 4.435 12.137,2.113 11.042,1.959 11.045 C 1.806 11.048,1.562 11.119,1.418 11.203 M1.292 16.422 C 0.913 16.902,0.895 17.019,1.127 17.454 C 1.358 17.885,11.367 22.880,12.000 22.880 C 12.303 22.880,14.389 21.926,17.606 20.317 C 23.213 17.512,23.408 17.369,22.771 16.515 C 22.592 16.276,22.311 16.053,22.145 16.021 C 21.980 15.989,19.629 17.068,16.921 18.419 L 11.998 20.877 7.118 18.438 C 4.435 17.097,2.100 16.000,1.931 16.000 C 1.762 16.000,1.474 16.190,1.292 16.422 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/dots-grid.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 6C19.5523 6 20 5.55228 20 5C20 4.44772 19.5523 4 19 4C18.4477 4 18 4.44772 18 5C18 5.55228 18.4477 6 19 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 20C5.55228 20 6 19.5523 6 19C6 18.4477 5.55228 18 5 18C4.44772 18 4 18.4477 4 19C4 19.5523 4.44772 20 5 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/layers-three-01.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="M2 12.0001L11.6422 16.8212C11.7734 16.8868 11.839 16.9196 11.9078 16.9325C11.9687 16.9439 12.0313 16.9439 12.0922 16.9325C12.161 16.9196 12.2266 16.8868 12.3578 16.8212L22 12.0001M2 17.0001L11.6422 21.8212C11.7734 21.8868 11.839 21.9196 11.9078 21.9325C11.9687 21.9439 12.0313 21.9439 12.0922 21.9325C12.161 21.9196 12.2266 21.8868 12.3578 21.8212L22 17.0001M2 7.00006L11.6422 2.17895C11.7734 2.11336 11.839 2.08056 11.9078 2.06766C11.9687 2.05622 12.0313 2.05622 12.0922 2.06766C12.161 2.08056 12.2266 2.11336 12.3578 2.17895L22 7.00006L12.3578 11.8212C12.2266 11.8868 12.161 11.9196 12.0922 11.9325C12.0313 11.9439 11.9687 11.9439 11.9078 11.9325C11.839 11.9196 11.7734 11.8868 11.6422 11.8212L2 7.00006Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -27,13 +27,14 @@ describe('temba-contact-tickets', () => {
       /\/api\/v2\/contacts.json\?uuid=24d64810-3315-4ff5-be85-48e3fe055bf9/,
       '/test-assets/contacts/contact-dave-active'
     );
-    loadStore();
   });
 
   it('renders default', async () => {
+    await loadStore();
     const contactDetails: ContactDetails = await getContactDetails({
       contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
     });
+
     assert.instanceOf(contactDetails, ContactDetails);
     await assertScreenshot('contacts/details', getClip(contactDetails));
   });

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

@@ -80,7 +80,7 @@ describe('temba-contact-history', () => {
 
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
-    expect(top).to.equal(565);
+    expect(top).to.equal(571);
     // make sure we actually scrolled to there
     expect(events.scrollTop).to.equal(top);
     await assertScreenshot('contacts/history', getHistoryClip(history));

package/test/utils.test.ts

@@ -11,6 +11,7 @@ import { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';
 import MouseHelper from './MouseHelper';
 import { Store } from '../src/store/Store';
 import { replace, stub } from 'sinon';
+import { CustomEventType } from '../src/interfaces';
 
 export interface CodeMock {
   endpoint: RegExp;

package/test-assets/style.css

@@ -1,8 +1,12 @@
 #mocha {
-  display:none;
+  display: none;
 }
 
-temba-dialog, temba-modax, temba-contact-history, temba-menu, temba-select {
+temba-dialog,
+temba-modax,
+temba-contact-history,
+temba-menu,
+temba-select {
   --transition-speed: 0ms !important;
 }
 
@@ -15,14 +19,16 @@ html input {
   caret-color: transparent;
 }
 
-temba-input, temba-modax, temba-dialog {
+temba-input,
+temba-modax,
+temba-dialog {
   caret-color: transparent;
 }
 
 html {
   --transition-speed: 0ms !important;
   --input-caret: transparent !important;
-  --font-family: 'Arial';
+  --font-family: 'Roboto';
   --primary-rgb: 35, 135, 202;
   --secondary-rgb: 140, 51, 140;
   --tertiary-rgb: 135, 202, 35;
@@ -72,7 +78,7 @@ html {
   --color-text-help: rgba(0, 0, 0, 0.35);
 
   --color-tertiary: rgb(var(--tertiary-rgb));
-  
+
   /* solid overlays with text */
   --color-overlay-dark: rgba(0, 0, 0, 0.2);
   --color-overlay-dark-text: rgba(255, 255, 255, 0.9);
@@ -121,9 +127,9 @@ html {
 
   --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
   --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  
+
   font-size: var(--font-size);
-  font-weight: 300;
+  font-weight: 400;
   font-family: var(--font-family);
   --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
 
@@ -137,14 +143,14 @@ html {
   --help-text-margin-top: 0px;
   --help-text-margin-left: 0.3em;
   --help-text-size: 0.85em;
-  --color-text-help: rgb(120,120,120);
+  --color-text-help: rgb(120, 120, 120);
   --label-size: 14px;
-  
+
   --button-y: 6px;
   --button-x: 14px;
 
   --menu-padding: 1em;
-  --color-automated: rgb(78,205,106);
+  --color-automated: rgb(78, 205, 106);
 }
 
 temba-button {
@@ -155,11 +161,11 @@ temba-button {
 }
 
 temba-button:hover {
-  --button-bg-img: linear-gradient(to bottom, rgba(var(--primary-rgb),.1), transparent, transparent);
+  --button-bg-img: linear-gradient(to bottom, rgba(var(--primary-rgb), .1), transparent, transparent);
 }
 
 temba-button.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0,0,0,.05));
+  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05));
 }
 
 temba-button.light {
@@ -171,18 +177,18 @@ temba-button.light {
 }
 
 temba-button.light:hover {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0,0,0,.001));
+  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .001));
 }
 
 temba-button.light.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0,0,0,.02));
+  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .02));
 }
 
 temba-contact-history {
-  min-height:0;
-  display:flex;
-  flex-grow:1;
-  flex-direction:column;
+  min-height: 0;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
 }
 
 temba-select:focus {
@@ -204,43 +210,57 @@ temba-datepicker {
   font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 400;
-  src: local(''),
-      url('./fonts/roboto-mono-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('./fonts/roboto-mono-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('./fonts/roboto-mono-v12-latin-regular.ttf'),
+    url('./fonts/roboto-mono-v12-latin-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('./fonts/roboto-mono-v12-latin-regular.woff') format('woff');
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
 /* roboto-mono-300 - latin */
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 300;
-  src: local(''),
-      url('./fonts/roboto-mono-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('./fonts/roboto-mono-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('./fonts/roboto-mono-v12-latin-300.ttf'),
+    url('./fonts/roboto-mono-v12-latin-300.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('./fonts/roboto-mono-v12-latin-300.woff') format('woff');
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
 /* roboto-300 - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: local(''),
-      url('./fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('./fonts/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('./fonts/roboto-v20-latin-300.ttf'),
+    url('./fonts/roboto-v20-latin-300.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('./fonts/roboto-v20-latin-300.woff') format('woff');
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
 /* roboto-regular - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local(''),
-      url('./fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('./fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('./fonts/roboto-v20-latin-regular.ttf'),
+    url('./fonts/roboto-v20-latin-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('./fonts/roboto-v20-latin-regular.woff') format('woff');
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
 /* roboto-500 - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: local(''),
-      url('./fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('./fonts/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('./fonts/roboto-v20-latin-500.ttf'),
+    url('./fonts/roboto-v20-latin-500.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('./fonts/roboto-v20-latin-500.woff') format('woff');
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

package/web-test-runner.config.mjs

@@ -127,7 +127,6 @@ const checkScreenshot = async (filename, excluded, threshold) => {
       .createReadStream(testImg)
       .pipe(new PNG())
       .on('parsed', doneReading);
-
   });
 };
 
@@ -195,10 +194,10 @@ const wireScreenshots = async (page, context, wait) => {
     }
   );
 
-  await page.exposeFunction('waitForNetworkIdle', async () =>{
+  await page.exposeFunction('waitForNetworkIdle', async () => {
     await page.waitForNetworkIdle();
   });
-  
+
   await page.exposeFunction('setViewport', async options => {
     await page.setViewport(options);
   });
@@ -209,7 +208,7 @@ const wireScreenshots = async (page, context, wait) => {
 
   await page.exposeFunction('moveMouse', (x, y) => {
     return new Promise(async (resolve, reject) => {
-      await page.mouse.move(x, y, {steps: 5});
+      await page.mouse.move(x, y, { steps: 5 });
       resolve();
     });
   });
@@ -223,14 +222,14 @@ const wireScreenshots = async (page, context, wait) => {
     });
   });
 
-  await page.exposeFunction('mouseDown', async() => {
+  await page.exposeFunction('mouseDown', async () => {
     return new Promise(async (resolve, reject) => {
       await page.mouse.down();
       resolve();
     });
   });
 
-  await page.exposeFunction('mouseUp', async() => {
+  await page.exposeFunction('mouseUp', async () => {
     return new Promise(async (resolve, reject) => {
       await page.mouse.up();
       resolve();
@@ -248,8 +247,7 @@ const wireScreenshots = async (page, context, wait) => {
   await page.exposeFunction(
     'typeInto',
     async (selector, text, replace = false, enter = false) => {
-
-      const selectors = selector.split(":");
+      const selectors = selector.split(':');
       const frame = await page.frames().find(f => {
         return true;
       });
@@ -258,15 +256,19 @@ const wireScreenshots = async (page, context, wait) => {
       let codeSelector = `document.querySelector("${selectors[0]}")`;
       selectors.shift();
       if (selectors.length > 0) {
-        codeSelector += "." + selectors.map((entry)=>`shadowRoot.querySelector("${entry}")`).join(".");
-      }    
+        codeSelector +=
+          '.' +
+          selectors
+            .map(entry => `shadowRoot.querySelector("${entry}")`)
+            .join('.');
+      }
 
       const element = await page.evaluateHandle(codeSelector);
       await element.click({ clickCount: replace ? 3 : 1 });
       await page.keyboard.type(text);
 
       if (enter) {
-        await page.keyboard.press("Enter");
+        await page.keyboard.press('Enter');
       }
     }
   );
@@ -307,7 +309,7 @@ export default {
         }
       },
     },
-    esbuildPlugin({ ts: true })
+    esbuildPlugin({ ts: true }),
 
     /* importMapsPlugin({
       inject: {
@@ -329,14 +331,17 @@ export default {
           '--force-color-profile=srgb',
           '--hide-scrollbars',
           '--disable-web-security',
-          '--force-device-scale-factor=1'
+          '--force-device-scale-factor=1',
+          '--no-sandbox',
         ],
-        headless: true,      
+        headless: true,
       },
       createPage: async ({ context, config }) => {
-        const wait = !(config["unknown"] || []).includes("--fast");
+        const wait = !(config['unknown'] || []).includes('--fast');
         const page = await context.newPage();
-        await page.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36");      
+        await page.setUserAgent(
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36'
+        );
         await page.once('load', async () => {
           await page.addScriptTag({
             content: `
@@ -347,7 +352,6 @@ export default {
           await wireScreenshots(page, context, wait);
         });
 
-
         await page.emulateTimezone('GMT');
 
         return page;