@nyaruka/temba-components 0.56.0 → 0.56.1

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/{e3f2a5a4.js → 86c3ca3f.js} +18 -2
  3. package/dist/index.js +18 -2
  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/vectoricon/VectorIcon.js +20 -0
  9. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/vectoricon/VectorIcon.ts +20 -0
package/CHANGELOG.md CHANGED
@@ -4,8 +4,14 @@ 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.56.1](https://github.com/nyaruka/temba-components/compare/v0.56.0...v0.56.1)
8
+
9
+ - Add icon spin attribute [`#351`](https://github.com/nyaruka/temba-components/pull/351)
10
+
7
11
  #### [v0.56.0](https://github.com/nyaruka/temba-components/compare/v0.55.0...v0.56.0)
8
12
 
13
+ > 21 July 2023
14
+
9
15
  - Make contact search contain all preview parameters [`#350`](https://github.com/nyaruka/temba-components/pull/350)
10
16
  - Bump word-wrap from 1.2.3 to 1.2.4 [`#349`](https://github.com/nyaruka/temba-components/pull/349)
11
17
  - Bump semver from 5.7.1 to 5.7.2 [`#348`](https://github.com/nyaruka/temba-components/pull/348)
package/dist/{e3f2a5a4.js → 86c3ca3f.js} RENAMED
@@ -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
@@ -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 d=e=>o(e,i),l={module:{uri:i},exports:r,require:d};t[i]=Promise.all(n.map((e=>l[e]||d(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"86c3ca3f.js",revision:"610e2dc0a68afd27dadfed440e69271a"},{url:"templates/components-body.html",revision:"20241bfab698643d97394da6f1e4427d"},{url:"templates/components-head.html",revision:"acd0b5b2b82877831d153764b71081b5"}],{}),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/f37dc10868d199a0f5f151a33bda6ea3/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\": \"86c3ca3f.js\",\n \"revision\": \"610e2dc0a68afd27dadfed440e69271a\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"20241bfab698643d97394da6f1e4427d\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"acd0b5b2b82877831d153764b71081b5\"\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/86c3ca3f.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.56.1"</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/86c3ca3f.js" crossorigin="anonymous">
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":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,UAAW,SAAQ,UAAU;IAyCxC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2ET,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7GV,SAAI,GAAG,CAAC,CAAC;QAeT,sBAAiB,GAAG,GAAG,CAAC;QAGxB,QAAG,GAAG,EAAE,CAAC;QAGT,UAAK,GAAG,CAAC,CAAC;QAMV,WAAM,GAAG,wCAAwC,CAAC;IAmFlD,CAAC;IAIM,YAAY,CAAC,OAAyB;QAC3C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,0CAA0C;YAC1C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE;gBACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;aAC9D;YAED,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;gBACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC;gBAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;aACxB;SACF;IACH,CAAC;IAEM,aAAa;QAClB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;SACxB;IACH,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,6CAA6C;YAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;gBACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE;oBAC7D,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;qBAAM;oBACL,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;iBACxB;YACH,CAAC,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpC,oCAAoC;YACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;gBACvC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;SACF;IACH,CAAC;IAEM,MAAM;QACX,yCAAyC;QACzC,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAEtC,yCAAyC;QACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACnD,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;SACxB;aAAM;YACL,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC;SAChD;QAED,sCAAsC;QACtC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,aAAa;yBACV,UAAU,CAAC;YAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;SACrD,CAAC;;;0BAGgB,IAAI,CAAC,IAAI,YAAY,IAAI;aACtC,IAAI,2BAA2B,IAAI,CAAC,iBAAiB;YACxD,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,MAAM;mBACJ,UAAU,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,GAAG,KAAK,EAAE;YACtB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa;YAC1C,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,EAC7C,IAAI,CAAC,aAAa,GAAG,CAAC;YACxB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;YACxC,CAAC,IAAI,CAAC,YAAY,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,EAC5C,IAAI,CAAC,aAAa,GAAG,CAAC;SACzB,CAAC;;;oBAGQ,IAAI,CAAC,GAAG;YACd,CAAC,CAAC,IAAI,CAAC,GAAG;YACV,CAAC,CAAC,GACE,IAAI,CAAC,MAAM,IAAK,MAAc,CAAC,UAAU,IAAI,UAC/C,mBAAmB,eAAe,IAAI,IAAI,EAAE;;;;KAIvD,CAAC;IACJ,CAAC;CACF;AAlOC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACnC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACvB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACuB","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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.56.0",
3
+ "version": "0.56.1",
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/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