@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.6.0 to 0.7.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-xpxtkvbr",[[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-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));

dist/animatable-component/index.esm.js

@@ -1,1 +0,1 @@
-import{h as t}from"./p-26c8340a.js";export{A as ANIMATIONS,E as EASING,a as EASING_FUNCTIONS}from"./p-21d2122f.js";var e=function(t,a){var e={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&a.indexOf(i)<0&&(e[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(t);o<i.length;o++)a.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o])&&(e[i[o]]=t[i[o]])}return e};function i(a){return i=>{const{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:b,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S}=i,N=e(i,["ref","keyFrames","keyFramesData","options","optionsData","animateId","delay","endDelay","duration","direction","composite","easing","fill","iterations","iterationStart","iterationComposite","autoPlay","currentTime","startTime","playbackRate","onFinish","onCancel"]);return t("animatable-component",{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:b,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S},t(a,Object.assign({},N)))}}export{i as createAnimatableComponent};
+import{h as t}from"./p-26c8340a.js";export{A as ANIMATIONS,E as EASING,a as EASING_FUNCTIONS}from"./p-21d2122f.js";var e=function(t,a){var e={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&a.indexOf(i)<0&&(e[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(t);o<i.length;o++)a.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o])&&(e[i[o]]=t[i[o]])}return e};function i(a){return i=>{const{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:S,iterationStart:b,iterationComposite:k,autoPlay:D,currentTime:I,startTime:T,playbackRate:j,onStart:C,onCancel:O,onFinish:N}=i,A=e(i,["ref","keyFrames","keyFramesData","options","optionsData","animateId","delay","endDelay","duration","direction","composite","easing","fill","iterations","iterationStart","iterationComposite","autoPlay","currentTime","startTime","playbackRate","onStart","onCancel","onFinish"]);return t("animatable-component",{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:S,iterationStart:b,iterationComposite:k,autoPlay:D,currentTime:I,startTime:T,playbackRate:j,onStart:C,onCancel:O,onFinish:N},t(a,Object.assign({},A)))}}export{i as createAnimatableComponent};

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-enrbpq4o.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-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)}))}}}));

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

@@ -15,4 +15,5 @@ 'use strict';
         this.autoPlay = true;
-        this.onfinish = core.createEvent(this, "finish", 7);
-        this.oncancel = core.createEvent(this, "cancel", 7);
+        this.onStart = core.createEvent(this, "start", 7);
+        this.onFinish = core.createEvent(this, "finish", 7);
+        this.onCancel = core.createEvent(this, "cancel", 7);
     }
@@ -121,2 +122,4 @@ animationDidChangeHandler(animation) {
     async play() {
+        const element = this.getElement();
+        this.onStart.emit(element);
         return this.currentAnimation.play();
@@ -130,2 +133,7 @@ }
     }
+    getElement() {
+        return (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
+    }
     getAnimationOptions() {
@@ -162,5 +170,3 @@ const animationOptions = this.options
     createAnimation() {
-        const element = (this.el.firstElementChild
-            || (this.el.children.length && this.el.children[0])
-            || this.el);
+        const element = this.getElement();
         const options = this.getAnimationOptions();
@@ -172,4 +178,4 @@ const keyFrames = this.keyFrames
         const animation = element.animate(keyFrames, options);
-        animation.onfinish = () => this.onfinish.emit(element);
-        animation.oncancel = () => this.oncancel.emit(element);
+        animation.onfinish = () => this.onFinish.emit(element);
+        animation.oncancel = () => this.onCancel.emit(element);
         if (this.currentTime !== undefined)
@@ -176,0 +182,0 @@ animation.currentTime = this.currentTime;

dist/cjs/index.cjs.js

@@ -21,4 +21,4 @@ 'use strict';
     return (props) => {
-        const { ref, keyFrames, keyFramesData, options, optionsData, animateId, delay, endDelay, duration, direction, composite, easing, fill, iterations, iterationStart, iterationComposite, autoPlay, currentTime, startTime, playbackRate, onFinish, onCancel } = props, rest = __rest(props, ["ref", "keyFrames", "keyFramesData", "options", "optionsData", "animateId", "delay", "endDelay", "duration", "direction", "composite", "easing", "fill", "iterations", "iterationStart", "iterationComposite", "autoPlay", "currentTime", "startTime", "playbackRate", "onFinish", "onCancel"]);
-        return core.h("animatable-component", { ref: ref, keyFrames: keyFrames, keyFramesData: keyFramesData, options: options, optionsData: optionsData, animateId: animateId, delay: delay, endDelay: endDelay, duration: duration, direction: direction, composite: composite, easing: easing, fill: fill, iterations: iterations, iterationStart: iterationStart, iterationComposite: iterationComposite, autoPlay: autoPlay, currentTime: currentTime, startTime: startTime, playbackRate: playbackRate, onFinish: onFinish, onCancel: onCancel },
+        const { ref, keyFrames, keyFramesData, options, optionsData, animateId, delay, endDelay, duration, direction, composite, easing, fill, iterations, iterationStart, iterationComposite, autoPlay, currentTime, startTime, playbackRate, onStart, onCancel, onFinish } = props, rest = __rest(props, ["ref", "keyFrames", "keyFramesData", "options", "optionsData", "animateId", "delay", "endDelay", "duration", "direction", "composite", "easing", "fill", "iterations", "iterationStart", "iterationComposite", "autoPlay", "currentTime", "startTime", "playbackRate", "onStart", "onCancel", "onFinish"]);
+        return core.h("animatable-component", { ref: ref, keyFrames: keyFrames, keyFramesData: keyFramesData, options: options, optionsData: optionsData, animateId: animateId, delay: delay, endDelay: endDelay, duration: duration, direction: direction, composite: composite, easing: easing, fill: fill, iterations: iterations, iterationStart: iterationStart, iterationComposite: iterationComposite, autoPlay: autoPlay, currentTime: currentTime, startTime: startTime, playbackRate: playbackRate, onStart: onStart, onCancel: onCancel, onFinish: onFinish },
             core.h(WrappedComponent, Object.assign({}, rest)));
@@ -25,0 +25,0 @@ };

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

@@ -116,2 +116,4 @@ import { h } from "@stencil/core";
     async play() {
+        const element = this.getElement();
+        this.onStart.emit(element);
         return this.currentAnimation.play();
@@ -125,2 +127,7 @@ }
     }
+    getElement() {
+        return (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
+    }
     getAnimationOptions() {
@@ -157,5 +164,3 @@ const animationOptions = this.options
     createAnimation() {
-        const element = (this.el.firstElementChild
-            || (this.el.children.length && this.el.children[0])
-            || this.el);
+        const element = this.getElement();
         const options = this.getAnimationOptions();
@@ -167,4 +172,4 @@ const keyFrames = this.keyFrames
         const animation = element.animate(keyFrames, options);
-        animation.onfinish = () => this.onfinish.emit(element);
-        animation.oncancel = () => this.oncancel.emit(element);
+        animation.onfinish = () => this.onFinish.emit(element);
+        animation.oncancel = () => this.onCancel.emit(element);
         if (this.currentTime !== undefined)
@@ -196,3 +201,3 @@ animation.currentTime = this.currentTime;
                 "original": "AnimationsType",
-                "resolved": "\"bounce\" | \"bounceIn\" | \"bounceInDown\" | \"bounceInLeft\" | \"bounceInRight\" | \"bounceInUp\" | \"flash\" | \"heartBeat\" | \"jello\" | \"pulse\" | \"rotate\" | \"rubberBand\" | \"shake\" | \"swing\" | \"tada\" | \"wobble\"",
+                "resolved": "\"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\"",
                 "references": {
@@ -560,3 +565,22 @@ "AnimationsType": {
     static get events() { return [{
-            "method": "onfinish",
+            "method": "onStart",
+            "name": "start",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": "This event is sent when the animation is going to play."
+            },
+            "complexType": {
+                "original": "HTMLElement",
+                "resolved": "HTMLElement",
+                "references": {
+                    "HTMLElement": {
+                        "location": "global"
+                    }
+                }
+            }
+        }, {
+            "method": "onFinish",
             "name": "finish",
@@ -580,3 +604,3 @@ "bubbles": true,
         }, {
-            "method": "oncancel",
+            "method": "onCancel",
             "name": "cancel",
@@ -583,0 +607,0 @@ "bubbles": true,

dist/collection/utils/utils.js

@@ -15,4 +15,4 @@ var __rest = (this && this.__rest) || function (s, e) {
     return (props) => {
-        const { ref, keyFrames, keyFramesData, options, optionsData, animateId, delay, endDelay, duration, direction, composite, easing, fill, iterations, iterationStart, iterationComposite, autoPlay, currentTime, startTime, playbackRate, onFinish, onCancel } = props, rest = __rest(props, ["ref", "keyFrames", "keyFramesData", "options", "optionsData", "animateId", "delay", "endDelay", "duration", "direction", "composite", "easing", "fill", "iterations", "iterationStart", "iterationComposite", "autoPlay", "currentTime", "startTime", "playbackRate", "onFinish", "onCancel"]);
-        return h("animatable-component", { ref: ref, keyFrames: keyFrames, keyFramesData: keyFramesData, options: options, optionsData: optionsData, animateId: animateId, delay: delay, endDelay: endDelay, duration: duration, direction: direction, composite: composite, easing: easing, fill: fill, iterations: iterations, iterationStart: iterationStart, iterationComposite: iterationComposite, autoPlay: autoPlay, currentTime: currentTime, startTime: startTime, playbackRate: playbackRate, onFinish: onFinish, onCancel: onCancel },
+        const { ref, keyFrames, keyFramesData, options, optionsData, animateId, delay, endDelay, duration, direction, composite, easing, fill, iterations, iterationStart, iterationComposite, autoPlay, currentTime, startTime, playbackRate, onStart, onCancel, onFinish } = props, rest = __rest(props, ["ref", "keyFrames", "keyFramesData", "options", "optionsData", "animateId", "delay", "endDelay", "duration", "direction", "composite", "easing", "fill", "iterations", "iterationStart", "iterationComposite", "autoPlay", "currentTime", "startTime", "playbackRate", "onStart", "onCancel", "onFinish"]);
+        return h("animatable-component", { ref: ref, keyFrames: keyFrames, keyFramesData: keyFramesData, options: options, optionsData: optionsData, animateId: animateId, delay: delay, endDelay: endDelay, duration: duration, direction: direction, composite: composite, easing: easing, fill: fill, iterations: iterations, iterationStart: iterationStart, iterationComposite: iterationComposite, autoPlay: autoPlay, currentTime: currentTime, startTime: startTime, playbackRate: playbackRate, onStart: onStart, onCancel: onCancel, onFinish: onFinish },
             h(WrappedComponent, Object.assign({}, rest)));
@@ -19,0 +19,0 @@ };

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

@@ -46,4 +46,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.autoPlay = true;
-        this.onfinish = createEvent(this, "finish", 7);
-        this.oncancel = createEvent(this, "cancel", 7);
+        this.onStart = createEvent(this, "start", 7);
+        this.onFinish = createEvent(this, "finish", 7);
+        this.onCancel = createEvent(this, "cancel", 7);
     }
@@ -185,3 +186,6 @@ class_1.prototype.animationDidChangeHandler = function (animation) {
         return __awaiter(this, void 0, void 0, function () {
+            var element;
             return __generator(this, function (_a) {
+                element = this.getElement();
+                this.onStart.emit(element);
                 return [2 /*return*/, this.currentAnimation.play()];
@@ -201,2 +205,7 @@ });
     };
+    class_1.prototype.getElement = function () {
+        return (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
+    };
     class_1.prototype.getAnimationOptions = function () {
@@ -234,5 +243,3 @@ var animationOptions = this.options
         var _this = this;
-        var element = (this.el.firstElementChild
-            || (this.el.children.length && this.el.children[0])
-            || this.el);
+        var element = this.getElement();
         var options = this.getAnimationOptions();
@@ -244,4 +251,4 @@ var keyFrames = this.keyFrames
         var animation = element.animate(keyFrames, options);
-        animation.onfinish = function () { return _this.onfinish.emit(element); };
-        animation.oncancel = function () { return _this.oncancel.emit(element); };
+        animation.onfinish = function () { return _this.onFinish.emit(element); };
+        animation.oncancel = function () { return _this.onCancel.emit(element); };
         if (this.currentTime !== undefined)
@@ -248,0 +255,0 @@ animation.currentTime = this.currentTime;

dist/esm/animatable-component.entry.js

@@ -11,4 +11,5 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
         this.autoPlay = true;
-        this.onfinish = createEvent(this, "finish", 7);
-        this.oncancel = createEvent(this, "cancel", 7);
+        this.onStart = createEvent(this, "start", 7);
+        this.onFinish = createEvent(this, "finish", 7);
+        this.onCancel = createEvent(this, "cancel", 7);
     }
@@ -117,2 +118,4 @@ animationDidChangeHandler(animation) {
     async play() {
+        const element = this.getElement();
+        this.onStart.emit(element);
         return this.currentAnimation.play();
@@ -126,2 +129,7 @@ }
     }
+    getElement() {
+        return (this.el.firstElementChild
+            || (this.el.children.length && this.el.children[0])
+            || this.el);
+    }
     getAnimationOptions() {
@@ -158,5 +166,3 @@ const animationOptions = this.options
     createAnimation() {
-        const element = (this.el.firstElementChild
-            || (this.el.children.length && this.el.children[0])
-            || this.el);
+        const element = this.getElement();
         const options = this.getAnimationOptions();
@@ -168,4 +174,4 @@ const keyFrames = this.keyFrames
         const animation = element.animate(keyFrames, options);
-        animation.onfinish = () => this.onfinish.emit(element);
-        animation.oncancel = () => this.oncancel.emit(element);
+        animation.onfinish = () => this.onFinish.emit(element);
+        animation.oncancel = () => this.onCancel.emit(element);
         if (this.currentTime !== undefined)
@@ -172,0 +178,0 @@ animation.currentTime = this.currentTime;

dist/types/components.d.ts

@@ -227,2 +227,6 @@ /* eslint-disable */
     /**
+    * This event is sent when the animation is going to play.
+    */
+    'onStart'?: (event: CustomEvent<HTMLElement>) => void;
+    /**
     * Default options of the animation.
@@ -229,0 +233,0 @@ */

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

@@ -134,9 +134,13 @@ import { ComponentInterface, EventEmitter } from '../../stencil.core';
     /**
+     * This event is sent when the animation is going to play.
+     */
+    onStart: EventEmitter<HTMLElement>;
+    /**
      * This event is sent when the animation finishes playing.
      */
-    onfinish: EventEmitter<HTMLElement>;
+    onFinish: EventEmitter<HTMLElement>;
     /**
      * This event is sent when the animation is cancelled.
      */
-    oncancel: EventEmitter<HTMLElement>;
+    onCancel: EventEmitter<HTMLElement>;
     /**
@@ -163,2 +167,3 @@ * Clears all `KeyframeEffects` caused by this animation and aborts its playback.
     reverse(): Promise<void>;
+    private getElement;
     private getAnimationOptions;
@@ -165,0 +170,0 @@ private createAnimation;

package.json

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

readme.md

@@ -15,3 +15,3 @@ ![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)
 
-# `<animatable-component/>`
+# `<animatable/>`
 
@@ -111,2 +111,3 @@ 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.
 | -------- | ------------------------------------------------------- | -------------------------- |
+| `start`  | This event is sent when the animation is going to play. | `CustomEvent<HTMLElement>` |
 | `cancel` | This event is sent when the animation is cancelled.     | `CustomEvent<HTMLElement>` |
@@ -237,2 +238,87 @@ | `finish` | This event is sent when the animation finishes playing. | `CustomEvent<HTMLElement>` |
 
+## Framework integrations
+
+### Angular
+Using `animatable-component` component within an Angular project:
+
+#### Including the Custom Elements Schema
+
+Including the `CUSTOM_ELEMENTS_SCHEMA` in the module allows the use of Web Components in the HTML files. Here is an example of adding it to `AppModule`:
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
+
+The `CUSTOM_ELEMENTS_SCHEMA` needs to be included in any module that uses **Animatable**.
+
+#### Calling defineCustomElements
+
+**Animatable** component includes a function used to load itself in the application window object. That function is called `defineCustomElements()` and needs to be executed once during the bootstrapping of your application. One convenient place to add it is in the `main.ts` file as follows:
+
+```tsx
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
+defineAnimatable(window);
+```
+
+[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/angular.md)
+
+### React
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader'
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+defineAnimatable(window);
+```
+
+[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/react.md)
+
+### Vue
+
+In order to use the `animatable-component` Web Component inside of a Vue application, it should be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the `main.js` file as follows:
+
+```tsx
+import Vue from 'vue';
+import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader'
+
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+Vue.config.ignoredElements = [/animatable-\w*/];
+
+// Bind the custom element to the window object
+defineAnimatable(window);
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app');
+```
+
+[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/vue.md)
+
 ## Supporting 🍻
@@ -239,0 +325,0 @@ I believe in Unicorns 🦄

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Improved metrics

Total package byte prevSize

1030862

increased by0.62%

Lines of code

16154

increased by0.35%

Number of lines in readme file

332

increased by34.96%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes