@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

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

@@ -1,1 +0,1 @@
-import{p as t,b as e}from"./p-411541f5.js";t().then(t=>e([["p-jyqxz4hf",[[4,"animatable-component",{keyFrames:[16],options:[16],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 t,b as e}from"./p-b8e3090f.js";t().then(t=>e([["p-yzadnkeg",[[4,"animatable-component",{keyFrames:[16],options:[16],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/animatable-component/index.esm.js

@@ -1,1 +0,1 @@
-import{h as t}from"./p-411541f5.js";function e(e){return n=>t("animatable-component",Object.assign({},n),t(e,Object.assign({},n)))}export{e as createAnimatableComponent};
+import{h as t}from"./p-b8e3090f.js";function e(e){return n=>t("animatable-component",Object.assign({},n),t(e,Object.assign({},n)))}export{e as createAnimatableComponent};

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

@@ -5,14 +5,4 @@ 'use strict';
 
-const core = require('./core-21026e29.js');
+const core = require('./core-24f7f626.js');
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 const AnimatableComponent = class {
@@ -130,3 +120,3 @@ constructor(hostRef) {
     createAnimation() {
-        const element = this.el.querySelectorAll(':first-child')[0];
+        const element = this.el;
         const options = this.getAnimationOptions();
@@ -153,4 +143,5 @@ const animation = element.animate(this.keyFrames, options);
     render() {
-        return core.h(core.Host, null, core.h("slot", null));
+        return core.h("slot", null);
     }
+    get el() { return core.getElement(this); }
     static get watchers() { return {
@@ -162,6 +153,3 @@ "currentTime": ["setCurrenTime"],
 };
-__decorate([
-    ElementDecorator()
-], AnimatableComponent.prototype, "el", void 0);
 
 exports.animatable_component = AnimatableComponent;

dist/cjs/animatable-component.cjs.js

 'use strict';
 
-const core = require('./core-21026e29.js');
+const core = require('./core-24f7f626.js');
 
@@ -5,0 +5,0 @@ core.patchBrowser().then(options => {

dist/cjs/index.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-21026e29.js');
+const core = require('./core-24f7f626.js');
 
@@ -8,0 +8,0 @@ function createAnimatableComponent(WrappedComponent) {

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-21026e29.js');
+const core = require('./core-24f7f626.js');
 
@@ -8,0 +8,0 @@ const defineCustomElements = (win, options) => {

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

@@ -1,8 +0,2 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 export class AnimatableComponent {
@@ -117,3 +111,3 @@ constructor() {
     createAnimation() {
-        const element = this.el.querySelectorAll(':first-child')[0];
+        const element = this.el;
         const options = this.getAnimationOptions();
@@ -140,4 +134,3 @@ const animation = element.animate(this.keyFrames, options);
     render() {
-        return h(Host, null,
-            h("slot", null));
+        return h("slot", null);
     }
@@ -468,6 +461,6 @@ static get is() { return "animatable-component"; }
             "complexType": {
-                "original": "Element",
-                "resolved": "Element",
+                "original": "HTMLElement",
+                "resolved": "HTMLElement",
                 "references": {
-                    "Element": {
+                    "HTMLElement": {
                         "location": "global"
@@ -488,6 +481,6 @@ }
             "complexType": {
-                "original": "Element",
-                "resolved": "Element",
+                "original": "HTMLElement",
+                "resolved": "HTMLElement",
                 "references": {
-                    "Element": {
+                    "HTMLElement": {
                         "location": "global"
@@ -663,2 +656,3 @@ }
     }; }
+    static get elementRef() { return "el"; }
     static get watchers() { return [{
@@ -675,4 +669,1 @@ "propName": "currentTime",
 }
-__decorate([
-    ElementDecorator()
-], AnimatableComponent.prototype, "el", void 0);

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

@@ -37,13 +37,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h, H as Host } from './core-8ccfe2c0.js';
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-01d5a7cc.js';
 var AnimatableComponent = /** @class */ (function () {
@@ -202,3 +192,3 @@ function class_1(hostRef) {
         var _this = this;
-        var element = this.el.querySelectorAll(':first-child')[0];
+        var element = this.el;
         var options = this.getAnimationOptions();
@@ -225,4 +215,9 @@ var animation = element.animate(this.keyFrames, options);
     class_1.prototype.render = function () {
-        return h(Host, null, h("slot", null));
+        return h("slot", null);
     };
+    Object.defineProperty(class_1.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(class_1, "watchers", {
@@ -241,5 +236,2 @@ get: function () {
 }());
-__decorate([
-    ElementDecorator()
-], AnimatableComponent.prototype, "el", void 0);
 export { AnimatableComponent as animatable_component };

dist/esm/animatable-component.entry.js

@@ -1,13 +0,3 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './core-8ccfe2c0.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-01d5a7cc.js';
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 const AnimatableComponent = class {
@@ -125,3 +115,3 @@ constructor(hostRef) {
     createAnimation() {
-        const element = this.el.querySelectorAll(':first-child')[0];
+        const element = this.el;
         const options = this.getAnimationOptions();
@@ -148,4 +138,5 @@ const animation = element.animate(this.keyFrames, options);
     render() {
-        return h(Host, null, h("slot", null));
+        return h("slot", null);
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
@@ -157,6 +148,3 @@ "currentTime": ["setCurrenTime"],
 };
-__decorate([
-    ElementDecorator()
-], AnimatableComponent.prototype, "el", void 0);
 
 export { AnimatableComponent as animatable_component };

dist/types/components.d.ts

@@ -199,7 +199,7 @@ /* eslint-disable */
     */
-    'onCancel'?: (event: CustomEvent<Element>) => void;
+    'onCancel'?: (event: CustomEvent<HTMLElement>) => void;
     /**
     * This event is sent when the animation finishes playing.
     */
-    'onFinish'?: (event: CustomEvent<Element>) => void;
+    'onFinish'?: (event: CustomEvent<HTMLElement>) => void;
     /**
@@ -206,0 +206,0 @@ * Default options of the animation.

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

@@ -108,7 +108,7 @@ import { EventEmitter } from '../../stencil.core';
      */
-    onfinish: EventEmitter<Element>;
+    onfinish: EventEmitter<HTMLElement>;
     /**
      * This event is sent when the animation is cancelled.
      */
-    oncancel: EventEmitter<Element>;
+    oncancel: EventEmitter<HTMLElement>;
     /**
@@ -115,0 +115,0 @@ * Clears all `KeyframeEffects` caused by this animation and aborts its playback.

package.json

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

readme.md

@@ -71,4 +71,2 @@ ![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)
 
-## Properties
-
 | Property             | Attribute             | Description                                                                                                                                                                                                  | Type                                                          | Default     |
@@ -97,6 +95,6 @@ | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------- |
 
-| Event    | Description                                             | Type                   |
-| -------- | ------------------------------------------------------- | ---------------------- |
-| `cancel` | This event is sent when the animation is cancelled.     | `CustomEvent<Element>` |
-| `finish` | This event is sent when the animation finishes playing. | `CustomEvent<Element>` |
+| Event    | Description                                             | Type                       |
+| -------- | ------------------------------------------------------- | -------------------------- |
+| `cancel` | This event is sent when the animation is cancelled.     | `CustomEvent<HTMLElement>` |
+| `finish` | This event is sent when the animation finishes playing. | `CustomEvent<HTMLElement>` |
 
@@ -103,0 +101,0 @@

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

769459

decreased by-0.44%

Lines of code

12203

decreased by-0.33%

Number of lines in readme file

230

decreased by-0.86%

No dependency changes