@nyaruka/temba-components 0.57.1 → 0.58.1

package/CHANGELOG.md

@@ -4,8 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.58.1](https://github.com/nyaruka/temba-components/compare/v0.58.0...v0.58.1)
+
+- Truncate labels to max-width [`#355`](https://github.com/nyaruka/temba-components/pull/355)
+
+#### [v0.58.0](https://github.com/nyaruka/temba-components/compare/v0.57.1...v0.58.0)
+
+> 3 August 2023
+
+- Fix issue with contact search returning without blockers [`#354`](https://github.com/nyaruka/temba-components/pull/354)
+- Add test for temba-contact-search [`b3c3816`](https://github.com/nyaruka/temba-components/commit/b3c381666f128b49f95de193f499cef9969af2cd)
+- Add temporary delay [`8dbd96a`](https://github.com/nyaruka/temba-components/commit/8dbd96aafe5ca5e34f7957e51d2d379e9b436f35)
+- Disable test that doesn't work in ci yet [`f920c73`](https://github.com/nyaruka/temba-components/commit/f920c732edab3042a5a9fb52f9a6ef895749fe83)
+
 #### [v0.57.1](https://github.com/nyaruka/temba-components/compare/v0.57.0...v0.57.1)
 
+> 1 August 2023
+
 - Allow modax to serialize valueless temba-checkbox [`#353`](https://github.com/nyaruka/temba-components/pull/353)
 
 #### [v0.57.0](https://github.com/nyaruka/temba-components/compare/v0.56.1...v0.57.0)

package/dist/{cec85acc.js → 5f784089.js}

@@ -2901,7 +2901,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       temba-alert {
         margin: 1em 0;
       }
-    `}refresh(){this.refreshKey="requested_"+(new Date).getTime()}updated(t){super.updated(t),t.has("advanced")&&this.advanced||(t.has("in_a_flow")&&!this.in_a_flow&&(delete this.exclusions.in_a_flow,this.requestUpdate("exclusions")),(t.has("query")&&this.advanced||t.has("refreshKey")&&"0"!==this.refreshKey)&&(this.summary=null,this.fireCustomEvent(Ee.ContentChanged,{reset:!0}),this.lastQuery&&(window.clearTimeout(this.lastQuery),this.fetching=!1),(this.query.trim().length>0||this.recipients.length>0)&&(this.fetching=!0,this.lastQuery=window.setTimeout((()=>{this.fetchSummary()}),2e3))))}fetchSummary(){if(this.endpoint){const t=this.recipients.filter((t=>"group"===t.type)).map((t=>t.id)),e=this.recipients.filter((t=>"contact"===t.type)).map((t=>t.id));ae(this.endpoint,{include:this.advanced?{query:this.query}:{contact_uuids:e,group_uuids:t},exclude:this.exclusions}).then((t=>{this.fetching=!1,200===t.status?(this.summary=t.json,this.advanced||(this.query=this.summary.query),this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients}),this.summary.error?this.errors=[this.summary.error]:this.errors=[],this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary)):(this.summary=t.json,this.summary.error&&(this.errors=[this.summary.error]),this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary))}))}}handleAdvancedToggle(t){be(t),this.recipients=[],this.exclusions={},this.advanced&&(this.query="",this.value=null),this.advanced=!this.advanced,this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients})}handleQueryChange(t){const e=t.target;this.query=e.inputElement.value}handleRecipientsChanged(t){"0"!==this.refreshKey||this.initialized?this.refresh():this.initialized=!0}handleExclusionChanged(t){if("TEMBA-CHECKBOX"===t.target.tagName){const e=JSON.stringify(this.exclusions),i=t.target;let n=i.checked;n?("not_seen_since_days"===i.name&&(n=90),this.exclusions[i.name]=n):delete this.exclusions[i.name],e!==JSON.stringify(this.exclusions)&&this.refresh()}}render(){let t;if(this.summary&&!this.summary.error){const e=this.summary.total;t=D`
+    `}refresh(){this.refreshKey="requested_"+(new Date).getTime()}updated(t){super.updated(t),t.has("advanced")&&this.advanced||(t.has("in_a_flow")&&!this.in_a_flow&&(delete this.exclusions.in_a_flow,this.requestUpdate("exclusions")),(t.has("query")&&this.advanced||t.has("refreshKey")&&"0"!==this.refreshKey)&&(this.summary=null,this.fireCustomEvent(Ee.ContentChanged,{reset:!0}),this.lastQuery&&(window.clearTimeout(this.lastQuery),this.fetching=!1),(this.query.trim().length>0||this.recipients.length>0)&&(this.fetching=!0,this.lastQuery=window.setTimeout((()=>{this.fetchSummary()}),2e3))))}fetchSummary(){if(this.endpoint){const t=this.recipients.filter((t=>"group"===t.type)).map((t=>t.id)),e=this.recipients.filter((t=>"contact"===t.type)).map((t=>t.id));ae(this.endpoint,{include:this.advanced?{query:this.query}:{contact_uuids:e,group_uuids:t},exclude:this.exclusions}).then((t=>{this.fetching=!1,200===t.status?(this.summary=t.json,this.advanced||(this.query=this.summary.query),this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients}),this.summary.error?this.errors=[this.summary.error]:this.errors=[],this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary)):(this.summary=t.json,this.summary.error&&(this.errors=[this.summary.error]),this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary))}))}}handleAdvancedToggle(t){be(t),this.recipients=[],this.exclusions={},this.advanced&&(this.query="",this.value=null),this.advanced=!this.advanced,this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients})}handleQueryChange(t){const e=t.target;this.query=e.inputElement.value}handleRecipientsChanged(t){"0"!==this.refreshKey||this.initialized?this.refresh():this.initialized=!0}handleExclusionChanged(t){if("TEMBA-CHECKBOX"===t.target.tagName){const e=JSON.stringify(this.exclusions),i=t.target;let n=i.checked;n?("not_seen_since_days"===i.name&&(n=90),this.exclusions[i.name]=n):delete this.exclusions[i.name],e!==JSON.stringify(this.exclusions)&&this.refresh()}}render(){let t;if(this.summary&&!this.summary.error){const e=this.summary.total||0;t=D`
           <div class="result-count">
             Found
             <a
@@ -2934,7 +2934,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
               </div>
             </div>
           </temba-button>
-        `}return this.summary&&this.summary.blockers.length>0?D`${this.summary.blockers.map((t=>D`<temba-alert level="error">${Xs(t)}</temba-alert>`))}`:D`
+        `}return this.summary&&this.summary.blockers&&this.summary.blockers.length>0?D`${this.summary.blockers.map((t=>D`<temba-alert level="error">${Xs(t)}</temba-alert>`))}`:D`
       ${this.advanced?D`<div class="query">
             <temba-textinput
               .label=${this.label}
@@ -4099,6 +4099,9 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       slot {
         white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        display: block;
       }
 
       .mask {

package/dist/index.js

@@ -2901,7 +2901,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       temba-alert {
         margin: 1em 0;
       }
-    `}refresh(){this.refreshKey="requested_"+(new Date).getTime()}updated(t){super.updated(t),t.has("advanced")&&this.advanced||(t.has("in_a_flow")&&!this.in_a_flow&&(delete this.exclusions.in_a_flow,this.requestUpdate("exclusions")),(t.has("query")&&this.advanced||t.has("refreshKey")&&"0"!==this.refreshKey)&&(this.summary=null,this.fireCustomEvent(Ee.ContentChanged,{reset:!0}),this.lastQuery&&(window.clearTimeout(this.lastQuery),this.fetching=!1),(this.query.trim().length>0||this.recipients.length>0)&&(this.fetching=!0,this.lastQuery=window.setTimeout((()=>{this.fetchSummary()}),2e3))))}fetchSummary(){if(this.endpoint){const t=this.recipients.filter((t=>"group"===t.type)).map((t=>t.id)),e=this.recipients.filter((t=>"contact"===t.type)).map((t=>t.id));ae(this.endpoint,{include:this.advanced?{query:this.query}:{contact_uuids:e,group_uuids:t},exclude:this.exclusions}).then((t=>{this.fetching=!1,200===t.status?(this.summary=t.json,this.advanced||(this.query=this.summary.query),this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients}),this.summary.error?this.errors=[this.summary.error]:this.errors=[],this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary)):(this.summary=t.json,this.summary.error&&(this.errors=[this.summary.error]),this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary))}))}}handleAdvancedToggle(t){be(t),this.recipients=[],this.exclusions={},this.advanced&&(this.query="",this.value=null),this.advanced=!this.advanced,this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients})}handleQueryChange(t){const e=t.target;this.query=e.inputElement.value}handleRecipientsChanged(t){"0"!==this.refreshKey||this.initialized?this.refresh():this.initialized=!0}handleExclusionChanged(t){if("TEMBA-CHECKBOX"===t.target.tagName){const e=JSON.stringify(this.exclusions),i=t.target;let n=i.checked;n?("not_seen_since_days"===i.name&&(n=90),this.exclusions[i.name]=n):delete this.exclusions[i.name],e!==JSON.stringify(this.exclusions)&&this.refresh()}}render(){let t;if(this.summary&&!this.summary.error){const e=this.summary.total;t=D`
+    `}refresh(){this.refreshKey="requested_"+(new Date).getTime()}updated(t){super.updated(t),t.has("advanced")&&this.advanced||(t.has("in_a_flow")&&!this.in_a_flow&&(delete this.exclusions.in_a_flow,this.requestUpdate("exclusions")),(t.has("query")&&this.advanced||t.has("refreshKey")&&"0"!==this.refreshKey)&&(this.summary=null,this.fireCustomEvent(Ee.ContentChanged,{reset:!0}),this.lastQuery&&(window.clearTimeout(this.lastQuery),this.fetching=!1),(this.query.trim().length>0||this.recipients.length>0)&&(this.fetching=!0,this.lastQuery=window.setTimeout((()=>{this.fetchSummary()}),2e3))))}fetchSummary(){if(this.endpoint){const t=this.recipients.filter((t=>"group"===t.type)).map((t=>t.id)),e=this.recipients.filter((t=>"contact"===t.type)).map((t=>t.id));ae(this.endpoint,{include:this.advanced?{query:this.query}:{contact_uuids:e,group_uuids:t},exclude:this.exclusions}).then((t=>{this.fetching=!1,200===t.status?(this.summary=t.json,this.advanced||(this.query=this.summary.query),this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients}),this.summary.error?this.errors=[this.summary.error]:this.errors=[],this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary)):(this.summary=t.json,this.summary.error&&(this.errors=[this.summary.error]),this.requestUpdate("errors"),this.fireCustomEvent(Ee.ContentChanged,this.summary))}))}}handleAdvancedToggle(t){be(t),this.recipients=[],this.exclusions={},this.advanced&&(this.query="",this.value=null),this.advanced=!this.advanced,this.setValue({advanced:this.advanced,query:this.query,exclusions:this.exclusions,recipients:this.recipients})}handleQueryChange(t){const e=t.target;this.query=e.inputElement.value}handleRecipientsChanged(t){"0"!==this.refreshKey||this.initialized?this.refresh():this.initialized=!0}handleExclusionChanged(t){if("TEMBA-CHECKBOX"===t.target.tagName){const e=JSON.stringify(this.exclusions),i=t.target;let n=i.checked;n?("not_seen_since_days"===i.name&&(n=90),this.exclusions[i.name]=n):delete this.exclusions[i.name],e!==JSON.stringify(this.exclusions)&&this.refresh()}}render(){let t;if(this.summary&&!this.summary.error){const e=this.summary.total||0;t=D`
           <div class="result-count">
             Found
             <a
@@ -2934,7 +2934,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
               </div>
             </div>
           </temba-button>
-        `}return this.summary&&this.summary.blockers.length>0?D`${this.summary.blockers.map((t=>D`<temba-alert level="error">${Xs(t)}</temba-alert>`))}`:D`
+        `}return this.summary&&this.summary.blockers&&this.summary.blockers.length>0?D`${this.summary.blockers.map((t=>D`<temba-alert level="error">${Xs(t)}</temba-alert>`))}`:D`
       ${this.advanced?D`<div class="query">
             <temba-textinput
               .label=${this.label}
@@ -4099,6 +4099,9 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       slot {
         white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        display: block;
       }
 
       .mask {

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"cec85acc.js",revision:"3960b9fe6fb4b098d87dfd827a5dfa5a"},{url:"templates/components-body.html",revision:"22f05a9abe4322ab86ca834a5bbc8ef1"},{url:"templates/components-head.html",revision:"594793734194f32606083efc1f49174e"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const d=e=>o(e,i),l={module:{uri:i},exports:r,require:d};t[i]=Promise.all(n.map((e=>l[e]||d(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"5f784089.js",revision:"1dd575670656f731010a5b0d97d855a5"},{url:"templates/components-body.html",revision:"dbcd0a8bad42af62216ac0ff8361c695"},{url:"templates/components-head.html",revision:"4e8bbd10cbd3534e5d3f1fcac04e700a"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/e5fd06c0f9514c535b61cbdbc12a117a/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"cec85acc.js\",\n    \"revision\": \"3960b9fe6fb4b098d87dfd827a5dfa5a\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"22f05a9abe4322ab86ca834a5bbc8ef1\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"594793734194f32606083efc1f49174e\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/6702fdef0da704a36d8cabd25270717b/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"5f784089.js\",\n    \"revision\": \"1dd575670656f731010a5b0d97d855a5\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"dbcd0a8bad42af62216ac0ff8361c695\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"4e8bbd10cbd3534e5d3f1fcac04e700a\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/cec85acc.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.57.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/5f784089.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.58.1"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/cec85acc.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/5f784089.js" crossorigin="anonymous">

package/out-tsc/src/contactsearch/ContactSearch.js

@@ -321,7 +321,7 @@ export class ContactSearch extends FormElement {
         let summary;
         if (this.summary) {
             if (!this.summary.error) {
-                const count = this.summary.total;
+                const count = this.summary.total || 0;
                 summary = html `
           <div class="result-count">
             Found
@@ -360,7 +360,9 @@ export class ContactSearch extends FormElement {
         `;
             }
         }
-        if (this.summary && this.summary.blockers.length > 0) {
+        if (this.summary &&
+            this.summary.blockers &&
+            this.summary.blockers.length > 0) {
             return html `${this.summary.blockers.map(error => html `<temba-alert level="error">${unsafeHTML(error)}</temba-alert>`)}`;
         }
         return html `

package/out-tsc/src/contactsearch/ContactSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FormElement } from '../FormElement';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption, Omnibox } from '../omnibox/Omnibox';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n  warnings: string[];\n  blockers: string[];\n}\n\nexport class ContactSearch extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        transform: scale(0);\n        max-width: 0;\n        opacity: 0;\n        transition: transform 200ms ease-in-out;\n      }\n\n      .fetching temba-loading {\n        transform: scale(1);\n        max-width: 500px;\n        opacity: 1;\n        display: block;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n\n      .results {\n        display: none;\n      }\n\n      .summary {\n        min-height: 2.2em;\n        display: flex;\n        flex-grow: 1;\n        align-items: center;\n      }\n\n      .summary .result-count {\n        flex-grow: 1;\n      }\n\n      .results.empty {\n        display: none !important;\n      }\n\n      .results.initialized {\n        display: flex;\n        align-items: center;\n        margin-top: 0.5em;\n        margin-left: 0.6em;\n      }\n\n      .advanced-icon {\n        cursor: pointer;\n        margin-right: 0.5em;\n      }\n\n      .query .advanced-icon {\n        margin-top: 1em;\n        margin-right: 1em;\n      }\n\n      .advanced-icon:hover {\n        --icon-color: var(--color-link-primary-hover) !important;\n      }\n\n      .query {\n        --textarea-height: 5em;\n      }\n\n      #recipients {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      temba-alert {\n        margin: 1em 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  in_a_flow: boolean;\n\n  @property({ type: Boolean })\n  started_previously: boolean;\n\n  @property({ type: Boolean })\n  not_seen_since_days: boolean;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ type: Object, attribute: false })\n  summary: SummaryResponse;\n\n  @property({ type: Object, attribute: false })\n  flow: any;\n\n  @property({ type: Array })\n  recipients: OmniOption[] = [];\n\n  @property({ type: Boolean })\n  advanced = false;\n\n  @property({ type: String })\n  refreshKey = '0';\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  @property({ type: Object })\n  private exclusions = {};\n\n  private lastQuery: number;\n  private initialized = false;\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('advanced') && this.advanced) {\n      return;\n    }\n\n    // if we remove the in_a_flow option, make sure it's not part of our exclusions\n    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n      delete this.exclusions['in_a_flow'];\n      this.requestUpdate('exclusions');\n    }\n\n    if (\n      (changedProperties.has('query') && this.advanced) ||\n      (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n    ) {\n      this.summary = null;\n      // this.errors = [];\n\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n        this.fetching = false;\n      }\n\n      if (this.query.trim().length > 0 || this.recipients.length > 0) {\n        this.fetching = true;\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary();\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public fetchSummary(): any {\n    if (this.endpoint) {\n      const group_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'group')\n        .map((value: OmniOption) => value.id);\n\n      const contact_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'contact')\n        .map((value: OmniOption) => value.id);\n\n      postJSON(this.endpoint, {\n        include: this.advanced\n          ? { query: this.query }\n          : { contact_uuids, group_uuids },\n\n        exclude: this.exclusions,\n      }).then((response: WebResponse) => {\n        this.fetching = false;\n        if (response.status === 200) {\n          this.summary = response.json as SummaryResponse;\n          if (!this.advanced) {\n            this.query = this.summary.query;\n          }\n          this.setValue({\n            advanced: this.advanced,\n            query: this.query,\n            exclusions: this.exclusions,\n            recipients: this.recipients,\n          });\n\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          } else {\n            this.errors = [];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        } else {\n          this.summary = response.json as SummaryResponse;\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        }\n      });\n    }\n  }\n\n  private handleAdvancedToggle(evt: MouseEvent) {\n    stopEvent(evt);\n    this.recipients = [];\n    this.exclusions = {};\n    if (this.advanced) {\n      this.query = '';\n      this.value = null;\n    }\n    this.advanced = !this.advanced;\n\n    this.setValue({\n      advanced: this.advanced,\n      query: this.query,\n      exclusions: this.exclusions,\n      recipients: this.recipients,\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  private handleRecipientsChanged(evt: any) {\n    if (this.refreshKey !== '0' || this.initialized) {\n      this.refresh();\n    } else {\n      this.initialized = true;\n    }\n  }\n\n  private handleExclusionChanged(evt: any) {\n    if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n      const ex = JSON.stringify(this.exclusions);\n      const checkbox = evt.target as Checkbox;\n      let value = checkbox.checked as any;\n\n      if (!value) {\n        delete this.exclusions[checkbox.name];\n      } else {\n        if (checkbox.name === 'not_seen_since_days') {\n          value = 90;\n        }\n\n        this.exclusions[checkbox.name] = value;\n      }\n\n      if (ex !== JSON.stringify(this.exclusions)) {\n        this.refresh();\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      if (!this.summary.error) {\n        const count = this.summary.total;\n\n        summary = html`\n          <div class=\"result-count\">\n            Found\n            <a\n              class=\"linked\"\n              target=\"_\"\n              href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n            >\n              ${count.toLocaleString()}\n            </a>\n            contact${count !== 1 ? 's' : ''}\n          </div>\n          <temba-button\n            class=\"edit\"\n            name=\"edit\"\n            secondary\n            small\n            @click=${this.handleAdvancedToggle}\n          >\n            <div slot=\"name\">\n              <div style=\"display: flex; align-items: center;\">\n                ${this.advanced\n                  ? html` <temba-icon\n                        name=\"reset\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Start Over`\n                  : html` <temba-icon\n                        name=\"edit\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Edit Query`}\n              </div>\n            </div>\n          </temba-button>\n        `;\n      }\n    }\n\n    if (this.summary && this.summary.blockers.length > 0) {\n      return html`${this.summary.blockers.map(\n        error =>\n          html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n      )}`;\n    }\n\n    return html`\n      ${this.advanced\n        ? html`<div class=\"query\">\n            <temba-textinput\n              .label=${this.label}\n              .helpText=${this.helpText}\n              .widgetOnly=${this.widgetOnly}\n              .errors=${this.errors}\n              name=${this.name}\n              .inputRoot=${this}\n              @input=${this.handleQueryChange}\n              placeholder=${this.placeholder}\n              .value=${this.query}\n              textarea\n              autogrow\n            >\n            </temba-textinput>\n          </div>`\n        : html`<temba-omnibox\n              placeholder=\"Search for contacts or groups\"\n              widget_only=\"\"\n              groups=\"\"\n              contacts=\"\"\n              label=\"Recipients\"\n              help_text=\"The contacts to send the message to.\"\n              .errors=${this.errors}\n              id=\"recipients\"\n              name=\"recipients\"\n              .value=${this.recipients}\n              endpoint=\"/contact/omnibox/?\"\n              @change=${this.handleRecipientsChanged}\n            >\n            </temba-omnibox>\n\n            ${this.not_seen_since_days\n              ? html`<temba-checkbox\n                  name=\"not_seen_since_days\"\n                  label=\"${msg('Skip inactive contacts')}\"\n                  help_text=\"${msg(\n                    'Only include contacts who have sent a message in the last 90 days.'\n                  )}\"\n                  ?checked=${this.exclusions['not_seen_since_days'] === 90}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}\n            ${this.in_a_flow\n              ? html`<temba-checkbox\n                  name=\"in_a_flow\"\n                  label=\"${msg('Skip contacts currently in a flow')}\"\n                  help_text=\"${msg(\n                    'Avoid interrupting a contact who is already in a flow.'\n                  )}\"\n                  ?checked=${this.exclusions['in_a_flow']}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}\n            ${this.started_previously\n              ? html`<temba-checkbox\n                  name=\"started_previously\"\n                  label=\"${msg('Skip repeat contacts')}\"\n                  help_text=\"${msg(\n                    'Avoid restarting a contact who has been in this flow in the last 90 days.'\n                  )}\"\n                  ?checked=${this.exclusions['started_previously']}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}`}\n\n      <div\n        class=\"results ${getClasses({\n          fetching: this.fetching,\n          initialized: this.initialized || this.fetching,\n          empty:\n            ((this.summary && this.summary.error) || !this.summary) &&\n            !this.fetching,\n        })}\"\n      >\n        <temba-loading units=\"6\" size=\"8\"></temba-loading>\n        <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n      </div>\n\n      ${this.summary && this.summary.warnings\n        ? this.summary.warnings.map(\n            warning =>\n              html`<temba-alert level=\"warning\"\n                >${unsafeHTML(warning)}</temba-alert\n              >`\n          )\n        : ``}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FormElement } from '../FormElement';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption, Omnibox } from '../omnibox/Omnibox';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n  warnings: string[];\n  blockers: string[];\n}\n\nexport class ContactSearch extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        transform: scale(0);\n        max-width: 0;\n        opacity: 0;\n        transition: transform 200ms ease-in-out;\n      }\n\n      .fetching temba-loading {\n        transform: scale(1);\n        max-width: 500px;\n        opacity: 1;\n        display: block;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n\n      .results {\n        display: none;\n      }\n\n      .summary {\n        min-height: 2.2em;\n        display: flex;\n        flex-grow: 1;\n        align-items: center;\n      }\n\n      .summary .result-count {\n        flex-grow: 1;\n      }\n\n      .results.empty {\n        display: none !important;\n      }\n\n      .results.initialized {\n        display: flex;\n        align-items: center;\n        margin-top: 0.5em;\n        margin-left: 0.6em;\n      }\n\n      .advanced-icon {\n        cursor: pointer;\n        margin-right: 0.5em;\n      }\n\n      .query .advanced-icon {\n        margin-top: 1em;\n        margin-right: 1em;\n      }\n\n      .advanced-icon:hover {\n        --icon-color: var(--color-link-primary-hover) !important;\n      }\n\n      .query {\n        --textarea-height: 5em;\n      }\n\n      #recipients {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      temba-alert {\n        margin: 1em 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  in_a_flow: boolean;\n\n  @property({ type: Boolean })\n  started_previously: boolean;\n\n  @property({ type: Boolean })\n  not_seen_since_days: boolean;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ type: Object, attribute: false })\n  summary: SummaryResponse;\n\n  @property({ type: Object, attribute: false })\n  flow: any;\n\n  @property({ type: Array })\n  recipients: OmniOption[] = [];\n\n  @property({ type: Boolean })\n  advanced = false;\n\n  @property({ type: String })\n  refreshKey = '0';\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  @property({ type: Object })\n  private exclusions = {};\n\n  private lastQuery: number;\n  private initialized = false;\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('advanced') && this.advanced) {\n      return;\n    }\n\n    // if we remove the in_a_flow option, make sure it's not part of our exclusions\n    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n      delete this.exclusions['in_a_flow'];\n      this.requestUpdate('exclusions');\n    }\n\n    if (\n      (changedProperties.has('query') && this.advanced) ||\n      (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n    ) {\n      this.summary = null;\n      // this.errors = [];\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n        this.fetching = false;\n      }\n\n      if (this.query.trim().length > 0 || this.recipients.length > 0) {\n        this.fetching = true;\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary();\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public fetchSummary(): any {\n    if (this.endpoint) {\n      const group_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'group')\n        .map((value: OmniOption) => value.id);\n\n      const contact_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'contact')\n        .map((value: OmniOption) => value.id);\n\n      postJSON(this.endpoint, {\n        include: this.advanced\n          ? { query: this.query }\n          : { contact_uuids, group_uuids },\n\n        exclude: this.exclusions,\n      }).then((response: WebResponse) => {\n        this.fetching = false;\n        if (response.status === 200) {\n          this.summary = response.json as SummaryResponse;\n          if (!this.advanced) {\n            this.query = this.summary.query;\n          }\n          this.setValue({\n            advanced: this.advanced,\n            query: this.query,\n            exclusions: this.exclusions,\n            recipients: this.recipients,\n          });\n\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          } else {\n            this.errors = [];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        } else {\n          this.summary = response.json as SummaryResponse;\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        }\n      });\n    }\n  }\n\n  private handleAdvancedToggle(evt: MouseEvent) {\n    stopEvent(evt);\n    this.recipients = [];\n    this.exclusions = {};\n    if (this.advanced) {\n      this.query = '';\n      this.value = null;\n    }\n    this.advanced = !this.advanced;\n\n    this.setValue({\n      advanced: this.advanced,\n      query: this.query,\n      exclusions: this.exclusions,\n      recipients: this.recipients,\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  private handleRecipientsChanged(evt: any) {\n    if (this.refreshKey !== '0' || this.initialized) {\n      this.refresh();\n    } else {\n      this.initialized = true;\n    }\n  }\n\n  private handleExclusionChanged(evt: any) {\n    if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n      const ex = JSON.stringify(this.exclusions);\n      const checkbox = evt.target as Checkbox;\n      let value = checkbox.checked as any;\n\n      if (!value) {\n        delete this.exclusions[checkbox.name];\n      } else {\n        if (checkbox.name === 'not_seen_since_days') {\n          value = 90;\n        }\n\n        this.exclusions[checkbox.name] = value;\n      }\n\n      if (ex !== JSON.stringify(this.exclusions)) {\n        this.refresh();\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      if (!this.summary.error) {\n        const count = this.summary.total || 0;\n\n        summary = html`\n          <div class=\"result-count\">\n            Found\n            <a\n              class=\"linked\"\n              target=\"_\"\n              href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n            >\n              ${count.toLocaleString()}\n            </a>\n            contact${count !== 1 ? 's' : ''}\n          </div>\n          <temba-button\n            class=\"edit\"\n            name=\"edit\"\n            secondary\n            small\n            @click=${this.handleAdvancedToggle}\n          >\n            <div slot=\"name\">\n              <div style=\"display: flex; align-items: center;\">\n                ${this.advanced\n                  ? html` <temba-icon\n                        name=\"reset\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Start Over`\n                  : html` <temba-icon\n                        name=\"edit\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Edit Query`}\n              </div>\n            </div>\n          </temba-button>\n        `;\n      }\n    }\n\n    if (\n      this.summary &&\n      this.summary.blockers &&\n      this.summary.blockers.length > 0\n    ) {\n      return html`${this.summary.blockers.map(\n        error =>\n          html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n      )}`;\n    }\n\n    return html`\n      ${this.advanced\n        ? html`<div class=\"query\">\n            <temba-textinput\n              .label=${this.label}\n              .helpText=${this.helpText}\n              .widgetOnly=${this.widgetOnly}\n              .errors=${this.errors}\n              name=${this.name}\n              .inputRoot=${this}\n              @input=${this.handleQueryChange}\n              placeholder=${this.placeholder}\n              .value=${this.query}\n              textarea\n              autogrow\n            >\n            </temba-textinput>\n          </div>`\n        : html`<temba-omnibox\n              placeholder=\"Search for contacts or groups\"\n              widget_only=\"\"\n              groups=\"\"\n              contacts=\"\"\n              label=\"Recipients\"\n              help_text=\"The contacts to send the message to.\"\n              .errors=${this.errors}\n              id=\"recipients\"\n              name=\"recipients\"\n              .value=${this.recipients}\n              endpoint=\"/contact/omnibox/?\"\n              @change=${this.handleRecipientsChanged}\n            >\n            </temba-omnibox>\n\n            ${this.not_seen_since_days\n              ? html`<temba-checkbox\n                  name=\"not_seen_since_days\"\n                  label=\"${msg('Skip inactive contacts')}\"\n                  help_text=\"${msg(\n                    'Only include contacts who have sent a message in the last 90 days.'\n                  )}\"\n                  ?checked=${this.exclusions['not_seen_since_days'] === 90}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}\n            ${this.in_a_flow\n              ? html`<temba-checkbox\n                  name=\"in_a_flow\"\n                  label=\"${msg('Skip contacts currently in a flow')}\"\n                  help_text=\"${msg(\n                    'Avoid interrupting a contact who is already in a flow.'\n                  )}\"\n                  ?checked=${this.exclusions['in_a_flow']}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}\n            ${this.started_previously\n              ? html`<temba-checkbox\n                  name=\"started_previously\"\n                  label=\"${msg('Skip repeat contacts')}\"\n                  help_text=\"${msg(\n                    'Avoid restarting a contact who has been in this flow in the last 90 days.'\n                  )}\"\n                  ?checked=${this.exclusions['started_previously']}\n                  @change=${this.handleExclusionChanged}\n                ></temba-checkbox>`\n              : null}`}\n\n      <div\n        class=\"results ${getClasses({\n          fetching: this.fetching,\n          initialized: this.initialized || this.fetching,\n          empty:\n            ((this.summary && this.summary.error) || !this.summary) &&\n            !this.fetching,\n        })}\"\n      >\n        <temba-loading units=\"6\" size=\"8\"></temba-loading>\n        <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n      </div>\n\n      ${this.summary && this.summary.warnings\n        ? this.summary.warnings.map(\n            warning =>\n              html`<temba-alert level=\"warning\"\n                >${unsafeHTML(warning)}</temba-alert\n              >`\n          )\n        : ``}\n    `;\n  }\n}\n"]}

package/out-tsc/src/label/Label.js

@@ -12,6 +12,9 @@ export default class Label extends LitElement {
 
       slot {
         white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        display: block;
       }
 
       .mask {

package/out-tsc/src/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACrC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;SAC7C;QAED,OAAO,IAAI,CAAA;;uBAEQ,UAAU,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;gBACM,QAAQ,CAAC,UAAU,CAAC;;;YAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;;;;KAIhE,CAAC;IACJ,CAAC;CACF;AA7DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACd;AAGb;IADC,QAAQ,EAAE;8CACa;AAGxB;IADC,QAAQ,EAAE;wCACO","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport default class Label extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      slot {\n        white-space: nowrap;\n      }\n\n      .mask {\n        padding: 3px 8px;\n        border-radius: 12px;\n        display: flex;\n      }\n\n      temba-icon {\n        margin-right: 0.3em;\n        padding-bottom: 0.1em;\n      }\n\n      .label.clickable .mask:hover {\n        background: var(--color-background-hover, rgb(0, 0, 0, 0.05));\n      }\n\n      .label {\n        font-size: 0.8em;\n        font-weight: 400;\n        border-radius: 12px;\n        box-shadow: var(--widget-shadow, 0 0.04em 0.08em rgba(0, 0, 0, 0.15));\n        background: var(--color-overlay-light);\n        color: var(--color-overlay-light-text);\n        --icon-color: var(--color-overlay-light-text);\n        text-shadow: none;\n      }\n\n      .danger {\n        background: tomato;\n        color: #fff;\n        --icon-color: #fff;\n      }\n\n      .primary {\n        background: var(--color-primary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .secondary {\n        background: var(--color-secondary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .tertiary {\n        background: var(--color-tertiary);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .dark {\n        background: var(--color-overlay-dark);\n        text-shadow: none;\n      }\n\n      .clickable {\n        cursor: pointer;\n      }\n\n      .shadow {\n        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  tertiary: boolean;\n\n  @property({ type: Boolean })\n  danger: boolean;\n\n  @property({ type: Boolean })\n  dark: boolean;\n\n  @property({ type: Boolean })\n  shadow: boolean;\n\n  @property({ type: String })\n  icon: string;\n\n  @property()\n  backgroundColor: string;\n\n  @property()\n  textColor: string;\n\n  public render(): TemplateResult {\n    const labelStyle = {};\n\n    if (this.backgroundColor) {\n      labelStyle['background'] = this.backgroundColor;\n    }\n\n    if (this.textColor) {\n      labelStyle['color'] = this.textColor;\n      labelStyle['--icon-color'] = this.textColor;\n    }\n\n    return html`\n      <div\n        class=\"label ${getClasses({\n          clickable: this.clickable,\n          primary: this.primary,\n          secondary: this.secondary,\n          tertiary: this.tertiary,\n          shadow: this.shadow,\n          danger: this.danger,\n          dark: this.dark,\n        })}\"\n        style=${styleMap(labelStyle)}\n      >\n        <div class=\"mask\">\n          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACrC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;SAC7C;QAED,OAAO,IAAI,CAAA;;uBAEQ,UAAU,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;gBACM,QAAQ,CAAC,UAAU,CAAC;;;YAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;;;;KAIhE,CAAC;IACJ,CAAC;CACF;AA7DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACd;AAGb;IADC,QAAQ,EAAE;8CACa;AAGxB;IADC,QAAQ,EAAE;wCACO","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport default class Label extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      slot {\n        white-space: nowrap;\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        display: block;\n      }\n\n      .mask {\n        padding: 3px 8px;\n        border-radius: 12px;\n        display: flex;\n      }\n\n      temba-icon {\n        margin-right: 0.3em;\n        padding-bottom: 0.1em;\n      }\n\n      .label.clickable .mask:hover {\n        background: var(--color-background-hover, rgb(0, 0, 0, 0.05));\n      }\n\n      .label {\n        font-size: 0.8em;\n        font-weight: 400;\n        border-radius: 12px;\n        box-shadow: var(--widget-shadow, 0 0.04em 0.08em rgba(0, 0, 0, 0.15));\n        background: var(--color-overlay-light);\n        color: var(--color-overlay-light-text);\n        --icon-color: var(--color-overlay-light-text);\n        text-shadow: none;\n      }\n\n      .danger {\n        background: tomato;\n        color: #fff;\n        --icon-color: #fff;\n      }\n\n      .primary {\n        background: var(--color-primary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .secondary {\n        background: var(--color-secondary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .tertiary {\n        background: var(--color-tertiary);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .dark {\n        background: var(--color-overlay-dark);\n        text-shadow: none;\n      }\n\n      .clickable {\n        cursor: pointer;\n      }\n\n      .shadow {\n        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  tertiary: boolean;\n\n  @property({ type: Boolean })\n  danger: boolean;\n\n  @property({ type: Boolean })\n  dark: boolean;\n\n  @property({ type: Boolean })\n  shadow: boolean;\n\n  @property({ type: String })\n  icon: string;\n\n  @property()\n  backgroundColor: string;\n\n  @property()\n  textColor: string;\n\n  public render(): TemplateResult {\n    const labelStyle = {};\n\n    if (this.backgroundColor) {\n      labelStyle['background'] = this.backgroundColor;\n    }\n\n    if (this.textColor) {\n      labelStyle['color'] = this.textColor;\n      labelStyle['--icon-color'] = this.textColor;\n    }\n\n    return html`\n      <div\n        class=\"label ${getClasses({\n          clickable: this.clickable,\n          primary: this.primary,\n          secondary: this.secondary,\n          tertiary: this.tertiary,\n          shadow: this.shadow,\n          danger: this.danger,\n          dark: this.dark,\n        })}\"\n        style=${styleMap(labelStyle)}\n      >\n        <div class=\"mask\">\n          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/test/temba-contact-search.test.js

@@ -1,13 +1,74 @@
-import { fixture, assert } from '@open-wc/testing';
+import { fixture, assert, expect } from '@open-wc/testing';
 import { ContactSearch } from '../src/contactsearch/ContactSearch';
-import './utils.test';
-export const getHTML = () => {
-    return `<temba-contact-search></temba-contact-search>`;
-};
+import { assertScreenshot, getClip, getHTML, mockPOST, } from './utils.test';
+import { useFakeTimers } from 'sinon';
+import { CustomEventType } from '../src/interfaces';
+let clock;
+function waitForSearch(search) {
+    return new Promise(resolve => {
+        search.addEventListener(CustomEventType.ContentChanged, async () => {
+            await clock.runAll();
+            resolve(search);
+        }, { once: true });
+    });
+}
 describe('temba-contact-search', () => {
+    beforeEach(function () {
+        clock = useFakeTimers();
+    });
+    afterEach(function () {
+        clock.restore();
+    });
     it('can be created', async () => {
-        const search = await fixture(getHTML());
+        const search = await fixture(getHTML('temba-contact-search'));
         assert.instanceOf(search, ContactSearch);
     });
+    xit('handles bad queries', async () => {
+        const endpoint = '/contact-search-bad';
+        const search = await fixture(getHTML('temba-contact-search', {
+            advanced: true,
+            endpoint,
+        }));
+        // mock an error response
+        mockPOST(/contact-search-bad/, { query: '', total: 0, error: "'Missing' is not a valid group name" }, { 'Temba-Success': 'hide' });
+        search.query = 'group = "Missing"';
+        // run the query
+        await clock.runAll();
+        await clock.runAll();
+        await waitForSearch(search);
+        expect(search.errors).to.deep.equal([
+            "'Missing' is not a valid group name",
+        ]);
+        await search.updateComplete;
+        await assertScreenshot('contact-search/missing-group', getClip(search));
+    });
+    xit('allows manual searches', async () => {
+        const endpoint = '/contact-search-manual';
+        const search = await fixture(getHTML('temba-contact-search', {
+            endpoint,
+        }));
+        const omnibox = search.shadowRoot.querySelector('temba-omnibox');
+        omnibox.value = [];
+        search.advanced = true;
+        await search.updateComplete;
+        // mock successful response with some warnings
+        mockPOST(/contact-search-manual/, {
+            query: 'group = "Doctors"',
+            total: 1937,
+            warnings: [
+                'This flow does not specify a Facebook topic. You may still start this flow but Facebook contacts who have not sent an incoming message in the last 24 hours may not receive it.',
+                'This flow does not use message templates. You may still start this flow but WhatsApp contacts who have not sent an incoming message in the last 24 hours may not receive it.',
+            ],
+            blockers: [],
+        }, { 'Temba-Success': 'hide' });
+        search.query = 'group = "Testers"';
+        // run the query
+        await clock.runAll();
+        await clock.runAll();
+        await waitForSearch(search);
+        await clock.runAll();
+        await search.updateComplete;
+        await assertScreenshot('contact-search/manual-search', getClip(search));
+    });
 });
 //# sourceMappingURL=temba-contact-search.test.js.map

package/out-tsc/test/temba-contact-search.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-search.test.js","sourceRoot":"","sources":["../../test/temba-contact-search.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,+CAA+C,CAAC;AACzD,CAAC,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,MAAM,GAAkB,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QACvD,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { ContactSearch } from '../src/contactsearch/ContactSearch';\nimport './utils.test';\n\nexport const getHTML = () => {\n  return `<temba-contact-search></temba-contact-search>`;\n};\n\ndescribe('temba-contact-search', () => {\n  it('can be created', async () => {\n    const search: ContactSearch = await fixture(getHTML());\n    assert.instanceOf(search, ContactSearch);\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-search.test.js","sourceRoot":"","sources":["../../test/temba-contact-search.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport { ContactSearch } from '../src/contactsearch/ContactSearch';\nimport {\n  assertScreenshot,\n  delay,\n  getClip,\n  getHTML,\n  mockPOST,\n} from './utils.test';\nimport { useFakeTimers } from 'sinon';\nimport { CustomEventType } from '../src/interfaces';\nimport { Omnibox } from '../src/omnibox/Omnibox';\n\nlet clock: any;\n\nfunction waitForSearch(search: ContactSearch) {\n  return new Promise<ContactSearch>(resolve => {\n    search.addEventListener(\n      CustomEventType.ContentChanged,\n      async () => {\n        await clock.runAll();\n        resolve(search);\n      },\n      { once: true }\n    );\n  });\n}\n\ndescribe('temba-contact-search', () => {\n  beforeEach(function () {\n    clock = useFakeTimers();\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('can be created', async () => {\n    const search: ContactSearch = await fixture(\n      getHTML('temba-contact-search')\n    );\n    assert.instanceOf(search, ContactSearch);\n  });\n\n  xit('handles bad queries', async () => {\n    const endpoint = '/contact-search-bad';\n    const search: ContactSearch = await fixture(\n      getHTML('temba-contact-search', {\n        advanced: true,\n        endpoint,\n      })\n    );\n\n    // mock an error response\n    mockPOST(\n      /contact-search-bad/,\n      { query: '', total: 0, error: \"'Missing' is not a valid group name\" },\n      { 'Temba-Success': 'hide' }\n    );\n\n    search.query = 'group = \"Missing\"';\n\n    // run the query\n    await clock.runAll();\n    await clock.runAll();\n    await waitForSearch(search);\n\n    expect(search.errors).to.deep.equal([\n      \"'Missing' is not a valid group name\",\n    ]);\n\n    await search.updateComplete;\n    await assertScreenshot('contact-search/missing-group', getClip(search));\n  });\n\n  xit('allows manual searches', async () => {\n    const endpoint = '/contact-search-manual';\n    const search: ContactSearch = await fixture(\n      getHTML('temba-contact-search', {\n        endpoint,\n      })\n    );\n\n    const omnibox = search.shadowRoot.querySelector('temba-omnibox') as Omnibox;\n    omnibox.value = [];\n    search.advanced = true;\n\n    await search.updateComplete;\n\n    // mock successful response with some warnings\n    mockPOST(\n      /contact-search-manual/,\n      {\n        query: 'group = \"Doctors\"',\n        total: 1937,\n        warnings: [\n          'This flow does not specify a Facebook topic. You may still start this flow but Facebook contacts who have not sent an incoming message in the last 24 hours may not receive it.',\n          'This flow does not use message templates. You may still start this flow but WhatsApp contacts who have not sent an incoming message in the last 24 hours may not receive it.',\n        ],\n        blockers: [],\n      },\n      { 'Temba-Success': 'hide' }\n    );\n\n    search.query = 'group = \"Testers\"';\n\n    // run the query\n    await clock.runAll();\n    await clock.runAll();\n    await waitForSearch(search);\n    await clock.runAll();\n\n    await search.updateComplete;\n    await assertScreenshot('contact-search/manual-search', getClip(search));\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.57.1",
+  "version": "0.58.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/contactsearch/ContactSearch.ts

@@ -273,7 +273,6 @@ export class ContactSearch extends FormElement {
     ) {
       this.summary = null;
       // this.errors = [];
-
       this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });
       if (this.lastQuery) {
         window.clearTimeout(this.lastQuery);
@@ -395,7 +394,7 @@ export class ContactSearch extends FormElement {
     let summary: TemplateResult;
     if (this.summary) {
       if (!this.summary.error) {
-        const count = this.summary.total;
+        const count = this.summary.total || 0;
 
         summary = html`
           <div class="result-count">
@@ -436,7 +435,11 @@ export class ContactSearch extends FormElement {
       }
     }
 
-    if (this.summary && this.summary.blockers.length > 0) {
+    if (
+      this.summary &&
+      this.summary.blockers &&
+      this.summary.blockers.length > 0
+    ) {
       return html`${this.summary.blockers.map(
         error =>
           html`<temba-alert level="error">${unsafeHTML(error)}</temba-alert>`

package/src/label/Label.ts

@@ -12,6 +12,9 @@ export default class Label extends LitElement {
 
       slot {
         white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        display: block;
       }
 
       .mask {

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

@@ -1,14 +1,116 @@
-import { fixture, assert } from '@open-wc/testing';
+import { fixture, assert, expect } from '@open-wc/testing';
 import { ContactSearch } from '../src/contactsearch/ContactSearch';
-import './utils.test';
+import {
+  assertScreenshot,
+  delay,
+  getClip,
+  getHTML,
+  mockPOST,
+} from './utils.test';
+import { useFakeTimers } from 'sinon';
+import { CustomEventType } from '../src/interfaces';
+import { Omnibox } from '../src/omnibox/Omnibox';
 
-export const getHTML = () => {
-  return `<temba-contact-search></temba-contact-search>`;
-};
+let clock: any;
+
+function waitForSearch(search: ContactSearch) {
+  return new Promise<ContactSearch>(resolve => {
+    search.addEventListener(
+      CustomEventType.ContentChanged,
+      async () => {
+        await clock.runAll();
+        resolve(search);
+      },
+      { once: true }
+    );
+  });
+}
 
 describe('temba-contact-search', () => {
+  beforeEach(function () {
+    clock = useFakeTimers();
+  });
+
+  afterEach(function () {
+    clock.restore();
+  });
+
   it('can be created', async () => {
-    const search: ContactSearch = await fixture(getHTML());
+    const search: ContactSearch = await fixture(
+      getHTML('temba-contact-search')
+    );
     assert.instanceOf(search, ContactSearch);
   });
+
+  xit('handles bad queries', async () => {
+    const endpoint = '/contact-search-bad';
+    const search: ContactSearch = await fixture(
+      getHTML('temba-contact-search', {
+        advanced: true,
+        endpoint,
+      })
+    );
+
+    // mock an error response
+    mockPOST(
+      /contact-search-bad/,
+      { query: '', total: 0, error: "'Missing' is not a valid group name" },
+      { 'Temba-Success': 'hide' }
+    );
+
+    search.query = 'group = "Missing"';
+
+    // run the query
+    await clock.runAll();
+    await clock.runAll();
+    await waitForSearch(search);
+
+    expect(search.errors).to.deep.equal([
+      "'Missing' is not a valid group name",
+    ]);
+
+    await search.updateComplete;
+    await assertScreenshot('contact-search/missing-group', getClip(search));
+  });
+
+  xit('allows manual searches', async () => {
+    const endpoint = '/contact-search-manual';
+    const search: ContactSearch = await fixture(
+      getHTML('temba-contact-search', {
+        endpoint,
+      })
+    );
+
+    const omnibox = search.shadowRoot.querySelector('temba-omnibox') as Omnibox;
+    omnibox.value = [];
+    search.advanced = true;
+
+    await search.updateComplete;
+
+    // mock successful response with some warnings
+    mockPOST(
+      /contact-search-manual/,
+      {
+        query: 'group = "Doctors"',
+        total: 1937,
+        warnings: [
+          'This flow does not specify a Facebook topic. You may still start this flow but Facebook contacts who have not sent an incoming message in the last 24 hours may not receive it.',
+          'This flow does not use message templates. You may still start this flow but WhatsApp contacts who have not sent an incoming message in the last 24 hours may not receive it.',
+        ],
+        blockers: [],
+      },
+      { 'Temba-Success': 'hide' }
+    );
+
+    search.query = 'group = "Testers"';
+
+    // run the query
+    await clock.runAll();
+    await clock.runAll();
+    await waitForSearch(search);
+    await clock.runAll();
+
+    await search.updateComplete;
+    await assertScreenshot('contact-search/manual-search', getClip(search));
+  });
 });