@mangoweb/scripts-base - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/components/Component.d.ts

@@ -10,3 +10,3 @@ export interface NamedComponent {
     protected readonly data: D;
-    protected getListeners: () => (["focusin", (event: FocusEvent) => void] | ["focusout", (event: FocusEvent) => void] | ["fullscreenchange", (event: Event) => void] | ["fullscreenerror", (event: Event) => void] | ["abort", (event: UIEvent) => void] | ["animationcancel", (event: AnimationEvent) => void] | ["animationend", (event: AnimationEvent) => void] | ["animationiteration", (event: AnimationEvent) => void] | ["animationstart", (event: AnimationEvent) => void] | ["auxclick", (event: Event) => void] | ["blur", (event: FocusEvent) => void] | ["cancel", (event: Event) => void] | ["canplay", (event: Event) => void] | ["canplaythrough", (event: Event) => void] | ["change", (event: Event) => void] | ["click", (event: MouseEvent) => void] | ["close", (event: Event) => void] | ["contextmenu", (event: MouseEvent) => void] | ["cuechange", (event: Event) => void] | ["dblclick", (event: MouseEvent) => void] | ["drag", (event: DragEvent) => void] | ["dragend", (event: DragEvent) => void] | ["dragenter", (event: DragEvent) => void] | ["dragexit", (event: Event) => void] | ["dragleave", (event: DragEvent) => void] | ["dragover", (event: DragEvent) => void] | ["dragstart", (event: DragEvent) => void] | ["drop", (event: DragEvent) => void] | ["durationchange", (event: Event) => void] | ["emptied", (event: Event) => void] | ["ended", (event: Event) => void] | ["error", (event: ErrorEvent) => void] | ["focus", (event: FocusEvent) => void] | ["gotpointercapture", (event: PointerEvent) => void] | ["input", (event: Event) => void] | ["invalid", (event: Event) => void] | ["keydown", (event: KeyboardEvent) => void] | ["keypress", (event: KeyboardEvent) => void] | ["keyup", (event: KeyboardEvent) => void] | ["load", (event: Event) => void] | ["loadeddata", (event: Event) => void] | ["loadedmetadata", (event: Event) => void] | ["loadend", (event: ProgressEvent) => void] | ["loadstart", (event: Event) => void] | ["lostpointercapture", (event: PointerEvent) => void] | ["mousedown", (event: MouseEvent) => void] | ["mouseenter", (event: MouseEvent) => void] | ["mouseleave", (event: MouseEvent) => void] | ["mousemove", (event: MouseEvent) => void] | ["mouseout", (event: MouseEvent) => void] | ["mouseover", (event: MouseEvent) => void] | ["mouseup", (event: MouseEvent) => void] | ["pause", (event: Event) => void] | ["play", (event: Event) => void] | ["playing", (event: Event) => void] | ["pointercancel", (event: PointerEvent) => void] | ["pointerdown", (event: PointerEvent) => void] | ["pointerenter", (event: PointerEvent) => void] | ["pointerleave", (event: PointerEvent) => void] | ["pointermove", (event: PointerEvent) => void] | ["pointerout", (event: PointerEvent) => void] | ["pointerover", (event: PointerEvent) => void] | ["pointerup", (event: PointerEvent) => void] | ["progress", (event: ProgressEvent) => void] | ["ratechange", (event: Event) => void] | ["reset", (event: Event) => void] | ["resize", (event: UIEvent) => void] | ["scroll", (event: UIEvent) => void] | ["securitypolicyviolation", (event: SecurityPolicyViolationEvent) => void] | ["seeked", (event: Event) => void] | ["seeking", (event: Event) => void] | ["select", (event: UIEvent) => void] | ["stalled", (event: Event) => void] | ["submit", (event: Event) => void] | ["suspend", (event: Event) => void] | ["timeupdate", (event: Event) => void] | ["toggle", (event: Event) => void] | ["touchcancel", (event: TouchEvent) => void] | ["touchend", (event: TouchEvent) => void] | ["touchmove", (event: TouchEvent) => void] | ["touchstart", (event: TouchEvent) => void] | ["transitioncancel", (event: TransitionEvent) => void] | ["transitionend", (event: TransitionEvent) => void] | ["transitionrun", (event: TransitionEvent) => void] | ["transitionstart", (event: TransitionEvent) => void] | ["volumechange", (event: Event) => void] | ["waiting", (event: Event) => void] | ["wheel", (event: WheelEvent) => void] | ["copy", (event: ClipboardEvent) => void] | ["cut", (event: ClipboardEvent) => void] | ["paste", (event: ClipboardEvent) => void] | ["resize", string, (event: DelegateEvent<"resize">) => void] | ["waiting", string, (event: DelegateEvent<"waiting">) => void] | ["cancel", string, (event: DelegateEvent<"waiting">) => void] | ["ended", string, (event: DelegateEvent<"waiting">) => void] | ["change", string, (event: DelegateEvent<"waiting">) => void] | ["input", string, (event: DelegateEvent<"waiting">) => void] | ["select", string, (event: DelegateEvent<"resize">) => void] | ["fullscreenchange", string, (event: DelegateEvent<"waiting">) => void] | ["fullscreenerror", string, (event: DelegateEvent<"waiting">) => void] | ["animationcancel", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationend", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationiteration", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationstart", string, (event: DelegateEvent<"animationcancel">) => void] | ["auxclick", string, (event: DelegateEvent<"waiting">) => void] | ["canplay", string, (event: DelegateEvent<"waiting">) => void] | ["canplaythrough", string, (event: DelegateEvent<"waiting">) => void] | ["click", string, (event: DelegateEvent<"click">) => void] | ["close", string, (event: DelegateEvent<"waiting">) => void] | ["contextmenu", string, (event: DelegateEvent<"click">) => void] | ["cuechange", string, (event: DelegateEvent<"waiting">) => void] | ["dblclick", string, (event: DelegateEvent<"click">) => void] | ["drag", string, (event: DelegateEvent<"drag">) => void] | ["dragend", string, (event: DelegateEvent<"drag">) => void] | ["dragenter", string, (event: DelegateEvent<"drag">) => void] | ["dragexit", string, (event: DelegateEvent<"waiting">) => void] | ["dragleave", string, (event: DelegateEvent<"drag">) => void] | ["dragover", string, (event: DelegateEvent<"drag">) => void] | ["dragstart", string, (event: DelegateEvent<"drag">) => void] | ["drop", string, (event: DelegateEvent<"drag">) => void] | ["durationchange", string, (event: DelegateEvent<"waiting">) => void] | ["emptied", string, (event: DelegateEvent<"waiting">) => void] | ["gotpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["invalid", string, (event: DelegateEvent<"waiting">) => void] | ["keydown", string, (event: DelegateEvent<"keydown">) => void] | ["keypress", string, (event: DelegateEvent<"keydown">) => void] | ["keyup", string, (event: DelegateEvent<"keydown">) => void] | ["loadeddata", string, (event: DelegateEvent<"waiting">) => void] | ["loadedmetadata", string, (event: DelegateEvent<"waiting">) => void] | ["lostpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["mousedown", string, (event: DelegateEvent<"click">) => void] | ["mouseenter", string, (event: DelegateEvent<"click">) => void] | ["mouseleave", string, (event: DelegateEvent<"click">) => void] | ["mousemove", string, (event: DelegateEvent<"click">) => void] | ["mouseout", string, (event: DelegateEvent<"click">) => void] | ["mouseover", string, (event: DelegateEvent<"click">) => void] | ["mouseup", string, (event: DelegateEvent<"click">) => void] | ["pause", string, (event: DelegateEvent<"waiting">) => void] | ["play", string, (event: DelegateEvent<"waiting">) => void] | ["playing", string, (event: DelegateEvent<"waiting">) => void] | ["pointercancel", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerdown", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerenter", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerleave", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointermove", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerout", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerover", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerup", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["ratechange", string, (event: DelegateEvent<"waiting">) => void] | ["reset", string, (event: DelegateEvent<"waiting">) => void] | ["securitypolicyviolation", string, (event: DelegateEvent<"securitypolicyviolation">) => void] | ["seeked", string, (event: DelegateEvent<"waiting">) => void] | ["seeking", string, (event: DelegateEvent<"waiting">) => void] | ["stalled", string, (event: DelegateEvent<"waiting">) => void] | ["submit", string, (event: DelegateEvent<"waiting">) => void] | ["suspend", string, (event: DelegateEvent<"waiting">) => void] | ["timeupdate", string, (event: DelegateEvent<"waiting">) => void] | ["toggle", string, (event: DelegateEvent<"waiting">) => void] | ["touchcancel", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchend", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchmove", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchstart", string, (event: DelegateEvent<"touchcancel">) => void] | ["transitioncancel", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionend", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionrun", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionstart", string, (event: DelegateEvent<"transitioncancel">) => void] | ["volumechange", string, (event: DelegateEvent<"waiting">) => void] | ["wheel", string, (event: DelegateEvent<"wheel">) => void] | ["copy", string, (event: DelegateEvent<"copy">) => void] | ["cut", string, (event: DelegateEvent<"copy">) => void] | ["paste", string, (event: DelegateEvent<"copy">) => void] | ["focusin", string, (event: DelegateEvent<"focusin">) => void] | ["focusout", string, (event: DelegateEvent<"focusin">) => void])[];
+    protected getListeners: () => (["focusin", EventListenerCallback<"focusin">] | ["focusout", EventListenerCallback<"focusout">] | ["fullscreenchange", EventListenerCallback<"fullscreenchange">] | ["fullscreenerror", EventListenerCallback<"fullscreenerror">] | ["abort", EventListenerCallback<"abort">] | ["animationcancel", EventListenerCallback<"animationcancel">] | ["animationend", EventListenerCallback<"animationend">] | ["animationiteration", EventListenerCallback<"animationiteration">] | ["animationstart", EventListenerCallback<"animationstart">] | ["auxclick", EventListenerCallback<"auxclick">] | ["blur", EventListenerCallback<"blur">] | ["cancel", EventListenerCallback<"cancel">] | ["canplay", EventListenerCallback<"canplay">] | ["canplaythrough", EventListenerCallback<"canplaythrough">] | ["change", EventListenerCallback<"change">] | ["click", EventListenerCallback<"click">] | ["close", EventListenerCallback<"close">] | ["contextmenu", EventListenerCallback<"contextmenu">] | ["cuechange", EventListenerCallback<"cuechange">] | ["dblclick", EventListenerCallback<"dblclick">] | ["drag", EventListenerCallback<"drag">] | ["dragend", EventListenerCallback<"dragend">] | ["dragenter", EventListenerCallback<"dragenter">] | ["dragexit", EventListenerCallback<"dragexit">] | ["dragleave", EventListenerCallback<"dragleave">] | ["dragover", EventListenerCallback<"dragover">] | ["dragstart", EventListenerCallback<"dragstart">] | ["drop", EventListenerCallback<"drop">] | ["durationchange", EventListenerCallback<"durationchange">] | ["emptied", EventListenerCallback<"emptied">] | ["ended", EventListenerCallback<"ended">] | ["error", EventListenerCallback<"error">] | ["focus", EventListenerCallback<"focus">] | ["gotpointercapture", EventListenerCallback<"gotpointercapture">] | ["input", EventListenerCallback<"input">] | ["invalid", EventListenerCallback<"invalid">] | ["keydown", EventListenerCallback<"keydown">] | ["keypress", EventListenerCallback<"keypress">] | ["keyup", EventListenerCallback<"keyup">] | ["load", EventListenerCallback<"load">] | ["loadeddata", EventListenerCallback<"loadeddata">] | ["loadedmetadata", EventListenerCallback<"loadedmetadata">] | ["loadend", EventListenerCallback<"loadend">] | ["loadstart", EventListenerCallback<"loadstart">] | ["lostpointercapture", EventListenerCallback<"lostpointercapture">] | ["mousedown", EventListenerCallback<"mousedown">] | ["mouseenter", EventListenerCallback<"mouseenter">] | ["mouseleave", EventListenerCallback<"mouseleave">] | ["mousemove", EventListenerCallback<"mousemove">] | ["mouseout", EventListenerCallback<"mouseout">] | ["mouseover", EventListenerCallback<"mouseover">] | ["mouseup", EventListenerCallback<"mouseup">] | ["pause", EventListenerCallback<"pause">] | ["play", EventListenerCallback<"play">] | ["playing", EventListenerCallback<"playing">] | ["pointercancel", EventListenerCallback<"pointercancel">] | ["pointerdown", EventListenerCallback<"pointerdown">] | ["pointerenter", EventListenerCallback<"pointerenter">] | ["pointerleave", EventListenerCallback<"pointerleave">] | ["pointermove", EventListenerCallback<"pointermove">] | ["pointerout", EventListenerCallback<"pointerout">] | ["pointerover", EventListenerCallback<"pointerover">] | ["pointerup", EventListenerCallback<"pointerup">] | ["progress", EventListenerCallback<"progress">] | ["ratechange", EventListenerCallback<"ratechange">] | ["reset", EventListenerCallback<"reset">] | ["resize", EventListenerCallback<"resize">] | ["scroll", EventListenerCallback<"scroll">] | ["securitypolicyviolation", EventListenerCallback<"securitypolicyviolation">] | ["seeked", EventListenerCallback<"seeked">] | ["seeking", EventListenerCallback<"seeking">] | ["select", EventListenerCallback<"select">] | ["selectionchange", EventListenerCallback<"selectionchange">] | ["selectstart", EventListenerCallback<"selectstart">] | ["stalled", EventListenerCallback<"stalled">] | ["submit", EventListenerCallback<"submit">] | ["suspend", EventListenerCallback<"suspend">] | ["timeupdate", EventListenerCallback<"timeupdate">] | ["toggle", EventListenerCallback<"toggle">] | ["touchcancel", EventListenerCallback<"touchcancel">] | ["touchend", EventListenerCallback<"touchend">] | ["touchmove", EventListenerCallback<"touchmove">] | ["touchstart", EventListenerCallback<"touchstart">] | ["transitioncancel", EventListenerCallback<"transitioncancel">] | ["transitionend", EventListenerCallback<"transitionend">] | ["transitionrun", EventListenerCallback<"transitionrun">] | ["transitionstart", EventListenerCallback<"transitionstart">] | ["volumechange", EventListenerCallback<"volumechange">] | ["waiting", EventListenerCallback<"waiting">] | ["wheel", EventListenerCallback<"wheel">] | ["copy", EventListenerCallback<"copy">] | ["cut", EventListenerCallback<"cut">] | ["paste", EventListenerCallback<"paste">] | ["waiting", string, DelegateEventListenerCallback<"waiting">] | ["cancel", string, DelegateEventListenerCallback<"cancel">] | ["ended", string, DelegateEventListenerCallback<"ended">] | ["change", string, DelegateEventListenerCallback<"change">] | ["input", string, DelegateEventListenerCallback<"input">] | ["select", string, DelegateEventListenerCallback<"select">] | ["fullscreenchange", string, DelegateEventListenerCallback<"fullscreenchange">] | ["fullscreenerror", string, DelegateEventListenerCallback<"fullscreenerror">] | ["animationcancel", string, DelegateEventListenerCallback<"animationcancel">] | ["animationend", string, DelegateEventListenerCallback<"animationend">] | ["animationiteration", string, DelegateEventListenerCallback<"animationiteration">] | ["animationstart", string, DelegateEventListenerCallback<"animationstart">] | ["auxclick", string, DelegateEventListenerCallback<"auxclick">] | ["canplay", string, DelegateEventListenerCallback<"canplay">] | ["canplaythrough", string, DelegateEventListenerCallback<"canplaythrough">] | ["click", string, DelegateEventListenerCallback<"click">] | ["close", string, DelegateEventListenerCallback<"close">] | ["contextmenu", string, DelegateEventListenerCallback<"contextmenu">] | ["cuechange", string, DelegateEventListenerCallback<"cuechange">] | ["dblclick", string, DelegateEventListenerCallback<"dblclick">] | ["drag", string, DelegateEventListenerCallback<"drag">] | ["dragend", string, DelegateEventListenerCallback<"dragend">] | ["dragenter", string, DelegateEventListenerCallback<"dragenter">] | ["dragexit", string, DelegateEventListenerCallback<"dragexit">] | ["dragleave", string, DelegateEventListenerCallback<"dragleave">] | ["dragover", string, DelegateEventListenerCallback<"dragover">] | ["dragstart", string, DelegateEventListenerCallback<"dragstart">] | ["drop", string, DelegateEventListenerCallback<"drop">] | ["durationchange", string, DelegateEventListenerCallback<"durationchange">] | ["emptied", string, DelegateEventListenerCallback<"emptied">] | ["gotpointercapture", string, DelegateEventListenerCallback<"gotpointercapture">] | ["invalid", string, DelegateEventListenerCallback<"invalid">] | ["keydown", string, DelegateEventListenerCallback<"keydown">] | ["keypress", string, DelegateEventListenerCallback<"keypress">] | ["keyup", string, DelegateEventListenerCallback<"keyup">] | ["loadeddata", string, DelegateEventListenerCallback<"loadeddata">] | ["loadedmetadata", string, DelegateEventListenerCallback<"loadedmetadata">] | ["lostpointercapture", string, DelegateEventListenerCallback<"lostpointercapture">] | ["mousedown", string, DelegateEventListenerCallback<"mousedown">] | ["mouseenter", string, DelegateEventListenerCallback<"mouseenter">] | ["mouseleave", string, DelegateEventListenerCallback<"mouseleave">] | ["mousemove", string, DelegateEventListenerCallback<"mousemove">] | ["mouseout", string, DelegateEventListenerCallback<"mouseout">] | ["mouseover", string, DelegateEventListenerCallback<"mouseover">] | ["mouseup", string, DelegateEventListenerCallback<"mouseup">] | ["pause", string, DelegateEventListenerCallback<"pause">] | ["play", string, DelegateEventListenerCallback<"play">] | ["playing", string, DelegateEventListenerCallback<"playing">] | ["pointercancel", string, DelegateEventListenerCallback<"pointercancel">] | ["pointerdown", string, DelegateEventListenerCallback<"pointerdown">] | ["pointerenter", string, DelegateEventListenerCallback<"pointerenter">] | ["pointerleave", string, DelegateEventListenerCallback<"pointerleave">] | ["pointermove", string, DelegateEventListenerCallback<"pointermove">] | ["pointerout", string, DelegateEventListenerCallback<"pointerout">] | ["pointerover", string, DelegateEventListenerCallback<"pointerover">] | ["pointerup", string, DelegateEventListenerCallback<"pointerup">] | ["ratechange", string, DelegateEventListenerCallback<"ratechange">] | ["reset", string, DelegateEventListenerCallback<"reset">] | ["resize", string, DelegateEventListenerCallback<"resize">] | ["securitypolicyviolation", string, DelegateEventListenerCallback<"securitypolicyviolation">] | ["seeked", string, DelegateEventListenerCallback<"seeked">] | ["seeking", string, DelegateEventListenerCallback<"seeking">] | ["selectionchange", string, DelegateEventListenerCallback<"selectionchange">] | ["selectstart", string, DelegateEventListenerCallback<"selectstart">] | ["stalled", string, DelegateEventListenerCallback<"stalled">] | ["submit", string, DelegateEventListenerCallback<"submit">] | ["suspend", string, DelegateEventListenerCallback<"suspend">] | ["timeupdate", string, DelegateEventListenerCallback<"timeupdate">] | ["toggle", string, DelegateEventListenerCallback<"toggle">] | ["touchcancel", string, DelegateEventListenerCallback<"touchcancel">] | ["touchend", string, DelegateEventListenerCallback<"touchend">] | ["touchmove", string, DelegateEventListenerCallback<"touchmove">] | ["touchstart", string, DelegateEventListenerCallback<"touchstart">] | ["transitioncancel", string, DelegateEventListenerCallback<"transitioncancel">] | ["transitionend", string, DelegateEventListenerCallback<"transitionend">] | ["transitionrun", string, DelegateEventListenerCallback<"transitionrun">] | ["transitionstart", string, DelegateEventListenerCallback<"transitionstart">] | ["volumechange", string, DelegateEventListenerCallback<"volumechange">] | ["wheel", string, DelegateEventListenerCallback<"wheel">] | ["copy", string, DelegateEventListenerCallback<"copy">] | ["cut", string, DelegateEventListenerCallback<"cut">] | ["paste", string, DelegateEventListenerCallback<"paste">] | ["focusin", string, DelegateEventListenerCallback<"focusin">] | ["focusout", string, DelegateEventListenerCallback<"focusout">])[];
     constructor(element: E, data: D);
@@ -13,0 +13,0 @@ setup(): void;

lib/components/Component.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("../utils");
-class ComponentInitializationError extends Error {
-}
+var utils_1 = require("../utils");
+var ComponentInitializationError = /** @class */ (function (_super) {
+    __extends(ComponentInitializationError, _super);
+    function ComponentInitializationError() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ComponentInitializationError;
+}(Error));
 exports.ComponentInitializationError = ComponentInitializationError;
-class Component {
-    constructor(element, data) {
-        this.getListeners = () => [];
+var Component = /** @class */ (function () {
+    function Component(element, data) {
+        this.getListeners = function () { return []; };
         this.el = element;
         this.data = data;
     }
-    setup() {
+    Component.prototype.setup = function () {
         this.attachListeners();
         this.init();
-    }
-    getChild(selector, ChildConstructor, parent = this.el) {
-        const child = parent.querySelector(selector);
+    };
+    Component.prototype.getChild = function (selector, ChildConstructor, parent) {
+        if (parent === void 0) { parent = this.el; }
+        var child = parent.querySelector(selector);
         if (!(child instanceof ChildConstructor)) {
-            throw new ComponentInitializationError(`The child element matching '${selector}' is not an instance of the supplied constructor.`);
+            throw new ComponentInitializationError("The child element matching '" + selector + "' is not an instance of the supplied constructor.");
         }
         return child;
-    }
-    getChildren(selector, parent = this.el) {
+    };
+    Component.prototype.getChildren = function (selector, parent) {
+        if (parent === void 0) { parent = this.el; }
         return parent.querySelectorAll(selector);
-    }
-    getProp(prop, defaultValue) {
+    };
+    Component.prototype.getProp = function (prop, defaultValue) {
         return this.data[prop] === undefined ? defaultValue : this.data[prop];
-    }
-    init() { }
-    attachListeners() {
-        const listeners = this.getListeners();
-        for (let i = 0, listenersCount = listeners.length; i < listenersCount; i++) {
-            const listenersSpec = listeners[i];
+    };
+    Component.prototype.init = function () { };
+    Component.prototype.attachListeners = function () {
+        var _this = this;
+        var listeners = this.getListeners();
+        var _loop_1 = function (i, listenersCount) {
+            var listenersSpec = listeners[i];
             if (listenersSpec.length === 2) {
                 // EventListenerSpec
-                const [type, callback] = listenersSpec;
-                this.el.addEventListener(type, callback.bind(this), false);
+                var type = listenersSpec[0], callback = listenersSpec[1];
+                this_1.el.addEventListener(type, callback.bind(this_1), false);
             }
             else {
                 // DelegateEventListenerSpec
-                const [type, delegateSelector, callback] = listenersSpec;
-                this.el.addEventListener(type, (e) => {
-                    let target = e.target;
-                    while (target && target instanceof HTMLElement && target !== this.el) {
-                        if (utils_1.matchesSelector(target, delegateSelector)) {
-                            const delegateEvent = e;
+                var type_1 = listenersSpec[0], delegateSelector_1 = listenersSpec[1], callback_1 = listenersSpec[2];
+                this_1.el.addEventListener(type_1, function (e) {
+                    var target = e.target;
+                    while (target && target instanceof HTMLElement && target !== _this.el) {
+                        if (utils_1.matchesSelector(target, delegateSelector_1)) {
+                            var delegateEvent = e;
                             delegateEvent.delegateTarget = target;
-                            return callback.call(this, delegateEvent);
+                            return callback_1.call(_this, delegateEvent);
                         }
@@ -55,6 +76,11 @@ target = target.parentElement;
             }
+        };
+        var this_1 = this;
+        for (var i = 0, listenersCount = listeners.length; i < listenersCount; i++) {
+            _loop_1(i, listenersCount);
         }
-    }
-}
+    };
+    return Component;
+}());
 exports.Component = Component;
 //# sourceMappingURL=Component.js.map

lib/components/Emitter.d.ts

@@ -19,3 +19,3 @@ import { Component } from './Component';
     private events;
-    protected getListeners: () => (["focusin", (event: FocusEvent) => void] | ["focusout", (event: FocusEvent) => void] | ["fullscreenchange", (event: Event) => void] | ["fullscreenerror", (event: Event) => void] | ["abort", (event: UIEvent) => void] | ["animationcancel", (event: AnimationEvent) => void] | ["animationend", (event: AnimationEvent) => void] | ["animationiteration", (event: AnimationEvent) => void] | ["animationstart", (event: AnimationEvent) => void] | ["auxclick", (event: Event) => void] | ["blur", (event: FocusEvent) => void] | ["cancel", (event: Event) => void] | ["canplay", (event: Event) => void] | ["canplaythrough", (event: Event) => void] | ["change", (event: Event) => void] | ["click", (event: MouseEvent) => void] | ["close", (event: Event) => void] | ["contextmenu", (event: MouseEvent) => void] | ["cuechange", (event: Event) => void] | ["dblclick", (event: MouseEvent) => void] | ["drag", (event: DragEvent) => void] | ["dragend", (event: DragEvent) => void] | ["dragenter", (event: DragEvent) => void] | ["dragexit", (event: Event) => void] | ["dragleave", (event: DragEvent) => void] | ["dragover", (event: DragEvent) => void] | ["dragstart", (event: DragEvent) => void] | ["drop", (event: DragEvent) => void] | ["durationchange", (event: Event) => void] | ["emptied", (event: Event) => void] | ["ended", (event: Event) => void] | ["error", (event: ErrorEvent) => void] | ["focus", (event: FocusEvent) => void] | ["gotpointercapture", (event: PointerEvent) => void] | ["input", (event: Event) => void] | ["invalid", (event: Event) => void] | ["keydown", (event: KeyboardEvent) => void] | ["keypress", (event: KeyboardEvent) => void] | ["keyup", (event: KeyboardEvent) => void] | ["load", (event: Event) => void] | ["loadeddata", (event: Event) => void] | ["loadedmetadata", (event: Event) => void] | ["loadend", (event: ProgressEvent) => void] | ["loadstart", (event: Event) => void] | ["lostpointercapture", (event: PointerEvent) => void] | ["mousedown", (event: MouseEvent) => void] | ["mouseenter", (event: MouseEvent) => void] | ["mouseleave", (event: MouseEvent) => void] | ["mousemove", (event: MouseEvent) => void] | ["mouseout", (event: MouseEvent) => void] | ["mouseover", (event: MouseEvent) => void] | ["mouseup", (event: MouseEvent) => void] | ["pause", (event: Event) => void] | ["play", (event: Event) => void] | ["playing", (event: Event) => void] | ["pointercancel", (event: PointerEvent) => void] | ["pointerdown", (event: PointerEvent) => void] | ["pointerenter", (event: PointerEvent) => void] | ["pointerleave", (event: PointerEvent) => void] | ["pointermove", (event: PointerEvent) => void] | ["pointerout", (event: PointerEvent) => void] | ["pointerover", (event: PointerEvent) => void] | ["pointerup", (event: PointerEvent) => void] | ["progress", (event: ProgressEvent) => void] | ["ratechange", (event: Event) => void] | ["reset", (event: Event) => void] | ["resize", (event: UIEvent) => void] | ["scroll", (event: UIEvent) => void] | ["securitypolicyviolation", (event: SecurityPolicyViolationEvent) => void] | ["seeked", (event: Event) => void] | ["seeking", (event: Event) => void] | ["select", (event: UIEvent) => void] | ["stalled", (event: Event) => void] | ["submit", (event: Event) => void] | ["suspend", (event: Event) => void] | ["timeupdate", (event: Event) => void] | ["toggle", (event: Event) => void] | ["touchcancel", (event: TouchEvent) => void] | ["touchend", (event: TouchEvent) => void] | ["touchmove", (event: TouchEvent) => void] | ["touchstart", (event: TouchEvent) => void] | ["transitioncancel", (event: TransitionEvent) => void] | ["transitionend", (event: TransitionEvent) => void] | ["transitionrun", (event: TransitionEvent) => void] | ["transitionstart", (event: TransitionEvent) => void] | ["volumechange", (event: Event) => void] | ["waiting", (event: Event) => void] | ["wheel", (event: WheelEvent) => void] | ["copy", (event: ClipboardEvent) => void] | ["cut", (event: ClipboardEvent) => void] | ["paste", (event: ClipboardEvent) => void] | ["resize", string, (event: DelegateEvent<"resize">) => void] | ["waiting", string, (event: DelegateEvent<"waiting">) => void] | ["cancel", string, (event: DelegateEvent<"waiting">) => void] | ["ended", string, (event: DelegateEvent<"waiting">) => void] | ["change", string, (event: DelegateEvent<"waiting">) => void] | ["input", string, (event: DelegateEvent<"waiting">) => void] | ["select", string, (event: DelegateEvent<"resize">) => void] | ["fullscreenchange", string, (event: DelegateEvent<"waiting">) => void] | ["fullscreenerror", string, (event: DelegateEvent<"waiting">) => void] | ["animationcancel", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationend", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationiteration", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationstart", string, (event: DelegateEvent<"animationcancel">) => void] | ["auxclick", string, (event: DelegateEvent<"waiting">) => void] | ["canplay", string, (event: DelegateEvent<"waiting">) => void] | ["canplaythrough", string, (event: DelegateEvent<"waiting">) => void] | ["click", string, (event: DelegateEvent<"click">) => void] | ["close", string, (event: DelegateEvent<"waiting">) => void] | ["contextmenu", string, (event: DelegateEvent<"click">) => void] | ["cuechange", string, (event: DelegateEvent<"waiting">) => void] | ["dblclick", string, (event: DelegateEvent<"click">) => void] | ["drag", string, (event: DelegateEvent<"drag">) => void] | ["dragend", string, (event: DelegateEvent<"drag">) => void] | ["dragenter", string, (event: DelegateEvent<"drag">) => void] | ["dragexit", string, (event: DelegateEvent<"waiting">) => void] | ["dragleave", string, (event: DelegateEvent<"drag">) => void] | ["dragover", string, (event: DelegateEvent<"drag">) => void] | ["dragstart", string, (event: DelegateEvent<"drag">) => void] | ["drop", string, (event: DelegateEvent<"drag">) => void] | ["durationchange", string, (event: DelegateEvent<"waiting">) => void] | ["emptied", string, (event: DelegateEvent<"waiting">) => void] | ["gotpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["invalid", string, (event: DelegateEvent<"waiting">) => void] | ["keydown", string, (event: DelegateEvent<"keydown">) => void] | ["keypress", string, (event: DelegateEvent<"keydown">) => void] | ["keyup", string, (event: DelegateEvent<"keydown">) => void] | ["loadeddata", string, (event: DelegateEvent<"waiting">) => void] | ["loadedmetadata", string, (event: DelegateEvent<"waiting">) => void] | ["lostpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["mousedown", string, (event: DelegateEvent<"click">) => void] | ["mouseenter", string, (event: DelegateEvent<"click">) => void] | ["mouseleave", string, (event: DelegateEvent<"click">) => void] | ["mousemove", string, (event: DelegateEvent<"click">) => void] | ["mouseout", string, (event: DelegateEvent<"click">) => void] | ["mouseover", string, (event: DelegateEvent<"click">) => void] | ["mouseup", string, (event: DelegateEvent<"click">) => void] | ["pause", string, (event: DelegateEvent<"waiting">) => void] | ["play", string, (event: DelegateEvent<"waiting">) => void] | ["playing", string, (event: DelegateEvent<"waiting">) => void] | ["pointercancel", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerdown", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerenter", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerleave", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointermove", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerout", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerover", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerup", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["ratechange", string, (event: DelegateEvent<"waiting">) => void] | ["reset", string, (event: DelegateEvent<"waiting">) => void] | ["securitypolicyviolation", string, (event: DelegateEvent<"securitypolicyviolation">) => void] | ["seeked", string, (event: DelegateEvent<"waiting">) => void] | ["seeking", string, (event: DelegateEvent<"waiting">) => void] | ["stalled", string, (event: DelegateEvent<"waiting">) => void] | ["submit", string, (event: DelegateEvent<"waiting">) => void] | ["suspend", string, (event: DelegateEvent<"waiting">) => void] | ["timeupdate", string, (event: DelegateEvent<"waiting">) => void] | ["toggle", string, (event: DelegateEvent<"waiting">) => void] | ["touchcancel", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchend", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchmove", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchstart", string, (event: DelegateEvent<"touchcancel">) => void] | ["transitioncancel", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionend", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionrun", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionstart", string, (event: DelegateEvent<"transitioncancel">) => void] | ["volumechange", string, (event: DelegateEvent<"waiting">) => void] | ["wheel", string, (event: DelegateEvent<"wheel">) => void] | ["copy", string, (event: DelegateEvent<"copy">) => void] | ["cut", string, (event: DelegateEvent<"copy">) => void] | ["paste", string, (event: DelegateEvent<"copy">) => void] | ["focusin", string, (event: DelegateEvent<"focusin">) => void] | ["focusout", string, (event: DelegateEvent<"focusin">) => void])[];
+    protected getListeners: () => (["focusin", EventListenerCallback<"focusin">] | ["focusout", EventListenerCallback<"focusout">] | ["fullscreenchange", EventListenerCallback<"fullscreenchange">] | ["fullscreenerror", EventListenerCallback<"fullscreenerror">] | ["abort", EventListenerCallback<"abort">] | ["animationcancel", EventListenerCallback<"animationcancel">] | ["animationend", EventListenerCallback<"animationend">] | ["animationiteration", EventListenerCallback<"animationiteration">] | ["animationstart", EventListenerCallback<"animationstart">] | ["auxclick", EventListenerCallback<"auxclick">] | ["blur", EventListenerCallback<"blur">] | ["cancel", EventListenerCallback<"cancel">] | ["canplay", EventListenerCallback<"canplay">] | ["canplaythrough", EventListenerCallback<"canplaythrough">] | ["change", EventListenerCallback<"change">] | ["click", EventListenerCallback<"click">] | ["close", EventListenerCallback<"close">] | ["contextmenu", EventListenerCallback<"contextmenu">] | ["cuechange", EventListenerCallback<"cuechange">] | ["dblclick", EventListenerCallback<"dblclick">] | ["drag", EventListenerCallback<"drag">] | ["dragend", EventListenerCallback<"dragend">] | ["dragenter", EventListenerCallback<"dragenter">] | ["dragexit", EventListenerCallback<"dragexit">] | ["dragleave", EventListenerCallback<"dragleave">] | ["dragover", EventListenerCallback<"dragover">] | ["dragstart", EventListenerCallback<"dragstart">] | ["drop", EventListenerCallback<"drop">] | ["durationchange", EventListenerCallback<"durationchange">] | ["emptied", EventListenerCallback<"emptied">] | ["ended", EventListenerCallback<"ended">] | ["error", EventListenerCallback<"error">] | ["focus", EventListenerCallback<"focus">] | ["gotpointercapture", EventListenerCallback<"gotpointercapture">] | ["input", EventListenerCallback<"input">] | ["invalid", EventListenerCallback<"invalid">] | ["keydown", EventListenerCallback<"keydown">] | ["keypress", EventListenerCallback<"keypress">] | ["keyup", EventListenerCallback<"keyup">] | ["load", EventListenerCallback<"load">] | ["loadeddata", EventListenerCallback<"loadeddata">] | ["loadedmetadata", EventListenerCallback<"loadedmetadata">] | ["loadend", EventListenerCallback<"loadend">] | ["loadstart", EventListenerCallback<"loadstart">] | ["lostpointercapture", EventListenerCallback<"lostpointercapture">] | ["mousedown", EventListenerCallback<"mousedown">] | ["mouseenter", EventListenerCallback<"mouseenter">] | ["mouseleave", EventListenerCallback<"mouseleave">] | ["mousemove", EventListenerCallback<"mousemove">] | ["mouseout", EventListenerCallback<"mouseout">] | ["mouseover", EventListenerCallback<"mouseover">] | ["mouseup", EventListenerCallback<"mouseup">] | ["pause", EventListenerCallback<"pause">] | ["play", EventListenerCallback<"play">] | ["playing", EventListenerCallback<"playing">] | ["pointercancel", EventListenerCallback<"pointercancel">] | ["pointerdown", EventListenerCallback<"pointerdown">] | ["pointerenter", EventListenerCallback<"pointerenter">] | ["pointerleave", EventListenerCallback<"pointerleave">] | ["pointermove", EventListenerCallback<"pointermove">] | ["pointerout", EventListenerCallback<"pointerout">] | ["pointerover", EventListenerCallback<"pointerover">] | ["pointerup", EventListenerCallback<"pointerup">] | ["progress", EventListenerCallback<"progress">] | ["ratechange", EventListenerCallback<"ratechange">] | ["reset", EventListenerCallback<"reset">] | ["resize", EventListenerCallback<"resize">] | ["scroll", EventListenerCallback<"scroll">] | ["securitypolicyviolation", EventListenerCallback<"securitypolicyviolation">] | ["seeked", EventListenerCallback<"seeked">] | ["seeking", EventListenerCallback<"seeking">] | ["select", EventListenerCallback<"select">] | ["selectionchange", EventListenerCallback<"selectionchange">] | ["selectstart", EventListenerCallback<"selectstart">] | ["stalled", EventListenerCallback<"stalled">] | ["submit", EventListenerCallback<"submit">] | ["suspend", EventListenerCallback<"suspend">] | ["timeupdate", EventListenerCallback<"timeupdate">] | ["toggle", EventListenerCallback<"toggle">] | ["touchcancel", EventListenerCallback<"touchcancel">] | ["touchend", EventListenerCallback<"touchend">] | ["touchmove", EventListenerCallback<"touchmove">] | ["touchstart", EventListenerCallback<"touchstart">] | ["transitioncancel", EventListenerCallback<"transitioncancel">] | ["transitionend", EventListenerCallback<"transitionend">] | ["transitionrun", EventListenerCallback<"transitionrun">] | ["transitionstart", EventListenerCallback<"transitionstart">] | ["volumechange", EventListenerCallback<"volumechange">] | ["waiting", EventListenerCallback<"waiting">] | ["wheel", EventListenerCallback<"wheel">] | ["copy", EventListenerCallback<"copy">] | ["cut", EventListenerCallback<"cut">] | ["paste", EventListenerCallback<"paste">] | ["waiting", string, DelegateEventListenerCallback<"waiting">] | ["cancel", string, DelegateEventListenerCallback<"cancel">] | ["ended", string, DelegateEventListenerCallback<"ended">] | ["change", string, DelegateEventListenerCallback<"change">] | ["input", string, DelegateEventListenerCallback<"input">] | ["select", string, DelegateEventListenerCallback<"select">] | ["fullscreenchange", string, DelegateEventListenerCallback<"fullscreenchange">] | ["fullscreenerror", string, DelegateEventListenerCallback<"fullscreenerror">] | ["animationcancel", string, DelegateEventListenerCallback<"animationcancel">] | ["animationend", string, DelegateEventListenerCallback<"animationend">] | ["animationiteration", string, DelegateEventListenerCallback<"animationiteration">] | ["animationstart", string, DelegateEventListenerCallback<"animationstart">] | ["auxclick", string, DelegateEventListenerCallback<"auxclick">] | ["canplay", string, DelegateEventListenerCallback<"canplay">] | ["canplaythrough", string, DelegateEventListenerCallback<"canplaythrough">] | ["click", string, DelegateEventListenerCallback<"click">] | ["close", string, DelegateEventListenerCallback<"close">] | ["contextmenu", string, DelegateEventListenerCallback<"contextmenu">] | ["cuechange", string, DelegateEventListenerCallback<"cuechange">] | ["dblclick", string, DelegateEventListenerCallback<"dblclick">] | ["drag", string, DelegateEventListenerCallback<"drag">] | ["dragend", string, DelegateEventListenerCallback<"dragend">] | ["dragenter", string, DelegateEventListenerCallback<"dragenter">] | ["dragexit", string, DelegateEventListenerCallback<"dragexit">] | ["dragleave", string, DelegateEventListenerCallback<"dragleave">] | ["dragover", string, DelegateEventListenerCallback<"dragover">] | ["dragstart", string, DelegateEventListenerCallback<"dragstart">] | ["drop", string, DelegateEventListenerCallback<"drop">] | ["durationchange", string, DelegateEventListenerCallback<"durationchange">] | ["emptied", string, DelegateEventListenerCallback<"emptied">] | ["gotpointercapture", string, DelegateEventListenerCallback<"gotpointercapture">] | ["invalid", string, DelegateEventListenerCallback<"invalid">] | ["keydown", string, DelegateEventListenerCallback<"keydown">] | ["keypress", string, DelegateEventListenerCallback<"keypress">] | ["keyup", string, DelegateEventListenerCallback<"keyup">] | ["loadeddata", string, DelegateEventListenerCallback<"loadeddata">] | ["loadedmetadata", string, DelegateEventListenerCallback<"loadedmetadata">] | ["lostpointercapture", string, DelegateEventListenerCallback<"lostpointercapture">] | ["mousedown", string, DelegateEventListenerCallback<"mousedown">] | ["mouseenter", string, DelegateEventListenerCallback<"mouseenter">] | ["mouseleave", string, DelegateEventListenerCallback<"mouseleave">] | ["mousemove", string, DelegateEventListenerCallback<"mousemove">] | ["mouseout", string, DelegateEventListenerCallback<"mouseout">] | ["mouseover", string, DelegateEventListenerCallback<"mouseover">] | ["mouseup", string, DelegateEventListenerCallback<"mouseup">] | ["pause", string, DelegateEventListenerCallback<"pause">] | ["play", string, DelegateEventListenerCallback<"play">] | ["playing", string, DelegateEventListenerCallback<"playing">] | ["pointercancel", string, DelegateEventListenerCallback<"pointercancel">] | ["pointerdown", string, DelegateEventListenerCallback<"pointerdown">] | ["pointerenter", string, DelegateEventListenerCallback<"pointerenter">] | ["pointerleave", string, DelegateEventListenerCallback<"pointerleave">] | ["pointermove", string, DelegateEventListenerCallback<"pointermove">] | ["pointerout", string, DelegateEventListenerCallback<"pointerout">] | ["pointerover", string, DelegateEventListenerCallback<"pointerover">] | ["pointerup", string, DelegateEventListenerCallback<"pointerup">] | ["ratechange", string, DelegateEventListenerCallback<"ratechange">] | ["reset", string, DelegateEventListenerCallback<"reset">] | ["resize", string, DelegateEventListenerCallback<"resize">] | ["securitypolicyviolation", string, DelegateEventListenerCallback<"securitypolicyviolation">] | ["seeked", string, DelegateEventListenerCallback<"seeked">] | ["seeking", string, DelegateEventListenerCallback<"seeking">] | ["selectionchange", string, DelegateEventListenerCallback<"selectionchange">] | ["selectstart", string, DelegateEventListenerCallback<"selectstart">] | ["stalled", string, DelegateEventListenerCallback<"stalled">] | ["submit", string, DelegateEventListenerCallback<"submit">] | ["suspend", string, DelegateEventListenerCallback<"suspend">] | ["timeupdate", string, DelegateEventListenerCallback<"timeupdate">] | ["toggle", string, DelegateEventListenerCallback<"toggle">] | ["touchcancel", string, DelegateEventListenerCallback<"touchcancel">] | ["touchend", string, DelegateEventListenerCallback<"touchend">] | ["touchmove", string, DelegateEventListenerCallback<"touchmove">] | ["touchstart", string, DelegateEventListenerCallback<"touchstart">] | ["transitioncancel", string, DelegateEventListenerCallback<"transitioncancel">] | ["transitionend", string, DelegateEventListenerCallback<"transitionend">] | ["transitionrun", string, DelegateEventListenerCallback<"transitionrun">] | ["transitionstart", string, DelegateEventListenerCallback<"transitionstart">] | ["volumechange", string, DelegateEventListenerCallback<"volumechange">] | ["wheel", string, DelegateEventListenerCallback<"wheel">] | ["copy", string, DelegateEventListenerCallback<"copy">] | ["cut", string, DelegateEventListenerCallback<"cut">] | ["paste", string, DelegateEventListenerCallback<"paste">] | ["focusin", string, DelegateEventListenerCallback<"focusin">] | ["focusout", string, DelegateEventListenerCallback<"focusout">])[];
     init(): void;
@@ -22,0 +22,0 @@ private handleClick;

lib/components/Emitter.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const Component_1 = require("./Component");
+var Component_1 = require("./Component");
 /**
@@ -13,22 +26,26 @@ * Emitter component class
  */
-class Emitter extends Component_1.Component {
-    constructor() {
-        super(...arguments);
-        this.events = [];
-        this.getListeners = () => [['click', this.handleClick]];
+var Emitter = /** @class */ (function (_super) {
+    __extends(Emitter, _super);
+    function Emitter() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.events = [];
+        _this.getListeners = function () { return [['click', _this.handleClick]]; };
+        return _this;
     }
-    init() {
+    Emitter.prototype.init = function () {
         this.events = Array.isArray(this.data.events) ? this.data.events : [this.data.events];
-    }
-    handleClick(e) {
+    };
+    Emitter.prototype.handleClick = function (e) {
+        var _this = this;
         e.preventDefault();
-        this.events.map((eventType) => {
-            const event = document.createEvent('Event');
+        this.events.map(function (eventType) {
+            var event = document.createEvent('Event');
             event.initEvent(eventType, true, true);
-            this.el.dispatchEvent(event);
+            _this.el.dispatchEvent(event);
         });
-    }
-}
-Emitter.componentName = 'Emitter';
+    };
+    Emitter.componentName = 'Emitter';
+    return Emitter;
+}(Component_1.Component));
 exports.Emitter = Emitter;
 //# sourceMappingURL=Emitter.js.map

lib/components/Example.d.ts

@@ -8,3 +8,3 @@ import { Component } from './Component';
     static componentName: string;
-    protected getListeners: () => (["focusin", (event: FocusEvent) => void] | ["focusout", (event: FocusEvent) => void] | ["fullscreenchange", (event: Event) => void] | ["fullscreenerror", (event: Event) => void] | ["abort", (event: UIEvent) => void] | ["animationcancel", (event: AnimationEvent) => void] | ["animationend", (event: AnimationEvent) => void] | ["animationiteration", (event: AnimationEvent) => void] | ["animationstart", (event: AnimationEvent) => void] | ["auxclick", (event: Event) => void] | ["blur", (event: FocusEvent) => void] | ["cancel", (event: Event) => void] | ["canplay", (event: Event) => void] | ["canplaythrough", (event: Event) => void] | ["change", (event: Event) => void] | ["click", (event: MouseEvent) => void] | ["close", (event: Event) => void] | ["contextmenu", (event: MouseEvent) => void] | ["cuechange", (event: Event) => void] | ["dblclick", (event: MouseEvent) => void] | ["drag", (event: DragEvent) => void] | ["dragend", (event: DragEvent) => void] | ["dragenter", (event: DragEvent) => void] | ["dragexit", (event: Event) => void] | ["dragleave", (event: DragEvent) => void] | ["dragover", (event: DragEvent) => void] | ["dragstart", (event: DragEvent) => void] | ["drop", (event: DragEvent) => void] | ["durationchange", (event: Event) => void] | ["emptied", (event: Event) => void] | ["ended", (event: Event) => void] | ["error", (event: ErrorEvent) => void] | ["focus", (event: FocusEvent) => void] | ["gotpointercapture", (event: PointerEvent) => void] | ["input", (event: Event) => void] | ["invalid", (event: Event) => void] | ["keydown", (event: KeyboardEvent) => void] | ["keypress", (event: KeyboardEvent) => void] | ["keyup", (event: KeyboardEvent) => void] | ["load", (event: Event) => void] | ["loadeddata", (event: Event) => void] | ["loadedmetadata", (event: Event) => void] | ["loadend", (event: ProgressEvent) => void] | ["loadstart", (event: Event) => void] | ["lostpointercapture", (event: PointerEvent) => void] | ["mousedown", (event: MouseEvent) => void] | ["mouseenter", (event: MouseEvent) => void] | ["mouseleave", (event: MouseEvent) => void] | ["mousemove", (event: MouseEvent) => void] | ["mouseout", (event: MouseEvent) => void] | ["mouseover", (event: MouseEvent) => void] | ["mouseup", (event: MouseEvent) => void] | ["pause", (event: Event) => void] | ["play", (event: Event) => void] | ["playing", (event: Event) => void] | ["pointercancel", (event: PointerEvent) => void] | ["pointerdown", (event: PointerEvent) => void] | ["pointerenter", (event: PointerEvent) => void] | ["pointerleave", (event: PointerEvent) => void] | ["pointermove", (event: PointerEvent) => void] | ["pointerout", (event: PointerEvent) => void] | ["pointerover", (event: PointerEvent) => void] | ["pointerup", (event: PointerEvent) => void] | ["progress", (event: ProgressEvent) => void] | ["ratechange", (event: Event) => void] | ["reset", (event: Event) => void] | ["resize", (event: UIEvent) => void] | ["scroll", (event: UIEvent) => void] | ["securitypolicyviolation", (event: SecurityPolicyViolationEvent) => void] | ["seeked", (event: Event) => void] | ["seeking", (event: Event) => void] | ["select", (event: UIEvent) => void] | ["stalled", (event: Event) => void] | ["submit", (event: Event) => void] | ["suspend", (event: Event) => void] | ["timeupdate", (event: Event) => void] | ["toggle", (event: Event) => void] | ["touchcancel", (event: TouchEvent) => void] | ["touchend", (event: TouchEvent) => void] | ["touchmove", (event: TouchEvent) => void] | ["touchstart", (event: TouchEvent) => void] | ["transitioncancel", (event: TransitionEvent) => void] | ["transitionend", (event: TransitionEvent) => void] | ["transitionrun", (event: TransitionEvent) => void] | ["transitionstart", (event: TransitionEvent) => void] | ["volumechange", (event: Event) => void] | ["waiting", (event: Event) => void] | ["wheel", (event: WheelEvent) => void] | ["copy", (event: ClipboardEvent) => void] | ["cut", (event: ClipboardEvent) => void] | ["paste", (event: ClipboardEvent) => void] | ["resize", string, (event: DelegateEvent<"resize">) => void] | ["waiting", string, (event: DelegateEvent<"waiting">) => void] | ["cancel", string, (event: DelegateEvent<"waiting">) => void] | ["ended", string, (event: DelegateEvent<"waiting">) => void] | ["change", string, (event: DelegateEvent<"waiting">) => void] | ["input", string, (event: DelegateEvent<"waiting">) => void] | ["select", string, (event: DelegateEvent<"resize">) => void] | ["fullscreenchange", string, (event: DelegateEvent<"waiting">) => void] | ["fullscreenerror", string, (event: DelegateEvent<"waiting">) => void] | ["animationcancel", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationend", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationiteration", string, (event: DelegateEvent<"animationcancel">) => void] | ["animationstart", string, (event: DelegateEvent<"animationcancel">) => void] | ["auxclick", string, (event: DelegateEvent<"waiting">) => void] | ["canplay", string, (event: DelegateEvent<"waiting">) => void] | ["canplaythrough", string, (event: DelegateEvent<"waiting">) => void] | ["click", string, (event: DelegateEvent<"click">) => void] | ["close", string, (event: DelegateEvent<"waiting">) => void] | ["contextmenu", string, (event: DelegateEvent<"click">) => void] | ["cuechange", string, (event: DelegateEvent<"waiting">) => void] | ["dblclick", string, (event: DelegateEvent<"click">) => void] | ["drag", string, (event: DelegateEvent<"drag">) => void] | ["dragend", string, (event: DelegateEvent<"drag">) => void] | ["dragenter", string, (event: DelegateEvent<"drag">) => void] | ["dragexit", string, (event: DelegateEvent<"waiting">) => void] | ["dragleave", string, (event: DelegateEvent<"drag">) => void] | ["dragover", string, (event: DelegateEvent<"drag">) => void] | ["dragstart", string, (event: DelegateEvent<"drag">) => void] | ["drop", string, (event: DelegateEvent<"drag">) => void] | ["durationchange", string, (event: DelegateEvent<"waiting">) => void] | ["emptied", string, (event: DelegateEvent<"waiting">) => void] | ["gotpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["invalid", string, (event: DelegateEvent<"waiting">) => void] | ["keydown", string, (event: DelegateEvent<"keydown">) => void] | ["keypress", string, (event: DelegateEvent<"keydown">) => void] | ["keyup", string, (event: DelegateEvent<"keydown">) => void] | ["loadeddata", string, (event: DelegateEvent<"waiting">) => void] | ["loadedmetadata", string, (event: DelegateEvent<"waiting">) => void] | ["lostpointercapture", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["mousedown", string, (event: DelegateEvent<"click">) => void] | ["mouseenter", string, (event: DelegateEvent<"click">) => void] | ["mouseleave", string, (event: DelegateEvent<"click">) => void] | ["mousemove", string, (event: DelegateEvent<"click">) => void] | ["mouseout", string, (event: DelegateEvent<"click">) => void] | ["mouseover", string, (event: DelegateEvent<"click">) => void] | ["mouseup", string, (event: DelegateEvent<"click">) => void] | ["pause", string, (event: DelegateEvent<"waiting">) => void] | ["play", string, (event: DelegateEvent<"waiting">) => void] | ["playing", string, (event: DelegateEvent<"waiting">) => void] | ["pointercancel", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerdown", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerenter", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerleave", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointermove", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerout", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerover", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["pointerup", string, (event: DelegateEvent<"gotpointercapture">) => void] | ["ratechange", string, (event: DelegateEvent<"waiting">) => void] | ["reset", string, (event: DelegateEvent<"waiting">) => void] | ["securitypolicyviolation", string, (event: DelegateEvent<"securitypolicyviolation">) => void] | ["seeked", string, (event: DelegateEvent<"waiting">) => void] | ["seeking", string, (event: DelegateEvent<"waiting">) => void] | ["stalled", string, (event: DelegateEvent<"waiting">) => void] | ["submit", string, (event: DelegateEvent<"waiting">) => void] | ["suspend", string, (event: DelegateEvent<"waiting">) => void] | ["timeupdate", string, (event: DelegateEvent<"waiting">) => void] | ["toggle", string, (event: DelegateEvent<"waiting">) => void] | ["touchcancel", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchend", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchmove", string, (event: DelegateEvent<"touchcancel">) => void] | ["touchstart", string, (event: DelegateEvent<"touchcancel">) => void] | ["transitioncancel", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionend", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionrun", string, (event: DelegateEvent<"transitioncancel">) => void] | ["transitionstart", string, (event: DelegateEvent<"transitioncancel">) => void] | ["volumechange", string, (event: DelegateEvent<"waiting">) => void] | ["wheel", string, (event: DelegateEvent<"wheel">) => void] | ["copy", string, (event: DelegateEvent<"copy">) => void] | ["cut", string, (event: DelegateEvent<"copy">) => void] | ["paste", string, (event: DelegateEvent<"copy">) => void] | ["focusin", string, (event: DelegateEvent<"focusin">) => void] | ["focusout", string, (event: DelegateEvent<"focusin">) => void])[];
+    protected getListeners: () => (["focusin", EventListenerCallback<"focusin">] | ["focusout", EventListenerCallback<"focusout">] | ["fullscreenchange", EventListenerCallback<"fullscreenchange">] | ["fullscreenerror", EventListenerCallback<"fullscreenerror">] | ["abort", EventListenerCallback<"abort">] | ["animationcancel", EventListenerCallback<"animationcancel">] | ["animationend", EventListenerCallback<"animationend">] | ["animationiteration", EventListenerCallback<"animationiteration">] | ["animationstart", EventListenerCallback<"animationstart">] | ["auxclick", EventListenerCallback<"auxclick">] | ["blur", EventListenerCallback<"blur">] | ["cancel", EventListenerCallback<"cancel">] | ["canplay", EventListenerCallback<"canplay">] | ["canplaythrough", EventListenerCallback<"canplaythrough">] | ["change", EventListenerCallback<"change">] | ["click", EventListenerCallback<"click">] | ["close", EventListenerCallback<"close">] | ["contextmenu", EventListenerCallback<"contextmenu">] | ["cuechange", EventListenerCallback<"cuechange">] | ["dblclick", EventListenerCallback<"dblclick">] | ["drag", EventListenerCallback<"drag">] | ["dragend", EventListenerCallback<"dragend">] | ["dragenter", EventListenerCallback<"dragenter">] | ["dragexit", EventListenerCallback<"dragexit">] | ["dragleave", EventListenerCallback<"dragleave">] | ["dragover", EventListenerCallback<"dragover">] | ["dragstart", EventListenerCallback<"dragstart">] | ["drop", EventListenerCallback<"drop">] | ["durationchange", EventListenerCallback<"durationchange">] | ["emptied", EventListenerCallback<"emptied">] | ["ended", EventListenerCallback<"ended">] | ["error", EventListenerCallback<"error">] | ["focus", EventListenerCallback<"focus">] | ["gotpointercapture", EventListenerCallback<"gotpointercapture">] | ["input", EventListenerCallback<"input">] | ["invalid", EventListenerCallback<"invalid">] | ["keydown", EventListenerCallback<"keydown">] | ["keypress", EventListenerCallback<"keypress">] | ["keyup", EventListenerCallback<"keyup">] | ["load", EventListenerCallback<"load">] | ["loadeddata", EventListenerCallback<"loadeddata">] | ["loadedmetadata", EventListenerCallback<"loadedmetadata">] | ["loadend", EventListenerCallback<"loadend">] | ["loadstart", EventListenerCallback<"loadstart">] | ["lostpointercapture", EventListenerCallback<"lostpointercapture">] | ["mousedown", EventListenerCallback<"mousedown">] | ["mouseenter", EventListenerCallback<"mouseenter">] | ["mouseleave", EventListenerCallback<"mouseleave">] | ["mousemove", EventListenerCallback<"mousemove">] | ["mouseout", EventListenerCallback<"mouseout">] | ["mouseover", EventListenerCallback<"mouseover">] | ["mouseup", EventListenerCallback<"mouseup">] | ["pause", EventListenerCallback<"pause">] | ["play", EventListenerCallback<"play">] | ["playing", EventListenerCallback<"playing">] | ["pointercancel", EventListenerCallback<"pointercancel">] | ["pointerdown", EventListenerCallback<"pointerdown">] | ["pointerenter", EventListenerCallback<"pointerenter">] | ["pointerleave", EventListenerCallback<"pointerleave">] | ["pointermove", EventListenerCallback<"pointermove">] | ["pointerout", EventListenerCallback<"pointerout">] | ["pointerover", EventListenerCallback<"pointerover">] | ["pointerup", EventListenerCallback<"pointerup">] | ["progress", EventListenerCallback<"progress">] | ["ratechange", EventListenerCallback<"ratechange">] | ["reset", EventListenerCallback<"reset">] | ["resize", EventListenerCallback<"resize">] | ["scroll", EventListenerCallback<"scroll">] | ["securitypolicyviolation", EventListenerCallback<"securitypolicyviolation">] | ["seeked", EventListenerCallback<"seeked">] | ["seeking", EventListenerCallback<"seeking">] | ["select", EventListenerCallback<"select">] | ["selectionchange", EventListenerCallback<"selectionchange">] | ["selectstart", EventListenerCallback<"selectstart">] | ["stalled", EventListenerCallback<"stalled">] | ["submit", EventListenerCallback<"submit">] | ["suspend", EventListenerCallback<"suspend">] | ["timeupdate", EventListenerCallback<"timeupdate">] | ["toggle", EventListenerCallback<"toggle">] | ["touchcancel", EventListenerCallback<"touchcancel">] | ["touchend", EventListenerCallback<"touchend">] | ["touchmove", EventListenerCallback<"touchmove">] | ["touchstart", EventListenerCallback<"touchstart">] | ["transitioncancel", EventListenerCallback<"transitioncancel">] | ["transitionend", EventListenerCallback<"transitionend">] | ["transitionrun", EventListenerCallback<"transitionrun">] | ["transitionstart", EventListenerCallback<"transitionstart">] | ["volumechange", EventListenerCallback<"volumechange">] | ["waiting", EventListenerCallback<"waiting">] | ["wheel", EventListenerCallback<"wheel">] | ["copy", EventListenerCallback<"copy">] | ["cut", EventListenerCallback<"cut">] | ["paste", EventListenerCallback<"paste">] | ["waiting", string, DelegateEventListenerCallback<"waiting">] | ["cancel", string, DelegateEventListenerCallback<"cancel">] | ["ended", string, DelegateEventListenerCallback<"ended">] | ["change", string, DelegateEventListenerCallback<"change">] | ["input", string, DelegateEventListenerCallback<"input">] | ["select", string, DelegateEventListenerCallback<"select">] | ["fullscreenchange", string, DelegateEventListenerCallback<"fullscreenchange">] | ["fullscreenerror", string, DelegateEventListenerCallback<"fullscreenerror">] | ["animationcancel", string, DelegateEventListenerCallback<"animationcancel">] | ["animationend", string, DelegateEventListenerCallback<"animationend">] | ["animationiteration", string, DelegateEventListenerCallback<"animationiteration">] | ["animationstart", string, DelegateEventListenerCallback<"animationstart">] | ["auxclick", string, DelegateEventListenerCallback<"auxclick">] | ["canplay", string, DelegateEventListenerCallback<"canplay">] | ["canplaythrough", string, DelegateEventListenerCallback<"canplaythrough">] | ["click", string, DelegateEventListenerCallback<"click">] | ["close", string, DelegateEventListenerCallback<"close">] | ["contextmenu", string, DelegateEventListenerCallback<"contextmenu">] | ["cuechange", string, DelegateEventListenerCallback<"cuechange">] | ["dblclick", string, DelegateEventListenerCallback<"dblclick">] | ["drag", string, DelegateEventListenerCallback<"drag">] | ["dragend", string, DelegateEventListenerCallback<"dragend">] | ["dragenter", string, DelegateEventListenerCallback<"dragenter">] | ["dragexit", string, DelegateEventListenerCallback<"dragexit">] | ["dragleave", string, DelegateEventListenerCallback<"dragleave">] | ["dragover", string, DelegateEventListenerCallback<"dragover">] | ["dragstart", string, DelegateEventListenerCallback<"dragstart">] | ["drop", string, DelegateEventListenerCallback<"drop">] | ["durationchange", string, DelegateEventListenerCallback<"durationchange">] | ["emptied", string, DelegateEventListenerCallback<"emptied">] | ["gotpointercapture", string, DelegateEventListenerCallback<"gotpointercapture">] | ["invalid", string, DelegateEventListenerCallback<"invalid">] | ["keydown", string, DelegateEventListenerCallback<"keydown">] | ["keypress", string, DelegateEventListenerCallback<"keypress">] | ["keyup", string, DelegateEventListenerCallback<"keyup">] | ["loadeddata", string, DelegateEventListenerCallback<"loadeddata">] | ["loadedmetadata", string, DelegateEventListenerCallback<"loadedmetadata">] | ["lostpointercapture", string, DelegateEventListenerCallback<"lostpointercapture">] | ["mousedown", string, DelegateEventListenerCallback<"mousedown">] | ["mouseenter", string, DelegateEventListenerCallback<"mouseenter">] | ["mouseleave", string, DelegateEventListenerCallback<"mouseleave">] | ["mousemove", string, DelegateEventListenerCallback<"mousemove">] | ["mouseout", string, DelegateEventListenerCallback<"mouseout">] | ["mouseover", string, DelegateEventListenerCallback<"mouseover">] | ["mouseup", string, DelegateEventListenerCallback<"mouseup">] | ["pause", string, DelegateEventListenerCallback<"pause">] | ["play", string, DelegateEventListenerCallback<"play">] | ["playing", string, DelegateEventListenerCallback<"playing">] | ["pointercancel", string, DelegateEventListenerCallback<"pointercancel">] | ["pointerdown", string, DelegateEventListenerCallback<"pointerdown">] | ["pointerenter", string, DelegateEventListenerCallback<"pointerenter">] | ["pointerleave", string, DelegateEventListenerCallback<"pointerleave">] | ["pointermove", string, DelegateEventListenerCallback<"pointermove">] | ["pointerout", string, DelegateEventListenerCallback<"pointerout">] | ["pointerover", string, DelegateEventListenerCallback<"pointerover">] | ["pointerup", string, DelegateEventListenerCallback<"pointerup">] | ["ratechange", string, DelegateEventListenerCallback<"ratechange">] | ["reset", string, DelegateEventListenerCallback<"reset">] | ["resize", string, DelegateEventListenerCallback<"resize">] | ["securitypolicyviolation", string, DelegateEventListenerCallback<"securitypolicyviolation">] | ["seeked", string, DelegateEventListenerCallback<"seeked">] | ["seeking", string, DelegateEventListenerCallback<"seeking">] | ["selectionchange", string, DelegateEventListenerCallback<"selectionchange">] | ["selectstart", string, DelegateEventListenerCallback<"selectstart">] | ["stalled", string, DelegateEventListenerCallback<"stalled">] | ["submit", string, DelegateEventListenerCallback<"submit">] | ["suspend", string, DelegateEventListenerCallback<"suspend">] | ["timeupdate", string, DelegateEventListenerCallback<"timeupdate">] | ["toggle", string, DelegateEventListenerCallback<"toggle">] | ["touchcancel", string, DelegateEventListenerCallback<"touchcancel">] | ["touchend", string, DelegateEventListenerCallback<"touchend">] | ["touchmove", string, DelegateEventListenerCallback<"touchmove">] | ["touchstart", string, DelegateEventListenerCallback<"touchstart">] | ["transitioncancel", string, DelegateEventListenerCallback<"transitioncancel">] | ["transitionend", string, DelegateEventListenerCallback<"transitionend">] | ["transitionrun", string, DelegateEventListenerCallback<"transitionrun">] | ["transitionstart", string, DelegateEventListenerCallback<"transitionstart">] | ["volumechange", string, DelegateEventListenerCallback<"volumechange">] | ["wheel", string, DelegateEventListenerCallback<"wheel">] | ["copy", string, DelegateEventListenerCallback<"copy">] | ["cut", string, DelegateEventListenerCallback<"cut">] | ["paste", string, DelegateEventListenerCallback<"paste">] | ["focusin", string, DelegateEventListenerCallback<"focusin">] | ["focusout", string, DelegateEventListenerCallback<"focusout">])[];
     init(): void;
@@ -11,0 +11,0 @@ private handleDelegateClick;

lib/components/Example.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const Component_1 = require("./Component");
-class Example extends Component_1.Component {
-    constructor() {
-        super(...arguments);
-        this.getListeners = () => [
-            ['click', this.handleClick],
-            ['click', '.example-child', this.handleDelegateClick],
-        ];
+var Component_1 = require("./Component");
+var Example = /** @class */ (function (_super) {
+    __extends(Example, _super);
+    function Example() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getListeners = function () { return [
+            ['click', _this.handleClick],
+            ['click', '.example-child', _this.handleDelegateClick],
+        ]; };
+        return _this;
     }
-    init() {
-        this.getChild('.example-child', HTMLElement).innerText += ` ${this.data.name}!`;
-    }
-    handleDelegateClick(e) {
+    Example.prototype.init = function () {
+        this.getChild('.example-child', HTMLElement).innerText += " " + this.data.name + "!";
+    };
+    Example.prototype.handleDelegateClick = function (e) {
         console.log(e.delegateTarget);
-        alert(`Hello, ${this.data.name}! The number of the day is ${this.data.numberOfTheDay.toFixed(0)}.`);
-    }
-    handleClick(e) {
+        alert("Hello, " + this.data.name + "! The number of the day is " + this.data.numberOfTheDay.toFixed(0) + ".");
+    };
+    Example.prototype.handleClick = function (e) {
         e.preventDefault();
         console.log('Example component clicked');
-    }
-}
-Example.componentName = 'Example';
+    };
+    Example.componentName = 'Example';
+    return Example;
+}(Component_1.Component));
 exports.Example = Example;
 //# sourceMappingURL=Example.js.map

lib/components/InView.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const Component_1 = require("./Component");
-class InView extends Component_1.Component {
-    constructor(el, data) {
-        super(el, data);
-        this.CLASSES = Object.freeze({
+var Component_1 = require("./Component");
+var InView = /** @class */ (function (_super) {
+    __extends(InView, _super);
+    function InView(el, data) {
+        var _this = _super.call(this, el, data) || this;
+        _this.CLASSES = Object.freeze({
             topThreshold: 'view-topThreshold',
             bottomThreshold: 'view-bottomThreshold',
         });
-        this.targets = data.targets ? this.el.querySelectorAll(data.targets) : [this.el];
-        this.threshold = this.getProp('threshold', 0);
-        this.detectOnce = this.getProp('detectOnce', true);
-        this.strictTop = this.getProp('strictTop', false);
+        _this.targets = data.targets ? _this.el.querySelectorAll(data.targets) : [_this.el];
+        _this.threshold = _this.getProp('threshold', 0);
+        _this.detectOnce = _this.getProp('detectOnce', true);
+        _this.strictTop = _this.getProp('strictTop', false);
         if ('IntersectionObserver' in window) {
-            this.observerInit();
+            _this.observerInit();
         }
         else {
-            this.onScrollInit();
+            _this.onScrollInit();
         }
+        return _this;
     }
-    observerInit() {
-        const observer = new IntersectionObserver((entries) => {
+    InView.prototype.observerInit = function () {
+        var _this = this;
+        var observer = new IntersectionObserver(function (entries) {
             //callback
-            entries.forEach((entry) => {
-                const target = entry.target;
-                const intersectionRatio = entry.intersectionRatio;
-                this._updateState(target, intersectionRatio, entry.boundingClientRect.top < entry.rootBounds.height / 2);
+            entries.forEach(function (entry) {
+                if (!entry.rootBounds) {
+                    return;
+                }
+                var target = entry.target;
+                var intersectionRatio = entry.intersectionRatio;
+                _this._updateState(target, intersectionRatio, entry.boundingClientRect.top < entry.rootBounds.height / 2);
             });
@@ -34,19 +53,20 @@ }, {
         });
-        for (let i = 0, length = this.targets.length; i < length; i++) {
+        for (var i = 0, length_1 = this.targets.length; i < length_1; i++) {
             observer.observe(this.targets[i]);
         }
-    }
-    onScrollInit() {
-        window.addEventListener('scroll', () => {
-            window.requestAnimationFrame(() => {
-                for (let i = 0, length = this.targets.length; i < length; i++) {
-                    const target = this.targets[i];
-                    const targetRect = target.getBoundingClientRect();
-                    const targetArea = targetRect.width * targetRect.height;
-                    const intersectionArea = Math.max(0, Math.min(targetRect.left + targetRect.width, window.innerWidth) -
+    };
+    InView.prototype.onScrollInit = function () {
+        var _this = this;
+        window.addEventListener('scroll', function () {
+            window.requestAnimationFrame(function () {
+                for (var i = 0, length_2 = _this.targets.length; i < length_2; i++) {
+                    var target = _this.targets[i];
+                    var targetRect = target.getBoundingClientRect();
+                    var targetArea = targetRect.width * targetRect.height;
+                    var intersectionArea = Math.max(0, Math.min(targetRect.left + targetRect.width, window.innerWidth) -
                         Math.max(targetRect.left, 0)) * // width
                         Math.max(0, Math.min(targetRect.top + targetRect.height, window.innerHeight) -
                             Math.max(targetRect.top, 0)); // height
-                    const intersectionRatio = intersectionArea / targetArea;
-                    this._updateState(target, intersectionRatio, targetRect.top < window.innerHeight / 2);
+                    var intersectionRatio = intersectionArea / targetArea;
+                    _this._updateState(target, intersectionRatio, targetRect.top < window.innerHeight / 2);
                 }
@@ -56,11 +76,11 @@ });
         window.scrollTo(window.scrollX, window.scrollY);
-    }
-    _updateState(target, intersectionRatio, targetTopAboveViewCenter) {
-        const hasTopClassThreshold = target.classList.contains(this.CLASSES.topThreshold);
-        const hasBottomClassThreshold = target.classList.contains(this.CLASSES.bottomThreshold);
-        const strictTop = this.data.hasOwnProperty('detectOnce') && this.data.strictTop ? this.threshold : 0;
-        const topThreshold = hasTopClassThreshold ? strictTop : this.threshold;
-        const isTop = (this.detectOnce && hasTopClassThreshold) ||
+    };
+    InView.prototype._updateState = function (target, intersectionRatio, targetTopAboveViewCenter) {
+        var hasTopClassThreshold = target.classList.contains(this.CLASSES.topThreshold);
+        var hasBottomClassThreshold = target.classList.contains(this.CLASSES.bottomThreshold);
+        var strictTop = this.data.hasOwnProperty('detectOnce') && this.data.strictTop ? this.threshold : 0;
+        var topThreshold = hasTopClassThreshold ? strictTop : this.threshold;
+        var isTop = (this.detectOnce && hasTopClassThreshold) ||
             (intersectionRatio > topThreshold || targetTopAboveViewCenter);
-        const isBottom = (this.detectOnce && hasBottomClassThreshold) ||
+        var isBottom = (this.detectOnce && hasBottomClassThreshold) ||
             (intersectionRatio <= this.threshold && targetTopAboveViewCenter);
@@ -72,6 +92,7 @@ target.classList.toggle(this.CLASSES.topThreshold, isTop);
         }
-    }
-}
-InView.componentName = 'InView';
+    };
+    InView.componentName = 'InView';
+    return InView;
+}(Component_1.Component));
 exports.InView = InView;
 //# sourceMappingURL=InView.js.map

lib/components/Shapes.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const Component_1 = require("./Component");
+var Component_1 = require("./Component");
 /**
@@ -9,9 +22,14 @@ * Shapes component class
  */
-class Shapes extends Component_1.Component {
-    init() {
+var Shapes = /** @class */ (function (_super) {
+    __extends(Shapes, _super);
+    function Shapes() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Shapes.prototype.init = function () {
         document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1') && this.injectSprite();
-    }
-    injectSprite() {
+    };
+    Shapes.prototype.injectSprite = function () {
+        var _this = this;
         fetch(this.data.url)
-            .then((response) => {
+            .then(function (response) {
             if (!response.ok) {
@@ -22,7 +40,7 @@ throw new Error(response.statusText);
         })
-            .then((shapes) => {
-            const wrapper = document.createElement('div');
-            const body = document.body;
+            .then(function (shapes) {
+            var wrapper = document.createElement('div');
+            var body = document.body;
             wrapper.innerHTML = shapes;
-            const el = wrapper.children.item(0);
+            var el = wrapper.children.item(0);
             if (el) {
@@ -32,9 +50,10 @@ body.insertBefore(el, body.firstChild);
         })
-            .catch(() => {
-            setTimeout(() => this.injectSprite(), 1e4);
+            .catch(function () {
+            setTimeout(function () { return _this.injectSprite(); }, 1e4);
         });
-    }
-}
-Shapes.componentName = 'Shapes';
+    };
+    Shapes.componentName = 'Shapes';
+    return Shapes;
+}(Component_1.Component));
 exports.Shapes = Shapes;
 //# sourceMappingURL=Shapes.js.map

lib/initializeComponents.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const components_1 = require("./components");
-exports.initializeComponents = (components, initializerName = 'initComponents') => {
-    const componentsByName = {};
-    for (let i = 0, length = components.length; i < length; i++) {
-        const constructor = components[i];
-        const name = constructor.componentName;
-        componentsByName[name] = constructor;
+var components_1 = require("./components");
+exports.initializeComponents = function (components, initializerName) {
+    if (initializerName === void 0) { initializerName = 'initComponents'; }
+    var componentsByName = {};
+    for (var i = 0, length_1 = components.length; i < length_1; i++) {
+        var constructor = components[i];
+        var name_1 = constructor.componentName;
+        componentsByName[name_1] = constructor;
     }
-    let componentStartTime;
+    var componentStartTime;
     // Init function
-    const init = (component) => {
+    var init = function (component) {
         if (component.name in componentsByName) {
@@ -18,4 +19,4 @@ if (DEBUG) {
             }
-            const Component = componentsByName[component.name]; // class
-            const placement = typeof component.place === 'string'
+            var Component_1 = componentsByName[component.name]; // class
+            var placement = typeof component.place === 'string'
                 ? document.querySelector(component.place)
@@ -25,3 +26,3 @@ : component.place || document.body;
                 try {
-                    const instance = new Component(placement, component.data || {});
+                    var instance = new Component_1(placement, component.data || {});
                     instance.setup();
@@ -31,3 +32,3 @@ }
                     if (e instanceof components_1.ComponentInitializationError && DEBUG) {
-                        console.warn(`The component '${component.name}' failed to initialize. ${e.message}`);
+                        console.warn("The component '" + component.name + "' failed to initialize. " + e.message);
                     }
@@ -37,14 +38,14 @@ }
             else if (DEBUG) {
-                console.warn(`Trying to initialize component '${component.name}' but its selector '${component.place}' was not found`);
+                console.warn("Trying to initialize component '" + component.name + "' but its selector '" + component.place + "' was not found");
             }
             if (DEBUG) {
-                const componentEndTime = performance.now();
-                console.log(`\tComponent: ${component.name}: ${Math.round(componentEndTime - componentStartTime)}ms`);
+                var componentEndTime = performance.now();
+                console.log("\tComponent: " + component.name + ": " + Math.round(componentEndTime - componentStartTime) + "ms");
             }
         }
         else if (DEBUG) {
-            console.warn(`Component with name ${component.name} was not found!`);
+            console.warn("Component with name " + component.name + " was not found!");
         }
     };
-    const componentInitializer = window[initializerName];
+    var componentInitializer = window[initializerName];
     // Instance only required components
@@ -51,0 +52,0 @@ if (Array.isArray(componentInitializer)) {

lib/utils/emulateTransitionEnd.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const transitionEnd = 'transitionend';
-exports.emulateTransitionEnd = (element, callback, duration) => {
-    let callbackCalled = false;
-    const eventCallback = () => {
+var transitionEnd = 'transitionend';
+exports.emulateTransitionEnd = function (element, callback, duration) {
+    var callbackCalled = false;
+    var eventCallback = function () {
         if (!callbackCalled) {
@@ -13,6 +13,6 @@ callback.call(element, element);
     };
-    const timeoutCallback = () => {
+    var timeoutCallback = function () {
         if (!callbackCalled) {
-            const event = new TransitionEvent(transitionEnd);
-            element.dispatchEvent(event);
+            var event_1 = new TransitionEvent(transitionEnd);
+            element.dispatchEvent(event_1);
         }
@@ -19,0 +19,0 @@ };

lib/utils/filterNodeList.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const matchesSelector_1 = require("./matchesSelector");
-exports.filterNodeList = (list, selector) => Array.prototype.filter.call(list, (item) => matchesSelector_1.matchesSelector(item, selector));
+var matchesSelector_1 = require("./matchesSelector");
+exports.filterNodeList = function (list, selector) {
+    return Array.prototype.filter.call(list, function (item) { return matchesSelector_1.matchesSelector(item, selector); });
+};
 //# sourceMappingURL=filterNodeList.js.map

lib/utils/inject.d.ts

@@ -1,4 +0,2 @@
-declare type ScriptElementConfig = {
-    [P in Exclude<keyof HTMLScriptElement, keyof HTMLElement>]?: HTMLScriptElement[P];
-};
+declare type ScriptElementConfig = Partial<Omit<HTMLScriptElement, keyof HTMLElement>>;
 declare type ScriptConfig = ScriptElementConfig & {
@@ -5,0 +3,0 @@ content: string;

lib/utils/inject.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const head = document.head;
-const noop = () => { };
-exports.inject = (options, successCallback = noop, failCallback = noop) => {
-    const script = document.createElement('script');
+var head = document.head;
+var noop = function () { };
+exports.inject = function (options, successCallback, failCallback) {
+    if (successCallback === void 0) { successCallback = noop; }
+    if (failCallback === void 0) { failCallback = noop; }
+    var script = document.createElement('script');
     successCallback && script.addEventListener('load', successCallback, false);
@@ -17,3 +19,3 @@ failCallback && script.addEventListener('error', failCallback, false);
         // key 'content' is alias for inline script content
-        for (const key in options) {
+        for (var key in options) {
             if (key === 'content') {
@@ -23,4 +25,4 @@ script.appendChild(document.createTextNode(options.content));
             else {
-                const keyCast = key;
-                if (options[keyCast]) {
+                var keyCast = key;
+                if (options[keyCast] !== undefined) {
                     script[keyCast] = options[keyCast];
@@ -27,0 +29,0 @@ }

lib/utils/matchesSelector.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesSelector = (element, selector) => {
+exports.matchesSelector = function (element, selector) {
     return (element.matches || element.msMatchesSelector).call(element, selector);
 };
 //# sourceMappingURL=matchesSelector.js.map

package.json

 {
   "name": "@mangoweb/scripts-base",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Simple component model for small to meduim sites. Usable from JS & TS.",
@@ -15,10 +15,6 @@ "main": "lib/index.js",
   },
-  "files": [
-    "lib/",
-    "src/"
-  ],
   "author": "manGoweb <[e-mail]> (https://mangoweb.cz)",
   "license": "MIT",
   "devDependencies": {
-    "typescript": "^3.1.6"
+    "typescript": "^3.5.1"
   },
@@ -25,0 +21,0 @@ "prepare": "npm run build",

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

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

94397

increased by9.64%

Worsened metrics

Number of package files

61

decreased by-11.59%

Lines of code

711

decreased by-32.48%

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes