@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

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-cewwhkyw",[[4,"animatable-component",{keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1,"animate-id"],delay:[2],endDelay:[2,"end-delay"],duration:[2],direction:[1],composite:[1],easing:[1],fill:[1],iterations:[2],iterationStart:[2,"iteration-start"],iterationComposite:[1,"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-huralh4j",[[4,"animatable-component",{keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1,"animate-id"],delay:[2],endDelay:[2,"end-delay"],duration:[2],direction:[1],composite:[1],easing:[1],fill:[1],iterations:[2],iterationStart:[2,"iteration-start"],iterationComposite:[1,"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));

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-apcg8knt.system",[[4,"animatable-component",{keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1,"animate-id"],delay:[2],endDelay:[2,"end-delay"],duration:[2],direction:[1],composite:[1],easing:[1],fill:[1],iterations:[2],iterationStart:[2,"iteration-start"],iterationComposite:[1,"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-ucmqanxv.system",[[4,"animatable-component",{keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1,"animate-id"],delay:[2],endDelay:[2,"end-delay"],duration:[2],direction:[1],composite:[1],easing:[1],fill:[1],iterations:[2],iterationStart:[2,"iteration-start"],iterationComposite:[1,"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)}))}}}));

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

@@ -137,3 +137,5 @@ 'use strict';
     createAnimation() {
-        const element = this.el;
+        const element = (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
         const options = this.getAnimationOptions();
@@ -152,6 +154,12 @@ const keyFrames = this.keyFrames
     }
+    playAnimation() {
+        if (this.animation
+            && (!this.animation.playState || this.animation.playState !== 'running')) {
+            this.animation.play();
+        }
+    }
     componentWillLoad() {
         this.createAnimation();
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -161,3 +169,3 @@ componentDidUpdate() {
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -164,0 +172,0 @@ render() {

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

@@ -129,3 +129,5 @@ import { h } from "@stencil/core";
     createAnimation() {
-        const element = this.el;
+        const element = (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
         const options = this.getAnimationOptions();
@@ -144,6 +146,12 @@ const keyFrames = this.keyFrames
     }
+    playAnimation() {
+        if (this.animation
+            && (!this.animation.playState || this.animation.playState !== 'running')) {
+            this.animation.play();
+        }
+    }
     componentWillLoad() {
         this.createAnimation();
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -153,3 +161,3 @@ componentDidUpdate() {
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -156,0 +164,0 @@ render() {

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

@@ -209,3 +209,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         var _this = this;
-        var element = this.el;
+        var element = (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
         var options = this.getAnimationOptions();
@@ -224,6 +226,12 @@ var keyFrames = this.keyFrames
     };
+    class_1.prototype.playAnimation = function () {
+        if (this.animation
+            && (!this.animation.playState || this.animation.playState !== 'running')) {
+            this.animation.play();
+        }
+    };
     class_1.prototype.componentWillLoad = function () {
         this.createAnimation();
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     };
@@ -233,3 +241,3 @@ class_1.prototype.componentDidUpdate = function () {
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     };
@@ -236,0 +244,0 @@ class_1.prototype.render = function () {

dist/esm/animatable-component.entry.js

@@ -133,3 +133,5 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
     createAnimation() {
-        const element = this.el;
+        const element = (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
         const options = this.getAnimationOptions();
@@ -148,6 +150,12 @@ const keyFrames = this.keyFrames
     }
+    playAnimation() {
+        if (this.animation
+            && (!this.animation.playState || this.animation.playState !== 'running')) {
+            this.animation.play();
+        }
+    }
     componentWillLoad() {
         this.createAnimation();
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -157,3 +165,3 @@ componentDidUpdate() {
         if (this.autoPlay)
-            this.animation.play();
+            this.playAnimation();
     }
@@ -160,0 +168,0 @@ render() {

dist/types/components/animatable-component/animatable-component.d.ts

@@ -154,2 +154,3 @@ import { EventEmitter } from '../../stencil.core';
     createAnimation(): void;
+    private playAnimation;
     componentWillLoad(): void;
@@ -156,0 +157,0 @@ componentDidUpdate(): void;

package.json

 {
   "name": "@proyecto26/animatable-component",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A WebComponent to use Web Animations API in a declarative way! 💅",
@@ -5,0 +5,0 @@ "private": false,

No alert changes

Improved metrics

Total package byte prevSize

778508

increased by0.21%

Lines of code

12400

increased by0.27%

No dependency changes