aurelia-inputmask - npm Package Compare versions

Comparing version 1.1.6 to 2.0.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [2.0.0](https://github.com/MaximBalaganskiy/aurelia-inputmask/compare/v1.1.6...v2.0.0) (2021-01-19)
+
+
+### Bug Fixes
+
+* do not fire a duplicate event ([94f8fcf](https://github.com/MaximBalaganskiy/aurelia-inputmask/commit/94f8fcf9c7aa989a74045f75df487e9cc4e846ef))
+
 ### [1.1.6](https://github.com/MaximBalaganskiy/aurelia-inputmask/compare/v1.1.5...v1.1.6) (2020-03-25)
@@ -7,0 +14,0 @@

dist/amd/index.d.ts

@@ -1,3 +0,3 @@
-import { FrameworkConfiguration } from "aurelia-framework";
-export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any): void;
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+import { FrameworkConfiguration } from 'aurelia-framework';
+export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>): void;
+export { InputmaskCustomAttribute } from './inputmask-attribute';

dist/amd/index.js

 define(["require", "exports", "aurelia-framework", "./options-store", "./inputmask-attribute"], function (require, exports, aurelia_framework_1, options_store_1, inputmask_attribute_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputmaskCustomAttribute = exports.configure = void 0;
     function configure(frameworkConfiguration, defaultOptions) {
@@ -10,8 +11,8 @@ var optionsStore = frameworkConfiguration.container.get(options_store_1.OptionsStore);
         frameworkConfiguration.globalResources([
-            aurelia_framework_1.PLATFORM.moduleName("./inputmask-attribute"),
+            aurelia_framework_1.PLATFORM.moduleName('./inputmask-attribute'),
         ]);
     }
     exports.configure = configure;
-    exports.InputmaskCustomAttribute = inputmask_attribute_1.InputmaskCustomAttribute;
+    Object.defineProperty(exports, "InputmaskCustomAttribute", { enumerable: true, get: function () { return inputmask_attribute_1.InputmaskCustomAttribute; } });
 });
 //# sourceMappingURL=index.js.map

dist/amd/inputmask-attribute.d.ts

@@ -1,3 +0,3 @@
-import Inputmask from "inputmask";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { OptionsStore } from './options-store';
 export declare class InputmaskCustomAttribute {
@@ -7,6 +7,6 @@ private element;
     constructor(element: Element, optionsStore: OptionsStore);
-    value: any;
+    value: string;
     ignoreChange: boolean;
     valueChanged(): void;
-    incompleteValue: any;
+    incompleteValue: string;
     mask: string;
@@ -17,8 +17,7 @@ maskChanged(): void;
     instance: Inputmask;
-    options: any;
+    options: Record<string, unknown>;
     attached(): void;
     createInstance(): void;
     detached(): void;
-    suppressOnInput: boolean;
-    onInputChanged: (e: Event) => void;
+    onInputChanged: () => void;
 }

dist/amd/inputmask-attribute.js

 define(["require", "exports", "tslib", "inputmask", "aurelia-framework", "./options-store"], function (require, exports, tslib_1, inputmask_1, aurelia_framework_1, options_store_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputmaskCustomAttribute = void 0;
     var InputmaskCustomAttribute = /** @class */ (function () {
@@ -9,12 +10,4 @@ function InputmaskCustomAttribute(element, optionsStore) {
             this.optionsStore = optionsStore;
-            this.value = "";
-            this.onInputChanged = function (e) {
-                if (_this.suppressOnInput) {
-                    return;
-                }
-                if (e.type === "input") {
-                    _this.suppressOnInput = true;
-                    _this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-                    _this.suppressOnInput = false;
-                }
+            this.value = '';
+            this.onInputChanged = function () {
                 _this.incompleteValue = _this.input.inputmask.unmaskedvalue();
@@ -37,6 +30,6 @@ var value = _this.input.inputmask.isComplete() ? (_this.isValueMasked ? _this.input.value : _this.incompleteValue) : undefined;
             if (this.input.value !== this.value) {
-                this.input.value = this.value || "";
-                this.input.dispatchEvent(new CustomEvent("change"));
+                this.input.value = this.value || '';
+                this.input.dispatchEvent(new CustomEvent('change'));
             }
-            this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+            this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
         };
@@ -50,7 +43,7 @@ InputmaskCustomAttribute.prototype.maskChanged = function () {
         InputmaskCustomAttribute.prototype.attached = function () {
-            if (this.element.tagName === "INPUT") {
+            if (this.element.tagName === 'INPUT') {
                 this.input = this.element;
             }
             else {
-                this.input = this.element.querySelector("input");
+                this.input = this.element.querySelector('input');
                 if (!this.input) {
@@ -60,18 +53,18 @@ return;
             }
-            this.input.addEventListener("focusout", this.onInputChanged);
-            this.input.addEventListener("change", this.onInputChanged);
-            this.input.addEventListener("input", this.onInputChanged);
+            this.input.addEventListener('focusout', this.onInputChanged);
+            this.input.addEventListener('change', this.onInputChanged);
+            this.input.addEventListener('input', this.onInputChanged);
             this.createInstance();
             this.instance.mask(this.input);
-            this.input.value = this.value || "";
+            this.input.value = this.value || '';
             this.valueChanged();
         };
         InputmaskCustomAttribute.prototype.createInstance = function () {
-            var options = tslib_1.__assign({}, this.optionsStore.options, this.options);
+            var options = tslib_1.__assign(tslib_1.__assign({}, this.optionsStore.options), this.options);
             this.instance = new inputmask_1.default(this.mask, options);
         };
         InputmaskCustomAttribute.prototype.detached = function () {
-            this.input.removeEventListener("focusout", this.onInputChanged);
-            this.input.removeEventListener("change", this.onInputChanged);
-            this.input.removeEventListener("input", this.onInputChanged);
+            this.input.removeEventListener('focusout', this.onInputChanged);
+            this.input.removeEventListener('change', this.onInputChanged);
+            this.input.removeEventListener('input', this.onInputChanged);
             this.input.inputmask.remove();
@@ -81,7 +74,7 @@ };
             aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-            tslib_1.__metadata("design:type", Object)
+            tslib_1.__metadata("design:type", String)
         ], InputmaskCustomAttribute.prototype, "value", void 0);
         tslib_1.__decorate([
             aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-            tslib_1.__metadata("design:type", Object)
+            tslib_1.__metadata("design:type", String)
         ], InputmaskCustomAttribute.prototype, "incompleteValue", void 0);
@@ -102,3 +95,3 @@ tslib_1.__decorate([
             aurelia_framework_1.autoinject,
-            aurelia_framework_1.customAttribute("inputmask"),
+            aurelia_framework_1.customAttribute('inputmask'),
             tslib_1.__metadata("design:paramtypes", [Element, options_store_1.OptionsStore])
@@ -105,0 +98,0 @@ ], InputmaskCustomAttribute);

dist/amd/options-store.d.ts

 export declare class OptionsStore {
-    options: any;
+    options: Record<string, unknown>;
 }

dist/amd/options-store.js

 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.OptionsStore = void 0;
     var OptionsStore = /** @class */ (function () {
@@ -5,0 +6,0 @@ function OptionsStore() {

dist/commonjs/index.d.ts

@@ -1,3 +0,3 @@
-import { FrameworkConfiguration } from "aurelia-framework";
-export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any): void;
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+import { FrameworkConfiguration } from 'aurelia-framework';
+export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>): void;
+export { InputmaskCustomAttribute } from './inputmask-attribute';

dist/commonjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputmaskCustomAttribute = exports.configure = void 0;
 var aurelia_framework_1 = require("aurelia-framework");
@@ -11,3 +12,3 @@ var options_store_1 = require("./options-store");
     frameworkConfiguration.globalResources([
-        aurelia_framework_1.PLATFORM.moduleName("./inputmask-attribute"),
+        aurelia_framework_1.PLATFORM.moduleName('./inputmask-attribute'),
     ]);
@@ -17,3 +18,3 @@ }
 var inputmask_attribute_1 = require("./inputmask-attribute");
-exports.InputmaskCustomAttribute = inputmask_attribute_1.InputmaskCustomAttribute;
+Object.defineProperty(exports, "InputmaskCustomAttribute", { enumerable: true, get: function () { return inputmask_attribute_1.InputmaskCustomAttribute; } });
 //# sourceMappingURL=index.js.map

dist/commonjs/inputmask-attribute.d.ts

@@ -1,3 +0,3 @@
-import Inputmask from "inputmask";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { OptionsStore } from './options-store';
 export declare class InputmaskCustomAttribute {
@@ -7,6 +7,6 @@ private element;
     constructor(element: Element, optionsStore: OptionsStore);
-    value: any;
+    value: string;
     ignoreChange: boolean;
     valueChanged(): void;
-    incompleteValue: any;
+    incompleteValue: string;
     mask: string;
@@ -17,8 +17,7 @@ maskChanged(): void;
     instance: Inputmask;
-    options: any;
+    options: Record<string, unknown>;
     attached(): void;
     createInstance(): void;
     detached(): void;
-    suppressOnInput: boolean;
-    onInputChanged: (e: Event) => void;
+    onInputChanged: () => void;
 }

dist/commonjs/inputmask-attribute.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputmaskCustomAttribute = void 0;
 var tslib_1 = require("tslib");
@@ -12,12 +13,4 @@ var inputmask_1 = require("inputmask");
         this.optionsStore = optionsStore;
-        this.value = "";
-        this.onInputChanged = function (e) {
-            if (_this.suppressOnInput) {
-                return;
-            }
-            if (e.type === "input") {
-                _this.suppressOnInput = true;
-                _this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-                _this.suppressOnInput = false;
-            }
+        this.value = '';
+        this.onInputChanged = function () {
             _this.incompleteValue = _this.input.inputmask.unmaskedvalue();
@@ -40,6 +33,6 @@ var value = _this.input.inputmask.isComplete() ? (_this.isValueMasked ? _this.input.value : _this.incompleteValue) : undefined;
         if (this.input.value !== this.value) {
-            this.input.value = this.value || "";
-            this.input.dispatchEvent(new CustomEvent("change"));
+            this.input.value = this.value || '';
+            this.input.dispatchEvent(new CustomEvent('change'));
         }
-        this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+        this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
     };
@@ -53,7 +46,7 @@ InputmaskCustomAttribute.prototype.maskChanged = function () {
     InputmaskCustomAttribute.prototype.attached = function () {
-        if (this.element.tagName === "INPUT") {
+        if (this.element.tagName === 'INPUT') {
             this.input = this.element;
         }
         else {
-            this.input = this.element.querySelector("input");
+            this.input = this.element.querySelector('input');
             if (!this.input) {
@@ -63,18 +56,18 @@ return;
         }
-        this.input.addEventListener("focusout", this.onInputChanged);
-        this.input.addEventListener("change", this.onInputChanged);
-        this.input.addEventListener("input", this.onInputChanged);
+        this.input.addEventListener('focusout', this.onInputChanged);
+        this.input.addEventListener('change', this.onInputChanged);
+        this.input.addEventListener('input', this.onInputChanged);
         this.createInstance();
         this.instance.mask(this.input);
-        this.input.value = this.value || "";
+        this.input.value = this.value || '';
         this.valueChanged();
     };
     InputmaskCustomAttribute.prototype.createInstance = function () {
-        var options = tslib_1.__assign({}, this.optionsStore.options, this.options);
+        var options = tslib_1.__assign(tslib_1.__assign({}, this.optionsStore.options), this.options);
         this.instance = new inputmask_1.default(this.mask, options);
     };
     InputmaskCustomAttribute.prototype.detached = function () {
-        this.input.removeEventListener("focusout", this.onInputChanged);
-        this.input.removeEventListener("change", this.onInputChanged);
-        this.input.removeEventListener("input", this.onInputChanged);
+        this.input.removeEventListener('focusout', this.onInputChanged);
+        this.input.removeEventListener('change', this.onInputChanged);
+        this.input.removeEventListener('input', this.onInputChanged);
         this.input.inputmask.remove();
@@ -84,7 +77,7 @@ };
         aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-        tslib_1.__metadata("design:type", Object)
+        tslib_1.__metadata("design:type", String)
     ], InputmaskCustomAttribute.prototype, "value", void 0);
     tslib_1.__decorate([
         aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-        tslib_1.__metadata("design:type", Object)
+        tslib_1.__metadata("design:type", String)
     ], InputmaskCustomAttribute.prototype, "incompleteValue", void 0);
@@ -105,3 +98,3 @@ tslib_1.__decorate([
         aurelia_framework_1.autoinject,
-        aurelia_framework_1.customAttribute("inputmask"),
+        aurelia_framework_1.customAttribute('inputmask'),
         tslib_1.__metadata("design:paramtypes", [Element, options_store_1.OptionsStore])
@@ -108,0 +101,0 @@ ], InputmaskCustomAttribute);

dist/commonjs/options-store.d.ts

 export declare class OptionsStore {
-    options: any;
+    options: Record<string, unknown>;
 }

dist/commonjs/options-store.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsStore = void 0;
 var OptionsStore = /** @class */ (function () {
@@ -4,0 +5,0 @@ function OptionsStore() {

dist/es2015/index.d.ts

@@ -1,3 +0,3 @@
-import { FrameworkConfiguration } from "aurelia-framework";
-export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any): void;
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+import { FrameworkConfiguration } from 'aurelia-framework';
+export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>): void;
+export { InputmaskCustomAttribute } from './inputmask-attribute';

dist/es2015/index.js

@@ -1,5 +0,5 @@
-import { PLATFORM } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import { PLATFORM } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 export function configure(frameworkConfiguration, defaultOptions) {
-    let optionsStore = frameworkConfiguration.container.get(OptionsStore);
+    const optionsStore = frameworkConfiguration.container.get(OptionsStore);
     if (defaultOptions) {
@@ -9,6 +9,6 @@ optionsStore.options = defaultOptions;
     frameworkConfiguration.globalResources([
-        PLATFORM.moduleName("./inputmask-attribute"),
+        PLATFORM.moduleName('./inputmask-attribute'),
     ]);
 }
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+export { InputmaskCustomAttribute } from './inputmask-attribute';
 //# sourceMappingURL=index.js.map

dist/es2015/inputmask-attribute.d.ts

@@ -1,3 +0,3 @@
-import Inputmask from "inputmask";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { OptionsStore } from './options-store';
 export declare class InputmaskCustomAttribute {
@@ -7,6 +7,6 @@ private element;
     constructor(element: Element, optionsStore: OptionsStore);
-    value: any;
+    value: string;
     ignoreChange: boolean;
     valueChanged(): void;
-    incompleteValue: any;
+    incompleteValue: string;
     mask: string;
@@ -17,8 +17,7 @@ maskChanged(): void;
     instance: Inputmask;
-    options: any;
+    options: Record<string, unknown>;
     attached(): void;
     createInstance(): void;
     detached(): void;
-    suppressOnInput: boolean;
-    onInputChanged: (e: Event) => void;
+    onInputChanged: () => void;
 }

dist/es2015/inputmask-attribute.js

@@ -1,5 +0,5 @@
-import * as tslib_1 from "tslib";
-import Inputmask from "inputmask";
-import { autoinject, bindable, bindingMode, customAttribute } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import { __decorate, __metadata } from "tslib";
+import Inputmask from 'inputmask';
+import { autoinject, bindable, bindingMode, customAttribute } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 let InputmaskCustomAttribute = class InputmaskCustomAttribute {
@@ -9,12 +9,4 @@ constructor(element, optionsStore) {
         this.optionsStore = optionsStore;
-        this.value = "";
-        this.onInputChanged = (e) => {
-            if (this.suppressOnInput) {
-                return;
-            }
-            if (e.type === "input") {
-                this.suppressOnInput = true;
-                this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-                this.suppressOnInput = false;
-            }
+        this.value = '';
+        this.onInputChanged = () => {
             this.incompleteValue = this.input.inputmask.unmaskedvalue();
@@ -37,6 +29,6 @@ const value = this.input.inputmask.isComplete() ? (this.isValueMasked ? this.input.value : this.incompleteValue) : undefined;
         if (this.input.value !== this.value) {
-            this.input.value = this.value || "";
-            this.input.dispatchEvent(new CustomEvent("change"));
+            this.input.value = this.value || '';
+            this.input.dispatchEvent(new CustomEvent('change'));
         }
-        this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+        this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
     }
@@ -50,7 +42,7 @@ maskChanged() {
     attached() {
-        if (this.element.tagName === "INPUT") {
+        if (this.element.tagName === 'INPUT') {
             this.input = this.element;
         }
         else {
-            this.input = this.element.querySelector("input");
+            this.input = this.element.querySelector('input');
             if (!this.input) {
@@ -60,47 +52,47 @@ return;
         }
-        this.input.addEventListener("focusout", this.onInputChanged);
-        this.input.addEventListener("change", this.onInputChanged);
-        this.input.addEventListener("input", this.onInputChanged);
+        this.input.addEventListener('focusout', this.onInputChanged);
+        this.input.addEventListener('change', this.onInputChanged);
+        this.input.addEventListener('input', this.onInputChanged);
         this.createInstance();
         this.instance.mask(this.input);
-        this.input.value = this.value || "";
+        this.input.value = this.value || '';
         this.valueChanged();
     }
     createInstance() {
-        let options = Object.assign({}, this.optionsStore.options, this.options);
+        const options = Object.assign(Object.assign({}, this.optionsStore.options), this.options);
         this.instance = new Inputmask(this.mask, options);
     }
     detached() {
-        this.input.removeEventListener("focusout", this.onInputChanged);
-        this.input.removeEventListener("change", this.onInputChanged);
-        this.input.removeEventListener("input", this.onInputChanged);
+        this.input.removeEventListener('focusout', this.onInputChanged);
+        this.input.removeEventListener('change', this.onInputChanged);
+        this.input.removeEventListener('input', this.onInputChanged);
         this.input.inputmask.remove();
     }
 };
-tslib_1.__decorate([
+__decorate([
     bindable({ defaultBindingMode: bindingMode.twoWay }),
-    tslib_1.__metadata("design:type", Object)
+    __metadata("design:type", String)
 ], InputmaskCustomAttribute.prototype, "value", void 0);
-tslib_1.__decorate([
+__decorate([
     bindable({ defaultBindingMode: bindingMode.twoWay }),
-    tslib_1.__metadata("design:type", Object)
+    __metadata("design:type", String)
 ], InputmaskCustomAttribute.prototype, "incompleteValue", void 0);
-tslib_1.__decorate([
+__decorate([
     bindable({ primaryProperty: true }),
-    tslib_1.__metadata("design:type", String)
+    __metadata("design:type", String)
 ], InputmaskCustomAttribute.prototype, "mask", void 0);
-tslib_1.__decorate([
+__decorate([
     bindable,
-    tslib_1.__metadata("design:type", Boolean)
+    __metadata("design:type", Boolean)
 ], InputmaskCustomAttribute.prototype, "isValueMasked", void 0);
-tslib_1.__decorate([
+__decorate([
     bindable,
-    tslib_1.__metadata("design:type", Object)
+    __metadata("design:type", Object)
 ], InputmaskCustomAttribute.prototype, "options", void 0);
-InputmaskCustomAttribute = tslib_1.__decorate([
+InputmaskCustomAttribute = __decorate([
     autoinject,
-    customAttribute("inputmask"),
-    tslib_1.__metadata("design:paramtypes", [Element, OptionsStore])
+    customAttribute('inputmask'),
+    __metadata("design:paramtypes", [Element, OptionsStore])
 ], InputmaskCustomAttribute);
 export { InputmaskCustomAttribute };
 //# sourceMappingURL=inputmask-attribute.js.map

dist/es2015/options-store.d.ts

 export declare class OptionsStore {
-    options: any;
+    options: Record<string, unknown>;
 }

dist/native-modules/index.d.ts

@@ -1,3 +0,3 @@
-import { FrameworkConfiguration } from "aurelia-framework";
-export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any): void;
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+import { FrameworkConfiguration } from 'aurelia-framework';
+export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>): void;
+export { InputmaskCustomAttribute } from './inputmask-attribute';

dist/native-modules/index.js

@@ -1,3 +0,3 @@
-import { PLATFORM } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import { PLATFORM } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 export function configure(frameworkConfiguration, defaultOptions) {
@@ -9,6 +9,6 @@ var optionsStore = frameworkConfiguration.container.get(OptionsStore);
     frameworkConfiguration.globalResources([
-        PLATFORM.moduleName("./inputmask-attribute"),
+        PLATFORM.moduleName('./inputmask-attribute'),
     ]);
 }
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+export { InputmaskCustomAttribute } from './inputmask-attribute';
 //# sourceMappingURL=index.js.map

dist/native-modules/inputmask-attribute.d.ts

@@ -1,3 +0,3 @@
-import Inputmask from "inputmask";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { OptionsStore } from './options-store';
 export declare class InputmaskCustomAttribute {
@@ -7,6 +7,6 @@ private element;
     constructor(element: Element, optionsStore: OptionsStore);
-    value: any;
+    value: string;
     ignoreChange: boolean;
     valueChanged(): void;
-    incompleteValue: any;
+    incompleteValue: string;
     mask: string;
@@ -17,8 +17,7 @@ maskChanged(): void;
     instance: Inputmask;
-    options: any;
+    options: Record<string, unknown>;
     attached(): void;
     createInstance(): void;
     detached(): void;
-    suppressOnInput: boolean;
-    onInputChanged: (e: Event) => void;
+    onInputChanged: () => void;
 }

dist/native-modules/inputmask-attribute.js

@@ -1,5 +0,5 @@
-import * as tslib_1 from "tslib";
-import Inputmask from "inputmask";
-import { autoinject, bindable, bindingMode, customAttribute } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import { __assign, __decorate, __metadata } from "tslib";
+import Inputmask from 'inputmask';
+import { autoinject, bindable, bindingMode, customAttribute } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 var InputmaskCustomAttribute = /** @class */ (function () {
@@ -10,12 +10,4 @@ function InputmaskCustomAttribute(element, optionsStore) {
         this.optionsStore = optionsStore;
-        this.value = "";
-        this.onInputChanged = function (e) {
-            if (_this.suppressOnInput) {
-                return;
-            }
-            if (e.type === "input") {
-                _this.suppressOnInput = true;
-                _this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-                _this.suppressOnInput = false;
-            }
+        this.value = '';
+        this.onInputChanged = function () {
             _this.incompleteValue = _this.input.inputmask.unmaskedvalue();
@@ -38,6 +30,6 @@ var value = _this.input.inputmask.isComplete() ? (_this.isValueMasked ? _this.input.value : _this.incompleteValue) : undefined;
         if (this.input.value !== this.value) {
-            this.input.value = this.value || "";
-            this.input.dispatchEvent(new CustomEvent("change"));
+            this.input.value = this.value || '';
+            this.input.dispatchEvent(new CustomEvent('change'));
         }
-        this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+        this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
     };
@@ -51,7 +43,7 @@ InputmaskCustomAttribute.prototype.maskChanged = function () {
     InputmaskCustomAttribute.prototype.attached = function () {
-        if (this.element.tagName === "INPUT") {
+        if (this.element.tagName === 'INPUT') {
             this.input = this.element;
         }
         else {
-            this.input = this.element.querySelector("input");
+            this.input = this.element.querySelector('input');
             if (!this.input) {
@@ -61,44 +53,44 @@ return;
         }
-        this.input.addEventListener("focusout", this.onInputChanged);
-        this.input.addEventListener("change", this.onInputChanged);
-        this.input.addEventListener("input", this.onInputChanged);
+        this.input.addEventListener('focusout', this.onInputChanged);
+        this.input.addEventListener('change', this.onInputChanged);
+        this.input.addEventListener('input', this.onInputChanged);
         this.createInstance();
         this.instance.mask(this.input);
-        this.input.value = this.value || "";
+        this.input.value = this.value || '';
         this.valueChanged();
     };
     InputmaskCustomAttribute.prototype.createInstance = function () {
-        var options = tslib_1.__assign({}, this.optionsStore.options, this.options);
+        var options = __assign(__assign({}, this.optionsStore.options), this.options);
         this.instance = new Inputmask(this.mask, options);
     };
     InputmaskCustomAttribute.prototype.detached = function () {
-        this.input.removeEventListener("focusout", this.onInputChanged);
-        this.input.removeEventListener("change", this.onInputChanged);
-        this.input.removeEventListener("input", this.onInputChanged);
+        this.input.removeEventListener('focusout', this.onInputChanged);
+        this.input.removeEventListener('change', this.onInputChanged);
+        this.input.removeEventListener('input', this.onInputChanged);
         this.input.inputmask.remove();
     };
-    tslib_1.__decorate([
+    __decorate([
         bindable({ defaultBindingMode: bindingMode.twoWay }),
-        tslib_1.__metadata("design:type", Object)
+        __metadata("design:type", String)
     ], InputmaskCustomAttribute.prototype, "value", void 0);
-    tslib_1.__decorate([
+    __decorate([
         bindable({ defaultBindingMode: bindingMode.twoWay }),
-        tslib_1.__metadata("design:type", Object)
+        __metadata("design:type", String)
     ], InputmaskCustomAttribute.prototype, "incompleteValue", void 0);
-    tslib_1.__decorate([
+    __decorate([
         bindable({ primaryProperty: true }),
-        tslib_1.__metadata("design:type", String)
+        __metadata("design:type", String)
     ], InputmaskCustomAttribute.prototype, "mask", void 0);
-    tslib_1.__decorate([
+    __decorate([
         bindable,
-        tslib_1.__metadata("design:type", Boolean)
+        __metadata("design:type", Boolean)
     ], InputmaskCustomAttribute.prototype, "isValueMasked", void 0);
-    tslib_1.__decorate([
+    __decorate([
         bindable,
-        tslib_1.__metadata("design:type", Object)
+        __metadata("design:type", Object)
     ], InputmaskCustomAttribute.prototype, "options", void 0);
-    InputmaskCustomAttribute = tslib_1.__decorate([
+    InputmaskCustomAttribute = __decorate([
         autoinject,
-        customAttribute("inputmask"),
-        tslib_1.__metadata("design:paramtypes", [Element, OptionsStore])
+        customAttribute('inputmask'),
+        __metadata("design:paramtypes", [Element, OptionsStore])
     ], InputmaskCustomAttribute);
@@ -105,0 +97,0 @@ return InputmaskCustomAttribute;

dist/native-modules/options-store.d.ts

 export declare class OptionsStore {
-    options: any;
+    options: Record<string, unknown>;
 }

dist/system/index.d.ts

@@ -1,3 +0,3 @@
-import { FrameworkConfiguration } from "aurelia-framework";
-export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any): void;
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+import { FrameworkConfiguration } from 'aurelia-framework';
+export declare function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>): void;
+export { InputmaskCustomAttribute } from './inputmask-attribute';

dist/system/index.js

@@ -11,3 +11,3 @@ System.register(["aurelia-framework", "./options-store", "./inputmask-attribute"], function (exports_1, context_1) {
         frameworkConfiguration.globalResources([
-            aurelia_framework_1.PLATFORM.moduleName("./inputmask-attribute"),
+            aurelia_framework_1.PLATFORM.moduleName('./inputmask-attribute'),
         ]);
@@ -14,0 +14,0 @@ }

dist/system/inputmask-attribute.d.ts

@@ -1,3 +0,3 @@
-import Inputmask from "inputmask";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { OptionsStore } from './options-store';
 export declare class InputmaskCustomAttribute {
@@ -7,6 +7,6 @@ private element;
     constructor(element: Element, optionsStore: OptionsStore);
-    value: any;
+    value: string;
     ignoreChange: boolean;
     valueChanged(): void;
-    incompleteValue: any;
+    incompleteValue: string;
     mask: string;
@@ -17,8 +17,7 @@ maskChanged(): void;
     instance: Inputmask;
-    options: any;
+    options: Record<string, unknown>;
     attached(): void;
     createInstance(): void;
     detached(): void;
-    suppressOnInput: boolean;
-    onInputChanged: (e: Event) => void;
+    onInputChanged: () => void;
 }

dist/system/inputmask-attribute.js

@@ -26,12 +26,4 @@ System.register(["tslib", "inputmask", "aurelia-framework", "./options-store"], function (exports_1, context_1) {
                     this.optionsStore = optionsStore;
-                    this.value = "";
-                    this.onInputChanged = function (e) {
-                        if (_this.suppressOnInput) {
-                            return;
-                        }
-                        if (e.type === "input") {
-                            _this.suppressOnInput = true;
-                            _this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-                            _this.suppressOnInput = false;
-                        }
+                    this.value = '';
+                    this.onInputChanged = function () {
                         _this.incompleteValue = _this.input.inputmask.unmaskedvalue();
@@ -54,6 +46,6 @@ var value = _this.input.inputmask.isComplete() ? (_this.isValueMasked ? _this.input.value : _this.incompleteValue) : undefined;
                     if (this.input.value !== this.value) {
-                        this.input.value = this.value || "";
-                        this.input.dispatchEvent(new CustomEvent("change"));
+                        this.input.value = this.value || '';
+                        this.input.dispatchEvent(new CustomEvent('change'));
                     }
-                    this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+                    this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
                 };
@@ -67,7 +59,7 @@ InputmaskCustomAttribute.prototype.maskChanged = function () {
                 InputmaskCustomAttribute.prototype.attached = function () {
-                    if (this.element.tagName === "INPUT") {
+                    if (this.element.tagName === 'INPUT') {
                         this.input = this.element;
                     }
                     else {
-                        this.input = this.element.querySelector("input");
+                        this.input = this.element.querySelector('input');
                         if (!this.input) {
@@ -77,18 +69,18 @@ return;
                     }
-                    this.input.addEventListener("focusout", this.onInputChanged);
-                    this.input.addEventListener("change", this.onInputChanged);
-                    this.input.addEventListener("input", this.onInputChanged);
+                    this.input.addEventListener('focusout', this.onInputChanged);
+                    this.input.addEventListener('change', this.onInputChanged);
+                    this.input.addEventListener('input', this.onInputChanged);
                     this.createInstance();
                     this.instance.mask(this.input);
-                    this.input.value = this.value || "";
+                    this.input.value = this.value || '';
                     this.valueChanged();
                 };
                 InputmaskCustomAttribute.prototype.createInstance = function () {
-                    var options = tslib_1.__assign({}, this.optionsStore.options, this.options);
+                    var options = tslib_1.__assign(tslib_1.__assign({}, this.optionsStore.options), this.options);
                     this.instance = new inputmask_1.default(this.mask, options);
                 };
                 InputmaskCustomAttribute.prototype.detached = function () {
-                    this.input.removeEventListener("focusout", this.onInputChanged);
-                    this.input.removeEventListener("change", this.onInputChanged);
-                    this.input.removeEventListener("input", this.onInputChanged);
+                    this.input.removeEventListener('focusout', this.onInputChanged);
+                    this.input.removeEventListener('change', this.onInputChanged);
+                    this.input.removeEventListener('input', this.onInputChanged);
                     this.input.inputmask.remove();
@@ -98,7 +90,7 @@ };
                     aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-                    tslib_1.__metadata("design:type", Object)
+                    tslib_1.__metadata("design:type", String)
                 ], InputmaskCustomAttribute.prototype, "value", void 0);
                 tslib_1.__decorate([
                     aurelia_framework_1.bindable({ defaultBindingMode: aurelia_framework_1.bindingMode.twoWay }),
-                    tslib_1.__metadata("design:type", Object)
+                    tslib_1.__metadata("design:type", String)
                 ], InputmaskCustomAttribute.prototype, "incompleteValue", void 0);
@@ -119,3 +111,3 @@ tslib_1.__decorate([
                     aurelia_framework_1.autoinject,
-                    aurelia_framework_1.customAttribute("inputmask"),
+                    aurelia_framework_1.customAttribute('inputmask'),
                     tslib_1.__metadata("design:paramtypes", [Element, options_store_1.OptionsStore])
@@ -122,0 +114,0 @@ ], InputmaskCustomAttribute);

dist/system/options-store.d.ts

 export declare class OptionsStore {
-    options: any;
+    options: Record<string, unknown>;
 }

package.json

 {
   "name": "aurelia-inputmask",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "registry": "github",
@@ -42,61 +42,20 @@ "description": "Aurelia plugin for https://github.com/RobinHerbots/Inputmask",
   "devDependencies": {
-    "concurrently": "^3.6.0",
-    "copyfiles": "^2.0.0",
-    "rimraf": "^2.6.2",
-    "standard-version": "^4.4.0",
-    "tslib": ">=1.9.0",
-    "tslint": "^5.10.0",
-    "typescript": "^3.1.3",
-    "inputmask": ">=4.0.0",
-    "aurelia-framework": ">=1.3.0"
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/parser": "^4.14.0",
+    "aurelia-framework": ">=1.3.1",
+    "concurrently": "^5.3.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "^7.18.0",
+    "eslint-plugin-compat": "^3.9.0",
+    "eslint-plugin-import": "^2.22.1",
+    "inputmask": ">=5.0.5",
+    "rimraf": "^3.0.2",
+    "standard-version": "^9.1.0",
+    "tslint": "^5.20.1",
+    "typescript": "^4.1.3"
   },
   "peerDependencies": {
-    "inputmask": ">=4.0.0",
-    "tslib": ">=1.9.0",
-    "aurelia-framework": ">=1.3.0"
-  },
-  "jspm": {
-    "main": "index",
-    "directories": {
-      "lib": "dist/system"
-    },
-    "peerDependencies": {
-      "aurelia-framework": "npm:aurelia-framework@^1.3.0",
-      "inputmask": "npm:inputmask@^4.0.0",
-      "tslib": "npm:tslib@^1.9.3"
-    }
-  },
-  "aurelia": {
-    "documentation": {
-      "links": [
-        {
-          "rel": "license",
-          "mediaType": "text/plain",
-          "title": "The MIT License (MIT)",
-          "href": "LICENSE"
-        },
-        {
-          "rel": "version-history",
-          "mediaType": "text/markdown",
-          "title": "Change Log",
-          "href": "CHANGELOG.md"
-        }
-      ]
-    },
-    "import": {
-      "dependencies": [
-        {
-          "name": "aurelia-inputmask",
-          "main": "index",
-          "path": "../node_modules/aurelia-inputmask/dist/amd",
-          "resources": [
-            "**/*.{css,html}"
-          ]
-        }
-      ],
-      "tutorial": [
-        "1. in main.js add .plugin('aurelia-inputmask')"
-      ]
-    }
+    "inputmask": ">=5.0.5",
+    "aurelia-framework": ">=1.3.1"
   }
 }

src/index.ts

@@ -1,14 +0,14 @@
-import { FrameworkConfiguration, PLATFORM } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 
-export function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: any) {
-	let optionsStore = frameworkConfiguration.container.get(OptionsStore);
-	if (defaultOptions) {
-		optionsStore.options = defaultOptions;
-	}
-	frameworkConfiguration.globalResources([
-		PLATFORM.moduleName("./inputmask-attribute"),
-	]);
+export function configure(frameworkConfiguration: FrameworkConfiguration, defaultOptions: Record<string, unknown>) {
+  const optionsStore = frameworkConfiguration.container.get(OptionsStore);
+  if (defaultOptions) {
+    optionsStore.options = defaultOptions;
+  }
+  frameworkConfiguration.globalResources([
+    PLATFORM.moduleName('./inputmask-attribute'),
+  ]);
 }
 
-export { InputmaskCustomAttribute } from "./inputmask-attribute";
+export { InputmaskCustomAttribute } from './inputmask-attribute';

src/inputmask-attribute.ts

@@ -1,7 +0,7 @@
-import Inputmask from "inputmask";
-import { autoinject, bindable, bindingMode, customAttribute } from "aurelia-framework";
-import { OptionsStore } from "./options-store";
+import Inputmask from 'inputmask';
+import { autoinject, bindable, bindingMode, customAttribute } from 'aurelia-framework';
+import { OptionsStore } from './options-store';
 
 @autoinject
-@customAttribute("inputmask")
+@customAttribute('inputmask')
 export class InputmaskCustomAttribute {
@@ -11,3 +11,3 @@ constructor(private element: Element, private optionsStore: OptionsStore) { }
 	@bindable({ defaultBindingMode: bindingMode.twoWay })
-	value: any = "";
+	value: string = '';
 	ignoreChange: boolean;
@@ -23,10 +23,10 @@ valueChanged() {
 		if (this.input.value !== this.value) {
-			this.input.value = this.value || "";
-			this.input.dispatchEvent(new CustomEvent("change"));
+			this.input.value = this.value || '';
+			this.input.dispatchEvent(new CustomEvent('change'));
 		}
-		this.element.dispatchEvent(new CustomEvent("inputmask-change", { bubbles: true }));
+		this.element.dispatchEvent(new CustomEvent('inputmask-change', { bubbles: true }));
 	}
 
 	@bindable({ defaultBindingMode: bindingMode.twoWay })
-	incompleteValue: any;
+	incompleteValue: string;
 
@@ -50,10 +50,9 @@ @bindable({ primaryProperty: true })
 	@bindable
-	options: any;
+	options: Record<string, unknown>;
 
 	attached() {
-		if (this.element.tagName === "INPUT") {
+		if (this.element.tagName === 'INPUT') {
 			this.input = this.element as HTMLInputElement;
-		}
-		else {
-			this.input = this.element.querySelector("input");
+		} else {
+			this.input = this.element.querySelector('input');
 			if (!this.input) {
@@ -63,8 +62,8 @@ return;
 		}
-		this.input.addEventListener("focusout", this.onInputChanged);
-		this.input.addEventListener("change", this.onInputChanged);
-		this.input.addEventListener("input", this.onInputChanged);
+		this.input.addEventListener('focusout', this.onInputChanged);
+		this.input.addEventListener('change', this.onInputChanged);
+		this.input.addEventListener('input', this.onInputChanged);
 		this.createInstance();
 		this.instance.mask(this.input);
-		this.input.value = this.value || "";
+		this.input.value = this.value || '';
 		this.valueChanged();
@@ -74,3 +73,3 @@ }
 	createInstance() {
-		let options = { ...this.optionsStore.options, ...this.options };
+		const options = { ...this.optionsStore.options, ...this.options };
 		this.instance = new Inputmask(this.mask, options);
@@ -80,18 +79,9 @@ }
 	detached() {
-		this.input.removeEventListener("focusout", this.onInputChanged);
-		this.input.removeEventListener("change", this.onInputChanged);
-		this.input.removeEventListener("input", this.onInputChanged);
+		this.input.removeEventListener('focusout', this.onInputChanged);
+		this.input.removeEventListener('change', this.onInputChanged);
+		this.input.removeEventListener('input', this.onInputChanged);
 		this.input.inputmask.remove();
 	}
 
-	suppressOnInput: boolean;
-	onInputChanged = (e: Event) => {
-		if (this.suppressOnInput) {
-			return;
-		}
-		if (e.type === "input") {
-			this.suppressOnInput = true;
-			this.input.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-			this.suppressOnInput = false;
-		}
+	onInputChanged = () => {
 		this.incompleteValue = this.input.inputmask.unmaskedvalue();
@@ -103,4 +93,4 @@ const value = this.input.inputmask.isComplete() ? (this.isValueMasked ? this.input.value : this.incompleteValue) : undefined;
 		}
-	}
+	};
 
 }

src/inputmask.d.ts

 declare class Inputmask {
-    constructor(alias: any, options: any);
-    unmaskedvalue(): string;
-    isComplete(): boolean;
-    mask(elems: any): any;
-    remove(): any;
+  constructor(alias: unknown, options: unknown);
+  unmaskedvalue(): string;
+  isComplete(): boolean;
+  mask(elems: unknown): unknown;
+  remove(): unknown;
 }
 
-declare module "inputmask"{
-    export default Inputmask;
+declare module 'inputmask' {
+  export default Inputmask;
 }
 
-// tslint:disable-next-line:interface-name
 interface HTMLInputElement {
-    inputmask: Inputmask;
+  inputmask: Inputmask;
 }

src/options-store.ts

 export class OptionsStore {
-	options: any = {};
+  options: Record<string, unknown> = {};
 }

No alert changes

Improved metrics

Total package byte prevSize

76086

increased by12.92%

Dependency count

2

decreased by-33.33%

Lines of code

1191

increased by20.67%

Worsened metrics

Dev dependency count

13

increased by44.44%

No dependency changes