@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/animatable-component/animatable-component.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as t}from"./p-26c8340a.js";a().then(a=>t([["p-q8tyysuy",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[4,"auto-play"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64]}]]]],a));
+import{p as a,b as t}from"./p-26c8340a.js";a().then(a=>t([["p-qye66gpo",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[4,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64]}]]]],a));

dist/animatable-component/p-d584f674.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-f73383a0.system.js"],(function(){"use strict";var t,e;return{setters:[function(a){t=a.p;e=a.b}],execute:function(){t().then((function(t){return e([["p-okrtcqmb.system",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[4,"auto-play"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64]}]]]],t)}))}}}));
+System.register(["./p-f73383a0.system.js"],(function(){"use strict";var t,e;return{setters:[function(a){t=a.p;e=a.b}],execute:function(){t().then((function(t){return e([["p-c7b88ew3.system",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[4,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64]}]]]],t)}))}}}));

dist/cjs/animatable-component.cjs.entry.js

@@ -121,4 +121,4 @@ 'use strict';
     async play() {
-        const element = this.getElement();
-        this.onStart.emit(element);
+        this.currentAnimation = this.createAnimation();
+        this.onStart.emit(this.getElement());
         return this.currentAnimation.play();
@@ -184,9 +184,7 @@ }
     componentWillLoad() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
     }
     componentDidUpdate() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
@@ -193,0 +191,0 @@ }

dist/cjs/animatable-component.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["animatable-component.cjs",[[4,"animatable-component",{"animation":[1],"keyFrames":[1040],"keyFramesData":[1,"key-frames-data"],"options":[1040],"optionsData":[1,"options-data"],"animateId":[1025,"animate-id"],"delay":[1026],"endDelay":[1026,"end-delay"],"duration":[1026],"direction":[1025],"composite":[1025],"easing":[1025],"fill":[1025],"iterations":[1026],"iterationStart":[1026,"iteration-start"],"iterationComposite":[1025,"iteration-composite"],"autoPlay":[4,"auto-play"],"currentTime":[2,"current-time"],"startTime":[2,"start-time"],"playbackRate":[2,"playback-rate"],"getCurrentTime":[64],"getStartTime":[64],"getPending":[64],"getPlaybackRate":[64],"getPlayState":[64],"cancel":[64],"finish":[64],"pause":[64],"play":[64],"reverse":[64]}]]]], options);
+  return core.bootstrapLazy([["animatable-component.cjs",[[4,"animatable-component",{"animation":[1],"keyFrames":[1040],"keyFramesData":[1,"key-frames-data"],"options":[1040],"optionsData":[1,"options-data"],"animateId":[1025,"animate-id"],"delay":[1026],"endDelay":[1026,"end-delay"],"duration":[1026],"direction":[1025],"composite":[1025],"easing":[1025],"fill":[1025],"iterations":[1026],"iterationStart":[1026,"iteration-start"],"iterationComposite":[1025,"iteration-composite"],"autoPlay":[4,"autoplay"],"currentTime":[2,"current-time"],"startTime":[2,"start-time"],"playbackRate":[2,"playback-rate"],"getCurrentTime":[64],"getStartTime":[64],"getPending":[64],"getPlaybackRate":[64],"getPlayState":[64],"cancel":[64],"finish":[64],"pause":[64],"play":[64],"reverse":[64]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["animatable-component.cjs",[[4,"animatable-component",{"animation":[1],"keyFrames":[1040],"keyFramesData":[1,"key-frames-data"],"options":[1040],"optionsData":[1,"options-data"],"animateId":[1025,"animate-id"],"delay":[1026],"endDelay":[1026,"end-delay"],"duration":[1026],"direction":[1025],"composite":[1025],"easing":[1025],"fill":[1025],"iterations":[1026],"iterationStart":[1026,"iteration-start"],"iterationComposite":[1025,"iteration-composite"],"autoPlay":[4,"auto-play"],"currentTime":[2,"current-time"],"startTime":[2,"start-time"],"playbackRate":[2,"playback-rate"],"getCurrentTime":[64],"getStartTime":[64],"getPending":[64],"getPlaybackRate":[64],"getPlayState":[64],"cancel":[64],"finish":[64],"pause":[64],"play":[64],"reverse":[64]}]]]], options);
+    core.bootstrapLazy([["animatable-component.cjs",[[4,"animatable-component",{"animation":[1],"keyFrames":[1040],"keyFramesData":[1,"key-frames-data"],"options":[1040],"optionsData":[1,"options-data"],"animateId":[1025,"animate-id"],"delay":[1026],"endDelay":[1026,"end-delay"],"duration":[1026],"direction":[1025],"composite":[1025],"easing":[1025],"fill":[1025],"iterations":[1026],"iterationStart":[1026,"iteration-start"],"iterationComposite":[1025,"iteration-composite"],"autoPlay":[4,"autoplay"],"currentTime":[2,"current-time"],"startTime":[2,"start-time"],"playbackRate":[2,"playback-rate"],"getCurrentTime":[64],"getStartTime":[64],"getPending":[64],"getPlaybackRate":[64],"getPlayState":[64],"cancel":[64],"finish":[64],"pause":[64],"play":[64],"reverse":[64]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/components/animatable-component/animatable-component.js

@@ -116,4 +116,4 @@ import { h } from "@stencil/core";
     async play() {
-        const element = this.getElement();
-        this.onStart.emit(element);
+        this.currentAnimation = this.createAnimation();
+        this.onStart.emit(this.getElement());
         return this.currentAnimation.play();
@@ -179,9 +179,7 @@ }
     componentWillLoad() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
     }
     componentDidUpdate() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
@@ -505,3 +503,3 @@ }
             },
-            "attribute": "auto-play",
+            "attribute": "autoplay",
             "reflect": false,
@@ -508,0 +506,0 @@ "defaultValue": "true"

dist/esm-es5/animatable-component.entry.js

@@ -185,6 +185,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         return __awaiter(this, void 0, void 0, function () {
-            var element;
             return __generator(this, function (_a) {
-                element = this.getElement();
-                this.onStart.emit(element);
+                this.currentAnimation = this.createAnimation();
+                this.onStart.emit(this.getElement());
                 return [2 /*return*/, this.currentAnimation.play()];
@@ -257,9 +256,7 @@ });
     class_1.prototype.componentWillLoad = function () {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
     };
     class_1.prototype.componentDidUpdate = function () {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
@@ -266,0 +263,0 @@ };

dist/esm/animatable-component.entry.js

@@ -117,4 +117,4 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
     async play() {
-        const element = this.getElement();
-        this.onStart.emit(element);
+        this.currentAnimation = this.createAnimation();
+        this.onStart.emit(this.getElement());
         return this.currentAnimation.play();
@@ -180,9 +180,7 @@ }
     componentWillLoad() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
     }
     componentDidUpdate() {
-        this.currentAnimation = this.createAnimation();
-        if (this.autoPlay)
+        if (this.autoPlay === true)
             this.play();
@@ -189,0 +187,0 @@ }

package.json

 {
   "name": "@proyecto26/animatable-component",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A WebComponent to use Web Animations API in a declarative way! 💅",
@@ -5,0 +5,0 @@ "author": "Juan David Nicholls Cardona",

readme.md

@@ -18,11 +18,10 @@ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 Web Component built with `Stencil.js` to use [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) in a declarative way.
-
+You can animate any HTML element easily:
 ```
 <animatable-component
-  autoPlay
-  easing='ease-in-out'
-  duration={800}
-  delay={300}
-  animation='tada'
-  onFinish={() => alert('Eureka!')}
+  autoplay
+  easing="ease-in-out"
+  duration="800"
+  delay="300"
+  animation="tada"
 >
@@ -38,3 +37,3 @@ <h1>Hello World</h1>
   createAnimatableComponent
-} from '@proyecto26/animatable-component'
+} from '@proyecto26/animatable-component';
 
@@ -45,6 +44,4 @@ const SendMessageButton = (props) =>(
   </ion-fab-button>
-)
-const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton)
-
-
+);
+const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton);
 const keyFramesSendMessage: Keyframe[] = [
@@ -59,8 +56,7 @@ {
   }
-]
-
+];
 const optionsSendMessage: KeyframeAnimationOptions = {
   duration: 500,
   easing: 'ease-in-out'
-}
+};
 
@@ -90,3 +86,3 @@ ...
 | `animation`          | `animation`           | Name of the animation to get the keyFrames.                                                                                                                                                                  | `"bounce" \| "flash" \| "jello" \| "pulse" \| "rotate" \| "shake" \| "swing" \| "rubberBand" \| "tada" \| "wobble" \| "heartBeat" \| "bounceIn" \| "bounceInUp" \| "bounceInDown" \| "bounceInRight" \| "bounceInLeft" \| "bounceOut" \| "bounceOutUp" \| "bounceOutDown" \| "bounceOutRight" \| "bounceOutLeft" \| "fadeIn" \| "fadeInUp" \| "fadeInUpBig" \| "fadeInDown" \| "fadeInDownBig" \| "fadeInRight" \| "fadeInRightBig" \| "fadeInLeft" \| "fadeInLeftBig" \| "fadeOut" \| "fadeOutUp" \| "fadeOutUpBig" \| "fadeOutDown" \| "fadeOutDownBig" \| "fadeOutRight" \| "fadeOutRightBig" \| "fadeOutLeft" \| "fadeOutLeftBig" \| "flip" \| "flipInX" \| "flipInY" \| "flipOutX" \| "flipOutY" \| "lightSpeedIn" \| "lightSpeedOut" \| "rotateIn" \| "rotateInClockwise" \| "rotateInDownLeft" \| "rotateInDownRight" \| "rotateInUpLeft" \| "rotateInUpRight" \| "rotateOut" \| "rotateOutClockwise" \| "rotateOutDownLeft" \| "rotateOutDownRight" \| "rotateOutUpLeft" \| "rotateOutUpRight" \| "slideInUp" \| "slideInDown" \| "slideInLeft" \| "slideInRight" \| "slideOutUp" \| "slideOutDown" \| "slideOutLeft" \| "slideOutRight" \| "zoomIn" \| "zoomInUp" \| "zoomInDown" \| "zoomInLeft" \| "zoomInRight" \| "zoomOut" \| "zoomOutUp" \| "zoomOutDown" \| "zoomOutLeft" \| "zoomOutRight" \| "hinge" \| "jackInTheBox" \| "rollIn" \| "rollOut"` | `undefined` |
-| `autoPlay`           | `auto-play`           | Start the animation when the component is mounted.                                                                                                                                                           | `boolean`                                                                                                                          | `true`      |
+| `autoPlay`           | `autoplay`           | Start the animation when the component is mounted.                                                                                                                                                           | `boolean`                                                                                                                          | `true`      |
 | `composite`          | `composite`           | Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to `replace`.                                  | `"accumulate" \| "add" \| "replace"`                                                                                               | `undefined` |
@@ -93,0 +89,0 @@ | `currentTime`        | `current-time`        | Sets the current time value of the animation in milliseconds, whether running or paused.                                                                                                                     | `number`                                                                                                                           | `undefined` |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1030467

decreased by-0.04%

Lines of code

16145

decreased by-0.06%

Number of lines in readme file

328

decreased by-1.2%

No dependency changes