npm - @nyaruka/temba-components - Versions diffs - 0.24.1 → 0.25.0 - Mend

@nyaruka/temba-components 0.24.1 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/CHANGELOG.md +6 -0
package/demo/index.html +136 -98
package/dist/e4bb741a.js +356 -0
package/dist/index.js +1 -1
package/dist/sw.js +1 -1
package/dist/sw.js.map +1 -1
package/dist/templates/components-body.html +1 -1
package/dist/templates/components-head.html +1 -1
package/out-tsc/src/dialog/Dialog.js +1 -1
package/out-tsc/src/dialog/Dialog.js.map +1 -1
package/out-tsc/src/options/Options.js +28 -4
package/out-tsc/src/options/Options.js.map +1 -1
package/out-tsc/src/select/Select.js +83 -40
package/out-tsc/src/select/Select.js.map +1 -1
package/out-tsc/test/temba-select.test.js +2 -1
package/out-tsc/test/temba-select.test.js.map +1 -1
package/package.json +1 -1
package/screenshots/truth/select/expressions.png +0 -0
package/screenshots/truth/select/functions.png +0 -0
package/src/dialog/Dialog.ts +1 -1
package/src/options/Options.ts +32 -8
package/src/select/Select.ts +86 -42
package/static/css/temba-components.css +1 -2
package/test/temba-select.test.ts +3 -1
package/test-assets/style.css +1 -1
package/dist/85f2e730.js +0 -356

package/dist/sw.js CHANGED Viewed

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"85f2e730.js",revision:"a0211b2c829be197340b7713bf0fef89"},{url:"templates/components-body.html",revision:"3b73dd721b71a942c5977106dc9251e9"},{url:"templates/components-head.html",revision:"3835a901cb21b016f4432807588ebfac"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"e4bb741a.js",revision:"09bed1ea0e2f066d04d9f8976b00bb82"},{url:"templates/components-body.html",revision:"b880a6a6b3680a40ac90260163684363"},{url:"templates/components-head.html",revision:"821fdca3f0e00cf1b36a36361df8c06b"}],{}),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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sw.js","sources":["../../../../../tmp/~~816dba2c89bd025d2e68797c1bbcab76~~/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 {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.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\nworkbox_core_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\": \"~~85f2e730~~.js\",\n \"revision\": \"~~a0211b2c829be197340b7713bf0fef89~~\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"~~3b73dd721b71a942c5977106dc9251e9~~\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"~~3835a901cb21b016f4432807588ebfac~~\"\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":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
1	+ {"version":3,"file":"sw.js","sources":["../../../../../tmp/611afcd31e8fd832a7965386a72e736a/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 {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.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\nworkbox_core_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\": \"e4bb741a.js\",\n \"revision\": \"09bed1ea0e2f066d04d9f8976b00bb82\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"b880a6a6b3680a40ac90260163684363\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"821fdca3f0e00cf1b36a36361df8c06b\"\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":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html CHANGED Viewed

	@@ -1 +1 @@
1	- <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/~~85f2e730~~.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.24.1"</script>
1	+ <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/e4bb741a.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.25.0"</script>

package/dist/templates/components-head.html CHANGED Viewed

	@@ -1 +1 @@
1	- <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/~~85f2e730~~.js" crossorigin="anonymous">
1	+ <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/e4bb741a.js" crossorigin="anonymous">

package/out-tsc/src/dialog/Dialog.js CHANGED Viewed

@@ -55,7 +55,7 @@ export class Dialog extends RapidElement {
         position: fixed;
         top: 0px;
         left: 0px;
-        transition: opacity linear calc(var(--transitions-speed) / 2ms);
+        transition: opacity linear calc(var(--transition-speed) / 2ms);
         pointer-events: none;
       }

package/out-tsc/src/dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,MAAO,SAAQ,YAAY;IA+LtC;QACE,KAAK,EAAE,CAAC;QAvBV,SAAI,GAAG,QAAQ,CAAC;QAGhB,sBAAiB,GAAG,IAAI,CAAC;QAGzB,qBAAgB,GAAG,QAAQ,CAAC;QAG5B,mBAAc,GAAG,QAAQ,CAAC;QAW1B,iBAAY,GAAQ,CAAC,CAAC;IAItB,CAAC;IAhMD,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;SACf,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgIT,CAAC;IACJ,CAAC;IAwDM,OAAO,CAAC,iBAAmC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAE5C,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;gBAER,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;gBAC5D,IAAI,CAAC,YAAY,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBAC1C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;gBAC5B,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;gBAChC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aAC7D;YAED,mDAAmD;YACnD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBAC/C,IAAI,CAAC,UAAU;qBACZ,gBAAgB,CAAC,cAAc,CAAC;qBAChC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;gBAE1D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;oBACjB,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACrB,CAAC,EAAE,GAAG,CAAC,CAAC;aACT;SACF;IACH,CAAC;IAEM,eAAe;QACpB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAC5B,iEAAiE,CAC3D,CAAC;YACT,IAAI,KAAK,EAAE;gBACT,KAAK,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;gBAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACnB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,KAAK,CAAC,KAAK,EAAE,CAAC;iBACf;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEM,WAAW,CAAC,GAAe;QAChC,MAAM,MAAM,GAAG,GAAG,CAAC,aAAuB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;YAChE,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE;gBACzC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;SACF;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACtC,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;IACH,CAAC;IAEM,eAAe;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,sBAAsB,IAAI,CAAC,gBAAgB,IAAI,CAChD,CAAC;IACJ,CAAC;IAEM,gBAAgB;QACrB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,EAAE,CAAC;YAC5C,IAAI,EAAE,KAAK,aAAa,IAAI,EAAE,KAAK,WAAW,EAAE;gBAC9C,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;gBACnD,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;SACF;IACH,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAExC,MAAM,SAAS,GAAG;YAChB,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,IAAI;SAC5B,CAAC;QACF,MAAM,WAAW,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAExD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA;;uCAE2B,IAAI,CAAC,MAAM;;SAEzC;YACH,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,eAAe;6BACR,UAAU,CAAC;YAC9B,aAAa,EAAE,IAAI,CAAC,IAAI;YACxB,gBAAgB,EAAE,IAAI,CAAC,OAAO;YAC9B,sBAAsB,EAAE,IAAI,CAAC,YAAY;YACzC,cAAc,EAAE,IAAI,CAAC,KAAK;SAC3B,CAAC;gBACM,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;;;qBAcd,IAAI,CAAC,WAAW;oBACjB,QAAQ,CAAC,WAAW,CAAC;;;cAG3B,MAAM;iDAC6B,IAAI,CAAC,WAAW;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;;;;kBAMzC,IAAI,CAAC,iBAAiB;YACpB,CAAC,CAAC,IAAI,CAAA;;mCAES,IAAI,CAAC,WAAW;kCACjB,IAAI,CAAC,iBAAiB;yCACf,IAAI,CAAC,WAAW;qCACpB,CAAC,IAAI,CAAC,WAAW;wCACd,IAAI,CAAC,UAAU;sCACjB,IAAI,CAAC,QAAQ;;;uBAG5B;YACH,CAAC,CAAC,IACN;;2BAEW,IAAI,CAAC,WAAW;yBAClB,IAAI,CAAC,gBAAgB;;;;;;;;;;KAUzC,CAAC;IACJ,CAAC;CACF;AAhQC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACd;AAGd;IADC,QAAQ,EAAE;sCACI;AAGf;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,EAAE;oCACK;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACC;AAG5B;IADC,QAAQ,EAAE;8CACe;AAG1B;IADC,QAAQ,EAAE;4CACW;AAGtB;IADC,QAAQ,EAAE;qCACI;AAGf;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACW","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n static get widths(): { [size: string]: string } {\n return {\n small: '400px',\n medium: '600px',\n large: '655px',\n };\n }\n\n static get styles() {\n return css`\n :host {\n position: absolute;\n z-index: 10000;\n font-family: var(--font-family);\n background: white;\n }\n\n .flex {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n left: 0px;\n top: 0px;\n align-items: center;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .bottom-padding {\n padding: 3rem;\n }\n\n .dialog-mask {\n width: 100%;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n position: fixed;\n top: 0px;\n left: 0px;\n transition: opacity linear calc(var(--transitions-speed) / 2ms);\n pointer-events: none;\n }\n\n .dialog-container {\n margin-top: -10000px;\n position: relative;\n transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n var(--transition-speed),\n opacity ease-in-out calc(var(--transition-speed) - 50ms);\n border-radius: var(--curvature);\n box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transform: scale(0.7);\n background: white;\n }\n\n .dialog-body {\n background: #fff;\n max-height: 75vh;\n overflow-y: auto;\n }\n\n .dialog-mask.dialog-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .dialog-mask.dialog-open .dialog-container {\n top: inherit;\n }\n\n .dialog-mask.dialog-animation-end .dialog-container {\n margin-top: 10vh;\n transform: scale(1) !important;\n }\n\n .dialog-mask.dialog-ready .dialog-container {\n margin-top: 10vh;\n transform: none;\n }\n\n .dialog-mask.dialog-loading .dialog-container {\n margin-top: -10000px;\n }\n\n .header-text {\n font-size: 20px;\n padding: 12px 20px;\n font-weight: 300;\n color: var(--header-text);\n background: var(--header-bg);\n }\n\n .dialog-footer {\n background: var(--color-primary-light);\n padding: 10px;\n display: flex;\n flex-flow: row-reverse;\n }\n\n temba-button {\n margin-left: 10px;\n }\n\n .dialog-body temba-loading {\n position: absolute;\n right: 12px;\n margin-top: -30px;\n padding-bottom: 9px;\n display: none;\n }\n\n #page-loader {\n text-align: center;\n display: block;\n position: relative;\n opacity: 0;\n margin: auto;\n margin-top: 30px;\n width: 154px;\n transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n calc(var(--transition-speed * 2));\n visibility: hidden;\n }\n\n .dialog-mask.dialog-loading #page-loader {\n opacity: 1;\n visibility: visible;\n }\n\n #submit-loader {\n flex-grow: 1;\n text-align: right;\n }\n `;\n }\n\n @property({ type: Boolean })\n open: boolean;\n\n @property()\n header: string;\n\n @property()\n body: string;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n loading: boolean;\n\n @property({ type: Boolean })\n hideOnClick: boolean;\n\n @property({ type: Boolean })\n noFocus: boolean;\n\n @property()\n size = 'medium';\n\n @property({ type: String })\n primaryButtonName = 'Ok';\n\n @property({ type: String })\n cancelButtonName = 'Cancel';\n\n @property()\n submittingName = 'Saving';\n\n @property()\n animationEnd: boolean;\n\n @property()\n ready: boolean;\n\n @property({ attribute: false })\n onButtonClicked: (button: Button) => void;\n\n scrollOffset: any = 0;\n\n public constructor() {\n super();\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('open')) {\n const body = document.querySelector('body');\n\n if (this.open) {\n this.animationEnd = true;\n window.setTimeout(() => {\n this.ready = true;\n this.animationEnd = false;\n }, 400);\n\n const scrollbarWidth = window.outerWidth - body.clientWidth;\n this.scrollOffset = -document.documentElement.scrollTop;\n body.style.position = 'fixed';\n body.style.overflowY = 'scroll';\n body.style.top = this.scrollOffset + 'px';\n body.style.width = '100%';\n body.style.overflowY = 'hidden';\n body.style.paddingRight = scrollbarWidth + 'px';\n } else {\n body.style.position = '';\n body.style.overflowY = '';\n body.style.width = '';\n body.style.marginRight = '';\n body.style.paddingRight = '0px';\n window.scrollTo(0, parseInt(this.scrollOffset \|\| '0') * -1);\n }\n\n // make sure our buttons aren't in progress on show\n if (this.open && !changedProperties.get('open')) {\n this.shadowRoot\n .querySelectorAll('temba-button')\n .forEach((button: Button) => (button.disabled = false));\n\n if (!this.noFocus) {\n this.focusFirstInput();\n }\n } else {\n window.setTimeout(() => {\n this.ready = false;\n }, 400);\n }\n }\n }\n\n public focusFirstInput(): void {\n window.setTimeout(() => {\n let input = this.querySelector(\n 'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n ) as any;\n if (input) {\n input = input.textInputElement \|\| input.inputElement \|\| input;\n if (!input.readOnly) {\n input.focus();\n input.click();\n }\n }\n }, 100);\n }\n\n public handleClick(evt: MouseEvent) {\n const button = evt.currentTarget as Button;\n if (!button.disabled) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n if (button.name === this.cancelButtonName) {\n this.open = false;\n }\n }\n }\n\n private getDocumentHeight(): number {\n const body = document.body;\n const html = document.documentElement;\n return Math.max(\n body.scrollHeight,\n body.offsetHeight,\n html.clientHeight,\n html.scrollHeight,\n html.offsetHeight\n );\n }\n\n private clickCancel() {\n const cancel = this.getCancelButton();\n if (cancel) {\n cancel.click();\n }\n }\n\n public getCancelButton(): Button {\n return this.shadowRoot.querySelector(\n `temba-button[name='${this.cancelButtonName}']`\n );\n }\n\n public getPrimaryButton(): Button {\n return this.shadowRoot.querySelector(`temba-button[primary]`);\n }\n\n private handleKeyUp(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.clickCancel();\n }\n }\n\n private handleClickMask(event: MouseEvent) {\n if (this.hideOnClick) {\n const id = (event.target as HTMLElement).id;\n if (id === 'dialog-mask' \|\| id === 'dialog-bg') {\n this.fireCustomEvent(CustomEventType.DialogHidden);\n this.clickCancel();\n }\n }\n }\n\n public show(): void {\n this.open = true;\n }\n\n public hide(): void {\n this.open = false;\n }\n\n public render(): TemplateResult {\n const height = this.getDocumentHeight();\n\n const maskStyle = {\n height: `${height + 100}px`,\n };\n const dialogStyle = { width: Dialog.widths[this.size] };\n\n const header = this.header\n ? html`\n <div class=\"dialog-header\">\n <div class=\"header-text\">${this.header}</div>\n </div>\n `\n : null;\n\n return html`\n <div\n id=\"dialog-mask\"\n @click=${this.handleClickMask}\n class=\"dialog-mask ${getClasses({\n 'dialog-open': this.open,\n 'dialog-loading': this.loading,\n 'dialog-animation-end': this.animationEnd,\n 'dialog-ready': this.ready,\n })}\"\n style=${styleMap(maskStyle)}\n >\n <div style=\"position: absolute; width: 100%;\">\n <temba-loading\n id=\"page-loader\"\n units=\"6\"\n size=\"12\"\n color=\"#ccc\"\n ></temba-loading>\n </div>\n\n <div class=\"flex\">\n <div class=\"flex-grow\"></div>\n <div\n @keyup=${this.handleKeyUp}\n style=${styleMap(dialogStyle)}\n class=\"dialog-container\"\n >\n ${header}\n <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n ${this.body ? this.body : html`<slot></slot>`}\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n </div>\n\n <div class=\"dialog-footer\">\n ${\n this.primaryButtonName\n ? html`\n <temba-button\n @click=${this.handleClick}\n .name=${this.primaryButtonName}\n ?destructive=${this.destructive}\n ?primary=${!this.destructive}\n ?submitting=${this.submitting}\n ?disabled=${this.disabled}\n >}</temba-button\n >\n `\n : null\n }\n <temba-button\n @click=${this.handleClick}\n name=${this.cancelButtonName}\n secondary\n ></temba-button>\n </div>\n </div>\n <div class=\"flex-grow bottom-padding\"></div>\n <div class=\"bottom-padding\"></div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n static get widths(): { [size: string]: string } {\n return {\n small: '400px',\n medium: '600px',\n large: '655px',\n };\n }\n\n static get styles() {\n return css`\n :host {\n position: absolute;\n z-index: 10000;\n font-family: var(--font-family);\n background: white;\n }\n\n .flex {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n left: 0px;\n top: 0px;\n align-items: center;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .bottom-padding {\n padding: 3rem;\n }\n\n .dialog-mask {\n width: 100%;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n position: fixed;\n top: 0px;\n left: 0px;\n transition: opacity linear calc(var(--transition-speed) / 2ms);\n pointer-events: none;\n }\n\n .dialog-container {\n margin-top: -10000px;\n position: relative;\n transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n var(--transition-speed),\n opacity ease-in-out calc(var(--transition-speed) - 50ms);\n border-radius: var(--curvature);\n box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transform: scale(0.7);\n background: white;\n }\n\n .dialog-body {\n background: #fff;\n max-height: 75vh;\n overflow-y: auto;\n }\n\n .dialog-mask.dialog-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .dialog-mask.dialog-open .dialog-container {\n top: inherit;\n }\n\n .dialog-mask.dialog-animation-end .dialog-container {\n margin-top: 10vh;\n transform: scale(1) !important;\n }\n\n .dialog-mask.dialog-ready .dialog-container {\n margin-top: 10vh;\n transform: none;\n }\n\n .dialog-mask.dialog-loading .dialog-container {\n margin-top: -10000px;\n }\n\n .header-text {\n font-size: 20px;\n padding: 12px 20px;\n font-weight: 300;\n color: var(--header-text);\n background: var(--header-bg);\n }\n\n .dialog-footer {\n background: var(--color-primary-light);\n padding: 10px;\n display: flex;\n flex-flow: row-reverse;\n }\n\n temba-button {\n margin-left: 10px;\n }\n\n .dialog-body temba-loading {\n position: absolute;\n right: 12px;\n margin-top: -30px;\n padding-bottom: 9px;\n display: none;\n }\n\n #page-loader {\n text-align: center;\n display: block;\n position: relative;\n opacity: 0;\n margin: auto;\n margin-top: 30px;\n width: 154px;\n transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n calc(var(--transition-speed * 2));\n visibility: hidden;\n }\n\n .dialog-mask.dialog-loading #page-loader {\n opacity: 1;\n visibility: visible;\n }\n\n #submit-loader {\n flex-grow: 1;\n text-align: right;\n }\n `;\n }\n\n @property({ type: Boolean })\n open: boolean;\n\n @property()\n header: string;\n\n @property()\n body: string;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n loading: boolean;\n\n @property({ type: Boolean })\n hideOnClick: boolean;\n\n @property({ type: Boolean })\n noFocus: boolean;\n\n @property()\n size = 'medium';\n\n @property({ type: String })\n primaryButtonName = 'Ok';\n\n @property({ type: String })\n cancelButtonName = 'Cancel';\n\n @property()\n submittingName = 'Saving';\n\n @property()\n animationEnd: boolean;\n\n @property()\n ready: boolean;\n\n @property({ attribute: false })\n onButtonClicked: (button: Button) => void;\n\n scrollOffset: any = 0;\n\n public constructor() {\n super();\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('open')) {\n const body = document.querySelector('body');\n\n if (this.open) {\n this.animationEnd = true;\n window.setTimeout(() => {\n this.ready = true;\n this.animationEnd = false;\n }, 400);\n\n const scrollbarWidth = window.outerWidth - body.clientWidth;\n this.scrollOffset = -document.documentElement.scrollTop;\n body.style.position = 'fixed';\n body.style.overflowY = 'scroll';\n body.style.top = this.scrollOffset + 'px';\n body.style.width = '100%';\n body.style.overflowY = 'hidden';\n body.style.paddingRight = scrollbarWidth + 'px';\n } else {\n body.style.position = '';\n body.style.overflowY = '';\n body.style.width = '';\n body.style.marginRight = '';\n body.style.paddingRight = '0px';\n window.scrollTo(0, parseInt(this.scrollOffset \|\| '0') * -1);\n }\n\n // make sure our buttons aren't in progress on show\n if (this.open && !changedProperties.get('open')) {\n this.shadowRoot\n .querySelectorAll('temba-button')\n .forEach((button: Button) => (button.disabled = false));\n\n if (!this.noFocus) {\n this.focusFirstInput();\n }\n } else {\n window.setTimeout(() => {\n this.ready = false;\n }, 400);\n }\n }\n }\n\n public focusFirstInput(): void {\n window.setTimeout(() => {\n let input = this.querySelector(\n 'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n ) as any;\n if (input) {\n input = input.textInputElement \|\| input.inputElement \|\| input;\n if (!input.readOnly) {\n input.focus();\n input.click();\n }\n }\n }, 100);\n }\n\n public handleClick(evt: MouseEvent) {\n const button = evt.currentTarget as Button;\n if (!button.disabled) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n if (button.name === this.cancelButtonName) {\n this.open = false;\n }\n }\n }\n\n private getDocumentHeight(): number {\n const body = document.body;\n const html = document.documentElement;\n return Math.max(\n body.scrollHeight,\n body.offsetHeight,\n html.clientHeight,\n html.scrollHeight,\n html.offsetHeight\n );\n }\n\n private clickCancel() {\n const cancel = this.getCancelButton();\n if (cancel) {\n cancel.click();\n }\n }\n\n public getCancelButton(): Button {\n return this.shadowRoot.querySelector(\n `temba-button[name='${this.cancelButtonName}']`\n );\n }\n\n public getPrimaryButton(): Button {\n return this.shadowRoot.querySelector(`temba-button[primary]`);\n }\n\n private handleKeyUp(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.clickCancel();\n }\n }\n\n private handleClickMask(event: MouseEvent) {\n if (this.hideOnClick) {\n const id = (event.target as HTMLElement).id;\n if (id === 'dialog-mask' \|\| id === 'dialog-bg') {\n this.fireCustomEvent(CustomEventType.DialogHidden);\n this.clickCancel();\n }\n }\n }\n\n public show(): void {\n this.open = true;\n }\n\n public hide(): void {\n this.open = false;\n }\n\n public render(): TemplateResult {\n const height = this.getDocumentHeight();\n\n const maskStyle = {\n height: `${height + 100}px`,\n };\n const dialogStyle = { width: Dialog.widths[this.size] };\n\n const header = this.header\n ? html`\n <div class=\"dialog-header\">\n <div class=\"header-text\">${this.header}</div>\n </div>\n `\n : null;\n\n return html`\n <div\n id=\"dialog-mask\"\n @click=${this.handleClickMask}\n class=\"dialog-mask ${getClasses({\n 'dialog-open': this.open,\n 'dialog-loading': this.loading,\n 'dialog-animation-end': this.animationEnd,\n 'dialog-ready': this.ready,\n })}\"\n style=${styleMap(maskStyle)}\n >\n <div style=\"position: absolute; width: 100%;\">\n <temba-loading\n id=\"page-loader\"\n units=\"6\"\n size=\"12\"\n color=\"#ccc\"\n ></temba-loading>\n </div>\n\n <div class=\"flex\">\n <div class=\"flex-grow\"></div>\n <div\n @keyup=${this.handleKeyUp}\n style=${styleMap(dialogStyle)}\n class=\"dialog-container\"\n >\n ${header}\n <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n ${this.body ? this.body : html`<slot></slot>`}\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n </div>\n\n <div class=\"dialog-footer\">\n ${\n this.primaryButtonName\n ? html`\n <temba-button\n @click=${this.handleClick}\n .name=${this.primaryButtonName}\n ?destructive=${this.destructive}\n ?primary=${!this.destructive}\n ?submitting=${this.submitting}\n ?disabled=${this.disabled}\n >}</temba-button\n >\n `\n : null\n }\n <temba-button\n @click=${this.handleClick}\n name=${this.cancelButtonName}\n secondary\n ></temba-button>\n </div>\n </div>\n <div class=\"flex-grow bottom-padding\"></div>\n <div class=\"bottom-padding\"></div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/options/Options.js CHANGED Viewed

@@ -31,17 +31,22 @@ export class Options extends RapidElement {
     static get styles() {
         return css `
       .options-container {
-        visibility: hidden;
         border-radius: var(--curvature-widget);
         background: var(--color-widget-bg-focused);
         user-select: none;
         box-shadow: var(--options-shadow);
-        border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature-widget);
         overflow: hidden;
         margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
+        transform: scaleY(0.5) translateY(-5em);
+        transition: transform var(--transition-speed)
+            cubic-bezier(0.71, 0.18, 0.61, 1.33),
+          opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
       }
       .anchored {
@@ -102,8 +107,11 @@ export class Options extends RapidElement {
       }
       .show {
-        visibility: visible;
         z-index: 10000;
+        transform: scaleY(1) translateY(0);
+        border: 1px solid var(--color-widget-border);
+        pointer-events: auto;
+        opacity: 1;
       }
       .option {
@@ -222,6 +230,14 @@ export class Options extends RapidElement {
                 index: this.cursorIndex,
             });
         }
+        if (changedProperties.has('visible') && changedProperties.has('options')) {
+            if (!this.visible && this.options.length == 0) {
+                this.tempOptions = changedProperties.get('options');
+                window.setTimeout(() => {
+                    this.tempOptions = [];
+                }, 100);
+            }
+        }
         if (changedProperties.has('options')) {
             this.calculatePosition();
             // allow scrolls to trigger again
@@ -434,7 +450,12 @@ export class Options extends RapidElement {
         const classesInner = getClasses({
             options: true,
         });
-        const options = this.options || [];
+        let options = this.options || [];
+        if (options.length == 0 &&
+            this.tempOptions &&
+            this.tempOptions.length > 0) {
+            options = this.tempOptions;
+        }
         return html `
       <div class=${classes} style=${styleMap(containerStyle)}>
         <div class="options-scroll" @scroll=${this.handleInnerScroll}>
@@ -494,6 +515,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], Options.prototype, "options", void 0);
+__decorate([
+    property({ type: Array })
+], Options.prototype, "tempOptions", void 0);
 __decorate([
     property({ type: Boolean })
 ], Options.prototype, "poppedTop", void 0);

package/out-tsc/src/options/Options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport {\n getClasses,\n getScrollParent,\n isElementVisible,\n throttle,\n} from '../utils';\n\ninterface NameFunction {\n (option: any): string;\n}\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n .options-container {\n visibility: hidden;\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg-focused);\n user-select: none;\n box-shadow: var(--options-shadow);\n border: 1px solid var(--color-widget-border);\n border-radius: var(--curvature-widget);\n overflow: hidden;\n margin-top: var(--options-margin-top);\n display: flex;\n flex-direction: column;\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n z-index: 9000;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n box-shadow: var(--options-block-shadow);\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 225px;\n border: none;\n }\n\n .show {\n visibility: visible;\n z-index: 10000;\n }\n\n .option {\n font-size: 14px;\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height 200ms ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey \|\| 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated() {\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n this.calculatePosition();\n }\n\n this.resolvedRenderOption = (\n this.renderOption \|\| this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n }\n\n private isFocused() {\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('cursorIndex')) {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n\n if (focusedOption) {\n const scrollBox = this.shadowRoot.querySelector('.options-container');\n const scrollBoxRect = scrollBox.getBoundingClientRect();\n const scrollBoxHeight = scrollBoxRect.height;\n const focusedEleHeight = focusedOption.getBoundingClientRect().height;\n\n if (\n focusedOption.offsetTop + focusedEleHeight >\n scrollBox.scrollTop + scrollBoxHeight - 5\n ) {\n const scrollTo =\n focusedOption.offsetTop - scrollBoxHeight + focusedEleHeight + 5;\n scrollBox.scrollTop = scrollTo;\n } else if (focusedOption.offsetTop < scrollBox.scrollTop) {\n const scrollTo = focusedOption.offsetTop - 5;\n scrollBox.scrollTop = scrollTo;\n }\n }\n\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex,\n });\n }\n\n if (changedProperties.has('options')) {\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changedProperties.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 \|\|\n newCount < previousCount \|\|\n (previousCount === 0 &&\n newCount > 0 &&\n !changedProperties.has('cursorIndex'))\n ) {\n if (!this.block) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.block) {\n this.handleSelection(false);\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n\n if (changedProperties.has('visible')) {\n window.setTimeout(() => {\n this.calculatePosition();\n }, 100);\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName \|\| this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail \|\| this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index,\n });\n }\n\n private moveCursor(direction: number): void {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n },\n 50);\n\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.block && !this.isFocused()) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') \|\| evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.block) {\n this.handleSelection(false);\n }\n } else if ((evt.ctrlKey && evt.key === 'p') \|\| evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.block) {\n this.handleSelection(false);\n }\n } else if (\n evt.key === 'Enter' \|\|\n evt.key === 'Tab' \|\|\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n }\n\n if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n const topTop = anchorBounds.top - optionsBounds.height;\n\n if (this.anchorTo && this.scrollParent) {\n if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n // this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n\n if (\n topTop > 0 &&\n anchorBounds.bottom + optionsBounds.height > window.innerHeight\n ) {\n this.top = topTop; // + window.pageYOffset;\n this.poppedTop = true;\n } else {\n this.top = anchorBounds.bottom; // + window.pageYOffset;\n this.poppedTop = false;\n }\n\n this.left = anchorBounds.left;\n this.width = anchorBounds.width - 2 - this.marginHorizontal * 2;\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true,\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true,\n },\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n private handleOptionClick(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = {\n top: this.top ? `${this.top}px` : '0px',\n left: this.left ? `${this.left}px` : '0px',\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`,\n };\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block,\n loading: this.loading,\n });\n\n const classesInner = getClasses({\n options: true,\n });\n\n const options = this.options \|\| [];\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @click=${this.handleOptionClick}\n class=\"option ${index === this.cursorIndex ? 'focused' : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,MAAM,UAAU,CAAC;AAElB,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QAuKE,qBAAgB,GAAG,CAAC,CAAC;QAGrB,mBAAc,GAAG,CAAC,CAAC;QAYnB,cAAS,GAAG,EAAE,CAAC;QAGf,gBAAW,GAAG,CAAC,CAAC,CAAC;QAejB,YAAO,GAAG,MAAM,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAMhB,YAAO,GAA8B,UAAU,MAAW;YACxD,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;QACxC,CAAC,CAAC;QAGF,sBAAiB,GAA2B;YAC1C,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QAYF,iBAAY,GAAG,CAAC,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAgB,IAAI,CAAC;QAmLzB,cAAS,GAA4B,QAAQ,CAAC,UACpD,KAAa;YAEb,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;gBAC9B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC1B;QACH,CAAC,EACD,EAAE,CAAC,CAAC;IAkMN,CAAC;IApmBC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwJT,CAAC;IACJ,CAAC;IAkFM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC3D,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;aACtE;YACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QAED,IAAI,CAAC,oBAAoB,GAAG,CAC1B,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB,CAC9C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAEM,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;aACzE;SACF;IACH,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GACX,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;YACnD,QAAQ,CAAC,aAAa,CAAC;QAEzB,OAAO,OAAO,CAAC;IACjB,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,oEAAoE;QACpE,IAAI,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YACxC,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACjD,0BAA0B,IAAI,CAAC,WAAW,IAAI,CAC7B,CAAC;YAEpB,IAAI,aAAa,EAAE;gBACjB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;gBACtE,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;gBACxD,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC;gBAC7C,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;gBAEtE,IACE,aAAa,CAAC,SAAS,GAAG,gBAAgB;oBAC1C,SAAS,CAAC,SAAS,GAAG,eAAe,GAAG,CAAC,EACzC;oBACA,MAAM,QAAQ,GACZ,aAAa,CAAC,SAAS,GAAG,eAAe,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBACnE,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC;iBAChC;qBAAM,IAAI,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE;oBACxD,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC;oBAC7C,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC;iBAChC;aACF;YAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,KAAK,EAAE,IAAI,CAAC,WAAW;aACxB,CAAC,CAAC;SACJ;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACxE,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE;gBAC7C,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACpD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;gBACxB,CAAC,EAAE,GAAG,CAAC,CAAC;aACT;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,iCAAiC;YACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,MAAM,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACrD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAExD,IACE,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;gBACvB,QAAQ,GAAG,aAAa;gBACxB,CAAC,aAAa,KAAK,CAAC;oBAClB,QAAQ,GAAG,CAAC;oBACZ,CAAC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,EACxC;gBACA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;oBACf,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;iBACtB;qBAAM;oBACL,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;wBAChC,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;qBACjC;iBACF;gBAED,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;YAED,4EAA4E;YAC5E,2EAA2E;YAC3E,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC5D,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,EAAE;gBACpD,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACvD;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,mBAAmB,CAAC,MAAW,EAAE,QAAiB;QACxD,MAAM,gBAAgB,GAAG,CACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,uBAAuB,CACtD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACb,MAAM,kBAAkB,GAAG,CACzB,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,yBAAyB,CAC1D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,IAAI,QAAQ,EAAE;YACZ,OAAO,IAAI,CAAA;4BACW,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC;8BAChC,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC;OAC3D,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAA;4BACW,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC;OACvD,CAAC;SACH;IACH,CAAC;IAEO,uBAAuB,CAAC,MAAW;QACzC,OAAO,IAAI,CAAA;QACP,MAAM,CAAC,IAAI;YACX,CAAC,CAAC,IAAI,CAAA;oBACM,MAAM,CAAC,IAAI;;yBAEN;YACjB,CAAC,CAAC,IAAI;iCACmB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;WAC1D,CAAC;IACV,CAAC;IAEO,yBAAyB,CAAC,MAAW;QAC3C,OAAO,IAAI,CAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;IAClC,CAAC;IAEO,eAAe,CAAC,MAAM,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC;QAChD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC1B;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,EAAE;YAC9C,QAAQ;YACR,MAAM;YACN,KAAK;SACN,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,SAAiB;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAC/D,CAAC,CACF,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;IAWO,aAAa,CAAC,GAAkB;QACtC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACnC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC/D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;gBACnB,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;iBAAM,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,SAAS,EAAE;gBACpE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpB,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;iBAAM,IACL,GAAG,CAAC,GAAG,KAAK,OAAO;gBACnB,GAAG,CAAC,GAAG,KAAK,KAAK;gBACjB,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,EACrC;gBACA,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC;aACzC;YAED,IAAI,GAAG,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;aAChD;SACF;IACH,CAAC;IAEO,iBAAiB,CAAC,GAAU;QAClC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAwB,CAAC;QAE/C,mDAAmD;QACnD,IAAI,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;YAC9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;YAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,MAAM,SAAS,GACb,SAAS,CAAC,SAAS,GAAG,CAAC,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;YAC1E,IAAI,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;gBACpC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;gBACtD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC5B;SACF;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;iBAClC,aAAa,CAAC,oBAAoB,CAAC;iBACnC,qBAAqB,EAAE,CAAC;YAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBAC3D,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC,MAAM,CAAC;gBAEvD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;oBACtC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE;wBACvD,kDAAkD;qBACnD;iBACF;gBAED,IACE,MAAM,GAAG,CAAC;oBACV,YAAY,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAC/D;oBACA,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,yBAAyB;oBAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;iBACvB;qBAAM;oBACL,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,yBAAyB;oBACzD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;iBACxB;gBAED,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC;gBAC9B,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;aACjE;SACF;IACH,CAAC;IAEM,gBAAgB;QACrB,OAAO;YACL;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,IAAI,CAAC,aAAa;gBAC1B,UAAU,EAAE,IAAI;aACjB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,IAAI,CAAC,iBAAiB;gBAC9B,UAAU,EAAE,IAAI;aACjB;SACF,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,GAAe;QACrC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;gBACzD,MAAM,KAAK,GAAI,GAAG,CAAC,aAA6B,CAAC,YAAY,CAC3D,mBAAmB,CACpB,CAAC;gBACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;aACjC;SACF;IACH,CAAC;IAEO,iBAAiB,CAAC,GAAe;QACvC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QAEtB,MAAM,KAAK,GAAI,GAAG,CAAC,aAA6B,CAAC,YAAY,CAC3D,mBAAmB,CACpB,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;SACvC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,QAAQ,IAAI,CAAC,CAAC,CAAC;SAChB;QAED,MAAM,cAAc,GAAG;YACrB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK;YAC1C,aAAa,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI;YAC3C,YAAY,EAAE,GAAG,QAAQ,IAAI;SAC9B,CAAC;QAEF,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,YAAY,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SAC3C;QAED,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,mBAAmB,EAAE,IAAI;YACzB,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,GAAG,EAAE,IAAI,CAAC,SAAS;YACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,UAAU,CAAC;YAC9B,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACjC,IACE,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAC3B;YACA,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;SAC5B;QAED,OAAO,IAAI,CAAA;mBACI,OAAO,UAAU,QAAQ,CAAC,cAAc,CAAC;8CACd,IAAI,CAAC,iBAAiB;wBAC5C,YAAY,WAAW,QAAQ,CAAC,YAAY,CAAC;cACvD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC9B,OAAO,IAAI,CAAA;qCACY,KAAK;6BACb,IAAI,CAAC,eAAe;yBACxB,IAAI,CAAC,iBAAiB;gCACf,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;kBAEzD,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC;qBAC1D,CAAC;QACV,CAAC,CAAC;cACA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC,CAAC,CAAC,IAAI;;;;;;;;;KASnE,CAAC;IACJ,CAAC;CACF;AAvcC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCACX;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACP;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCAG7B;AAGF;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAG7B;AAGF;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CACoC;AAGnE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACwC;AAGvE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDAC0C;AAGzE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACN","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport {\n getClasses,\n getScrollParent,\n isElementVisible,\n throttle,\n} from '../utils';\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n .options-container {\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg-focused);\n user-select: none;\n box-shadow: var(--options-shadow);\n border-radius: var(--curvature-widget);\n overflow: hidden;\n margin-top: var(--options-margin-top);\n display: flex;\n flex-direction: column;\n transform: scaleY(0.5) translateY(-5em);\n transition: transform var(--transition-speed)\n cubic-bezier(0.71, 0.18, 0.61, 1.33),\n opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n z-index: 10000;\n pointer-events: none;\n opacity: 0;\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n z-index: 9000;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n box-shadow: var(--options-block-shadow);\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 225px;\n border: none;\n }\n\n .show {\n z-index: 10000;\n transform: scaleY(1) translateY(0);\n border: 1px solid var(--color-widget-border);\n pointer-events: auto;\n opacity: 1;\n }\n\n .option {\n font-size: 14px;\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height 200ms ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Array })\n tempOptions: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey \|\| 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated() {\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n this.calculatePosition();\n }\n\n this.resolvedRenderOption = (\n this.renderOption \|\| this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n }\n\n private isFocused() {\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('cursorIndex')) {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n\n if (focusedOption) {\n const scrollBox = this.shadowRoot.querySelector('.options-container');\n const scrollBoxRect = scrollBox.getBoundingClientRect();\n const scrollBoxHeight = scrollBoxRect.height;\n const focusedEleHeight = focusedOption.getBoundingClientRect().height;\n\n if (\n focusedOption.offsetTop + focusedEleHeight >\n scrollBox.scrollTop + scrollBoxHeight - 5\n ) {\n const scrollTo =\n focusedOption.offsetTop - scrollBoxHeight + focusedEleHeight + 5;\n scrollBox.scrollTop = scrollTo;\n } else if (focusedOption.offsetTop < scrollBox.scrollTop) {\n const scrollTo = focusedOption.offsetTop - 5;\n scrollBox.scrollTop = scrollTo;\n }\n }\n\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex,\n });\n }\n\n if (changedProperties.has('visible') && changedProperties.has('options')) {\n if (!this.visible && this.options.length == 0) {\n this.tempOptions = changedProperties.get('options');\n window.setTimeout(() => {\n this.tempOptions = [];\n }, 100);\n }\n }\n\n if (changedProperties.has('options')) {\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changedProperties.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 \|\|\n newCount < previousCount \|\|\n (previousCount === 0 &&\n newCount > 0 &&\n !changedProperties.has('cursorIndex'))\n ) {\n if (!this.block) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.block) {\n this.handleSelection(false);\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n\n if (changedProperties.has('visible')) {\n window.setTimeout(() => {\n this.calculatePosition();\n }, 100);\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName \|\| this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail \|\| this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index,\n });\n }\n\n private moveCursor(direction: number): void {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n },\n 50);\n\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.block && !this.isFocused()) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') \|\| evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.block) {\n this.handleSelection(false);\n }\n } else if ((evt.ctrlKey && evt.key === 'p') \|\| evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.block) {\n this.handleSelection(false);\n }\n } else if (\n evt.key === 'Enter' \|\|\n evt.key === 'Tab' \|\|\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n }\n\n if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n const topTop = anchorBounds.top - optionsBounds.height;\n\n if (this.anchorTo && this.scrollParent) {\n if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n // this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n\n if (\n topTop > 0 &&\n anchorBounds.bottom + optionsBounds.height > window.innerHeight\n ) {\n this.top = topTop; // + window.pageYOffset;\n this.poppedTop = true;\n } else {\n this.top = anchorBounds.bottom; // + window.pageYOffset;\n this.poppedTop = false;\n }\n\n this.left = anchorBounds.left;\n this.width = anchorBounds.width - 2 - this.marginHorizontal * 2;\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true,\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true,\n },\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n private handleOptionClick(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = {\n top: this.top ? `${this.top}px` : '0px',\n left: this.left ? `${this.left}px` : '0px',\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`,\n };\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block,\n loading: this.loading,\n });\n\n const classesInner = getClasses({\n options: true,\n });\n\n let options = this.options \|\| [];\n if (\n options.length == 0 &&\n this.tempOptions &&\n this.tempOptions.length > 0\n ) {\n options = this.tempOptions;\n }\n\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @click=${this.handleOptionClick}\n class=\"option ${index === this.cursorIndex ? 'focused' : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/select/Select.js CHANGED Viewed

@@ -32,6 +32,7 @@ export class Select extends FormElement {
         this.anchorPosition = { left: 0, top: 0 };
         this.tags = false;
         this.flavor = 'default';
+        this.infoText = '';
         this.getName = (option) => option[this.nameKey || 'name'];
         this.isMatch = (option, q) => {
             const name = this.getName(option) || '';
@@ -67,6 +68,7 @@ export class Select extends FormElement {
       temba-options {
         --icon-color: var(--color-text-dark);
+        z-index: 3;
       }
       :host:focus {
@@ -116,6 +118,9 @@ export class Select extends FormElement {
         padding-top: 1px;
         box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04),
           0 1px 2px 0 rgba(0, 0, 0, 0.02);
+        position: relative;
+        z-index: 2;
       }
       .select-container:hover temba-icon[name='chevron-down'],
@@ -332,6 +337,34 @@ export class Select extends FormElement {
         --temba-select-selected-font-size: 12px;
         --search-input-height: 7px !important;
       }
+      .info-text {
+        opacity: 1;
+        transition: margin 200ms ease-in-out;
+        margin-bottom: 16px;
+        margin-top: -1em;
+        padding: 0.5em 1em;
+        background: #f3f3f3;
+        padding-top: 1.5em;
+        border-radius: var(--curvature);
+        font-size: 0.9em;
+        color: rgba(0, 0, 0, 0.5);
+        box-shadow: inset 0px 0px 4px rgb(0 0 0 / 10%);
+        z-index: 1;
+        position: relative;
+      }
+      .info-text.focused {
+        opacity: 1;
+      }
+      .info-text.hide {
+        opacity: 0;
+        max-height: 0;
+        margin-bottom: 0px;
+        margin-top: -2em;
+        pointer-events: none;
+      }
     `;
     }
     updated(changedProperties) {
@@ -654,14 +687,16 @@ export class Select extends FormElement {
         }
     }
     handleBlur() {
-        this.focused = false;
-        if (this.visibleOptions.length > 0) {
-            this.input = '';
-            this.next = null;
-            this.complete = true;
-            this.visibleOptions = [];
-            this.cursorIndex = 0;
-        }
+        window.setTimeout(() => {
+            this.focused = false;
+            if (this.visibleOptions.length > 0) {
+                this.input = '';
+                this.next = null;
+                this.complete = true;
+                this.visibleOptions = [];
+                this.cursorIndex = 0;
+            }
+        }, 200);
     }
     handleClick() {
         this.selectedIndex = -1;
@@ -924,6 +959,7 @@ export class Select extends FormElement {
         .hideErrors=${this.hideErrors}
         ?disabled=${this.disabled}
       >
         <div
           tabindex="0"
@@ -982,43 +1018,47 @@ export class Select extends FormElement {
                   />
                 </div>`
             : null}
-          <temba-options
-          @temba-selection=${this.handleOptionSelection}
-          .cursorIndex=${this.cursorIndex}
-          .renderOptionDetail=${this.renderOptionDetail}
-          .renderOptionName=${this.renderOptionName}
-          .renderOption=${this.renderOption}
-          .anchorTo=${this.anchorElement}
-          .options=${this.visibleOptions}
-          .spaceSelect=${this.spaceSelect}
-          .nameKey=${this.nameKey}
-          .getName=${this.getNameInternal}
-          ?visible=${this.visibleOptions.length > 0}
-        ></temba-options>
-          <temba-options
-          @temba-selection=${this.handleExpressionSelection}
-          @temba-canceled=${() => { }}
-          .anchorTo=${this.anchorExpressions}
-          .options=${this.completionOptions}
-          .renderOption=${renderCompletionOption}
-          ?visible=${this.completionOptions.length > 0}
-          >
-            ${this.currentFunction
-            ? html `
-                    <div class="current-fn">
-                      ${renderCompletionOption(this.currentFunction, true)}
-                    </div>
-                  `
-            : null}
-            <div class="footer">Tab to complete, enter to select</div>
-          </temba-options>
           </div>
         </div>
+        <div class="info-text ${!this.infoText ? 'hide' : ''} ${this.focused ? 'focused' : ''}">${this.infoText}</div>
+    <temba-options
+    @temba-selection=${this.handleOptionSelection}
+    .cursorIndex=${this.cursorIndex}
+    .renderOptionDetail=${this.renderOptionDetail}
+    .renderOptionName=${this.renderOptionName}
+    .renderOption=${this.renderOption}
+    .anchorTo=${this.anchorElement}
+    .options=${this.visibleOptions}
+    .spaceSelect=${this.spaceSelect}
+    .nameKey=${this.nameKey}
+    .getName=${this.getNameInternal}
+    ?visible=${this.visibleOptions.length > 0}
+  ></temba-options>
+    <temba-options
+    @temba-selection=${this.handleExpressionSelection}
+    @temba-canceled=${() => { }}
+    .anchorTo=${this.anchorExpressions}
+    .options=${this.completionOptions}
+    .renderOption=${renderCompletionOption}
+    ?visible=${this.completionOptions.length > 0}
+    >
+      ${this.currentFunction
+            ? html `
+              <div class="current-fn">
+                ${renderCompletionOption(this.currentFunction, true)}
+              </div>
+            `
+            : null}
+      <div class="footer">Tab to complete, enter to select</div>
+    </temba-options>
         </temba-field>
     `;
     }
 }
@@ -1115,6 +1155,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Select.prototype, "flavor", void 0);
+__decorate([
+    property({ type: String, attribute: 'info_text' })
+], Select.prototype, "infoText", void 0);
 __decorate([
     property({ attribute: false })
 ], Select.prototype, "getName", void 0);