@luftborn/custom-elements 1.1.44 → 1.4.1

package/dist/elements/TypeAhead/TypeAheadElement.js

@@ -1,210 +1,210 @@
-"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeAheadElement = void 0;
-var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
-var CustomInputElement_1 = require("../../framework/CustomInputElement");
-var CustomEvents_1 = require("../../framework/CustomEvents");
-var DomUtility_1 = require("../../framework/Utilities/DomUtility");
-var TypeAheadElement = /** @class */ (function (_super) {
-    __extends(TypeAheadElement, _super);
-    function TypeAheadElement() {
-        var _this = _super.call(this) || this;
-        _this.currentFoucsedIndex = -1;
-        _this.searchResultOptions = [];
-        return _this;
-    }
-    Object.defineProperty(TypeAheadElement.prototype, "searchHasResults", {
-        get: function () {
-            var autocompleteList = _super.prototype.getChildElement.call(this, '.options-list');
-            return autocompleteList && this.optionsWithDescriptions && this.optionsWithDescriptions.length > 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TypeAheadElement.prototype, "value", {
-        get: function () {
-            if (!this.selectedOption) {
-                return null;
-            }
-            return this.selectedOption.value;
-        },
-        set: function (value) {
-            if (!this.optionsWithDescriptions || this.optionsWithDescriptions.length === 0) {
-                return;
-            }
-            var option = this.optionsWithDescriptions.find(function (option) { return option.value === value; });
-            if (!option) {
-                this.descriptionElement.innerHTML = null;
-                return;
-            }
-            this.selectedOption = option;
-            this.textInputElement.value = option.title;
-            this.descriptionElement.innerHTML = option.description;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TypeAheadElement.prototype, "valid", {
-        get: function () {
-            if (this.required) {
-                return !!this.selectedOption;
-            }
-            return !!this.selectedOption || this.textInputElement.value === '';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TypeAheadElement.prototype.connectedCallback = function () {
-        _super.prototype.connectedCallback.call(this);
-    };
-    TypeAheadElement.prototype.initChildInputs = function () {
-        var _this = this;
-        this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
-        this.descriptionElement = _super.prototype.getChildInput.call(this, '#description');
-        this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        if (this.required) {
-            this.textInputElement.setAttribute('required', '');
-        }
-        this.textInputElement.addEventListener('change', this.change.bind(this));
-        this.textInputElement.addEventListener('input', function () {
-            _this.inputEventHandler();
-        });
-        this.bindNavigation();
-    };
-    TypeAheadElement.prototype.inputEventHandler = function () {
-        var _this = this;
-        this.selectedOption = null;
-        this.descriptionElement.innerHTML = null;
-        this.closeOptionsList();
-        this.searchResultOptions = [];
-        var searchValue = this.textInputElement.value;
-        if (!searchValue || searchValue.trim() === '') {
-            return;
-        }
-        var optionslist = document.createElement('div');
-        optionslist.classList.add('options-list');
-        if (!this.optionsWithDescriptions) {
-            return;
-        }
-        this.optionsWithDescriptions.forEach(function (option, index) {
-            var regex = new RegExp(searchValue, 'gi');
-            var isMatchingTitle = regex.test(option.title);
-            var isMatchingValue = regex.test(option.value);
-            var isMatchingDescription = regex.test(option.description);
-            if (!isMatchingTitle && !isMatchingValue && !isMatchingDescription) {
-                return;
-            }
-            _this.searchResultOptions.push(option);
-            var optionsListItem = document.createElement("div");
-            optionsListItem.classList.add('options-list-item');
-            optionsListItem.dataset['value'] = option.value;
-            optionslist.appendChild(optionsListItem);
-            var optionsListItemTitle = document.createElement("div");
-            optionsListItemTitle.classList.add('options-list-item-title');
-            optionsListItemTitle.innerHTML = DomUtility_1.default.boldenText(option.title, searchValue);
-            optionsListItem.appendChild(optionsListItemTitle);
-            var optionsListItemDescription = document.createElement("div");
-            optionsListItemDescription.classList.add('options-list-item-description');
-            optionsListItemDescription.innerHTML = DomUtility_1.default.boldenText(option.description, searchValue);
-            optionsListItem.appendChild(optionsListItemDescription);
-            optionsListItem.addEventListener('click', function () {
-                _this.optionSelectedHandler(option);
-            });
-            _this.componentWrapper.appendChild(optionslist);
-        });
-    };
-    TypeAheadElement.prototype.closeOptionsList = function () {
-        this.currentFoucsedIndex = -1;
-        var optionsList = _super.prototype.getChildElement.call(this, '.options-list');
-        if (!optionsList) {
-            return;
-        }
-        optionsList.remove();
-    };
-    TypeAheadElement.prototype.optionSelectedHandler = function (option) {
-        this.value = option.value;
-        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
-        this.closeOptionsList();
-    };
-    TypeAheadElement.prototype.bindNavigation = function () {
-        var _this = this;
-        this.textInputElement.addEventListener('keydown', function (event) {
-            if (event.key === 'Escape') {
-                _this.closeOptionsList();
-            }
-            if (event.key === 'ArrowDown') {
-                if (!_this.searchHasResults) {
-                    return;
-                }
-                _this.currentFoucsedIndex = _this.currentFoucsedIndex === _this.searchResultOptions.length - 1 ? 0 : _this.currentFoucsedIndex + 1;
-                _this.highlightFocusedSearchResult();
-            }
-            if (event.key === 'ArrowUp') {
-                if (!_this.searchHasResults) {
-                    return;
-                }
-                _this.currentFoucsedIndex = _this.currentFoucsedIndex === 0 ? _this.searchResultOptions.length - 1 : _this.currentFoucsedIndex - 1;
-                _this.highlightFocusedSearchResult();
-            }
-            if (event.key === 'Enter') {
-                if (_this.currentFoucsedIndex !== -1 && _this.searchHasResults) {
-                    _this.optionSelectedHandler(_this.searchResultOptions[_this.currentFoucsedIndex]);
-                    return;
-                }
-            }
-        });
-    };
-    TypeAheadElement.prototype.highlightFocusedSearchResult = function () {
-        var _this = this;
-        var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
-        if (!optionListItems) {
-            return;
-        }
-        optionListItems.forEach(function (listItem, index) {
-            listItem.classList.remove('active');
-            if (index === _this.currentFoucsedIndex) {
-                listItem.classList.add('active');
-            }
-        });
-    };
-    TypeAheadElement.prototype.change = function ($event) {
-        this.touched = true;
-        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
-    };
-    TypeAheadElement.prototype.validate = function () {
-        this.valid;
-        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
-    };
-    TypeAheadElement = __decorate([
-        (0, custom_element_decorator_1.default)({
-            selector: 'type-ahead-element',
-            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></div>\n\t\t</div>",
-            style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 2px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 1px solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 200px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 1px solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\t/*when navigating through the items using the arrow keys:*/\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 16px;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 10px;\n\t\t}\n\t",
-            useShadow: true,
-        })
-    ], TypeAheadElement);
-    return TypeAheadElement;
-}(CustomInputElement_1.CustomInputElement));
-exports.TypeAheadElement = TypeAheadElement;
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeAheadElement = void 0;
+var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
+var CustomInputElement_1 = require("../../framework/CustomInputElement");
+var CustomEvents_1 = require("../../framework/CustomEvents");
+var DomUtility_1 = require("../../framework/Utilities/DomUtility");
+var TypeAheadElement = /** @class */ (function (_super) {
+    __extends(TypeAheadElement, _super);
+    function TypeAheadElement() {
+        var _this = _super.call(this) || this;
+        _this.currentFoucsedIndex = -1;
+        _this.searchResultOptions = [];
+        return _this;
+    }
+    Object.defineProperty(TypeAheadElement.prototype, "searchHasResults", {
+        get: function () {
+            var autocompleteList = _super.prototype.getChildElement.call(this, '.options-list');
+            return autocompleteList && this.optionsWithDescriptions && this.optionsWithDescriptions.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TypeAheadElement.prototype, "value", {
+        get: function () {
+            if (!this.selectedOption) {
+                return null;
+            }
+            return this.selectedOption.value;
+        },
+        set: function (value) {
+            if (!this.optionsWithDescriptions || this.optionsWithDescriptions.length === 0) {
+                return;
+            }
+            var option = this.optionsWithDescriptions.find(function (option) { return option.value === value; });
+            if (!option) {
+                this.descriptionElement.innerHTML = null;
+                return;
+            }
+            this.selectedOption = option;
+            this.textInputElement.value = option.title;
+            this.descriptionElement.innerHTML = option.description;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TypeAheadElement.prototype, "valid", {
+        get: function () {
+            if (this.required) {
+                return !!this.selectedOption;
+            }
+            return !!this.selectedOption || this.textInputElement.value === '';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TypeAheadElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    TypeAheadElement.prototype.initChildInputs = function () {
+        var _this = this;
+        this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
+        this.descriptionElement = _super.prototype.getChildInput.call(this, '#description');
+        this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
+        if (this.required) {
+            this.textInputElement.setAttribute('required', '');
+        }
+        this.textInputElement.addEventListener('change', this.change.bind(this));
+        this.textInputElement.addEventListener('input', function () {
+            _this.inputEventHandler();
+        });
+        this.bindNavigation();
+    };
+    TypeAheadElement.prototype.inputEventHandler = function () {
+        var _this = this;
+        this.selectedOption = null;
+        this.descriptionElement.innerHTML = null;
+        this.closeOptionsList();
+        this.searchResultOptions = [];
+        var searchValue = this.textInputElement.value;
+        if (!searchValue || searchValue.trim() === '') {
+            return;
+        }
+        var optionslist = document.createElement('div');
+        optionslist.classList.add('options-list');
+        if (!this.optionsWithDescriptions) {
+            return;
+        }
+        this.optionsWithDescriptions.forEach(function (option, index) {
+            var regex = new RegExp(searchValue, 'gi');
+            var isMatchingTitle = regex.test(option.title);
+            var isMatchingValue = regex.test(option.value);
+            var isMatchingDescription = regex.test(option.description);
+            if (!isMatchingTitle && !isMatchingValue && !isMatchingDescription) {
+                return;
+            }
+            _this.searchResultOptions.push(option);
+            var optionsListItem = document.createElement("div");
+            optionsListItem.classList.add('options-list-item');
+            optionsListItem.dataset['value'] = option.value;
+            optionslist.appendChild(optionsListItem);
+            var optionsListItemTitle = document.createElement("div");
+            optionsListItemTitle.classList.add('options-list-item-title');
+            optionsListItemTitle.innerHTML = DomUtility_1.default.boldenText(option.title, searchValue);
+            optionsListItem.appendChild(optionsListItemTitle);
+            var optionsListItemDescription = document.createElement("div");
+            optionsListItemDescription.classList.add('options-list-item-description');
+            optionsListItemDescription.innerHTML = DomUtility_1.default.boldenText(option.description, searchValue);
+            optionsListItem.appendChild(optionsListItemDescription);
+            optionsListItem.addEventListener('click', function () {
+                _this.optionSelectedHandler(option);
+            });
+            _this.componentWrapper.appendChild(optionslist);
+        });
+    };
+    TypeAheadElement.prototype.closeOptionsList = function () {
+        this.currentFoucsedIndex = -1;
+        var optionsList = _super.prototype.getChildElement.call(this, '.options-list');
+        if (!optionsList) {
+            return;
+        }
+        optionsList.remove();
+    };
+    TypeAheadElement.prototype.optionSelectedHandler = function (option) {
+        this.value = option.value;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+        this.closeOptionsList();
+    };
+    TypeAheadElement.prototype.bindNavigation = function () {
+        var _this = this;
+        this.textInputElement.addEventListener('keydown', function (event) {
+            if (event.key === 'Escape') {
+                _this.closeOptionsList();
+            }
+            if (event.key === 'ArrowDown') {
+                if (!_this.searchHasResults) {
+                    return;
+                }
+                _this.currentFoucsedIndex = _this.currentFoucsedIndex === _this.searchResultOptions.length - 1 ? 0 : _this.currentFoucsedIndex + 1;
+                _this.highlightFocusedSearchResult();
+            }
+            if (event.key === 'ArrowUp') {
+                if (!_this.searchHasResults) {
+                    return;
+                }
+                _this.currentFoucsedIndex = _this.currentFoucsedIndex === 0 ? _this.searchResultOptions.length - 1 : _this.currentFoucsedIndex - 1;
+                _this.highlightFocusedSearchResult();
+            }
+            if (event.key === 'Enter') {
+                if (_this.currentFoucsedIndex !== -1 && _this.searchHasResults) {
+                    _this.optionSelectedHandler(_this.searchResultOptions[_this.currentFoucsedIndex]);
+                    return;
+                }
+            }
+        });
+    };
+    TypeAheadElement.prototype.highlightFocusedSearchResult = function () {
+        var _this = this;
+        var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
+        if (!optionListItems) {
+            return;
+        }
+        optionListItems.forEach(function (listItem, index) {
+            listItem.classList.remove('active');
+            if (index === _this.currentFoucsedIndex) {
+                listItem.classList.add('active');
+            }
+        });
+    };
+    TypeAheadElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    TypeAheadElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    TypeAheadElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'type-ahead-element',
+            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></div>\n\t\t</div>",
+            style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 2px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 1px solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 200px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 1px solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\t/*when navigating through the items using the arrow keys:*/\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 16px;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 10px;\n\t\t}\n\t",
+            useShadow: true,
+        })
+    ], TypeAheadElement);
+    return TypeAheadElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.TypeAheadElement = TypeAheadElement;
 //# sourceMappingURL=TypeAheadElement.js.map

package/dist/framework/CustomEvents.d.ts

@@ -1,21 +1,21 @@
-export interface Listener<T> {
-    (event: T): any;
-}
-export interface Disposable {
-    dispose(): any;
-}
-export declare class CustomElementEventArgs {
-    value: any;
-    eventName: string;
-    constructor(value: any, eventName: string);
-}
-/** passes through events as they happen. You will not get events from before you start listening */
-export declare class CustomElementEvent<T> {
-    private listeners;
-    private listenersOncer;
-    on: (listener: Listener<T>) => Disposable;
-    once: (listener: Listener<T>) => void;
-    off: (listener: Listener<T>) => void;
-    emit: (event: T) => void;
-    pipe: (te: CustomElementEvent<T>) => Disposable;
-}
+export interface Listener<T> {
+    (event: T): any;
+}
+export interface Disposable {
+    dispose(): any;
+}
+export declare class CustomElementEventArgs {
+    value: any;
+    eventName: string;
+    constructor(value: any, eventName: string);
+}
+/** passes through events as they happen. You will not get events from before you start listening */
+export declare class CustomElementEvent<T> {
+    private listeners;
+    private listenersOncer;
+    on: (listener: Listener<T>) => Disposable;
+    once: (listener: Listener<T>) => void;
+    off: (listener: Listener<T>) => void;
+    emit: (event: T) => void;
+    pipe: (te: CustomElementEvent<T>) => Disposable;
+}

package/dist/framework/CustomEvents.js

@@ -1,48 +1,48 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomElementEvent = exports.CustomElementEventArgs = void 0;
-var CustomElementEventArgs = /** @class */ (function () {
-    function CustomElementEventArgs(value, eventName) {
-        this.value = value;
-        this.eventName = eventName;
-    }
-    return CustomElementEventArgs;
-}());
-exports.CustomElementEventArgs = CustomElementEventArgs;
-/** passes through events as they happen. You will not get events from before you start listening */
-var CustomElementEvent = /** @class */ (function () {
-    function CustomElementEvent() {
-        var _this = this;
-        this.listeners = [];
-        this.listenersOncer = [];
-        this.on = function (listener) {
-            _this.listeners.push(listener);
-            return {
-                dispose: function () { return _this.off(listener); },
-            };
-        };
-        this.once = function (listener) {
-            _this.listenersOncer.push(listener);
-        };
-        this.off = function (listener) {
-            var callbackIndex = _this.listeners.indexOf(listener);
-            if (callbackIndex > -1)
-                _this.listeners.splice(callbackIndex, 1);
-        };
-        this.emit = function (event) {
-            /** Update any general listeners */
-            _this.listeners.forEach(function (listener) { return listener(event); });
-            /** Clear the `once` queue */
-            if (_this.listenersOncer.length > 0) {
-                _this.listenersOncer.forEach(function (listener) { return listener(event); });
-                _this.listenersOncer = [];
-            }
-        };
-        this.pipe = function (te) {
-            return _this.on(function (e) { return te.emit(e); });
-        };
-    }
-    return CustomElementEvent;
-}());
-exports.CustomElementEvent = CustomElementEvent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomElementEvent = exports.CustomElementEventArgs = void 0;
+var CustomElementEventArgs = /** @class */ (function () {
+    function CustomElementEventArgs(value, eventName) {
+        this.value = value;
+        this.eventName = eventName;
+    }
+    return CustomElementEventArgs;
+}());
+exports.CustomElementEventArgs = CustomElementEventArgs;
+/** passes through events as they happen. You will not get events from before you start listening */
+var CustomElementEvent = /** @class */ (function () {
+    function CustomElementEvent() {
+        var _this = this;
+        this.listeners = [];
+        this.listenersOncer = [];
+        this.on = function (listener) {
+            _this.listeners.push(listener);
+            return {
+                dispose: function () { return _this.off(listener); },
+            };
+        };
+        this.once = function (listener) {
+            _this.listenersOncer.push(listener);
+        };
+        this.off = function (listener) {
+            var callbackIndex = _this.listeners.indexOf(listener);
+            if (callbackIndex > -1)
+                _this.listeners.splice(callbackIndex, 1);
+        };
+        this.emit = function (event) {
+            /** Update any general listeners */
+            _this.listeners.forEach(function (listener) { return listener(event); });
+            /** Clear the `once` queue */
+            if (_this.listenersOncer.length > 0) {
+                _this.listenersOncer.forEach(function (listener) { return listener(event); });
+                _this.listenersOncer = [];
+            }
+        };
+        this.pipe = function (te) {
+            return _this.on(function (e) { return te.emit(e); });
+        };
+    }
+    return CustomElementEvent;
+}());
+exports.CustomElementEvent = CustomElementEvent;
 //# sourceMappingURL=CustomEvents.js.map