@material/textfield - npm Package Compare versions

Comparing version 0.2.11 to 0.3.0

constants.js

@@ -32,2 +32,3 @@ /**
   LABEL_FLOAT_ABOVE: 'mdc-textfield__label--float-above',
+  BOX: 'mdc-textfield--box',
 };

dist/mdc.textfield.min.js

@@ -6,2 +6,2 @@ /*!
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.textfield=e():(t.mdc=t.mdc||{},t.mdc.textfield=e())}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=92)}({0:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);n.d(e,"MDCFoundation",function(){return r.a});var i=n(2);n.d(e,"MDCComponent",function(){return i.a})},1:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,t),this.adapter_=e}return i(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),i(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=u},2:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=n(1),u=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;r(this,t),this.root_=e;for(var i=arguments.length,u=Array(i>2?i-2:0),a=2;a<i;a++)u[a-2]=arguments[a];this.initialize.apply(this,u),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return u(t,null,[{key:"attachTo",value:function(e){return new t(e,new i.a)}}]),u(t,[{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(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=void 0;"function"==typeof CustomEvent?r=new CustomEvent(t,{detail:e,bubbles:n}):(r=document.createEvent("CustomEvent"),r.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(r)}}]),t}();e.a=a},32:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCTextfield",function(){return c});var a=n(0),o=n(69);n.d(e,"MDCTextfieldFoundation",function(){return o.a});var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),c=function(t){function e(){var t;r(this,e);for(var n=arguments.length,u=Array(n),a=0;a<n;a++)u[a]=arguments[a];var o=i(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(u))),s=o.input_;return o.helptextElement=s.hasAttribute("aria-controls")?document.getElementById(s.getAttribute("aria-controls")):null,o}return u(e,t),l(e,null,[{key:"attachTo",value:function(t){return new e(t)}}]),l(e,[{key:"initialSyncWithDom",value:function(){this.disabled=this.input_.disabled}},{key:"getDefaultFoundation",value:function(){var t=this;return new o.a(s({addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},addClassToLabel:function(e){var n=t.label_;n&&n.classList.add(e)},removeClassFromLabel:function(e){var n=t.label_;n&&n.classList.remove(e)}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_()))}},{key:"getInputAdapterMethods_",value:function(){var t=this;return{registerInputFocusHandler:function(e){return t.input_.addEventListener("focus",e)},registerInputBlurHandler:function(e){return t.input_.addEventListener("blur",e)},registerInputInputHandler:function(e){return t.input_.addEventListener("input",e)},registerInputKeydownHandler:function(e){return t.input_.addEventListener("keydown",e)},deregisterInputFocusHandler:function(e){return t.input_.removeEventListener("focus",e)},deregisterInputBlurHandler:function(e){return t.input_.removeEventListener("blur",e)},deregisterInputInputHandler:function(e){return t.input_.removeEventListener("input",e)},deregisterInputKeydownHandler:function(e){return t.input_.removeEventListener("keydown",e)},getNativeInput:function(){return t.input_}}}},{key:"getHelptextAdapterMethods_",value:function(){var t=this;return{addClassToHelptext:function(e){t.helptextElement&&t.helptextElement.classList.add(e)},removeClassFromHelptext:function(e){t.helptextElement&&t.helptextElement.classList.remove(e)},helptextHasClass:function(e){return!!t.helptextElement&&t.helptextElement.classList.contains(e)},setHelptextAttr:function(e,n){t.helptextElement&&t.helptextElement.setAttribute(e,n)},removeHelptextAttr:function(e){t.helptextElement&&t.helptextElement.removeAttribute(e)}}}},{key:"disabled",get:function(){return this.foundation_.isDisabled()},set:function(t){this.foundation_.setDisabled(t)}},{key:"input_",get:function(){return this.root_.querySelector(o.a.strings.INPUT_SELECTOR)}},{key:"label_",get:function(){return this.root_.querySelector(o.a.strings.LABEL_SELECTOR)}}]),e}(a.MDCComponent)},68:function(t,e,n){"use strict";n.d(e,"b",function(){return r}),n.d(e,"a",function(){return i});var r={ARIA_HIDDEN:"aria-hidden",ROLE:"role",INPUT_SELECTOR:".mdc-textfield__input",LABEL_SELECTOR:".mdc-textfield__label"},i={ROOT:"mdc-textfield",UPGRADED:"mdc-textfield--upgraded",DISABLED:"mdc-textfield--disabled",FOCUSED:"mdc-textfield--focused",INVALID:"mdc-textfield--invalid",HELPTEXT_PERSISTENT:"mdc-textfield-helptext--persistent",HELPTEXT_VALIDATION_MSG:"mdc-textfield-helptext--validation-msg",LABEL_FLOAT_ABOVE:"mdc-textfield__label--float-above"}},69:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=n(0),o=n(68),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),c=function(t){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,e);var n=i(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,s(e.defaultAdapter,t)));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(e,t),l(e,null,[{key:"cssClasses",get:function(){return o.a}},{key:"strings",get:function(){return o.b}},{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{}}}}}]),l(e,[{key:"init",value:function(){this.adapter_.addClass(e.cssClasses.UPGRADED),this.adapter_.registerInputFocusHandler(this.inputFocusHandler_),this.adapter_.registerInputBlurHandler(this.inputBlurHandler_),this.adapter_.registerInputInputHandler(this.inputInputHandler_),this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_),this.getNativeInput_().value&&this.adapter_.addClassToLabel(e.cssClasses.LABEL_FLOAT_ABOVE)}},{key:"destroy",value:function(){this.adapter_.removeClass(e.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 t=e.cssClasses,n=t.FOCUSED,r=t.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 t=e.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(t)}},{key:"deactivateFocus_",value:function(){var t=e.cssClasses,n=t.FOCUSED,r=t.INVALID,i=t.LABEL_FLOAT_ABOVE,u=this.getNativeInput_(),a=u.checkValidity();this.adapter_.removeClass(n),u.value||this.isBadInput_()||(this.adapter_.removeClassFromLabel(i),this.receivedUserInput_=!1),a?this.adapter_.removeClass(r):this.adapter_.addClass(r),this.updateHelptextOnDeactivation_(a)}},{key:"updateHelptextOnDeactivation_",value:function(t){var n=e.cssClasses,r=n.HELPTEXT_PERSISTENT,i=n.HELPTEXT_VALIDATION_MSG,u=e.strings.ROLE,a=this.adapter_.helptextHasClass(r),o=this.adapter_.helptextHasClass(i),s=o&&!t;s?this.adapter_.setHelptextAttr(u,"alert"):this.adapter_.removeHelptextAttr(u),a||s||this.hideHelptext_()}},{key:"hideHelptext_",value:function(){var t=e.strings.ARIA_HIDDEN;this.adapter_.setHelptextAttr(t,"true")}},{key:"isBadInput_",value:function(){var t=this.getNativeInput_();return t.validity?t.validity.badInput:t.badInput}},{key:"isDisabled",value:function(){return this.getNativeInput_().disabled}},{key:"setDisabled",value:function(t){var n=e.cssClasses.DISABLED;this.getNativeInput_().disabled=t,t?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1,badInput:!1}}}]),e}(a.MDCFoundation);e.a=c},92:function(t,e,n){t.exports=n(32)}})});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.textfield=e():(t.mdc=t.mdc||{},t.mdc.textfield=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=93)}({0:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},1:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0);n.d(e,"MDCFoundation",function(){return i.a});var a=n(2);n.d(e,"MDCComponent",function(){return a.a})},2:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(0),r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),r(t,[{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(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(t,{detail:e,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(i)}}]),t}();e.a=o},20:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});var i={ARIA_HIDDEN:"aria-hidden",ROLE:"role",INPUT_SELECTOR:".mdc-textfield__input",LABEL_SELECTOR:".mdc-textfield__label"},a={ROOT:"mdc-textfield",UPGRADED:"mdc-textfield--upgraded",DISABLED:"mdc-textfield--disabled",FOCUSED:"mdc-textfield--focused",INVALID:"mdc-textfield--invalid",HELPTEXT_PERSISTENT:"mdc-textfield-helptext--persistent",HELPTEXT_VALIDATION_MSG:"mdc-textfield-helptext--validation-msg",LABEL_FLOAT_ABOVE:"mdc-textfield__label--float-above",BOX:"mdc-textfield--box"}},3:function(t,e,n){"use strict";function i(t){if(t.CSS&&"function"==typeof t.CSS.supports){var e=t.CSS.supports("--css-vars","yes"),n=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return e||n}}function a(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===s||e){var n=!1;try{t.document.addEventListener("test",null,{get passive(){n=!0}})}catch(t){}s=n}return!!s&&{passive:!0}}function r(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function o(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchstart"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{x:s,y:u}}Object.defineProperty(e,"__esModule",{value:!0}),e.supportsCssVariables=i,e.applyPassive=a,e.getMatchesProperty=r,e.getNormalizedEventCoords=o;var s=void 0},34:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCTextfield",function(){return f});var o=n(1),s=n(4),u=n(20),c=n(70);n.d(e,"MDCTextfieldFoundation",function(){return c.a});var l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},d=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),p=function t(e,n,i){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,n);if(void 0===a){var r=Object.getPrototypeOf(e);return null===r?void 0:t(r,n,i)}if("value"in a)return a.value;var o=a.get;if(void 0!==o)return o.call(i)},f=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return r(e,t),d(e,[{key:"initialize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(t){return new s.MDCRipple(t)};this.input_=this.root_.querySelector(u.a.INPUT_SELECTOR),this.label_=this.root_.querySelector(u.a.LABEL_SELECTOR),this.helptextElement=null,this.ripple=null,this.input_.hasAttribute("aria-controls")&&(this.helptextElement=document.getElementById(this.input_.getAttribute("aria-controls"))),this.root_.classList.contains(u.b.BOX)&&(this.ripple=t(this.root_))}},{key:"destroy",value:function(){this.ripple&&this.ripple.destroy(),p(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this)}},{key:"initialSyncWithDom",value:function(){this.disabled=this.input_.disabled}},{key:"getDefaultFoundation",value:function(){var t=this;return new c.a(l({addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},addClassToLabel:function(e){var n=t.label_;n&&n.classList.add(e)},removeClassFromLabel:function(e){var n=t.label_;n&&n.classList.remove(e)}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_()))}},{key:"getInputAdapterMethods_",value:function(){var t=this;return{registerInputFocusHandler:function(e){return t.input_.addEventListener("focus",e)},registerInputBlurHandler:function(e){return t.input_.addEventListener("blur",e)},registerInputInputHandler:function(e){return t.input_.addEventListener("input",e)},registerInputKeydownHandler:function(e){return t.input_.addEventListener("keydown",e)},deregisterInputFocusHandler:function(e){return t.input_.removeEventListener("focus",e)},deregisterInputBlurHandler:function(e){return t.input_.removeEventListener("blur",e)},deregisterInputInputHandler:function(e){return t.input_.removeEventListener("input",e)},deregisterInputKeydownHandler:function(e){return t.input_.removeEventListener("keydown",e)},getNativeInput:function(){return t.input_}}}},{key:"getHelptextAdapterMethods_",value:function(){var t=this;return{addClassToHelptext:function(e){t.helptextElement&&t.helptextElement.classList.add(e)},removeClassFromHelptext:function(e){t.helptextElement&&t.helptextElement.classList.remove(e)},helptextHasClass:function(e){return!!t.helptextElement&&t.helptextElement.classList.contains(e)},setHelptextAttr:function(e,n){t.helptextElement&&t.helptextElement.setAttribute(e,n)},removeHelptextAttr:function(e){t.helptextElement&&t.helptextElement.removeAttribute(e)}}}},{key:"disabled",get:function(){return this.foundation_.isDisabled()},set:function(t){this.foundation_.setDisabled(t)}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(o.MDCComponent)},4:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCRipple",function(){return l});var o=n(1),s=n(6),u=n(3);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"util",function(){return u});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return r(e,t),c(e,[{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new s.a(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){var e=s.a.cssClasses.UNBOUNDED;this.unbounded_=Boolean(t),this.unbounded_?this.root_.classList.add(e):this.root_.classList.remove(e)}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){var e=u.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return u.supportsCssVariables(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[e](":active")},isSurfaceDisabled:function(){return t.disabled},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n,u.applyPassive())},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n,u.applyPassive())},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(o.MDCComponent)},5:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a}),n.d(e,"c",function(){return r});var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",BG_ACTIVE_FILL:"mdc-ripple-upgraded--background-active-fill",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_SURFACE_WIDTH:"--mdc-ripple-surface-width",VAR_SURFACE_HEIGHT:"--mdc-ripple-surface-height",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:300,FG_DEACTIVATION_MS:83}},6:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(1),s=n(5),u=n(3),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},p=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.xfDuration_=0,n.initialSize_=0,n.maxRadius_=0,n.listenerInfos_=[{activate:"touchstart",deactivate:"touchend"},{activate:"pointerdown",deactivate:"pointerup"},{activate:"mousedown",deactivate:"mouseup"},{activate:"keydown",deactivate:"keyup"},{focus:"focus",blur:"blur"}],n.listeners_={activate:function(t){return n.activate_(t)},deactivate:function(t){return n.deactivate_(t)},focus:function(){return requestAnimationFrame(function(){return n.adapter_.addClass(e.cssClasses.BG_FOCUSED)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n}return r(e,t),l(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"numbers",get:function(){return s.c}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),l(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null,isProgrammatic:!1}}},{key:"init",value:function(){var t=this;if(this.isSupported_){this.addEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(i),t.adapter_.isUnbounded()&&t.adapter_.addClass(a),t.layoutInternal_()})}}},{key:"addEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.registerInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"activate_",value:function(t){var e=this;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;n.isActivated||(n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type),n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive=!t||"keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}}},{key:"activate",value:function(){this.activate_(null)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.BG_ACTIVE_FILL,s=r.FG_DEACTIVATION,u=r.FG_ACTIVATION,c=e.numbers.DEACTIVATION_TIMEOUT_MS,l="",d="";if(!this.adapter_.isUnbounded()){var p=this.getFgTranslationCoordinates_(),f=p.startPoint,_=p.endPoint;l=f.x+"px, "+f.y+"px",d=_.x+"px, "+_.y+"px"}this.adapter_.updateCssVariable(i,l),this.adapter_.updateCssVariable(a,d),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(s),this.adapter_.computeBoundingRect(),this.adapter_.addClass(o),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},c)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,i=t.wasActivatedByPointer,a=void 0;return a=i?n.i(u.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},a={x:a.x-this.initialSize_/2,y:a.y-this.initialSize_/2},{startPoint:a,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=this,n=e.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,r=i.isActivated;(a||!r)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){t.adapter_.removeClass(n)},s.c.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses,n=t.BG_ACTIVE_FILL,i=t.FG_ACTIVATION;this.adapter_.removeClass(n),this.adapter_.removeClass(i),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){if(n.isProgrammatic){return requestAnimationFrame(function(){return e.animateDeactivation_(null,c({},n))}),void(this.activationState_=this.defaultActivationState_())}var i=d[t.type],a=n.activationEvent.type,r=i===a,o=r;n.wasActivatedByPointer&&(o="mouseup"===t.type);var s=c({},n);requestAnimationFrame(function(){r&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,s)),o&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){this.deactivate_(null)}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=e.cssClasses.BG_FOCUSED;(i||a)&&(this.adapter_.removeClass(r),this.runDeactivationUXLogicIfReady_())}},{key:"destroy",value:function(){var t=this;if(this.isSupported_){this.removeEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(i),t.adapter_.removeClass(a),t.removeCssVars_()})}}},{key:"removeEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.deregisterInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){this.frame_=this.adapter_.computeBoundingRect();var t=Math.max(this.frame_.height,this.frame_.width),n=Math.sqrt(Math.pow(this.frame_.width,2)+Math.pow(this.frame_.height,2));this.initialSize_=t*e.numbers.INITIAL_ORIGIN_SCALE,this.maxRadius_=n+e.numbers.PADDING,this.fgScale_=this.maxRadius_/this.initialSize_,this.xfDuration_=1e3*Math.sqrt(this.maxRadius_/1024),this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_SURFACE_WIDTH,i=t.VAR_SURFACE_HEIGHT,a=t.VAR_FG_SIZE,r=t.VAR_LEFT,o=t.VAR_TOP,s=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.frame_.width+"px"),this.adapter_.updateCssVariable(i,this.frame_.height+"px"),this.adapter_.updateCssVariable(a,this.initialSize_+"px"),this.adapter_.updateCssVariable(s,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(r,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(o,this.unboundedCoords_.top+"px"))}}]),e}(o.MDCFoundation);e.a=p},70:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(1),s=n(20),u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u(e.defaultAdapter,t)));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 r(e,t),c(e,null,[{key:"cssClasses",get:function(){return s.b}},{key:"strings",get:function(){return s.a}},{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{}}}}}]),c(e,[{key:"init",value:function(){this.adapter_.addClass(e.cssClasses.UPGRADED),this.adapter_.registerInputFocusHandler(this.inputFocusHandler_),this.adapter_.registerInputBlurHandler(this.inputBlurHandler_),this.adapter_.registerInputInputHandler(this.inputInputHandler_),this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_),this.getNativeInput_().value&&this.adapter_.addClassToLabel(e.cssClasses.LABEL_FLOAT_ABOVE)}},{key:"destroy",value:function(){this.adapter_.removeClass(e.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 t=e.cssClasses,n=t.FOCUSED,i=t.LABEL_FLOAT_ABOVE;this.adapter_.addClass(n),this.adapter_.addClassToLabel(i),this.showHelptext_()}},{key:"autoCompleteFocus_",value:function(){this.receivedUserInput_||this.activateFocus_()}},{key:"showHelptext_",value:function(){var t=e.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(t)}},{key:"deactivateFocus_",value:function(){var t=e.cssClasses,n=t.FOCUSED,i=t.INVALID,a=t.LABEL_FLOAT_ABOVE,r=this.getNativeInput_(),o=r.checkValidity();this.adapter_.removeClass(n),r.value||this.isBadInput_()||(this.adapter_.removeClassFromLabel(a),this.receivedUserInput_=!1),o?this.adapter_.removeClass(i):this.adapter_.addClass(i),this.updateHelptextOnDeactivation_(o)}},{key:"updateHelptextOnDeactivation_",value:function(t){var n=e.cssClasses,i=n.HELPTEXT_PERSISTENT,a=n.HELPTEXT_VALIDATION_MSG,r=e.strings.ROLE,o=this.adapter_.helptextHasClass(i),s=this.adapter_.helptextHasClass(a),u=s&&!t;u?this.adapter_.setHelptextAttr(r,"alert"):this.adapter_.removeHelptextAttr(r),o||u||this.hideHelptext_()}},{key:"hideHelptext_",value:function(){var t=e.strings.ARIA_HIDDEN;this.adapter_.setHelptextAttr(t,"true")}},{key:"isBadInput_",value:function(){var t=this.getNativeInput_();return t.validity?t.validity.badInput:t.badInput}},{key:"isDisabled",value:function(){return this.getNativeInput_().disabled}},{key:"setDisabled",value:function(t){var n=e.cssClasses.DISABLED;this.getNativeInput_().disabled=t,t?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1,badInput:!1}}}]),e}(o.MDCFoundation);e.a=l},93:function(t,e,n){t.exports=n(34)}})});

index.js

@@ -18,3 +18,5 @@ /**
 import {MDCComponent} from '@material/base';
+import {MDCRipple} from '@material/ripple';
 
+import {cssClasses, strings} from './constants';
 import MDCTextfieldFoundation from './foundation';
@@ -29,9 +31,22 @@
 
-  constructor(...args) {
-    super(...args);
-    const input = this.input_;
-    this.helptextElement = input.hasAttribute('aria-controls') ?
-      document.getElementById(input.getAttribute('aria-controls')) : null;
+  initialize(rippleFactory = (el) => new MDCRipple(el)) {
+    this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
+    this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR);
+    this.helptextElement = null;
+    this.ripple = null;
+    if (this.input_.hasAttribute('aria-controls')) {
+      this.helptextElement = document.getElementById(this.input_.getAttribute('aria-controls'));
+    }
+    if (this.root_.classList.contains(cssClasses.BOX)) {
+      this.ripple = rippleFactory(this.root_);
+    };
   }
 
+  destroy() {
+    if (this.ripple) {
+      this.ripple.destroy();
+    }
+    super.destroy();
+  }
+
   initialSyncWithDom() {
@@ -49,10 +64,2 @@ this.disabled = this.input_.disabled;
 
-  get input_() {
-    return this.root_.querySelector(MDCTextfieldFoundation.strings.INPUT_SELECTOR);
-  }
-
-  get label_() {
-    return this.root_.querySelector(MDCTextfieldFoundation.strings.LABEL_SELECTOR);
-  }
-
   getDefaultFoundation() {
@@ -59,0 +66,0 @@ return new MDCTextfieldFoundation(Object.assign({

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "license": "Apache-2.0",
@@ -18,4 +18,5 @@ "keywords": [
     "@material/animation": "^0.2.3",
-    "@material/base": "^0.2.0",
-    "@material/rtl": "^0.1.5",
+    "@material/base": "^0.2.1",
+    "@material/ripple": "^0.7.0",
+    "@material/rtl": "^0.1.6",
     "@material/theme": "^0.1.5",
@@ -22,0 +23,0 @@ "@material/typography": "^0.2.2"

README.md

@@ -113,3 +113,3 @@ <!--docs:
 
-Help text appears on input field focus and disappear on input field blur by default when using
+Help text appears on input field focus and disappears on input field blur by default when using
 the textfield JS component.
@@ -218,2 +218,27 @@
 
+Note that **full-width text fields do not support floating labels**. Labels should not be
+included as part of the DOM structure for full-width text fields.
+
+### Text Field Boxes
+
+```html
+<div class="mdc-textfield mdc-textfield--box">
+  <input type="text" id="tf-box" class="mdc-textfield__input">
+  <label for="tf-box" class="mdc-textfield__label">Your Name</label>
+  <div class="mdc-textfield__bottom-line"></div>
+</div>
+```
+
+Note that Text field boxes support all of the same features as normal textfields, including help
+text, validation, and dense UI.
+
+#### CSS-only text field boxes
+
+```html
+<label for="css-only-textfield-box">Your name:</label>
+<div class="mdc-textfield mdc-textfield--box">
+  <input type="text" class="mdc-textfield__input" id="css-only-textfield-box" placeholder="Name">
+</div>
+```
+
 ### Using the JS component
@@ -270,2 +295,19 @@
 
+#### Controlling ripple instantiation
+
+When `MDCTextfield` is instantiated with a root element containing the `mdc-textfield--box` class,
+it instantiates an `MDCRipple` instance on the element in order to facilitate the correct
+interaction UX for text field boxes as outlined in the spec. The way this ripple is instantiated
+can be controlled by passing a ripple factory argument to the constructor.
+
+```js
+const textfieldBoxEl = document.querySelector('.mdc-textfield--box');
+const textfield = new MDCTextfield(textfieldBoxEl, /* foundation */ undefined, (el) => {
+  // do something with el...
+  return new MDCRipple(el);
+});
+```
+
+By default the ripple factory simply calls `new MDCRipple(el)` and returns the result.
+
 #### MDCTextfield API
@@ -288,5 +330,10 @@
 
+##### MDCTextfield.ripple
+
+`MDCRipple` instance. Set to the `MDCRipple` instance for the root element that `MDCTextfield`
+initializes when given an `mdc-textfield--box` root element. Otherwise, the field is set to `null`.
+
 ### Using the foundation class
 
-Because MDC Textfield is a feature-rich and relatively complex component, it's adapter is a bit more
+Because MDC Textfield is a feature-rich and relatively complex component, its adapter is a bit more
 complicated.
@@ -293,0 +340,0 @@

No alert changes

Improved metrics

Total package byte prevSize

209418

increased by64.5%

Lines of code

2748

increased by62.22%

Number of lines in readme file

374

increased by14.37%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@material/ripple@^0.7.0

• + Added@material/ripple@0.7.0(transitive)

• Updated@material/base@^0.2.1

• Updated@material/rtl@^0.1.6