@material/textfield - npm Package Compare versions

Comparing version 0.24.0 to 0.25.0

adapter.js

@@ -31,6 +31,6 @@ /**
 /**
- * Adapter for MDC Textfield.
+ * Adapter for MDC Text Field.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Textfield into your framework. See
+ * adapter to integrate the Text Field into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
@@ -41,3 +41,3 @@ * for more information.
  */
-class MDCTextfieldAdapter {
+class MDCTextFieldAdapter {
   /**
@@ -100,3 +100,3 @@ * Adds a class to the root Element.
   /**
-   * Emits a custom event "MDCTextfield:icon" denoting a user has clicked the icon.
+   * Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon.
    */
@@ -197,2 +197,2 @@ notifyIconAction() {}
 
-export {MDCTextfieldAdapter, NativeInputType};
+export {MDCTextFieldAdapter, NativeInputType};

constants.js

@@ -22,7 +22,7 @@ /**
   ROLE: 'role',
-  INPUT_SELECTOR: '.mdc-textfield__input',
-  LABEL_SELECTOR: '.mdc-textfield__label',
-  ICON_SELECTOR: '.mdc-textfield__icon',
-  ICON_EVENT: 'MDCTextfield:icon',
-  BOTTOM_LINE_SELECTOR: '.mdc-textfield__bottom-line',
+  INPUT_SELECTOR: '.mdc-text-field__input',
+  LABEL_SELECTOR: '.mdc-text-field__label',
+  ICON_SELECTOR: '.mdc-text-field__icon',
+  ICON_EVENT: 'MDCTextField:icon',
+  BOTTOM_LINE_SELECTOR: '.mdc-text-field__bottom-line',
 };
@@ -32,17 +32,17 @@
 const cssClasses = {
-  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',
-  LABEL_SHAKE: 'mdc-textfield__label--shake',
-  BOX: 'mdc-textfield--box',
-  TEXT_FIELD_ICON: 'mdc-textfield__icon',
-  TEXTAREA: 'mdc-textfield--textarea',
-  BOTTOM_LINE_ACTIVE: 'mdc-textfield__bottom-line--active',
+  ROOT: 'mdc-text-field',
+  UPGRADED: 'mdc-text-field--upgraded',
+  DISABLED: 'mdc-text-field--disabled',
+  FOCUSED: 'mdc-text-field--focused',
+  INVALID: 'mdc-text-field--invalid',
+  HELPTEXT_PERSISTENT: 'mdc-text-field-helptext--persistent',
+  HELPTEXT_VALIDATION_MSG: 'mdc-text-field-helptext--validation-msg',
+  LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above',
+  LABEL_SHAKE: 'mdc-text-field__label--shake',
+  BOX: 'mdc-text-field--box',
+  TEXT_FIELD_ICON: 'mdc-text-field__icon',
+  TEXTAREA: 'mdc-text-field--textarea',
+  BOTTOM_LINE_ACTIVE: 'mdc-text-field__bottom-line--active',
 };
 
 export {cssClasses, strings};

dist/mdc.textfield.min.js

@@ -38,3 +38,3 @@ /*!
  */
-var i={ARIA_HIDDEN:"aria-hidden",ROLE:"role",INPUT_SELECTOR:".mdc-textfield__input",LABEL_SELECTOR:".mdc-textfield__label",ICON_SELECTOR:".mdc-textfield__icon",ICON_EVENT:"MDCTextfield:icon",BOTTOM_LINE_SELECTOR:".mdc-textfield__bottom-line"},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",LABEL_SHAKE:"mdc-textfield__label--shake",BOX:"mdc-textfield--box",TEXT_FIELD_ICON:"mdc-textfield__icon",TEXTAREA:"mdc-textfield--textarea",BOTTOM_LINE_ACTIVE:"mdc-textfield__bottom-line--active"}},23: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}}();!function(){function t(){i(this,t)}a(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"addClassToLabel",value:function(t){}},{key:"removeClassFromLabel",value:function(t){}},{key:"setIconAttr",value:function(t,e){}},{key:"eventTargetHasClass",value:function(t,e){}},{key:"registerTextFieldInteractionHandler",value:function(t,e){}},{key:"deregisterTextFieldInteractionHandler",value:function(t,e){}},{key:"notifyIconAction",value:function(){}},{key:"addClassToBottomLine",value:function(t){}},{key:"removeClassFromBottomLine",value:function(t){}},{key:"addClassToHelptext",value:function(t){}},{key:"removeClassFromHelptext",value:function(t){}},{key:"helptextHasClass",value:function(t){}},{key:"registerInputInteractionHandler",value:function(t,e){}},{key:"deregisterInputInteractionHandler",value:function(t,e){}},{key:"registerTransitionEndHandler",value:function(t){}},{key:"deregisterTransitionEndHandler",value:function(t){}},{key:"setBottomLineAttr",value:function(t,e){}},{key:"setHelptextAttr",value:function(t,e){}},{key:"removeHelptextAttr",value:function(t){}},{key:"getNativeInput",value:function(){}}])}()},3: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}}();!function(){function t(){i(this,t)}a(t,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"registerResizeHandler",value:function(t){}},{key:"deregisterResizeHandler",value:function(t){}},{key:"updateCssVariable",value:function(t,e){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},5: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(3),n(6)),u=n(2);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(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.disabled=!1,s.unbounded_,s}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.a),d=function t(){i(this,t)};d.prototype.root_,d.prototype.unbounded,d.prototype.disabled},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(0),s=(n(3),n(7)),u=n(2),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"},f=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,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.c}},{key:"numbers",get:function(){return s.b}},{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:"isSupported_",value:function(){return this.adapter_.browserSupportsCssVars()}},{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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.activate_(t)}},{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 f=this.getFgTranslationCoordinates_(),p=f.startPoint,_=f.endPoint;l=p.x+"px, "+p.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,n=t.wasActivatedByPointer,i=void 0;return i=n?Object(u.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2},{startPoint:i,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.b.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){var i=c({},n);return requestAnimationFrame(function(){return e.animateDeactivation_(null,i)}),void(this.activationState_=this.defaultActivationState_())}var a=d[t.type],r=n.activationEvent.type,o=a===r,s=o;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=c({},n);requestAnimationFrame(function(){o&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,u)),s&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.deactivate_(t)}},{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_FG_SIZE,i=t.VAR_LEFT,a=t.VAR_TOP,r=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,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(i,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(a,this.unboundedCoords_.top+"px"))}}]),e}(o.a);e.a=f},7:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"c",function(){return a}),n.d(e,"b",function(){return r});/**
+var i={ARIA_HIDDEN:"aria-hidden",ROLE:"role",INPUT_SELECTOR:".mdc-text-field__input",LABEL_SELECTOR:".mdc-text-field__label",ICON_SELECTOR:".mdc-text-field__icon",ICON_EVENT:"MDCTextField:icon",BOTTOM_LINE_SELECTOR:".mdc-text-field__bottom-line"},a={ROOT:"mdc-text-field",UPGRADED:"mdc-text-field--upgraded",DISABLED:"mdc-text-field--disabled",FOCUSED:"mdc-text-field--focused",INVALID:"mdc-text-field--invalid",HELPTEXT_PERSISTENT:"mdc-text-field-helptext--persistent",HELPTEXT_VALIDATION_MSG:"mdc-text-field-helptext--validation-msg",LABEL_FLOAT_ABOVE:"mdc-text-field__label--float-above",LABEL_SHAKE:"mdc-text-field__label--shake",BOX:"mdc-text-field--box",TEXT_FIELD_ICON:"mdc-text-field__icon",TEXTAREA:"mdc-text-field--textarea",BOTTOM_LINE_ACTIVE:"mdc-text-field__bottom-line--active"}},23: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}}();!function(){function t(){i(this,t)}a(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"addClassToLabel",value:function(t){}},{key:"removeClassFromLabel",value:function(t){}},{key:"setIconAttr",value:function(t,e){}},{key:"eventTargetHasClass",value:function(t,e){}},{key:"registerTextFieldInteractionHandler",value:function(t,e){}},{key:"deregisterTextFieldInteractionHandler",value:function(t,e){}},{key:"notifyIconAction",value:function(){}},{key:"addClassToBottomLine",value:function(t){}},{key:"removeClassFromBottomLine",value:function(t){}},{key:"addClassToHelptext",value:function(t){}},{key:"removeClassFromHelptext",value:function(t){}},{key:"helptextHasClass",value:function(t){}},{key:"registerInputInteractionHandler",value:function(t,e){}},{key:"deregisterInputInteractionHandler",value:function(t,e){}},{key:"registerTransitionEndHandler",value:function(t){}},{key:"deregisterTransitionEndHandler",value:function(t){}},{key:"setBottomLineAttr",value:function(t,e){}},{key:"setHelptextAttr",value:function(t,e){}},{key:"removeHelptextAttr",value:function(t){}},{key:"getNativeInput",value:function(){}}])}()},3: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}}();!function(){function t(){i(this,t)}a(t,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"registerResizeHandler",value:function(t){}},{key:"deregisterResizeHandler",value:function(t){}},{key:"updateCssVariable",value:function(t,e){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},5: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(3),n(6)),u=n(2);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(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.disabled=!1,s.unbounded_,s}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.a),d=function t(){i(this,t)};d.prototype.root_,d.prototype.unbounded,d.prototype.disabled},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(0),s=(n(3),n(7)),u=n(2),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"},f=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,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.c}},{key:"numbers",get:function(){return s.b}},{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:"isSupported_",value:function(){return this.adapter_.browserSupportsCssVars()}},{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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.activate_(t)}},{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 f=this.getFgTranslationCoordinates_(),p=f.startPoint,v=f.endPoint;l=p.x+"px, "+p.y+"px",d=v.x+"px, "+v.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,n=t.wasActivatedByPointer,i=void 0;return i=n?Object(u.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2},{startPoint:i,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.b.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){var i=c({},n);return requestAnimationFrame(function(){return e.animateDeactivation_(null,i)}),void(this.activationState_=this.defaultActivationState_())}var a=d[t.type],r=n.activationEvent.type,o=a===r,s=o;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=c({},n);requestAnimationFrame(function(){o&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,u)),s&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.deactivate_(t)}},{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_FG_SIZE,i=t.VAR_LEFT,a=t.VAR_TOP,r=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,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(i,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(a,this.unboundedCoords_.top+"px"))}}]),e}(o.a);e.a=f},7:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"c",function(){return a}),n.d(e,"b",function(){return r});/**
  * @license
@@ -55,2 +55,2 @@ * Copyright 2016 Google Inc. All Rights Reserved.
  */
-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_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}},95:function(t,e,n){t.exports=n(96)},96: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 p});var o=n(1),s=n(5),u=n(22),c=(n(23),n(97));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}}(),f=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)},p=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.input_,s.label_,s.helptextElement,s.ripple,s.bottomLine_,s.icon_,s}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.b.INPUT_SELECTOR),this.label_=this.root_.querySelector(u.b.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.a.BOX)&&(this.ripple=t(this.root_)),this.root_.classList.contains(u.a.TEXTAREA)||(this.bottomLine_=this.root_.querySelector(u.b.BOTTOM_LINE_SELECTOR)),this.root_.classList.contains(u.a.TEXT_FIELD_ICON)||(this.icon_=this.root_.querySelector(u.b.ICON_SELECTOR))}},{key:"destroy",value:function(){this.ripple&&this.ripple.destroy(),f(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)},eventTargetHasClass:function(t,e){return t.classList.contains(e)},registerTextFieldInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterTextFieldInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},notifyIconAction:function(){return t.emit(c.a.strings.ICON_EVENT,{})}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_(),this.getBottomLineAdapterMethods_(),this.getIconAdapterMethods_()))}},{key:"getIconAdapterMethods_",value:function(){var t=this;return{setIconAttr:function(e,n){t.icon_&&t.icon_.setAttribute(e,n)}}}},{key:"getBottomLineAdapterMethods_",value:function(){var t=this;return{addClassToBottomLine:function(e){t.bottomLine_&&t.bottomLine_.classList.add(e)},removeClassFromBottomLine:function(e){t.bottomLine_&&t.bottomLine_.classList.remove(e)},setBottomLineAttr:function(e,n){t.bottomLine_&&t.bottomLine_.setAttribute(e,n)},registerTransitionEndHandler:function(e){t.bottomLine_&&t.bottomLine_.addEventListener("transitionend",e)},deregisterTransitionEndHandler:function(e){t.bottomLine_&&t.bottomLine_.removeEventListener("transitionend",e)}}}},{key:"getInputAdapterMethods_",value:function(){var t=this;return{registerInputInteractionHandler:function(e,n){return t.input_.addEventListener(e,n)},deregisterInputInteractionHandler:function(e,n){return t.input_.removeEventListener(e,n)},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:"valid",set:function(t){this.foundation_.setValid(t)}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(o.a)},97: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(0),s=(n(23),n(22)),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.isFocused_=!1,n.receivedUserInput_=!1,n.useCustomValidityChecking_=!1,n.inputFocusHandler_=function(){return n.activateFocus_()},n.inputBlurHandler_=function(){return n.deactivateFocus_()},n.inputInputHandler_=function(){return n.autoCompleteFocus_()},n.setPointerXOffset_=function(t){return n.setBottomLineTransformOrigin_(t)},n.textFieldInteractionHandler_=function(t){return n.handleTextFieldInteraction_(t)},n.transitionEndHandler_=function(t){return n.transitionEnd_(t)},n}return r(e,t),c(e,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},addClassToLabel:function(){},removeClassFromLabel:function(){},setIconAttr:function(){},eventTargetHasClass:function(){},registerTextFieldInteractionHandler:function(){},deregisterTextFieldInteractionHandler:function(){},notifyIconAction:function(){},addClassToBottomLine:function(){},removeClassFromBottomLine:function(){},addClassToHelptext:function(){},removeClassFromHelptext:function(){},helptextHasClass:function(){return!1},registerInputInteractionHandler:function(){},deregisterInputInteractionHandler:function(){},registerTransitionEndHandler:function(){},deregisterTransitionEndHandler:function(){},setBottomLineAttr:function(){},setHelptextAttr:function(){},removeHelptextAttr:function(){},getNativeInput:function(){}}}}]),c(e,[{key:"init",value:function(){var t=this;this.adapter_.addClass(e.cssClasses.UPGRADED),this.getNativeInput_().value&&this.adapter_.addClassToLabel(e.cssClasses.LABEL_FLOAT_ABOVE),this.adapter_.registerInputInteractionHandler("focus",this.inputFocusHandler_),this.adapter_.registerInputInteractionHandler("blur",this.inputBlurHandler_),this.adapter_.registerInputInteractionHandler("input",this.inputInputHandler_),["mousedown","touchstart"].forEach(function(e){t.adapter_.registerInputInteractionHandler(e,t.setPointerXOffset_)}),["click","keydown"].forEach(function(e){t.adapter_.registerTextFieldInteractionHandler(e,t.textFieldInteractionHandler_)}),this.adapter_.registerTransitionEndHandler(this.transitionEndHandler_)}},{key:"destroy",value:function(){var t=this;this.adapter_.removeClass(e.cssClasses.UPGRADED),this.adapter_.deregisterInputInteractionHandler("focus",this.inputFocusHandler_),this.adapter_.deregisterInputInteractionHandler("blur",this.inputBlurHandler_),this.adapter_.deregisterInputInteractionHandler("input",this.inputInputHandler_),["mousedown","touchstart"].forEach(function(e){t.adapter_.deregisterInputInteractionHandler(e,t.setPointerXOffset_)}),["click","keydown"].forEach(function(e){t.adapter_.deregisterTextFieldInteractionHandler(e,t.textFieldInteractionHandler_)}),this.adapter_.deregisterTransitionEndHandler(this.transitionEndHandler_)}},{key:"handleTextFieldInteraction_",value:function(t){if(!this.adapter_.getNativeInput().disabled){this.receivedUserInput_=!0;var n=t.target,i=t.type,a=e.cssClasses.TEXT_FIELD_ICON,r=this.adapter_.eventTargetHasClass(n,a),o="click"===i||"Enter"===t.key||13===t.keyCode;r&&o&&this.adapter_.notifyIconAction()}}},{key:"activateFocus_",value:function(){var t=e.cssClasses,n=t.BOTTOM_LINE_ACTIVE,i=t.FOCUSED,a=t.LABEL_FLOAT_ABOVE,r=t.LABEL_SHAKE;this.adapter_.addClass(i),this.adapter_.addClassToBottomLine(n),this.adapter_.addClassToLabel(a),this.adapter_.removeClassFromLabel(r),this.showHelptext_(),this.isFocused_=!0}},{key:"setBottomLineTransformOrigin_",value:function(t){var e=t.target.getBoundingClientRect(),n={x:t.clientX,y:t.clientY},i=n.x-e.left,a="transform-origin: "+i+"px center";this.adapter_.setBottomLineAttr("style",a)}},{key:"autoCompleteFocus_",value:function(){this.receivedUserInput_||this.activateFocus_()}},{key:"showHelptext_",value:function(){var t=e.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(t)}},{key:"transitionEnd_",value:function(t){var n=e.cssClasses.BOTTOM_LINE_ACTIVE;"opacity"!==t.propertyName||this.isFocused_||this.adapter_.removeClassFromBottomLine(n)}},{key:"deactivateFocus_",value:function(){var t=e.cssClasses,n=t.FOCUSED,i=t.LABEL_FLOAT_ABOVE,a=t.LABEL_SHAKE,r=this.getNativeInput_();this.isFocused_=!1,this.adapter_.removeClass(n),this.adapter_.removeClassFromLabel(a),r.value||this.isBadInput_()||(this.adapter_.removeClassFromLabel(i),this.receivedUserInput_=!1),this.useCustomValidityChecking_||this.changeValidity_(r.checkValidity())}},{key:"changeValidity_",value:function(t){var n=e.cssClasses,i=n.INVALID,a=n.LABEL_SHAKE;t?this.adapter_.removeClass(i):(this.adapter_.addClassToLabel(a),this.adapter_.addClass(i)),this.updateHelptext_(t)}},{key:"updateHelptext_",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_.setIconAttr("tabindex","-1")):(this.adapter_.removeClass(n),this.adapter_.setIconAttr("tabindex","0"))}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1,badInput:!1}}},{key:"setValid",value:function(t){this.useCustomValidityChecking_=!0,this.changeValidity_(t)}}]),e}(o.a);e.a=l}})});
+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_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}},95:function(t,e,n){t.exports=n(96)},96: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 p});var o=n(1),s=n(5),u=n(22),c=(n(23),n(97));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}}(),f=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)},p=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.input_,s.label_,s.helptextElement,s.ripple,s.bottomLine_,s.icon_,s}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.b.INPUT_SELECTOR),this.label_=this.root_.querySelector(u.b.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.a.BOX)&&(this.ripple=t(this.root_)),this.root_.classList.contains(u.a.TEXTAREA)||(this.bottomLine_=this.root_.querySelector(u.b.BOTTOM_LINE_SELECTOR)),this.root_.classList.contains(u.a.TEXT_FIELD_ICON)||(this.icon_=this.root_.querySelector(u.b.ICON_SELECTOR))}},{key:"destroy",value:function(){this.ripple&&this.ripple.destroy(),f(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)},eventTargetHasClass:function(t,e){return t.classList.contains(e)},registerTextFieldInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterTextFieldInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},notifyIconAction:function(){return t.emit(c.a.strings.ICON_EVENT,{})}},this.getInputAdapterMethods_(),this.getHelptextAdapterMethods_(),this.getBottomLineAdapterMethods_(),this.getIconAdapterMethods_()))}},{key:"getIconAdapterMethods_",value:function(){var t=this;return{setIconAttr:function(e,n){t.icon_&&t.icon_.setAttribute(e,n)}}}},{key:"getBottomLineAdapterMethods_",value:function(){var t=this;return{addClassToBottomLine:function(e){t.bottomLine_&&t.bottomLine_.classList.add(e)},removeClassFromBottomLine:function(e){t.bottomLine_&&t.bottomLine_.classList.remove(e)},setBottomLineAttr:function(e,n){t.bottomLine_&&t.bottomLine_.setAttribute(e,n)},registerTransitionEndHandler:function(e){t.bottomLine_&&t.bottomLine_.addEventListener("transitionend",e)},deregisterTransitionEndHandler:function(e){t.bottomLine_&&t.bottomLine_.removeEventListener("transitionend",e)}}}},{key:"getInputAdapterMethods_",value:function(){var t=this;return{registerInputInteractionHandler:function(e,n){return t.input_.addEventListener(e,n)},deregisterInputInteractionHandler:function(e,n){return t.input_.removeEventListener(e,n)},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:"valid",set:function(t){this.foundation_.setValid(t)}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(o.a)},97: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(0),s=(n(23),n(22)),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.isFocused_=!1,n.receivedUserInput_=!1,n.useCustomValidityChecking_=!1,n.inputFocusHandler_=function(){return n.activateFocus()},n.inputBlurHandler_=function(){return n.deactivateFocus()},n.inputInputHandler_=function(){return n.autoCompleteFocus()},n.setPointerXOffset_=function(t){return n.animateBottomLine(t)},n.textFieldInteractionHandler_=function(t){return n.handleTextFieldInteraction(t)},n.transitionEndHandler_=function(t){return n.handleBottomLineAnimationEnd(t)},n}return r(e,t),c(e,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},addClassToLabel:function(){},removeClassFromLabel:function(){},setIconAttr:function(){},eventTargetHasClass:function(){},registerTextFieldInteractionHandler:function(){},deregisterTextFieldInteractionHandler:function(){},notifyIconAction:function(){},addClassToBottomLine:function(){},removeClassFromBottomLine:function(){},addClassToHelptext:function(){},removeClassFromHelptext:function(){},helptextHasClass:function(){return!1},registerInputInteractionHandler:function(){},deregisterInputInteractionHandler:function(){},registerTransitionEndHandler:function(){},deregisterTransitionEndHandler:function(){},setBottomLineAttr:function(){},setHelptextAttr:function(){},removeHelptextAttr:function(){},getNativeInput:function(){}}}}]),c(e,[{key:"init",value:function(){var t=this;this.adapter_.addClass(e.cssClasses.UPGRADED),this.getNativeInput_().value&&this.adapter_.addClassToLabel(e.cssClasses.LABEL_FLOAT_ABOVE),this.adapter_.registerInputInteractionHandler("focus",this.inputFocusHandler_),this.adapter_.registerInputInteractionHandler("blur",this.inputBlurHandler_),this.adapter_.registerInputInteractionHandler("input",this.inputInputHandler_),["mousedown","touchstart"].forEach(function(e){t.adapter_.registerInputInteractionHandler(e,t.setPointerXOffset_)}),["click","keydown"].forEach(function(e){t.adapter_.registerTextFieldInteractionHandler(e,t.textFieldInteractionHandler_)}),this.adapter_.registerTransitionEndHandler(this.transitionEndHandler_)}},{key:"destroy",value:function(){var t=this;this.adapter_.removeClass(e.cssClasses.UPGRADED),this.adapter_.deregisterInputInteractionHandler("focus",this.inputFocusHandler_),this.adapter_.deregisterInputInteractionHandler("blur",this.inputBlurHandler_),this.adapter_.deregisterInputInteractionHandler("input",this.inputInputHandler_),["mousedown","touchstart"].forEach(function(e){t.adapter_.deregisterInputInteractionHandler(e,t.setPointerXOffset_)}),["click","keydown"].forEach(function(e){t.adapter_.deregisterTextFieldInteractionHandler(e,t.textFieldInteractionHandler_)}),this.adapter_.deregisterTransitionEndHandler(this.transitionEndHandler_)}},{key:"handleTextFieldInteraction",value:function(t){if(!this.adapter_.getNativeInput().disabled){this.receivedUserInput_=!0;var n=t.target,i=t.type,a=e.cssClasses.TEXT_FIELD_ICON,r=this.adapter_.eventTargetHasClass(n,a),o="click"===i||"Enter"===t.key||13===t.keyCode;r&&o&&this.adapter_.notifyIconAction()}}},{key:"activateFocus",value:function(){var t=e.cssClasses,n=t.BOTTOM_LINE_ACTIVE,i=t.FOCUSED,a=t.LABEL_FLOAT_ABOVE,r=t.LABEL_SHAKE;this.adapter_.addClass(i),this.adapter_.addClassToBottomLine(n),this.adapter_.addClassToLabel(a),this.adapter_.removeClassFromLabel(r),this.showHelptext_(),this.isFocused_=!0}},{key:"animateBottomLine",value:function(t){var e=t.target.getBoundingClientRect(),n={x:t.clientX,y:t.clientY},i=n.x-e.left,a="transform-origin: "+i+"px center";this.adapter_.setBottomLineAttr("style",a)}},{key:"autoCompleteFocus",value:function(){this.receivedUserInput_||this.activateFocus()}},{key:"showHelptext_",value:function(){var t=e.strings.ARIA_HIDDEN;this.adapter_.removeHelptextAttr(t)}},{key:"handleBottomLineAnimationEnd",value:function(t){var n=e.cssClasses.BOTTOM_LINE_ACTIVE;"opacity"!==t.propertyName||this.isFocused_||this.adapter_.removeClassFromBottomLine(n)}},{key:"deactivateFocus",value:function(){var t=e.cssClasses,n=t.FOCUSED,i=t.LABEL_FLOAT_ABOVE,a=t.LABEL_SHAKE,r=this.getNativeInput_();this.isFocused_=!1,this.adapter_.removeClass(n),this.adapter_.removeClassFromLabel(a),r.value||this.isBadInput_()||(this.adapter_.removeClassFromLabel(i),this.receivedUserInput_=!1),this.useCustomValidityChecking_||this.changeValidity_(r.checkValidity())}},{key:"changeValidity_",value:function(t){var n=e.cssClasses,i=n.INVALID,a=n.LABEL_SHAKE;t?this.adapter_.removeClass(i):(this.adapter_.addClassToLabel(a),this.adapter_.addClass(i)),this.updateHelptext_(t)}},{key:"updateHelptext_",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_.setIconAttr("tabindex","-1")):(this.adapter_.removeClass(n),this.adapter_.setIconAttr("tabindex","0"))}},{key:"getNativeInput_",value:function(){return this.adapter_.getNativeInput()||{checkValidity:function(){return!0},value:"",disabled:!1,badInput:!1}}},{key:"setValid",value:function(t){this.useCustomValidityChecking_=!0,this.changeValidity_(t)}}]),e}(o.a);e.a=l}})});

foundation.js

@@ -19,3 +19,3 @@ /**
 import MDCFoundation from '@material/base/foundation';
-import {MDCTextfieldAdapter, NativeInputType} from './adapter';
+import {MDCTextFieldAdapter, NativeInputType} from './adapter';
 import {cssClasses, strings} from './constants';
@@ -25,6 +25,6 @@
 /**
- * @extends {MDCFoundation<!MDCTextfieldAdapter>}
+ * @extends {MDCFoundation<!MDCTextFieldAdapter>}
  * @final
  */
-class MDCTextfieldFoundation extends MDCFoundation {
+class MDCTextFieldFoundation extends MDCFoundation {
   /** @return enum {string} */
@@ -41,8 +41,8 @@ static get cssClasses() {
   /**
-   * {@see MDCTextfieldAdapter} for typing information on parameters and return
+   * {@see MDCTextFieldAdapter} for typing information on parameters and return
    * types.
-   * @return {!MDCTextfieldAdapter}
+   * @return {!MDCTextFieldAdapter}
    */
   static get defaultAdapter() {
-    return /** @type {!MDCTextfieldAdapter} */ ({
+    return /** @type {!MDCTextFieldAdapter} */ ({
       addClass: () => {},
@@ -74,6 +74,6 @@ removeClass: () => {},
   /**
-   * @param {!MDCTextfieldAdapter=} adapter
+   * @param {!MDCTextFieldAdapter=} adapter
    */
-  constructor(adapter = /** @type {!MDCTextfieldAdapter} */ ({})) {
-    super(Object.assign(MDCTextfieldFoundation.defaultAdapter, adapter));
+  constructor(adapter = /** @type {!MDCTextFieldAdapter} */ ({})) {
+    super(Object.assign(MDCTextFieldFoundation.defaultAdapter, adapter));
 
@@ -87,20 +87,20 @@ /** @private {boolean} */
     /** @private {function(): undefined} */
-    this.inputFocusHandler_ = () => this.activateFocus_();
+    this.inputFocusHandler_ = () => this.activateFocus();
     /** @private {function(): undefined} */
-    this.inputBlurHandler_ = () => this.deactivateFocus_();
+    this.inputBlurHandler_ = () => this.deactivateFocus();
     /** @private {function(): undefined} */
-    this.inputInputHandler_ = () => this.autoCompleteFocus_();
+    this.inputInputHandler_ = () => this.autoCompleteFocus();
     /** @private {function(!Event): undefined} */
-    this.setPointerXOffset_ = (evt) => this.setBottomLineTransformOrigin_(evt);
+    this.setPointerXOffset_ = (evt) => this.animateBottomLine(evt);
     /** @private {function(!Event): undefined} */
-    this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction_(evt);
+    this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction(evt);
     /** @private {function(!Event): undefined} */
-    this.transitionEndHandler_ = (evt) => this.transitionEnd_(evt);
+    this.transitionEndHandler_ = (evt) => this.handleBottomLineAnimationEnd(evt);
   }
 
   init() {
-    this.adapter_.addClass(MDCTextfieldFoundation.cssClasses.UPGRADED);
+    this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
     if (this.getNativeInput_().value) {
-      this.adapter_.addClassToLabel(MDCTextfieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
+      this.adapter_.addClassToLabel(MDCTextFieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
     }
@@ -121,3 +121,3 @@
   destroy() {
-    this.adapter_.removeClass(MDCTextfieldFoundation.cssClasses.UPGRADED);
+    this.adapter_.removeClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     this.adapter_.deregisterInputInteractionHandler('focus', this.inputFocusHandler_);
@@ -136,7 +136,6 @@ this.adapter_.deregisterInputInteractionHandler('blur', this.inputBlurHandler_);
   /**
-   * Handles all user interactions with the Textfield.
+   * Handles all user interactions with the Text Field.
    * @param {!Event} evt
-   * @private
    */
-  handleTextFieldInteraction_(evt) {
+  handleTextFieldInteraction(evt) {
     if (this.adapter_.getNativeInput().disabled) {
@@ -149,3 +148,3 @@ return;
     const {target, type} = evt;
-    const {TEXT_FIELD_ICON} = MDCTextfieldFoundation.cssClasses;
+    const {TEXT_FIELD_ICON} = MDCTextFieldFoundation.cssClasses;
     const targetIsIcon = this.adapter_.eventTargetHasClass(target, TEXT_FIELD_ICON);
@@ -161,6 +160,5 @@ const eventTriggersNotification = type === 'click' || evt.key === 'Enter' || evt.keyCode === 13;
    * Activates the text field focus state.
-   * @private
    */
-  activateFocus_() {
-    const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+  activateFocus() {
+    const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldFoundation.cssClasses;
     this.adapter_.addClass(FOCUSED);
@@ -175,8 +173,6 @@ this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE);
   /**
-   * Sets the transform-origin of the bottom line, causing it to animate out
-   * from the user's click location.
+   * Animates the bottom line out from the user's click location.
    * @param {!Event} evt
-   * @private
    */
-  setBottomLineTransformOrigin_(evt) {
+  animateBottomLine(evt) {
     const targetClientRect = evt.target.getBoundingClientRect();
@@ -192,9 +188,8 @@ const evtCoords = {x: evt.clientX, y: evt.clientY};
   /**
-   * Activates the Textfield's focus state in cases when the input value
+   * Activates the Text Field's focus state in cases when the input value
    * changes without user input (e.g. programatically).
-   * @private
    */
-  autoCompleteFocus_() {
+  autoCompleteFocus() {
     if (!this.receivedUserInput_) {
-      this.activateFocus_();
+      this.activateFocus();
     }
@@ -208,3 +203,3 @@ }
   showHelptext_() {
-    const {ARIA_HIDDEN} = MDCTextfieldFoundation.strings;
+    const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings;
     this.adapter_.removeHelptextAttr(ARIA_HIDDEN);
@@ -214,9 +209,8 @@ }
   /**
-   * Fires when animation transition ends, performing actions that must wait
-   * for animations to finish.
+   * Executes when the bottom line's transition animation ends, performing
+   * actions that must wait for animations to finish.
    * @param {!Event} evt
-   * @private
    */
-  transitionEnd_(evt) {
-    const {BOTTOM_LINE_ACTIVE} = MDCTextfieldFoundation.cssClasses;
+  handleBottomLineAnimationEnd(evt) {
+    const {BOTTOM_LINE_ACTIVE} = MDCTextFieldFoundation.cssClasses;
 
@@ -232,7 +226,6 @@ // We need to wait for the bottom line to be entirely transparent
   /**
-   * Deactives the Textfield's focus state.
-   * @private
+   * Deactives the Text Field's focus state.
    */
-  deactivateFocus_() {
-    const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+  deactivateFocus() {
+    const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldFoundation.cssClasses;
     const input = this.getNativeInput_();
@@ -255,3 +248,3 @@
   /**
-   * Updates the Textfield's valid state based on the supplied validity.
+   * Updates the Text Field's valid state based on the supplied validity.
    * @param {boolean} isValid
@@ -261,3 +254,3 @@ * @private
   changeValidity_(isValid) {
-    const {INVALID, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
+    const {INVALID, LABEL_SHAKE} = MDCTextFieldFoundation.cssClasses;
     if (isValid) {
@@ -273,9 +266,9 @@ this.adapter_.removeClass(INVALID);
   /**
-   * Updates the state of the Textfield's help text based on validity and
-   * the Textfield's options.
+   * Updates the state of the Text Field's help text based on validity and
+   * the Text Field's options.
    * @param {boolean} isValid
    */
   updateHelptext_(isValid) {
-    const {HELPTEXT_PERSISTENT, HELPTEXT_VALIDATION_MSG} = MDCTextfieldFoundation.cssClasses;
-    const {ROLE} = MDCTextfieldFoundation.strings;
+    const {HELPTEXT_PERSISTENT, HELPTEXT_VALIDATION_MSG} = MDCTextFieldFoundation.cssClasses;
+    const {ROLE} = MDCTextFieldFoundation.strings;
     const helptextIsPersistent = this.adapter_.helptextHasClass(HELPTEXT_PERSISTENT);
@@ -302,3 +295,3 @@ const helptextIsValidationMsg = this.adapter_.helptextHasClass(HELPTEXT_VALIDATION_MSG);
   hideHelptext_() {
-    const {ARIA_HIDDEN} = MDCTextfieldFoundation.strings;
+    const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings;
     this.adapter_.setHelptextAttr(ARIA_HIDDEN, 'true');
@@ -308,3 +301,3 @@ }
   /**
-   * @return {boolean} True if the Textfield input fails validity checks.
+   * @return {boolean} True if the Text Field input fails validity checks.
    * @private
@@ -318,3 +311,3 @@ */
   /**
-   * @return {boolean} True if the Textfield is disabled.
+   * @return {boolean} True if the Text Field is disabled.
    */
@@ -326,6 +319,6 @@ isDisabled() {
   /**
-   * @param {boolean} disabled Sets the textfield disabled or enabled.
+   * @param {boolean} disabled Sets the text-field disabled or enabled.
    */
   setDisabled(disabled) {
-    const {DISABLED} = MDCTextfieldFoundation.cssClasses;
+    const {DISABLED} = MDCTextFieldFoundation.cssClasses;
     this.getNativeInput_().disabled = disabled;
@@ -357,3 +350,3 @@ if (disabled) {
   /**
-   * @param {boolean} isValid Sets the validity state of the Textfield.
+   * @param {boolean} isValid Sets the validity state of the Text Field.
    */
@@ -366,2 +359,2 @@ setValid(isValid) {
 
-export default MDCTextfieldFoundation;
+export default MDCTextFieldFoundation;

index.js

@@ -22,10 +22,10 @@ /**
 import {cssClasses, strings} from './constants';
-import {MDCTextfieldAdapter} from './adapter';
-import MDCTextfieldFoundation from './foundation';
+import {MDCTextFieldAdapter} from './adapter';
+import MDCTextFieldFoundation from './foundation';
 
 /**
- * @extends {MDCComponent<!MDCTextfieldFoundation>}
+ * @extends {MDCComponent<!MDCTextFieldFoundation>}
  * @final
  */
-class MDCTextfield extends MDCComponent {
+class MDCTextField extends MDCComponent {
   /**
@@ -52,6 +52,6 @@ * @param {...?} args
    * @param {!Element} root
-   * @return {!MDCTextfield}
+   * @return {!MDCTextField}
    */
   static attachTo(root) {
-    return new MDCTextfield(root);
+    return new MDCTextField(root);
   }
@@ -90,3 +90,3 @@
   /**
-   * Initiliazes the Textfield's internal state based on the environment's
+   * Initiliazes the Text Field's internal state based on the environment's
    * state.
@@ -99,3 +99,3 @@ */
   /**
-   * @return {boolean} True if the Textfield is disabled.
+   * @return {boolean} True if the Text Field is disabled.
    */
@@ -107,3 +107,3 @@ get disabled() {
   /**
-   * @param {boolean} disabled Sets the Textfield disabled or enabled.
+   * @param {boolean} disabled Sets the Text Field disabled or enabled.
    */
@@ -115,3 +115,3 @@ set disabled(disabled) {
   /**
-   * @param {boolean} valid Sets the Textfield valid or invalid.
+   * @param {boolean} valid Sets the Text Field valid or invalid.
    */
@@ -123,6 +123,6 @@ set valid(valid) {
   /**
-   * @return {!MDCTextfieldFoundation}
+   * @return {!MDCTextFieldFoundation}
    */
   getDefaultFoundation() {
-    return new MDCTextfieldFoundation(/** @type {!MDCTextfieldAdapter} */ (Object.assign({
+    return new MDCTextFieldFoundation(/** @type {!MDCTextFieldAdapter} */ (Object.assign({
       addClass: (className) => this.root_.classList.add(className),
@@ -145,3 +145,3 @@ removeClass: (className) => this.root_.classList.remove(className),
       deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
-      notifyIconAction: () => this.emit(MDCTextfieldFoundation.strings.ICON_EVENT, {}),
+      notifyIconAction: () => this.emit(MDCTextFieldFoundation.strings.ICON_EVENT, {}),
     },
@@ -264,2 +264,2 @@ this.getInputAdapterMethods_(),
 
-export {MDCTextfield, MDCTextfieldFoundation};
+export {MDCTextField, MDCTextFieldFoundation};

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "license": "Apache-2.0",
@@ -9,3 +9,4 @@ "keywords": [
     "material design",
-    "textfield"
+    "textfield",
+    "text field"
   ],
@@ -18,9 +19,9 @@ "main": "index.js",
   "dependencies": {
-    "@material/animation": "^0.4.1",
+    "@material/animation": "^0.25.0",
     "@material/base": "^0.24.0",
-    "@material/ripple": "^0.24.0",
+    "@material/ripple": "^0.25.0",
     "@material/rtl": "^0.1.8",
-    "@material/theme": "^0.24.0",
+    "@material/theme": "^0.25.0",
     "@material/typography": "^0.3.0"
   }
 }

README.md

@@ -13,4 +13,4 @@ <!--docs:
   <a class="article__asset-link"
-     href="https://material-components-web.appspot.com/textfield.html">
-    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/textfields.png" width="240" alt="Text fields screenshot">
+     href="https://material-components-web.appspot.com/text-field.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/text-fields.png" width="240" alt="Text fields screenshot">
   </a>
@@ -30,3 +30,3 @@ </div>-->
   <li class="icon-list-item icon-list-item--link">
-    <a href="https://material-components-web.appspot.com/textfield.html">Demo</a>
+    <a href="https://material-components-web.appspot.com/text-field.html">Demo</a>
   </li>
@@ -46,6 +46,6 @@ </ul>
 ```html
-<div class="mdc-textfield">
-  <input type="text" id="my-textfield" class="mdc-textfield__input">
-  <label class="mdc-textfield__label" for="my-textfield">Hint text</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field">
+  <input type="text" id="my-text-field" class="mdc-text-field__input">
+  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -57,11 +57,11 @@ ```
 ```html
-<label class="mdc-textfield">
-  <input type="text" class="mdc-textfield__input">
-  <span class="mdc-textfield__label">Hint Text</span>
-  <div class="mdc-textfield__bottom-line"></div>
+<label class="mdc-text-field">
+  <input type="text" class="mdc-text-field__input">
+  <span class="mdc-text-field__label">Hint Text</span>
+  <div class="mdc-text-field__bottom-line"></div>
 </label>
 ```
 
-> _NOTE_: Only place an `mdc-textfield__label` inside of a text field _if you plan on using
-> Javascript_. Otherwise, the label must go outside of the textfield, as shown below.
+> _NOTE_: Only place an `mdc-text-field__label` inside of a text field _if you plan on using
+> Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
 
@@ -71,6 +71,6 @@ ### Single-line - Gracefully degraded
 ```html
-<label for="textfield-no-js">Textfield with no JS: </label>
-<div class="mdc-textfield">
-  <input type="text" id="textfield-no-js" class="mdc-textfield__input" placeholder="Hint text">
-  <div class="mdc-textfield__bottom-line"></div>
+<label for="text-field-no-js">TextField with no JS: </label>
+<div class="mdc-text-field">
+  <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -82,6 +82,6 @@ ```
 ```html
-<div class="mdc-textfield mdc-textfield--disabled">
-  <input type="text" id="disabled-textfield" class="mdc-textfield__input" disabled>
-  <label class="mdc-textfield__label" for="disabled-textfield">Disabled text field</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field mdc-text-field--disabled">
+  <input type="text" id="disabled-text-field" class="mdc-text-field__input" disabled>
+  <label class="mdc-text-field__label" for="disabled-text-field">Disabled text field</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -93,15 +93,15 @@ ```
 When dealing with JS-driven text fields that already have values, you'll want to ensure that you
-render the text field label with the `mdc-textfield__label--float-above` modifier class. This will
+render the text field label with the `mdc-text-field__label--float-above` modifier class. This will
 ensure that the label moves out of the way of the text field's value and prevents a Flash Of
-Un-styled Content (**FOUC**). You'll also want to add the `mdc-textfield--upgraded` modifier class
-on the textfield root element. The JS component does for you automatically on initialization, but
+Un-styled Content (**FOUC**). You'll also want to add the `mdc-text-field--upgraded` modifier class
+on the text-field root element. The JS component does for you automatically on initialization, but
 since it won't be added until that JS runs, adding it manually will prevent an initial FOUC.
 
 ```html
-<div class="mdc-textfield mdc-textfield--upgraded">
-  <input type="text" id="pre-filled" class="mdc-textfield__input" value="Pre-filled value">
-  <label class="mdc-textfield__label mdc-textfield__label--float-above" for="pre-filled">
+<div class="mdc-text-field mdc-text-field--upgraded">
+  <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
+  <label class="mdc-text-field__label mdc-text-field__label--float-above" for="pre-filled">
     Label in correct place
   </label>
-  <div class="mdc-textfield__bottom-line"></div>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -116,8 +116,8 @@ ```
 ```html
-<div class="mdc-textfield">
-  <input type="text" id="username" class="mdc-textfield__input" aria-controls="username-helptext">
-  <label for="username" class="mdc-textfield__label">Username</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field">
+  <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helptext">
+  <label for="username" class="mdc-text-field__label">Username</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p id="username-helptext" class="mdc-textfield-helptext" aria-hidden="true">
+<p id="username-helptext" class="mdc-text-field-helptext" aria-hidden="true">
   This will be displayed on your public profile
@@ -128,3 +128,3 @@ </p>
 Help text appears on input field focus and disappears on input field blur by default when using
-the textfield JS component.
+the text-field JS component.
 
@@ -134,11 +134,11 @@ #### Persistent help text
 If you'd like the help text to always be visible, add the
-`mdc-textfield-helptext--persistent` modifier class to the element.
+`mdc-text-field-helptext--persistent` modifier class to the element.
 
 ```html
-<div class="mdc-textfield">
-  <input type="email" id="email" class="mdc-textfield__input">
-  <label for="email" class="mdc-textfield__label">Email address</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field">
+  <input type="email" id="email" class="mdc-text-field__input">
+  <label for="email" class="mdc-text-field__label">Email address</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p class="mdc-textfield-helptext mdc-textfield-helptext--persistent">
+<p class="mdc-text-field-helptext mdc-text-field-helptext--persistent">
   We will <em>never</em> share your email address with third parties
@@ -151,3 +151,3 @@ </p>
 Note that in every example where the help text is dependent on the state of the input element, we
-assign an id to the `mdc-textfield-helptext` element and set that id to the value of the
+assign an id to the `mdc-text-field-helptext` element and set that id to the value of the
 `aria-controls` attribute on the input element. We recommend doing this as well as it will help
@@ -164,10 +164,10 @@ indicate to assistive devices that the display of the help text is dependent on the interaction with
 
-MDC Textfield provides validity styling by using the `:invalid` and `:required` attributes provided
+MDC TextField provides validity styling by using the `:invalid` and `:required` attributes provided
 by HTML5's form validation API.
 
 ```html
-<div class="mdc-textfield">
-  <input type="password" id="pw" class="mdc-textfield__input" required minlength=8>
-  <label for="pw" class="mdc-textfield__label">Password</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field">
+  <input type="password" id="pw" class="mdc-text-field__input" required minlength=8>
+  <label for="pw" class="mdc-text-field__label">Password</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -177,20 +177,20 @@ ```
 By default an input's validity is checked via `checkValidity()` on blur, and the styles are updated
-accordingly. Set the MDCTextfield.valid variable to set the input's validity explicitly. MDC Textfield
+accordingly. Set the MDCTextField.valid variable to set the input's validity explicitly. MDC TextField
 automatically appends an asterisk to the label text if the required attribute is set.
 
 Help text can be used to provide additional validation messages. Use
-`mdc-textfield-helptext--validation-msg` to provide styles for using the help text as a validation
-message. This can be easily combined with `mdc-textfield-helptext--persistent` to provide a robust
+`mdc-text-field-helptext--validation-msg` to provide styles for using the help text as a validation
+message. This can be easily combined with `mdc-text-field-helptext--persistent` to provide a robust
 UX for client-side form field validation.
 
 ```html
-<div class="mdc-textfield">
-  <input required minlength=8 type="password" class="mdc-textfield__input" id="pw"
+<div class="mdc-text-field">
+  <input required minlength=8 type="password" class="mdc-text-field__input" id="pw"
          aria-controls="pw-validation-msg">
-  <label for="pw" class="mdc-textfield__label">Choose password</label>
-  <div class="mdc-textfield__bottom-line"></div>
+  <label for="pw" class="mdc-text-field__label">Choose password</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p class="mdc-textfield-helptext
-          mdc-textfield-helptext--persistent
-          mdc-textfield-helptext--validation-msg"
+<p class="mdc-text-field-helptext
+          mdc-text-field-helptext--persistent
+          mdc-text-field-helptext--validation-msg"
    id="pw-validation-msg">
@@ -204,12 +204,12 @@ Must be at least 8 characters long
 as well as interaction targets. To do so, add the relevant classes
-(`mdc-textfield--with-leading-icon` or `mdc-textfield--with-trailing-icon`) to the root element, add
-an `i` element with your preferred icon, and give it a class of `mdc-textfield__icon`.
+(`mdc-text-field--with-leading-icon` or `mdc-text-field--with-trailing-icon`) to the root element, add
+an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon`.
 
 #### Leading:
 ```html
-<div class="mdc-textfield mdc-textfield--box mdc-textfield--with-leading-icon">
-  <i class="material-icons mdc-textfield__icon" tabindex="0">event</i>
-  <input type="text" id="my-input" class="mdc-textfield__input">
-  <label for="my-input" class="mdc-textfield__label">Your Name</label>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
+  <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
+  <input type="text" id="my-input" class="mdc-text-field__input">
+  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -220,7 +220,7 @@ ```
 ```html
-<div class="mdc-textfield mdc-textfield--box mdc-textfield--with-trailing-icon">
-  <input type="text" id="my-input" class="mdc-textfield__input">
-  <label for="my-input" class="mdc-textfield__label">Your Name</label>
-  <i class="material-icons mdc-textfield__icon" tabindex="0">event</i>
-  <div class="mdc-textfield__bottom-line"></div>
+<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon">
+  <input type="text" id="my-input" class="mdc-text-field__input">
+  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -237,5 +237,5 @@ ```
 ```html
-<div class="mdc-textfield mdc-textfield--textarea">
-  <textarea id="textarea" class="mdc-textfield__input" rows="8" cols="40"></textarea>
-  <label for="textarea" class="mdc-textfield__label">Textarea Label</label>
+<div class="mdc-text-field mdc-text-field--textarea">
+  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
+  <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
 </div>
@@ -247,5 +247,5 @@ ```
 ```html
-<div class="mdc-textfield mdc-textfield--textarea">
+<div class="mdc-text-field mdc-text-field--textarea">
   <textarea id="textarea-css-only"
-    class="mdc-textfield__input"
+    class="mdc-text-field__input"
     rows="8"
@@ -260,12 +260,12 @@ cols="40"
 ```html
-<div class="mdc-textfield mdc-textfield--fullwidth">
-  <input class="mdc-textfield__input"
+<div class="mdc-text-field mdc-text-field--fullwidth">
+  <input class="mdc-text-field__input"
          type="text"
-         placeholder="Full-Width Textfield"
-         aria-label="Full-Width Textfield">
+         placeholder="Full-Width TextField"
+         aria-label="Full-Width TextField">
 </div>
 
-<div class="mdc-textfield mdc-textfield--fullwidth mdc-textfield--textarea">
-  <textarea id="full-width-textarea" class="mdc-textfield__input" rows="8"></textarea>
-  <label for="full-width-textarea" class="mdc-textfield__label">Textarea Label</label>
+<div class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--textarea">
+  <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
+  <label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
 </div>
@@ -281,10 +281,10 @@ ```
 ```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 class="mdc-text-field mdc-text-field--box">
+  <input type="text" id="tf-box" class="mdc-text-field__input">
+  <label for="tf-box" class="mdc-text-field__label">Your Name</label>
+  <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
 
-Note that Text field boxes support all of the same features as normal textfields, including help
+Note that Text field boxes support all of the same features as normal text-fields, including help
 text, validation, and dense UI.
@@ -295,5 +295,5 @@
 ```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">
+<label for="css-only-text-field-box">Your name:</label>
+<div class="mdc-text-field mdc-text-field--box">
+  <input type="text" class="mdc-text-field__input" id="css-only-text-field-box" placeholder="Name">
 </div>
@@ -318,3 +318,3 @@ ```
 
-MDC Textfield ships with Component / Foundation classes which are used to provide a full-fidelity
+MDC TextField ships with Component / Foundation classes which are used to provide a full-fidelity
 Material Design text field component.
@@ -327,3 +327,3 @@
 ```javascript
-import {MDCTextfield, MDCTextfieldFoundation} from '@material/textfield';
+import {MDCTextField, MDCTextFieldFoundation} from '@material/textfield';
 ```
@@ -334,5 +334,5 @@
 ```javascript
-const mdcTextfield = require('mdc-textfield');
-const MDCTextfield = mdcTextfield.MDCTextfield;
-const MDCTextfieldFoundation = mdcTextfield.MDCTextfieldFoundation;
+const mdcTextField = require('mdc-text-field');
+const MDCTextField = mdcTextField.MDCTextField;
+const MDCTextFieldFoundation = mdcTextField.MDCTextFieldFoundation;
 ```
@@ -343,5 +343,5 @@
 ```javascript
-require(['path/to/mdc-textfield'], mdcTextfield => {
-  const MDCTextfield = mdcTextfield.MDCTextfield;
-  const MDCTextfieldFoundation = mdcTextfield.MDCTextfieldFoundation;
+require(['path/to/mdc-textfield'], mdcTextField => {
+  const MDCTextField = mdcTextField.MDCTextField;
+  const MDCTextFieldFoundation = mdcTextField.MDCTextFieldFoundation;
 });
@@ -353,4 +353,4 @@ ```
 ```javascript
-const MDCTextfield = mdc.textfield.MDCTextfield;
-const MDCTextfieldFoundation = mdc.textfield.MDCTextfieldFoundation;
+const MDCTextField = mdc.textField.MDCTextField;
+const MDCTextFieldFoundation = mdc.textField.MDCTextFieldFoundation;
 ```
@@ -361,3 +361,3 @@
 ```javascript
-mdc.textfield.MDCTextfield.attachTo(document.querySelector('.mdc-textfield'));
+mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
 ```
@@ -368,5 +368,5 @@
 ```javascript
-import {MDCTextfield} from '@material/textfield';
+import {MDCTextField} from '@material/textfield';
 
-const textfield = new MDCTextfield(document.querySelector('.mdc-textfield'));
+const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
 ```
@@ -376,3 +376,3 @@
 
-When `MDCTextfield` is instantiated with a root element containing the `mdc-textfield--box` class,
+When `MDCTextField` is instantiated with a root element containing the `mdc-text-field--box` class,
 it instantiates an `MDCRipple` instance on the element in order to facilitate the correct
@@ -383,4 +383,4 @@ interaction UX for text field boxes as outlined in the spec. The way this ripple is instantiated
 ```js
-const textfieldBoxEl = document.querySelector('.mdc-textfield--box');
-const textfield = new MDCTextfield(textfieldBoxEl, /* foundation */ undefined, (el) => {
+const textFieldBoxEl = document.querySelector('.mdc-text-field--box');
+const textField = new MDCTextField(textFieldBoxEl, /* foundation */ undefined, (el) => {
   // do something with el...
@@ -393,8 +393,8 @@ return new MDCRipple(el);
 
-#### MDCTextfield API
+#### MDCTextField API
 
-Similar to regular DOM elements, the `MDCTextfield` functionality is exposed through accessor
+Similar to regular DOM elements, the `MDCTextField` functionality is exposed through accessor
 methods.
 
-##### MDCTextfield.helptextElement
+##### MDCTextField.helptextElement
 
@@ -406,3 +406,3 @@ HTMLLabelElement. This is a normal property (non-accessor) that holds a reference to the element
 
-##### MDCTextfield.disabled
+##### MDCTextField.disabled
 
@@ -412,14 +412,14 @@ Boolean. Proxies to the foundation's `isDisabled/setDisabled` methods when retrieved/set
 
-##### MDCTextfield.valid
+##### MDCTextField.valid
 
 Boolean setter. Proxies to the foundation's `setValid` method when set.
 
-##### MDCTextfield.ripple
+##### 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`.
+`MDCRipple` instance. Set to the `MDCRipple` instance for the root element that `MDCTextField`
+initializes when given an `mdc-text-field--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, its adapter is a bit more
+Because MDC TextField is a feature-rich and relatively complex component, its adapter is a bit more
 complicated.
@@ -436,3 +436,3 @@
 | deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event handler on the root element for a given event |
-| notifyIconAction() => void | Emits a custom event "MDCTextfield:icon" denoting a user has clicked the icon |
+| notifyIconAction() => void | Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon |
 | addClassToBottomLine(className: string) => void | Adds a class to the bottom line element |
@@ -454,15 +454,41 @@ | removeClassFromBottomLine(className: string) => void | Removes a class from the bottom line element |
 
-##### MDCTextfieldFoundation.isDisabled() => boolean
+##### MDCTextFieldFoundation.isDisabled() => boolean
 
 Returns a boolean specifying whether or not the input is disabled.
 
-##### MDCTextfieldFoundation.setDisabled(disabled: boolean)
+##### MDCTextFieldFoundation.setDisabled(disabled: boolean)
 
 Updates the input's disabled state.
 
+##### MDCTextFieldFoundation.setValid(isValid: boolean)
+
+Sets the validity state of the Text Field. Triggers custom validity checking.
+
+##### MDCTextFieldFoundation.handleTextFieldInteraction(evt: Event)
+
+Handles click and keydown events originating from inside the Text Field component.
+
+##### MDCTextFieldFoundation.activateFocus()
+
+Activates the focus state of the Text Field. Normally called in response to the input focus event.
+
+##### MDCTextFieldFoundation.deactivateFocus()
+
+Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
+
+##### MDCTextFieldFoundation.animateBottomLine(evt: Event)
+
+Animates the bottom line. The animation expands outward from the user's click or touch. Expects an
+event with clientX/clientY properties.
+
+##### MDCTextFieldFoundation.handleBottomLineAnimationEnd(evt: Event)
+
+Handles the end of the bottom line animation, performing actions that must wait for animations to
+finish. Expects a transition-end event.
+
 ### Theming
 
-MDC Textfield components use the configured theme's primary color for its underline and label text
+MDC TextField components use the configured theme's primary color for its underline and label text
 when the input is focused.
 
-MDC Textfield components support dark themes.
+MDC TextField components support dark themes.

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

273336

increased by0.77%

Number of lines in readme file

461

increased by5.98%

Worsened metrics

Lines of code

4137

decreased by-0.34%

Dependency changes

• + Added@material/animation@0.25.0(transitive)

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

• + Added@material/theme@0.25.0(transitive)

• - Removed@material/animation@0.4.1(transitive)

• - Removed@material/ripple@0.24.0(transitive)

• - Removed@material/theme@0.24.0(transitive)

• Updated@material/animation@^0.25.0

• Updated@material/ripple@^0.25.0

• Updated@material/theme@^0.25.0