@nyaruka/temba-components 0.56.0 → 0.57.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 (19) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/{e3f2a5a4.js → 07c90857.js} +19 -3
  3. package/dist/index.js +19 -3
  4. package/dist/sw.js +1 -1
  5. package/dist/sw.js.map +1 -1
  6. package/dist/templates/components-body.html +1 -1
  7. package/dist/templates/components-head.html +1 -1
  8. package/out-tsc/src/FormElement.js.map +1 -1
  9. package/out-tsc/src/checkbox/Checkbox.js +3 -3
  10. package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
  11. package/out-tsc/src/vectoricon/VectorIcon.js +20 -0
  12. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  13. package/out-tsc/test/temba-checkbox.test.js +54 -0
  14. package/out-tsc/test/temba-checkbox.test.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/FormElement.ts +1 -1
  17. package/src/checkbox/Checkbox.ts +3 -4
  18. package/src/vectoricon/VectorIcon.ts +20 -0
  19. package/test/temba-checkbox.test.ts +67 -0
package/CHANGELOG.md CHANGED
@@ -4,8 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.57.0](https://github.com/nyaruka/temba-components/compare/v0.56.1...v0.57.0)
8
+
9
+ - Support arbitrary checkbox values [`#352`](https://github.com/nyaruka/temba-components/pull/352)
10
+ - Extra test to make sure arbitrary values aren't sent unless checked [`1198250`](https://github.com/nyaruka/temba-components/commit/1198250e8e244a5af18a276efceaba1b793a4906)
11
+
12
+ #### [v0.56.1](https://github.com/nyaruka/temba-components/compare/v0.56.0...v0.56.1)
13
+
14
+ > 25 July 2023
15
+
16
+ - Add icon spin attribute [`#351`](https://github.com/nyaruka/temba-components/pull/351)
17
+
7
18
  #### [v0.56.0](https://github.com/nyaruka/temba-components/compare/v0.55.0...v0.56.0)
8
19
 
20
+ > 21 July 2023
21
+
9
22
  - Make contact search contain all preview parameters [`#350`](https://github.com/nyaruka/temba-components/pull/350)
10
23
  - Bump word-wrap from 1.2.3 to 1.2.4 [`#349`](https://github.com/nyaruka/temba-components/pull/349)
11
24
  - Bump semver from 5.7.1 to 5.7.2 [`#348`](https://github.com/nyaruka/temba-components/pull/348)
package/dist/{e3f2a5a4.js → 07c90857.js} RENAMED
@@ -48,7 +48,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
48
48
  cursor: not-allowed;
49
49
  --icon-color: #ccc;
50
50
  }
51
- `}updated(t){super.updated(t),t.has("checked")&&(this.checked||this.partial?this.value="1":this.value="",this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
51
+ `}updated(t){super.updated(t),(t.has("checked")||t.has("value"))&&(this.checked||this.partial?this.internals.setFormValue(this.value||"1"):this.internals.setFormValue(void 0),this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
52
52
  name="${this.checked?pt.checkbox_checked:this.partial?pt.checkbox_partial:pt.checkbox}"
53
53
  size="${this.size}"
54
54
  animatechange="${this.animateChange}"
@@ -3073,10 +3073,26 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
3073
3073
  margin: calc(-1 * var(--icon-circle-size));
3074
3074
  background: var(--icon-background);
3075
3075
  }
3076
+
3077
+ .spin-forever {
3078
+ animation-name: spin;
3079
+ animation-duration: 2000ms;
3080
+ animation-iteration-count: infinite;
3081
+ animation-timing-function: linear;
3082
+ }
3083
+
3084
+ @keyframes spin {
3085
+ from {
3086
+ transform: rotate(0deg);
3087
+ }
3088
+ to {
3089
+ transform: rotate(360deg);
3090
+ }
3091
+ }
3076
3092
  `}constructor(){super(),this.size=1,this.animationDuration=200,this.src="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}firstUpdated(t){super.firstUpdated(t),t.has("animateChange")&&(t.has("animationDuration")||(this.animationDuration=this.steps*this.animationDuration),"spin"===this.animateChange&&(this.steps=3,this.animationDuration=400,this.easing="linear"))}handleClicked(){this.animateClick&&(this.animationStep=1)}updated(t){super.updated(t),t.has("animationStep")&&(this.lastName&&this.animationStep>=this.steps/2&&(this.lastName=null,this.requestUpdate()),setTimeout((()=>{this.animationStep>0&&this.animationStep<this.steps?this.animationStep++:this.animationStep=0}),this.animationDuration/this.steps)),t.has("name")&&this.animateChange&&(this.lastName=t.get("name"),this.lastName&&this.animateChange&&(this.animationStep=1))}render(){let t=this.lastName||this.name;return t=this.name.startsWith("channel_")&&!pt[t]?pt.channel_ex:pt[t.replace("icon.","")]||t,t||(t=this.id),D`
3077
3093
  <div
3078
3094
  @click=${this.handleClicked}
3079
- class="wrapper ${ee({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange||!!this.animateClick})}"
3095
+ class="wrapper ${ee({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange||!!this.animateClick,"spin-forever":this.spin})}"
3080
3096
  >
3081
3097
  <svg
3082
3098
  style="height:${this.size}em;width:${this.size}em;transition:transform ${this.animationDuration/this.steps}ms
@@ -3088,7 +3104,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
3088
3104
  />
3089
3105
  </svg>
3090
3106
  </div>
3091
- `}}var kl;t([ct({type:String})],wl.prototype,"name",void 0),t([ct({type:String})],wl.prototype,"prefix",void 0),t([ct({type:String})],wl.prototype,"id",void 0),t([ct({type:Number})],wl.prototype,"size",void 0),t([ct({type:Boolean})],wl.prototype,"clickable",void 0),t([ct({type:Boolean})],wl.prototype,"circled",void 0),t([ct({type:String})],wl.prototype,"animateChange",void 0),t([ct({type:String})],wl.prototype,"animateClick",void 0),t([ct({type:Number})],wl.prototype,"animationDuration",void 0),t([ct({type:String})],wl.prototype,"src",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"steps",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"animationStep",void 0),t([ct({type:String})],wl.prototype,"easing",void 0),function(t){t.Group="group",t.Contact="contact"}(kl||(kl={}));const Sl={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class El extends lt{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1,this.infoText=""}static get styles(){return r`
3107
+ `}}var kl;t([ct({type:String})],wl.prototype,"name",void 0),t([ct({type:String})],wl.prototype,"prefix",void 0),t([ct({type:String})],wl.prototype,"id",void 0),t([ct({type:Number})],wl.prototype,"size",void 0),t([ct({type:Boolean})],wl.prototype,"spin",void 0),t([ct({type:Boolean})],wl.prototype,"clickable",void 0),t([ct({type:Boolean})],wl.prototype,"circled",void 0),t([ct({type:String})],wl.prototype,"animateChange",void 0),t([ct({type:String})],wl.prototype,"animateClick",void 0),t([ct({type:Number})],wl.prototype,"animationDuration",void 0),t([ct({type:String})],wl.prototype,"src",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"steps",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"animationStep",void 0),t([ct({type:String})],wl.prototype,"easing",void 0),function(t){t.Group="group",t.Contact="contact"}(kl||(kl={}));const Sl={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class El extends lt{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1,this.infoText=""}static get styles(){return r`
3092
3108
  temba-select:focus {
3093
3109
  outline: none;
3094
3110
  box-shadow: none;
package/dist/index.js CHANGED
@@ -48,7 +48,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
48
48
  cursor: not-allowed;
49
49
  --icon-color: #ccc;
50
50
  }
51
- `}updated(t){super.updated(t),t.has("checked")&&(this.checked||this.partial?this.value="1":this.value="",this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
51
+ `}updated(t){super.updated(t),(t.has("checked")||t.has("value"))&&(this.checked||this.partial?this.internals.setFormValue(this.value||"1"):this.internals.setFormValue(void 0),this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
52
52
  name="${this.checked?pt.checkbox_checked:this.partial?pt.checkbox_partial:pt.checkbox}"
53
53
  size="${this.size}"
54
54
  animatechange="${this.animateChange}"
@@ -3073,10 +3073,26 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
3073
3073
  margin: calc(-1 * var(--icon-circle-size));
3074
3074
  background: var(--icon-background);
3075
3075
  }
3076
+
3077
+ .spin-forever {
3078
+ animation-name: spin;
3079
+ animation-duration: 2000ms;
3080
+ animation-iteration-count: infinite;
3081
+ animation-timing-function: linear;
3082
+ }
3083
+
3084
+ @keyframes spin {
3085
+ from {
3086
+ transform: rotate(0deg);
3087
+ }
3088
+ to {
3089
+ transform: rotate(360deg);
3090
+ }
3091
+ }
3076
3092
  `}constructor(){super(),this.size=1,this.animationDuration=200,this.src="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}firstUpdated(t){super.firstUpdated(t),t.has("animateChange")&&(t.has("animationDuration")||(this.animationDuration=this.steps*this.animationDuration),"spin"===this.animateChange&&(this.steps=3,this.animationDuration=400,this.easing="linear"))}handleClicked(){this.animateClick&&(this.animationStep=1)}updated(t){super.updated(t),t.has("animationStep")&&(this.lastName&&this.animationStep>=this.steps/2&&(this.lastName=null,this.requestUpdate()),setTimeout((()=>{this.animationStep>0&&this.animationStep<this.steps?this.animationStep++:this.animationStep=0}),this.animationDuration/this.steps)),t.has("name")&&this.animateChange&&(this.lastName=t.get("name"),this.lastName&&this.animateChange&&(this.animationStep=1))}render(){let t=this.lastName||this.name;return t=this.name.startsWith("channel_")&&!pt[t]?pt.channel_ex:pt[t.replace("icon.","")]||t,t||(t=this.id),D`
3077
3093
  <div
3078
3094
  @click=${this.handleClicked}
3079
- class="wrapper ${ee({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange||!!this.animateClick})}"
3095
+ class="wrapper ${ee({clickable:this.clickable,circled:this.circled,animate:!!this.animateChange||!!this.animateClick,"spin-forever":this.spin})}"
3080
3096
  >
3081
3097
  <svg
3082
3098
  style="height:${this.size}em;width:${this.size}em;transition:transform ${this.animationDuration/this.steps}ms
@@ -3088,7 +3104,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
3088
3104
  />
3089
3105
  </svg>
3090
3106
  </div>
3091
- `}}var kl;t([ct({type:String})],wl.prototype,"name",void 0),t([ct({type:String})],wl.prototype,"prefix",void 0),t([ct({type:String})],wl.prototype,"id",void 0),t([ct({type:Number})],wl.prototype,"size",void 0),t([ct({type:Boolean})],wl.prototype,"clickable",void 0),t([ct({type:Boolean})],wl.prototype,"circled",void 0),t([ct({type:String})],wl.prototype,"animateChange",void 0),t([ct({type:String})],wl.prototype,"animateClick",void 0),t([ct({type:Number})],wl.prototype,"animationDuration",void 0),t([ct({type:String})],wl.prototype,"src",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"steps",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"animationStep",void 0),t([ct({type:String})],wl.prototype,"easing",void 0),function(t){t.Group="group",t.Contact="contact"}(kl||(kl={}));const Sl={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class El extends lt{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1,this.infoText=""}static get styles(){return r`
3107
+ `}}var kl;t([ct({type:String})],wl.prototype,"name",void 0),t([ct({type:String})],wl.prototype,"prefix",void 0),t([ct({type:String})],wl.prototype,"id",void 0),t([ct({type:Number})],wl.prototype,"size",void 0),t([ct({type:Boolean})],wl.prototype,"spin",void 0),t([ct({type:Boolean})],wl.prototype,"clickable",void 0),t([ct({type:Boolean})],wl.prototype,"circled",void 0),t([ct({type:String})],wl.prototype,"animateChange",void 0),t([ct({type:String})],wl.prototype,"animateClick",void 0),t([ct({type:Number})],wl.prototype,"animationDuration",void 0),t([ct({type:String})],wl.prototype,"src",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"steps",void 0),t([ct({type:Number,attribute:!1})],wl.prototype,"animationStep",void 0),t([ct({type:String})],wl.prototype,"easing",void 0),function(t){t.Group="group",t.Contact="contact"}(kl||(kl={}));const Sl={color:"var(--color-text-dark)",padding:"0px 6px",fontSize:"12px"};class El extends lt{constructor(){super(...arguments),this.groups=!1,this.contacts=!1,this.value=[],this.placeholder="Select recipients",this.disabled=!1,this.infoText=""}static get styles(){return r`
3092
3108
  temba-select:focus {
3093
3109
  outline: none;
3094
3110
  box-shadow: none;
package/dist/sw.js CHANGED
@@ -1,2 +1,2 @@
1
- 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:"e3f2a5a4.js",revision:"15e59c2469f4a9b42b823aecd25117b3"},{url:"templates/components-body.html",revision:"f6938bc95a128bb1d6ddad6d356bfebd"},{url:"templates/components-head.html",revision:"005b42c4c1fae80548ae41c2c9ed7b98"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
1
+ 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),d={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>d[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"07c90857.js",revision:"5de2ae0e3aa744fc4d44798640aa8de5"},{url:"templates/components-body.html",revision:"45e1d5154c73e6d417470774a833c96a"},{url:"templates/components-head.html",revision:"6fad6d6b3861e55520627ca3f1691471"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
2
2
  //# sourceMappingURL=sw.js.map
package/dist/sw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sw.js","sources":["../../../../../tmp/a89324a944b3bf34f9f40037f0ea929c/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\": \"e3f2a5a4.js\",\n \"revision\": \"15e59c2469f4a9b42b823aecd25117b3\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"f6938bc95a128bb1d6ddad6d356bfebd\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"005b42c4c1fae80548ae41c2c9ed7b98\"\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"}
1
+ {"version":3,"file":"sw.js","sources":["../../../../../tmp/7cde6c01a9aaa48d1b7619432a103228/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\": \"07c90857.js\",\n \"revision\": \"5de2ae0e3aa744fc4d44798640aa8de5\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"45e1d5154c73e6d417470774a833c96a\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"6fad6d6b3861e55520627ca3f1691471\"\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 CHANGED
@@ -1 +1 @@
1
- <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/e3f2a5a4.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.56.0"</script>
1
+ <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/07c90857.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.57.0"</script>
package/dist/templates/components-head.html CHANGED
@@ -1 +1 @@
1
- <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/e3f2a5a4.js" crossorigin="anonymous">
1
+ <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/07c90857.js" crossorigin="anonymous">
package/out-tsc/src/FormElement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAmC3C;QACE,KAAK,EAAE,CAAC;QAlCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAQf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAlCM,0BAAc,GAAG,IAAI,CAAC;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'help_text' })\n helpText: string;\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways: boolean;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel: boolean;\n\n @property({ type: String })\n label: string;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: String })\n value = null;\n\n @property({ attribute: false })\n inputRoot: HTMLElement = this;\n\n @property({ type: Boolean })\n disabled = false;\n\n static formAssociated = true;\n\n private internals: ElementInternals;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this.value);\n }\n }\n\n get form() {\n return this.internals.form;\n }\n\n get type() {\n return this.localName;\n }\n\n public setValue(value: any) {\n this.value = this.serializeValue(value);\n }\n\n public getDeserializedValue(): any {\n return JSON.parse(this.value);\n }\n\n public serializeValue(value: any): string {\n return JSON.stringify(value);\n }\n}\n"]}
1
+ {"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAmC3C;QACE,KAAK,EAAE,CAAC;QAlCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAQf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAlCM,0BAAc,GAAG,IAAI,CAAC;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'help_text' })\n helpText: string;\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways: boolean;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel: boolean;\n\n @property({ type: String })\n label: string;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: String })\n value = null;\n\n @property({ attribute: false })\n inputRoot: HTMLElement = this;\n\n @property({ type: Boolean })\n disabled = false;\n\n static formAssociated = true;\n\n protected internals: ElementInternals;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this.value);\n }\n }\n\n get form() {\n return this.internals.form;\n }\n\n get type() {\n return this.localName;\n }\n\n public setValue(value: any) {\n this.value = this.serializeValue(value);\n }\n\n public getDeserializedValue(): any {\n return JSON.parse(this.value);\n }\n\n public serializeValue(value: any): string {\n return JSON.stringify(value);\n }\n}\n"]}
package/out-tsc/src/checkbox/Checkbox.js CHANGED
@@ -66,12 +66,12 @@ export class Checkbox extends FormElement {
66
66
  }
67
67
  updated(changes) {
68
68
  super.updated(changes);
69
- if (changes.has('checked')) {
69
+ if (changes.has('checked') || changes.has('value')) {
70
70
  if (this.checked || this.partial) {
71
- this.value = '1';
71
+ this.internals.setFormValue(this.value || '1');
72
72
  }
73
73
  else {
74
- this.value = '';
74
+ this.internals.setFormValue(undefined);
75
75
  }
76
76
  this.fireEvent('change');
77
77
  }
package/out-tsc/src/checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QASV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IAgE1B,CAAC;IAtIC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAoBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;aACjB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO;YAClB,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,IAAI,CAAC,gBAAgB;gBACvB,CAAC,CAAC,IAAI,CAAC,QAAQ;cACT,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnD,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;iBAEpC,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,UAAU;wBACf,IAAI;sBACN,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;;2CAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC5D,IAAI;cACJ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ;YACvD,CAAC,CAAC,IAAI;;;;KAIf,CAAC;IACJ,CAAC;CACF;AA/EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\n\nexport class Checkbox extends FormElement {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n }\n\n :host([label]) {\n width: 100%;\n }\n\n .wrapper.label {\n padding: 10px;\n border-radius: var(--curvature);\n }\n\n .wrapper.label:hover {\n background: #f9f9f9;\n }\n\n temba-field {\n --help-text-margin-left: 24px;\n cursor: pointer;\n }\n\n .checkbox-container {\n cursor: pointer;\n display: flex;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox-label {\n font-family: var(--font-family);\n padding: 0px;\n margin-left: 8px;\n font-weight: 300;\n font-size: 14px;\n line-height: 19px;\n flex-grow: 1;\n }\n\n .far {\n height: 16px;\n margin-top: 1px;\n }\n\n .disabled {\n cursor: not-allowed;\n --icon-color: #ccc;\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n checked: boolean;\n\n @property({ type: Boolean })\n partial: boolean;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Number })\n size = 1.2;\n\n @property({ type: String })\n animateChange = 'pulse';\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('checked')) {\n if (this.checked || this.partial) {\n this.value = '1';\n } else {\n this.value = '';\n }\n\n this.fireEvent('change');\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n private handleClick(): void {\n if (!this.disabled) {\n this.checked = !this.checked;\n }\n }\n\n public click(): void {\n this.handleClick();\n super.click();\n }\n\n public render(): TemplateResult {\n const icon = html`<temba-icon\n name=\"${this.checked\n ? Icon.checkbox_checked\n : this.partial\n ? Icon.checkbox_partial\n : Icon.checkbox}\"\n size=\"${this.size}\"\n animatechange=\"${this.animateChange}\"\n />`;\n\n this.label = this.label ? this.label.trim() : null;\n\n return html`\n <div class=\"wrapper ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n ${icon}\n ${this.label\n ? html`<div class=\"checkbox-label\">${this.label}</div>`\n : null}\n </div>\n </temba-field>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\n\nexport class Checkbox extends FormElement {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n }\n\n :host([label]) {\n width: 100%;\n }\n\n .wrapper.label {\n padding: 10px;\n border-radius: var(--curvature);\n }\n\n .wrapper.label:hover {\n background: #f9f9f9;\n }\n\n temba-field {\n --help-text-margin-left: 24px;\n cursor: pointer;\n }\n\n .checkbox-container {\n cursor: pointer;\n display: flex;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox-label {\n font-family: var(--font-family);\n padding: 0px;\n margin-left: 8px;\n font-weight: 300;\n font-size: 14px;\n line-height: 19px;\n flex-grow: 1;\n }\n\n .far {\n height: 16px;\n margin-top: 1px;\n }\n\n .disabled {\n cursor: not-allowed;\n --icon-color: #ccc;\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n checked: boolean;\n\n @property({ type: Boolean })\n partial: boolean;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Number })\n size = 1.2;\n\n @property({ type: String })\n animateChange = 'pulse';\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('checked') || changes.has('value')) {\n if (this.checked || this.partial) {\n this.internals.setFormValue(this.value || '1');\n } else {\n this.internals.setFormValue(undefined);\n }\n this.fireEvent('change');\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n private handleClick(): void {\n if (!this.disabled) {\n this.checked = !this.checked;\n }\n }\n\n public click(): void {\n this.handleClick();\n super.click();\n }\n\n public render(): TemplateResult {\n const icon = html`<temba-icon\n name=\"${this.checked\n ? Icon.checkbox_checked\n : this.partial\n ? Icon.checkbox_partial\n : Icon.checkbox}\"\n size=\"${this.size}\"\n animatechange=\"${this.animateChange}\"\n />`;\n\n this.label = this.label ? this.label.trim() : null;\n\n return html`\n <div class=\"wrapper ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n ${icon}\n ${this.label\n ? html`<div class=\"checkbox-label\">${this.label}</div>`\n : null}\n </div>\n </temba-field>\n </div>\n `;\n }\n}\n"]}
package/out-tsc/src/vectoricon/VectorIcon.js CHANGED
@@ -80,6 +80,22 @@ export class VectorIcon extends LitElement {
80
80
  margin: calc(-1 * var(--icon-circle-size));
81
81
  background: var(--icon-background);
82
82
  }
83
+
84
+ .spin-forever {
85
+ animation-name: spin;
86
+ animation-duration: 2000ms;
87
+ animation-iteration-count: infinite;
88
+ animation-timing-function: linear;
89
+ }
90
+
91
+ @keyframes spin {
92
+ from {
93
+ transform: rotate(0deg);
94
+ }
95
+ to {
96
+ transform: rotate(360deg);
97
+ }
98
+ }
83
99
  `;
84
100
  }
85
101
  constructor() {
@@ -155,6 +171,7 @@ export class VectorIcon extends LitElement {
155
171
  clickable: this.clickable,
156
172
  circled: this.circled,
157
173
  animate: !!this.animateChange || !!this.animateClick,
174
+ 'spin-forever': this.spin,
158
175
  })}"
159
176
  >
160
177
  <svg
@@ -192,6 +209,9 @@ __decorate([
192
209
  __decorate([
193
210
  property({ type: Number })
194
211
  ], VectorIcon.prototype, "size", void 0);
212
+ __decorate([
213
+ property({ type: Boolean })
214
+ ], VectorIcon.prototype, "spin", void 0);
195
215
  __decorate([
196
216
  property({ type: Boolean })
197
217
  ], VectorIcon.prototype, "clickable", void 0);
package/out-tsc/src/vectoricon/VectorIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Icon, SVG_FINGERPRINT } from '.';\n\nimport { getClasses } from '../utils';\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: String })\n animateClick: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: String })\n src = '';\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n }\n\n .sheet {\n color: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n .sheet.spin {\n transform: rotate(0deg);\n }\n\n .sheet.spin-1 {\n transform: rotate(180deg);\n }\n\n .sheet.spin-2 {\n transform: rotate(360deg);\n }\n\n .sheet.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n .sheet.pulse {\n transform: scale(1);\n }\n\n .sheet.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary) !important;\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: var(--icon-color-circle);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms linear,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n --icon-circle-size: 0.35em;\n --icon-background: var(--icon-color-circle-hover);\n }\n\n .wrapper.clickable {\n padding: var(--icon-circle-size);\n margin: calc(-1 * var(--icon-circle-size));\n background: var(--icon-background);\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public handleClicked() {\n if (this.animateClick) {\n this.animationStep = 1;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n // let icon name mappings take precedence\n let name = this.lastName || this.name;\n\n // special case our channel icon fallback\n if (this.name.startsWith('channel_') && !Icon[name]) {\n name = Icon.channel_ex;\n } else {\n name = Icon[name.replace('icon.', '')] || name;\n }\n\n // referencing icons by id is explicit\n if (!name) {\n name = this.id;\n }\n\n return html`\n <div\n @click=${this.handleClicked}\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange || !!this.animateClick,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n sheet: this.src === '',\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n [this.animateClick]: !!this.animateClick,\n [this.animateClick + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.src\n ? this.src\n : `${\n this.prefix || (window as any).static_url || '/static/'\n }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Icon, SVG_FINGERPRINT } from '.';\n\nimport { getClasses } from '../utils';\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n spin: boolean;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: String })\n animateClick: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: String })\n src = '';\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n }\n\n .sheet {\n color: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n .sheet.spin {\n transform: rotate(0deg);\n }\n\n .sheet.spin-1 {\n transform: rotate(180deg);\n }\n\n .sheet.spin-2 {\n transform: rotate(360deg);\n }\n\n .sheet.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n .sheet.pulse {\n transform: scale(1);\n }\n\n .sheet.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary) !important;\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: var(--icon-color-circle);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms linear,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n --icon-circle-size: 0.35em;\n --icon-background: var(--icon-color-circle-hover);\n }\n\n .wrapper.clickable {\n padding: var(--icon-circle-size);\n margin: calc(-1 * var(--icon-circle-size));\n background: var(--icon-background);\n }\n\n .spin-forever {\n animation-name: spin;\n animation-duration: 2000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public handleClicked() {\n if (this.animateClick) {\n this.animationStep = 1;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n // let icon name mappings take precedence\n let name = this.lastName || this.name;\n\n // special case our channel icon fallback\n if (this.name.startsWith('channel_') && !Icon[name]) {\n name = Icon.channel_ex;\n } else {\n name = Icon[name.replace('icon.', '')] || name;\n }\n\n // referencing icons by id is explicit\n if (!name) {\n name = this.id;\n }\n\n return html`\n <div\n @click=${this.handleClicked}\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange || !!this.animateClick,\n 'spin-forever': this.spin,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n sheet: this.src === '',\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n [this.animateClick]: !!this.animateClick,\n [this.animateClick + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.src\n ? this.src\n : `${\n this.prefix || (window as any).static_url || '/static/'\n }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
package/out-tsc/test/temba-checkbox.test.js CHANGED
@@ -71,5 +71,59 @@ describe('temba-checkbox', () => {
71
71
  expect(wrapperDivEl).to.equal(null);
72
72
  await assertScreenshot('checkbox/checkbox-whitespace-label-no-background-hover', getClip(el));
73
73
  });
74
+ it('submits as boolean without value', async () => {
75
+ const form = (await fixture(html `
76
+ <form>
77
+ <temba-checkbox name="my-cb"></temba-checkbox>
78
+ </form>
79
+ `));
80
+ // if we didn't click it, it shouldn't be in the form data
81
+ let data = new FormData(form);
82
+ expect(data.get('my-cb')).to.equal(null);
83
+ // click our checkbox
84
+ const checkbox = form.querySelector('temba-checkbox');
85
+ await click('temba-checkbox');
86
+ expect(checkbox.checked).to.equal(true);
87
+ // clicking a non-value checkbox should set it to 1
88
+ data = new FormData(form);
89
+ expect(data.get('my-cb')).to.equal('1');
90
+ });
91
+ it('supports custom values', async () => {
92
+ const form = (await fixture(html `
93
+ <form>
94
+ <temba-checkbox name="my-cb" value="3"></temba-checkbox>
95
+ </form>
96
+ `));
97
+ // if we didn't click it, it shouldn't be in the form data
98
+ let data = new FormData(form);
99
+ expect(data.get('my-cb')).to.equal(null);
100
+ // click our checkbox
101
+ const checkbox = form.querySelector('temba-checkbox');
102
+ await click('temba-checkbox');
103
+ expect(checkbox.checked).to.equal(true);
104
+ // clicking a non-value checkbox should set it to 1
105
+ data = new FormData(form);
106
+ expect(data.get('my-cb')).to.equal('3');
107
+ });
108
+ it('supports programmtically updated values', async () => {
109
+ // start with empty value
110
+ const form = (await fixture(html `
111
+ <form>
112
+ <temba-checkbox name="my-cb"></temba-checkbox>
113
+ </form>
114
+ `));
115
+ // update our value directly
116
+ const checkbox = form.querySelector('temba-checkbox');
117
+ checkbox.value = '5';
118
+ // we set a custom value, but we still aren't checked
119
+ let data = new FormData(form);
120
+ expect(data.get('my-cb')).to.equal(null);
121
+ // click our checkbox
122
+ await click('temba-checkbox');
123
+ expect(checkbox.checked).to.equal(true);
124
+ // clicking a non-value checkbox should set it to 1
125
+ data = new FormData(form);
126
+ expect(data.get('my-cb')).to.equal('5');
127
+ });
74
128
  });
75
129
  //# sourceMappingURL=temba-checkbox.test.js.map
package/out-tsc/test/temba-checkbox.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"temba-checkbox.test.js","sourceRoot":"","sources":["../../test/temba-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { Checkbox } from '../src/checkbox/Checkbox';\nimport { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-checkbox', () => {\n it('renders default checkbox', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n expect(el.label).to.equal('My Checkbox');\n await assertScreenshot('checkbox/default', getClip(el));\n });\n\n it('can select by clicking on the label', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox\n label=\"My Checkbox\"\n animatechange=\"false\"\n ></temba-checkbox>\n `);\n\n (el.shadowRoot.querySelector('.checkbox-label') as HTMLDivElement).click();\n expect(el.checked).to.equal(true);\n await assertScreenshot('checkbox/checked', getClip(el));\n });\n\n it('fires change event on click', async () => {\n // eslint-disable-next-line no-async-promise-executor\n return new Promise<void>(async resolve => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n checkbox.addEventListener('change', () => {\n resolve();\n });\n\n click('temba-checkbox');\n });\n });\n\n it('checks via click method', async () => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n checkbox.click();\n expect(checkbox.checked).to.equal(true);\n });\n\n it('has background hover effect when label is set', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\"My Label\"></temba-checkbox>\n `);\n expect(el.label).to.equal('My Label');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.not.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-label-background-hover',\n getClip(el)\n );\n });\n\n //note: sometimes upstream logic sets an empty checkbox label to the name value,\n //but this is the expected behavior if the label value is still empty,\n //upon rendering the component\n it('has no background hover effect when label is empty', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\"></temba-checkbox>\n `);\n expect(el.label).to.equal(null);\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-no-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('has no background hover effect when label is whitespace', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\" \"></temba-checkbox>\n `);\n expect(el.label).to.equal('');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-whitespace-label-no-background-hover',\n getClip(el)\n );\n });\n});\n"]}
1
+ {"version":3,"file":"temba-checkbox.test.js","sourceRoot":"","sources":["../../test/temba-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { Checkbox } from '../src/checkbox/Checkbox';\nimport { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-checkbox', () => {\n it('renders default checkbox', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n expect(el.label).to.equal('My Checkbox');\n await assertScreenshot('checkbox/default', getClip(el));\n });\n\n it('can select by clicking on the label', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox\n label=\"My Checkbox\"\n animatechange=\"false\"\n ></temba-checkbox>\n `);\n\n (el.shadowRoot.querySelector('.checkbox-label') as HTMLDivElement).click();\n expect(el.checked).to.equal(true);\n await assertScreenshot('checkbox/checked', getClip(el));\n });\n\n it('fires change event on click', async () => {\n // eslint-disable-next-line no-async-promise-executor\n return new Promise<void>(async resolve => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n checkbox.addEventListener('change', () => {\n resolve();\n });\n\n click('temba-checkbox');\n });\n });\n\n it('checks via click method', async () => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n checkbox.click();\n expect(checkbox.checked).to.equal(true);\n });\n\n it('has background hover effect when label is set', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\"My Label\"></temba-checkbox>\n `);\n expect(el.label).to.equal('My Label');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.not.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-label-background-hover',\n getClip(el)\n );\n });\n\n //note: sometimes upstream logic sets an empty checkbox label to the name value,\n //but this is the expected behavior if the label value is still empty,\n //upon rendering the component\n it('has no background hover effect when label is empty', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\"></temba-checkbox>\n `);\n expect(el.label).to.equal(null);\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-no-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('has no background hover effect when label is whitespace', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\" \"></temba-checkbox>\n `);\n expect(el.label).to.equal('');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-whitespace-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('submits as boolean without value', async () => {\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // if we didn't click it, it shouldn't be in the form data\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('1');\n });\n\n it('supports custom values', async () => {\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\" value=\"3\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // if we didn't click it, it shouldn't be in the form data\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('3');\n });\n\n it('supports programmtically updated values', async () => {\n // start with empty value\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // update our value directly\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n checkbox.value = '5';\n\n // we set a custom value, but we still aren't checked\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('5');\n });\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.56.0",
3
+ "version": "0.57.0",
4
4
  "description": "Web components to support rapidpro and related projects",
5
5
  "author": "Nyaruka <code@nyaruka.coim>",
6
6
  "main": "dist/index.js",
package/src/FormElement.ts CHANGED
@@ -38,7 +38,7 @@ export class FormElement extends RapidElement {
38
38
 
39
39
  static formAssociated = true;
40
40
 
41
- private internals: ElementInternals;
41
+ protected internals: ElementInternals;
42
42
 
43
43
  constructor() {
44
44
  super();
package/src/checkbox/Checkbox.ts CHANGED
@@ -78,13 +78,12 @@ export class Checkbox extends FormElement {
78
78
 
79
79
  public updated(changes: Map<string, any>) {
80
80
  super.updated(changes);
81
- if (changes.has('checked')) {
81
+ if (changes.has('checked') || changes.has('value')) {
82
82
  if (this.checked || this.partial) {
83
- this.value = '1';
83
+ this.internals.setFormValue(this.value || '1');
84
84
  } else {
85
- this.value = '';
85
+ this.internals.setFormValue(undefined);
86
86
  }
87
-
88
87
  this.fireEvent('change');
89
88
  }
90
89
  }
package/src/vectoricon/VectorIcon.ts CHANGED
@@ -18,6 +18,9 @@ export class VectorIcon extends LitElement {
18
18
  @property({ type: Number })
19
19
  size = 1;
20
20
 
21
+ @property({ type: Boolean })
22
+ spin: boolean;
23
+
21
24
  @property({ type: Boolean })
22
25
  clickable: boolean;
23
26
 
@@ -121,6 +124,22 @@ export class VectorIcon extends LitElement {
121
124
  margin: calc(-1 * var(--icon-circle-size));
122
125
  background: var(--icon-background);
123
126
  }
127
+
128
+ .spin-forever {
129
+ animation-name: spin;
130
+ animation-duration: 2000ms;
131
+ animation-iteration-count: infinite;
132
+ animation-timing-function: linear;
133
+ }
134
+
135
+ @keyframes spin {
136
+ from {
137
+ transform: rotate(0deg);
138
+ }
139
+ to {
140
+ transform: rotate(360deg);
141
+ }
142
+ }
124
143
  `;
125
144
  }
126
145
 
@@ -204,6 +223,7 @@ export class VectorIcon extends LitElement {
204
223
  clickable: this.clickable,
205
224
  circled: this.circled,
206
225
  animate: !!this.animateChange || !!this.animateClick,
226
+ 'spin-forever': this.spin,
207
227
  })}"
208
228
  >
209
229
  <svg
package/test/temba-checkbox.test.ts CHANGED
@@ -98,4 +98,71 @@ describe('temba-checkbox', () => {
98
98
  getClip(el)
99
99
  );
100
100
  });
101
+
102
+ it('submits as boolean without value', async () => {
103
+ const form = (await fixture(html`
104
+ <form>
105
+ <temba-checkbox name="my-cb"></temba-checkbox>
106
+ </form>
107
+ `)) as HTMLFormElement;
108
+
109
+ // if we didn't click it, it shouldn't be in the form data
110
+ let data = new FormData(form);
111
+ expect(data.get('my-cb')).to.equal(null);
112
+
113
+ // click our checkbox
114
+ const checkbox = form.querySelector('temba-checkbox') as Checkbox;
115
+ await click('temba-checkbox');
116
+ expect(checkbox.checked).to.equal(true);
117
+
118
+ // clicking a non-value checkbox should set it to 1
119
+ data = new FormData(form);
120
+ expect(data.get('my-cb')).to.equal('1');
121
+ });
122
+
123
+ it('supports custom values', async () => {
124
+ const form = (await fixture(html`
125
+ <form>
126
+ <temba-checkbox name="my-cb" value="3"></temba-checkbox>
127
+ </form>
128
+ `)) as HTMLFormElement;
129
+
130
+ // if we didn't click it, it shouldn't be in the form data
131
+ let data = new FormData(form);
132
+ expect(data.get('my-cb')).to.equal(null);
133
+
134
+ // click our checkbox
135
+ const checkbox = form.querySelector('temba-checkbox') as Checkbox;
136
+ await click('temba-checkbox');
137
+ expect(checkbox.checked).to.equal(true);
138
+
139
+ // clicking a non-value checkbox should set it to 1
140
+ data = new FormData(form);
141
+ expect(data.get('my-cb')).to.equal('3');
142
+ });
143
+
144
+ it('supports programmtically updated values', async () => {
145
+ // start with empty value
146
+ const form = (await fixture(html`
147
+ <form>
148
+ <temba-checkbox name="my-cb"></temba-checkbox>
149
+ </form>
150
+ `)) as HTMLFormElement;
151
+
152
+ // update our value directly
153
+ const checkbox = form.querySelector('temba-checkbox') as Checkbox;
154
+ checkbox.value = '5';
155
+
156
+ // we set a custom value, but we still aren't checked
157
+ let data = new FormData(form);
158
+ expect(data.get('my-cb')).to.equal(null);
159
+
160
+ // click our checkbox
161
+ await click('temba-checkbox');
162
+ expect(checkbox.checked).to.equal(true);
163
+
164
+ // clicking a non-value checkbox should set it to 1
165
+ data = new FormData(form);
166
+ expect(data.get('my-cb')).to.equal('5');
167
+ });
101
168
  });