bind value property for input-mask element #2702

Changelog.md

@@ -11,6 +11,7 @@
 - Enhance resolving of the ndxInitializer to determine the alternating tests.
 
 ### Fixed
+- how to get value from input-mask element? #2702
 - Problem with seconds in format 'HH:MM:ss' #2745
 - Remove unused mask - Take2 #2748
 - [Question] How to custom placeholder in "ip" alias? #2749

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "5.0.9-beta.38",
+  "version": "5.0.9-beta.39",
   "main": [
 	  "./index.js",
     "./css/inputmask.css"

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "robinherbots/inputmask",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
-  "version": "5.0.9-beta.38",
+  "version": "5.0.9-beta.39",
   "type": "library",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "homepage": "http://robinherbots.github.io/Inputmask",

dist/inputmask.js

@@ -3,7 +3,7 @@
  * https://github.com/RobinHerbots/Inputmask
  * Copyright (c) 2010 - 2023 Robin Herbots
  * Licensed under the MIT license
- * Version: 5.0.9-beta.38
+ * Version: 5.0.9-beta.39
  */
 !function(e, t) {
     if ("object" == typeof exports && "object" == typeof module) module.exports = t(); else if ("function" == typeof define && define.amd) define([], t); else {
@@ -2317,14 +2317,28 @@
                             }(this, s);
                             var t = (e = a.call(this)).getAttributeNames(), n = e.attachShadow({
                                 mode: "closed"
-                            }), i = h.createElement("input");
-                            for (var o in i.type = "text", n.appendChild(i), t) Object.prototype.hasOwnProperty.call(t, o) && i.setAttribute(t[o], e.getAttribute(t[o]));
-                            var l = new r.default;
-                            return l.dataAttribute = "", l.mask(i), i.inputmask.shadowRoot = n, e;
+                            });
+                            for (var i in e.input = h.createElement("input"), e.input.type = "text", n.appendChild(e.input), 
+                            t) Object.prototype.hasOwnProperty.call(t, i) && e.input.setAttribute(t[i], e.getAttribute(t[i]));
+                            var o = new r.default;
+                            return o.dataAttribute = "", o.mask(e.input), o.shadowRoot = n, e;
                         }
-                        return t = s, n && o(t.prototype, n), i && o(t, i), Object.defineProperty(t, "prototype", {
+                        return t = s, (n = [ {
+                            key: "attributeChangedCallback",
+                            value: function(e, t, n) {
+                                this.input.setAttribute(e, n);
+                            }
+                        }, {
+                            key: "value",
+                            get: function() {
+                                return this.input.value;
+                            },
+                            set: function(e) {
+                                this.input.value = e;
+                            }
+                        } ]) && o(t.prototype, n), i && o(t, i), Object.defineProperty(t, "prototype", {
                             writable: !1
-                        }), t;
+                        }), s;
                     }(s(HTMLElement));
                     a.default.customElements.define("input-mask", v);
                 }

dist/jquery.inputmask.js

@@ -3,7 +3,7 @@
  * https://github.com/RobinHerbots/Inputmask
  * Copyright (c) 2010 - 2023 Robin Herbots
  * Licensed under the MIT license
- * Version: 5.0.9-beta.38
+ * Version: 5.0.9-beta.39
  */
 !function(e, t) {
     if ("object" == typeof exports && "object" == typeof module) module.exports = t(require("jquery")); else if ("function" == typeof define && define.amd) define([ "jquery" ], t); else {
@@ -2146,14 +2146,28 @@
                             }(this, l);
                             var t = (e = a.call(this)).getAttributeNames(), i = e.attachShadow({
                                 mode: "closed"
-                            }), n = h.createElement("input");
-                            for (var o in n.type = "text", i.appendChild(n), t) Object.prototype.hasOwnProperty.call(t, o) && n.setAttribute(t[o], e.getAttribute(t[o]));
-                            var s = new r.default;
-                            return s.dataAttribute = "", s.mask(n), n.inputmask.shadowRoot = i, e;
+                            });
+                            for (var n in e.input = h.createElement("input"), e.input.type = "text", i.appendChild(e.input), 
+                            t) Object.prototype.hasOwnProperty.call(t, n) && e.input.setAttribute(t[n], e.getAttribute(t[n]));
+                            var o = new r.default;
+                            return o.dataAttribute = "", o.mask(e.input), o.shadowRoot = i, e;
                         }
-                        return t = l, i && o(t.prototype, i), n && o(t, n), Object.defineProperty(t, "prototype", {
+                        return t = l, (i = [ {
+                            key: "attributeChangedCallback",
+                            value: function(e, t, i) {
+                                this.input.setAttribute(e, i);
+                            }
+                        }, {
+                            key: "value",
+                            get: function() {
+                                return this.input.value;
+                            },
+                            set: function(e) {
+                                this.input.value = e;
+                            }
+                        } ]) && o(t.prototype, i), n && o(t, n), Object.defineProperty(t, "prototype", {
                             writable: !1
-                        }), t;
+                        }), l;
                     }(l(HTMLElement));
                     a.default.customElements.define("input-mask", v);
                 }

lib/inputmaskElement.js

@@ -6,27 +6,39 @@ const document = window.document;
 // add check if it is supported by the browser
 // integrate shadowroot into maskcope
 if (document && document.head && document.head.attachShadow && window.customElements && window.customElements.get("input-mask") === undefined) {
-    class InputmaskElement extends HTMLElement {
-        constructor() {
-            super();
-            var attributeNames = this.getAttributeNames(),
-                shadow = this.attachShadow({mode: "closed"}),
-                input = document.createElement("input");
-            input.type = "text";
-            shadow.appendChild(input);
+	class InputmaskElement extends HTMLElement {
+		constructor() {
+			super();
+			var attributeNames = this.getAttributeNames(),
+				shadow = this.attachShadow({mode: "closed"});
+			this.input = document.createElement("input");
+			this.input.type = "text";
+			shadow.appendChild(this.input);
 
-            for (var attr in attributeNames) {
-                if (Object.prototype.hasOwnProperty.call(attributeNames, attr)) {
-                    input.setAttribute(attributeNames[attr], this.getAttribute(attributeNames[attr]));
-                }
-            }
+			for (var attr in attributeNames) {
+				if (Object.prototype.hasOwnProperty.call(attributeNames, attr)) {
+					this.input.setAttribute(attributeNames[attr], this.getAttribute(attributeNames[attr]));
+				}
+			}
 
-            var im = new Inputmask();
-            im.dataAttribute = "";
-            im.mask(input);
-            input.inputmask.shadowRoot = shadow; //make the shadowRoot available
-        }
-    }
+			var im = new Inputmask();
+			im.dataAttribute = "";
+			im.mask(this.input);
+			im.shadowRoot = shadow; //make the shadowRoot available
+		}
 
-    window.customElements.define("input-mask", InputmaskElement);
+		attributeChangedCallback(attrName, oldVal, newVal) {
+			this.input.setAttribute(attrName, newVal);
+		}
+
+		//bind value
+		get value() {
+			return this.input.value;
+		}
+		set value(value) {
+			this.input.value = value;
+		}
+	}
+
+	window.customElements.define("input-mask", InputmaskElement);
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "5.0.9-beta.38",
+  "version": "5.0.9-beta.39",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
   "main": "dist/inputmask.js",
   "exports": {