@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

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

@@ -1,1 +0,1 @@
-import{p as t,b as e}from"./p-26c8340a.js";t().then(t=>e([["p-nvpymj07",[[4,"animatable-component",{keyFrames:[1040],options:[1040],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));
+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));

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-yajxj5jz.system",[[4,"animatable-component",{keyFrames:[1040],options:[1040],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-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)}))}}}));

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

@@ -109,3 +109,5 @@ 'use strict';
     getAnimationOptions() {
-        const animationOptions = this.options || {};
+        const animationOptions = this.options
+            || this.optionsData && JSON.parse(this.optionsData)
+            || {};
         if (this.delay)
@@ -138,3 +140,6 @@ animationOptions.delay = this.delay;
         const options = this.getAnimationOptions();
-        const animation = element.animate(this.keyFrames, options);
+        const keyFrames = this.keyFrames
+            || this.keyFramesData && JSON.parse(this.keyFramesData)
+            || [];
+        const animation = element.animate(keyFrames, options);
         animation.onfinish = () => this.onfinish.emit(element);
@@ -141,0 +146,0 @@ animation.oncancel = () => this.oncancel.emit(element);

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",{"keyFrames":[1040],"options":[1040],"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]}]]]], options);
+  return core.bootstrapLazy([["animatable-component.cjs",[[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]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["animatable-component.cjs",[[4,"animatable-component",{"keyFrames":[1040],"options":[1040],"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]}]]]], options);
+    core.bootstrapLazy([["animatable-component.cjs",[[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]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

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

@@ -101,3 +101,5 @@ import { h } from "@stencil/core";
     getAnimationOptions() {
-        const animationOptions = this.options || {};
+        const animationOptions = this.options
+            || this.optionsData && JSON.parse(this.optionsData)
+            || {};
         if (this.delay)
@@ -130,3 +132,6 @@ animationOptions.delay = this.delay;
         const options = this.getAnimationOptions();
-        const animation = element.animate(this.keyFrames, options);
+        const keyFrames = this.keyFrames
+            || this.keyFramesData && JSON.parse(this.keyFramesData)
+            || [];
+        const animation = element.animate(keyFrames, options);
         animation.onfinish = () => this.onfinish.emit(element);
@@ -174,2 +179,19 @@ animation.oncancel = () => this.oncancel.emit(element);
         },
+        "keyFramesData": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Keyframes of the animation in string format."
+            },
+            "attribute": "key-frames-data",
+            "reflect": false
+        },
         "options": {
@@ -194,2 +216,19 @@ "type": "unknown",
         },
+        "optionsData": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Default options of the animation in string format."
+            },
+            "attribute": "options-data",
+            "reflect": false
+        },
         "animateId": {
@@ -196,0 +235,0 @@ "type": "string",

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

@@ -180,3 +180,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     class_1.prototype.getAnimationOptions = function () {
-        var animationOptions = this.options || {};
+        var animationOptions = this.options
+            || this.optionsData && JSON.parse(this.optionsData)
+            || {};
         if (this.delay)
@@ -210,3 +212,6 @@ animationOptions.delay = this.delay;
         var options = this.getAnimationOptions();
-        var animation = element.animate(this.keyFrames, options);
+        var keyFrames = this.keyFrames
+            || this.keyFramesData && JSON.parse(this.keyFramesData)
+            || [];
+        var animation = element.animate(keyFrames, options);
         animation.onfinish = function () { return _this.onfinish.emit(element); };
@@ -213,0 +218,0 @@ animation.oncancel = function () { return _this.oncancel.emit(element); };

dist/esm/animatable-component.entry.js

@@ -105,3 +105,5 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
     getAnimationOptions() {
-        const animationOptions = this.options || {};
+        const animationOptions = this.options
+            || this.optionsData && JSON.parse(this.optionsData)
+            || {};
         if (this.delay)
@@ -134,3 +136,6 @@ animationOptions.delay = this.delay;
         const options = this.getAnimationOptions();
-        const animation = element.animate(this.keyFrames, options);
+        const keyFrames = this.keyFrames
+            || this.keyFramesData && JSON.parse(this.keyFramesData)
+            || [];
+        const animation = element.animate(keyFrames, options);
         animation.onfinish = () => this.onfinish.emit(element);
@@ -137,0 +142,0 @@ animation.oncancel = () => this.oncancel.emit(element);

dist/types/components.d.ts

@@ -99,2 +99,6 @@ /* eslint-disable */
     /**
+    * Keyframes of the animation in string format.
+    */
+    'keyFramesData': string;
+    /**
     * Default options of the animation.
@@ -104,2 +108,6 @@ */
     /**
+    * Default options of the animation in string format.
+    */
+    'optionsData': string;
+    /**
     * Suspends playback of the animation.
@@ -199,2 +207,6 @@ */
     /**
+    * Keyframes of the animation in string format.
+    */
+    'keyFramesData'?: string;
+    /**
     * This event is sent when the animation is cancelled.
@@ -212,2 +224,6 @@ */
     /**
+    * Default options of the animation in string format.
+    */
+    'optionsData'?: string;
+    /**
     * Sets the playback rate of the animation.
@@ -214,0 +230,0 @@ */

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

@@ -10,2 +10,6 @@ import { EventEmitter } from '../../stencil.core';
     /**
+     * Keyframes of the animation in string format.
+     */
+    keyFramesData: string;
+    /**
      * Get keyFrames of the animation from string data.
@@ -20,2 +24,6 @@ * @param text - The string with the keyFrames of the animation.
     /**
+     * Default options of the animation in string format.
+     */
+    optionsData: string;
+    /**
      * Get options of the animation from string data.
@@ -22,0 +30,0 @@ * @param text - The string with the options of the animation.

package.json

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

readme.md

@@ -87,3 +87,5 @@ ![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)
 | `keyFrames`          | --                    | Keyframes of the animation.                                                                                                                                                                                  | `Keyframe[]`                                                  | `undefined` |
+| `keyFramesData`      | `key-frames-data`     | Keyframes of the animation in string format.                                                                                                                                                                 | `string`                                                      | `undefined` |
 | `options`            | --                    | Default options of the animation.                                                                                                                                                                            | `KeyframeAnimationOptions`                                    | `undefined` |
+| `optionsData`        | `options-data`        | Default options of the animation in string format.                                                                                                                                                           | `string`                                                      | `undefined` |
 | `playbackRate`       | `playback-rate`       | Sets the playback rate of the animation.                                                                                                                                                                     | `number`                                                      | `undefined` |
@@ -204,2 +206,3 @@ | `startTime`          | `start-time`          | Sets the scheduled time when an animation's playback should begin.                                                                                                                                           | `number`                                                      | `undefined` |
 
+
 ## Using this component
@@ -206,0 +209,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

776846

increased by0.51%

Lines of code

12367

increased by0.63%

Number of lines in readme file

233

increased by1.3%

Number of medium supply chain risk alerts

10

decreased by-9.09%

No dependency changes