@material/textfield - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/mdc.textfield.js

@@ -68,3 +68,3 @@ /*!
 
-/***/ 2:
+/***/ 3:
 /***/ function(module, exports, __webpack_require__) {
@@ -78,3 +78,3 @@
 
-	var _foundation = __webpack_require__(3);
+	var _foundation = __webpack_require__(4);
 
@@ -88,3 +88,3 @@ Object.defineProperty(exports, 'MDCFoundation', {
 
-	var _component = __webpack_require__(4);
+	var _component = __webpack_require__(5);
 
@@ -102,3 +102,3 @@ Object.defineProperty(exports, 'MDCComponent', {
 
-/***/ 3:
+/***/ 4:
 /***/ function(module, exports) {
@@ -191,3 +191,3 @@
 
-/***/ 4:
+/***/ 5:
 /***/ function(module, exports, __webpack_require__) {
@@ -217,3 +217,3 @@
 
-	var _foundation = __webpack_require__(3);
+	var _foundation = __webpack_require__(4);
 
@@ -238,3 +238,5 @@ var _foundation2 = _interopRequireDefault(_foundation);
 
-	  function MDCComponent(root, foundation) {
+	  function MDCComponent(root) {
+	    var foundation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultFoundation();
+
 	    _classCallCheck(this, MDCComponent);
@@ -249,3 +251,3 @@
 	    this.initialize.apply(this, args);
-	    this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
+	    this.foundation_ = foundation;
 	    this.foundation_.init();
@@ -342,3 +344,3 @@ this.initialSyncWithDOM();
 
-	var _base = __webpack_require__(2);
+	var _base = __webpack_require__(3);
 
@@ -443,2 +445,8 @@ var _foundation = __webpack_require__(33);
 	        },
+	        registerInputInputHandler: function registerInputInputHandler(handler) {
+	          return _this3.input_.addEventListener('input', handler);
+	        },
+	        registerInputKeydownHandler: function registerInputKeydownHandler(handler) {
+	          return _this3.input_.addEventListener('keydown', handler);
+	        },
 	        deregisterInputFocusHandler: function deregisterInputFocusHandler(handler) {
@@ -450,2 +458,8 @@ return _this3.input_.removeEventListener('focus', handler);
 	        },
+	        deregisterInputInputHandler: function deregisterInputInputHandler(handler) {
+	          return _this3.input_.removeEventListener('input', handler);
+	        },
+	        deregisterInputKeydownHandler: function deregisterInputKeydownHandler(handler) {
+	          return _this3.input_.removeEventListener('keydown', handler);
+	        },
 	        getNativeInput: function getNativeInput() {
@@ -528,3 +542,3 @@ return _this3.input_;
 
-	var _base = __webpack_require__(2);
+	var _base = __webpack_require__(3);
 
@@ -596,2 +610,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 	        deregisterInputBlurHandler: function deregisterInputBlurHandler() /* handler: EventListener */{},
+	        registerInputInputHandler: function registerInputInputHandler() /* handler: EventListener */{},
+	        deregisterInputInputHandler: function deregisterInputInputHandler() /* handler: EventListener */{},
+	        registerInputKeydownHandler: function registerInputKeydownHandler() /* handler: EventListener */{},
+	        deregisterInputKeydownHandler: function deregisterInputKeydownHandler() /* handler: EventListener */{},
 	        setHelptextAttr: function setHelptextAttr() /* name: string, value: string */{},
@@ -614,2 +632,3 @@ removeHelptextAttr: function removeHelptextAttr() /* name: string, value: string */{},
 
+	    _this.receivedUserInput_ = false;
 	    _this.inputFocusHandler_ = function () {
@@ -621,2 +640,8 @@ return _this.activateFocus_();
 	    };
+	    _this.inputInputHandler_ = function () {
+	      return _this.autoCompleteFocus_();
+	    };
+	    _this.inputKeydownHandler_ = function () {
+	      return _this.receivedUserInput_ = true;
+	    };
 	    return _this;
@@ -631,2 +656,4 @@ }
 	      this.adapter_.registerInputBlurHandler(this.inputBlurHandler_);
+	      this.adapter_.registerInputInputHandler(this.inputInputHandler_);
+	      this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_);
 	    }
@@ -639,2 +666,4 @@ }, {
 	      this.adapter_.deregisterInputBlurHandler(this.inputBlurHandler_);
+	      this.adapter_.deregisterInputInputHandler(this.inputInputHandler_);
+	      this.adapter_.deregisterInputKeydownHandler(this.inputKeydownHandler_);
 	    }
@@ -653,2 +682,9 @@ }, {
 	  }, {
+	    key: 'autoCompleteFocus_',
+	    value: function autoCompleteFocus_() {
+	      if (!this.receivedUserInput_) {
+	        this.activateFocus_();
+	      }
+	    }
+	  }, {
 	    key: 'showHelptext_',
@@ -674,2 +710,3 @@ value: function showHelptext_() {
 	        this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
+	        this.receivedUserInput_ = false;
 	      }
@@ -676,0 +713,0 @@ if (isValid) {

dist/mdc.textfield.min.js

@@ -6,2 +6,2 @@ /*!
 */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.textfield=t():(e.mdc=e.mdc||{},e.mdc.textfield=t())}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="/assets/",t(0)}({0:function(e,t,n){e.exports=n(33)},1:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);Object.defineProperty(t,"MDCFoundation",{enumerable:!0,get:function(){return r(i).default}});var o=n(3);Object.defineProperty(t,"MDCComponent",{enumerable:!0,get:function(){return r(o).default}})},2:function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,e),this.adapter_=t}return r(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),r(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.default=i},3:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(2),u=r(a),s=function(){function e(t,n){i(this,e),this.root_=t;for(var r=arguments.length,o=Array(r>2?r-2:0),a=2;a<r;a++)o[a-2]=arguments[a];this.initialize.apply(this,o),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return o(e,null,[{key:"attachTo",value:function(t){return new e(t,new u.default)}}]),o(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(e,{detail:t}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(e,!1,!1,t)),this.root_.dispatchEvent(n)}}]),e}();t.default=s},32:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),l="mdc-textfield",c=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,a(t.defaultAdapter,e)));return n.inputFocusHandler_=function(){return n.activateFocus_()},n.inputBlurHandler_=function(){return n.deactivateFocus_()},n}return o(t,e),u(t,null,[{key:"cssClasses",get:function(){return{ROOT:l,UPGRADED:l+"--upgraded",DISABLED:l+"--disabled",FOCUSED:l+"--focused",INVALID:l+"--invalid",HELPTEXT_PERSISTENT:l+"-helptext--persistent",HELPTEXT_VALIDATION_MSG:l+"-helptext--validation-msg",LABEL_FLOAT_ABOVE:l+"__label--float-above"}}},{key:"strings",get:function(){return{ARIA_HIDDEN:"aria-hidden",ROLE:"role"}}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},addClassToLabel:function(){},removeClassFromLabel:function(){},addClassToHelptext:function(){},removeClassFromHelptext:function(){},helptextHasClass:function(){return!1},registerInputFocusHandler:function(){},deregisterInputFocusHandler:function(){},registerInputBlurHandler:function(){},deregisterInputBlurHandler:function(){},setHelptextAttr:function(){},removeHelptextAttr:function(){},getNativeInput:function(){return{}}}}}]),u(t,[{key:"init",value:function(){this.adapter_.addClass(t.cssClasses.UPGRADED),this.adapter_.registerInputFocusHandler(this.inputFocusHandler_),this.adapter_.registerInputBlurHandler(this.inputBlurHandler_)}},{key:"destroy",value:function(){this.adapter_.removeClass(t.cssClasses.UPGRADED),this.adapter_.deregisterInputFocusHandler(this.inputFocusHandler_),this.adapter_.deregisterInputBlurHandler(this.inputBlurHandler_)}},{key:"activateFocus_",value:function(){var e=t.cssClasses,n=e.FOCUSED,r=e.LABEL_FLOAT_ABOVE;this.adapter_.addClass(n),this.adapter_.addClassToLabel(r),this.showHelptext_()}},{key:"showHelptext_",value:function(){var e=t.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(e)}},{key:"deactivateFocus_",value:function(){var e=t.cssClasses,n=e.FOCUSED,r=e.INVALID,i=e.LABEL_FLOAT_ABOVE,o=this.getNativeInput_(),a=o.checkValidity();this.adapter_.removeClass(n),o.value||this.adapter_.removeClassFromLabel(i),a?this.adapter_.removeClass(r):this.adapter_.addClass(r),this.updateHelptextOnDeactivation_(a)}},{key:"updateHelptextOnDeactivation_",value:function(e){var n=t.cssClasses,r=n.HELPTEXT_PERSISTENT,i=n.HELPTEXT_VALIDATION_MSG,o=t.strings.ROLE,a=this.adapter_.helptextHasClass(r),u=this.adapter_.helptextHasClass(i),s=u&&!e;s?this.adapter_.setHelptextAttr(o,"alert"):this.adapter_.removeHelptextAttr(o),a||s||this.hideHelptext_()}},{key:"hideHelptext_",value:function(){var e=t.strings.ARIA_HIDDEN;this.adapter_.setHelptextAttr(e,"true")}},{key:"isDisabled",value:function(){return this.getNativeInput_().disabled}},{key:"setDisabled",value:function(e){var n=t.cssClasses.DISABLED;this.getNativeInput_().disabled=e,e?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1}}}]),t}(s.MDCFoundation);t.default=c},33:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.MDCTextfield=t.MDCTextfieldFoundation=void 0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(1),c=n(32),f=r(c);t.MDCTextfieldFoundation=f.default;var d=f.default.cssClasses;t.MDCTextfield=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),a=0;a<n;a++)r[a]=arguments[a];var u=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r))),s=u.input_;return u.helptextElement=s.hasAttribute("aria-controls")?document.getElementById(s.getAttribute("aria-controls")):null,u}return a(t,e),s(t,null,[{key:"attachTo",value:function(e){return new t(e)}}]),s(t,[{key:"initialSyncWithDom",value:function(){this.disabled=this.input_.disabled}},{key:"getDefaultFoundation",value:function(){var e=this;return new f.default(u({addClass:function(t){return e.root_.classList.add(t)},removeClass:function(t){return e.root_.classList.remove(t)},addClassToLabel:function(t){var n=e.label_;n&&n.classList.add(t)},removeClassFromLabel:function(t){var n=e.label_;n&&n.classList.remove(t)}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_()))}},{key:"getInputAdapterMethods_",value:function(){var e=this;return{registerInputFocusHandler:function(t){return e.input_.addEventListener("focus",t)},registerInputBlurHandler:function(t){return e.input_.addEventListener("blur",t)},deregisterInputFocusHandler:function(t){return e.input_.removeEventListener("focus",t)},deregisterInputBlurHandler:function(t){return e.input_.removeEventListener("blur",t)},getNativeInput:function(){return e.input_}}}},{key:"getHelptextAdapterMethods_",value:function(){var e=this;return{addClassToHelptext:function(t){e.helptextElement&&e.helptextElement.classList.add(t)},removeClassFromHelptext:function(t){e.helptextElement&&e.helptextElement.classList.remove(t)},helptextHasClass:function(t){return!!e.helptextElement&&e.helptextElement.classList.contains(t)},setHelptextAttr:function(t,n){e.helptextElement&&e.helptextElement.setAttribute(t,n)},removeHelptextAttr:function(t){e.helptextElement&&e.helptextElement.removeAttribute(t)}}}},{key:"disabled",get:function(){return this.foundation_.isDisabled()},set:function(e){this.foundation_.setDisabled(e)}},{key:"input_",get:function(){return this.root_.querySelector("."+d.ROOT+"__input")}},{key:"label_",get:function(){return this.root_.querySelector("."+d.ROOT+"__label")}}]),t}(l.MDCComponent)}})});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.textfield=t():(e.mdc=e.mdc||{},e.mdc.textfield=t())}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="/assets/",t(0)}({0:function(e,t,n){e.exports=n(33)},1:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);Object.defineProperty(t,"MDCFoundation",{enumerable:!0,get:function(){return r(i).default}});var u=n(3);Object.defineProperty(t,"MDCComponent",{enumerable:!0,get:function(){return r(u).default}})},2:function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,e),this.adapter_=t}return r(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),r(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.default=i},3:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=n(2),a=r(o),s=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.getDefaultFoundation();i(this,e),this.root_=t;for(var r=arguments.length,u=Array(r>2?r-2:0),o=2;o<r;o++)u[o-2]=arguments[o];this.initialize.apply(this,u),this.foundation_=n,this.foundation_.init(),this.initialSyncWithDOM()}return u(e,null,[{key:"attachTo",value:function(t){return new e(t,new a.default)}}]),u(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(e,{detail:t}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(e,!1,!1,t)),this.root_.dispatchEvent(n)}}]),e}();t.default=s},32:function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),l="mdc-textfield",c=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,o(t.defaultAdapter,e)));return n.receivedUserInput_=!1,n.inputFocusHandler_=function(){return n.activateFocus_()},n.inputBlurHandler_=function(){return n.deactivateFocus_()},n.inputInputHandler_=function(){return n.autoCompleteFocus_()},n.inputKeydownHandler_=function(){return n.receivedUserInput_=!0},n}return u(t,e),a(t,null,[{key:"cssClasses",get:function(){return{ROOT:l,UPGRADED:l+"--upgraded",DISABLED:l+"--disabled",FOCUSED:l+"--focused",INVALID:l+"--invalid",HELPTEXT_PERSISTENT:l+"-helptext--persistent",HELPTEXT_VALIDATION_MSG:l+"-helptext--validation-msg",LABEL_FLOAT_ABOVE:l+"__label--float-above"}}},{key:"strings",get:function(){return{ARIA_HIDDEN:"aria-hidden",ROLE:"role"}}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},addClassToLabel:function(){},removeClassFromLabel:function(){},addClassToHelptext:function(){},removeClassFromHelptext:function(){},helptextHasClass:function(){return!1},registerInputFocusHandler:function(){},deregisterInputFocusHandler:function(){},registerInputBlurHandler:function(){},deregisterInputBlurHandler:function(){},registerInputInputHandler:function(){},deregisterInputInputHandler:function(){},registerInputKeydownHandler:function(){},deregisterInputKeydownHandler:function(){},setHelptextAttr:function(){},removeHelptextAttr:function(){},getNativeInput:function(){return{}}}}}]),a(t,[{key:"init",value:function(){this.adapter_.addClass(t.cssClasses.UPGRADED),this.adapter_.registerInputFocusHandler(this.inputFocusHandler_),this.adapter_.registerInputBlurHandler(this.inputBlurHandler_),this.adapter_.registerInputInputHandler(this.inputInputHandler_),this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_)}},{key:"destroy",value:function(){this.adapter_.removeClass(t.cssClasses.UPGRADED),this.adapter_.deregisterInputFocusHandler(this.inputFocusHandler_),this.adapter_.deregisterInputBlurHandler(this.inputBlurHandler_),this.adapter_.deregisterInputInputHandler(this.inputInputHandler_),this.adapter_.deregisterInputKeydownHandler(this.inputKeydownHandler_)}},{key:"activateFocus_",value:function(){var e=t.cssClasses,n=e.FOCUSED,r=e.LABEL_FLOAT_ABOVE;this.adapter_.addClass(n),this.adapter_.addClassToLabel(r),this.showHelptext_()}},{key:"autoCompleteFocus_",value:function(){this.receivedUserInput_||this.activateFocus_()}},{key:"showHelptext_",value:function(){var e=t.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(e)}},{key:"deactivateFocus_",value:function(){var e=t.cssClasses,n=e.FOCUSED,r=e.INVALID,i=e.LABEL_FLOAT_ABOVE,u=this.getNativeInput_(),o=u.checkValidity();this.adapter_.removeClass(n),u.value||(this.adapter_.removeClassFromLabel(i),this.receivedUserInput_=!1),o?this.adapter_.removeClass(r):this.adapter_.addClass(r),this.updateHelptextOnDeactivation_(o)}},{key:"updateHelptextOnDeactivation_",value:function(e){var n=t.cssClasses,r=n.HELPTEXT_PERSISTENT,i=n.HELPTEXT_VALIDATION_MSG,u=t.strings.ROLE,o=this.adapter_.helptextHasClass(r),a=this.adapter_.helptextHasClass(i),s=a&&!e;s?this.adapter_.setHelptextAttr(u,"alert"):this.adapter_.removeHelptextAttr(u),o||s||this.hideHelptext_()}},{key:"hideHelptext_",value:function(){var e=t.strings.ARIA_HIDDEN;this.adapter_.setHelptextAttr(e,"true")}},{key:"isDisabled",value:function(){return this.getNativeInput_().disabled}},{key:"setDisabled",value:function(e){var n=t.cssClasses.DISABLED;this.getNativeInput_().disabled=e,e?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1}}}]),t}(s.MDCFoundation);t.default=c},33:function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.MDCTextfield=t.MDCTextfieldFoundation=void 0;var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(1),c=n(32),d=r(c);t.MDCTextfieldFoundation=d.default;var p=d.default.cssClasses;t.MDCTextfield=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var a=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r))),s=a.input_;return a.helptextElement=s.hasAttribute("aria-controls")?document.getElementById(s.getAttribute("aria-controls")):null,a}return o(t,e),s(t,null,[{key:"attachTo",value:function(e){return new t(e)}}]),s(t,[{key:"initialSyncWithDom",value:function(){this.disabled=this.input_.disabled}},{key:"getDefaultFoundation",value:function(){var e=this;return new d.default(a({addClass:function(t){return e.root_.classList.add(t)},removeClass:function(t){return e.root_.classList.remove(t)},addClassToLabel:function(t){var n=e.label_;n&&n.classList.add(t)},removeClassFromLabel:function(t){var n=e.label_;n&&n.classList.remove(t)}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_()))}},{key:"getInputAdapterMethods_",value:function(){var e=this;return{registerInputFocusHandler:function(t){return e.input_.addEventListener("focus",t)},registerInputBlurHandler:function(t){return e.input_.addEventListener("blur",t)},registerInputInputHandler:function(t){return e.input_.addEventListener("input",t)},registerInputKeydownHandler:function(t){return e.input_.addEventListener("keydown",t)},deregisterInputFocusHandler:function(t){return e.input_.removeEventListener("focus",t)},deregisterInputBlurHandler:function(t){return e.input_.removeEventListener("blur",t)},deregisterInputInputHandler:function(t){return e.input_.removeEventListener("input",t)},deregisterInputKeydownHandler:function(t){return e.input_.removeEventListener("keydown",t)},getNativeInput:function(){return e.input_}}}},{key:"getHelptextAdapterMethods_",value:function(){var e=this;return{addClassToHelptext:function(t){e.helptextElement&&e.helptextElement.classList.add(t)},removeClassFromHelptext:function(t){e.helptextElement&&e.helptextElement.classList.remove(t)},helptextHasClass:function(t){return!!e.helptextElement&&e.helptextElement.classList.contains(t)},setHelptextAttr:function(t,n){e.helptextElement&&e.helptextElement.setAttribute(t,n)},removeHelptextAttr:function(t){e.helptextElement&&e.helptextElement.removeAttribute(t)}}}},{key:"disabled",get:function(){return this.foundation_.isDisabled()},set:function(e){this.foundation_.setDisabled(e)}},{key:"input_",get:function(){return this.root_.querySelector("."+p.ROOT+"__input")}},{key:"label_",get:function(){return this.root_.querySelector("."+p.ROOT+"__label")}}]),t}(l.MDCComponent)}})});

foundation.js

@@ -55,2 +55,6 @@ /**
       deregisterInputBlurHandler: (/* handler: EventListener */) => {},
+      registerInputInputHandler: (/* handler: EventListener */) => {},
+      deregisterInputInputHandler: (/* handler: EventListener */) => {},
+      registerInputKeydownHandler: (/* handler: EventListener */) => {},
+      deregisterInputKeydownHandler: (/* handler: EventListener */) => {},
       setHelptextAttr: (/* name: string, value: string */) => {},
@@ -64,4 +68,8 @@ removeHelptextAttr: (/* name: string, value: string */) => {},
     super(Object.assign(MDCTextfieldFoundation.defaultAdapter, adapter));
+
+    this.receivedUserInput_ = false;
     this.inputFocusHandler_ = () => this.activateFocus_();
     this.inputBlurHandler_ = () => this.deactivateFocus_();
+    this.inputInputHandler_ = () => this.autoCompleteFocus_();
+    this.inputKeydownHandler_ = () => this.receivedUserInput_ = true;
   }
@@ -73,2 +81,4 @@
     this.adapter_.registerInputBlurHandler(this.inputBlurHandler_);
+    this.adapter_.registerInputInputHandler(this.inputInputHandler_);
+    this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_);
   }
@@ -80,2 +90,4 @@
     this.adapter_.deregisterInputBlurHandler(this.inputBlurHandler_);
+    this.adapter_.deregisterInputInputHandler(this.inputInputHandler_);
+    this.adapter_.deregisterInputKeydownHandler(this.inputKeydownHandler_);
   }
@@ -90,2 +102,8 @@
 
+  autoCompleteFocus_() {
+    if (!this.receivedUserInput_) {
+      this.activateFocus_();
+    }
+  }
+
   showHelptext_() {
@@ -104,2 +122,3 @@ const {ARIA_HIDDEN} = MDCTextfieldFoundation.strings;
       this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
+      this.receivedUserInput_ = false;
     }
@@ -106,0 +125,0 @@ if (isValid) {

index.js

@@ -80,4 +80,8 @@ /**
       registerInputBlurHandler: (handler) => this.input_.addEventListener('blur', handler),
+      registerInputInputHandler: (handler) => this.input_.addEventListener('input', handler),
+      registerInputKeydownHandler: (handler) => this.input_.addEventListener('keydown', handler),
       deregisterInputFocusHandler: (handler) => this.input_.removeEventListener('focus', handler),
       deregisterInputBlurHandler: (handler) => this.input_.removeEventListener('blur', handler),
+      deregisterInputInputHandler: (handler) => this.input_.removeEventListener('input', handler),
+      deregisterInputKeydownHandler: (handler) => this.input_.removeEventListener('keydown', handler),
       getNativeInput: () => this.input_,
@@ -84,0 +88,0 @@ };

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "Apache-2.0",
@@ -12,8 +12,8 @@ "main": "index.js",
   "dependencies": {
-    "@material/animation": "^0.1.1",
-    "@material/base": "^0.1.0",
-    "@material/rtl": "^0.1.0",
-    "@material/theme": "^0.1.0",
-    "@material/typography": "^0.1.0"
+    "@material/animation": "^0.1.3",
+    "@material/base": "^0.1.1",
+    "@material/rtl": "^0.1.1",
+    "@material/theme": "^0.1.1",
+    "@material/typography": "^0.1.1"
   }
 }

README.md

@@ -279,2 +279,6 @@ # MDC Textfield
 | deregisterInputBlurHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for a "blur" event |
+| registerInputInputHandler(handler: EventListener) => void | Registers an event listener on the native input element for an "input" event |
+| deregisterInputInputHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for an "input" event |
+| registerInputKeydownHandler(handler: EventListener) => void | Registers an event listener on the native input element for a "keydown" event |
+| deregisterInputKeydownHandler(handler: EventListener) => void | Un-registers an event listener on the native input element for a "keydown" event |
 | getNativeInput() => {value: string, disabled: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value` and `disabled` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
@@ -281,0 +285,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

149340

increased by2.61%

Lines of code

1751

increased by1.74%

Number of lines in readme file

301

increased by1.35%

Dependency changes

• Updated@material/animation@^0.1.3

• Updated@material/base@^0.1.1

• Updated@material/rtl@^0.1.1

• Updated@material/theme@^0.1.1

• Updated@material/typography@^0.1.1