@material/textfield - npm Package Compare versions

		@@ -50,7 +50,7 @@ /**
		*/
		registerTextFieldInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerTextFieldInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event handler on the root element for a given event.
		*/
		deregisterTextFieldInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterTextFieldInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		@@ -69,3 +69,4 @@ * Registers a validation attribute change listener on the input element.
		* @return The native `<input>` element, or an object with the same shape.
		* Note that this method can return null, which the foundation will handle gracefully.
		* Note that this method can return null, which the foundation will handle
		* gracefully.
		*/
		@@ -82,3 +83,4 @@ getNativeInput(): MDCTextFieldNativeInputElement \| null;
		/**
		* @return true if the textfield is focused. We achieve this via `document.activeElement === this.root`.
		* @return true if the textfield is focused. We achieve this via
		* `document.activeElement === this.root`.
		*/
		@@ -89,7 +91,8 @@ isFocused(): boolean;
		*/
		registerInputInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerInputInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener on the native input element for a given event.
		* Deregisters an event listener on the native input element for a given
		* event.
		*/
		deregisterInputInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterInputInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		}
		@@ -96,0 +99,0 @@ export interface MDCTextFieldLabelAdapter {

CHANGELOG.md

		@@ -6,3 +6,3 @@ # Change Log

		# [15.0.0-canary.8647092f7.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.8647092f7.0) (2022-07-07)
		# [15.0.0-canary.8656bf0e0.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.8656bf0e0.0) (2023-12-12)

		@@ -12,2 +12,29 @@

		* dom: transparent-border mixin RTL bugfix ([07acdde](https://github.com/material-components/material-components-web/commit/07acddef343184362c317a57957a483b4c62cac4))
		* text-field: Update textfield icons to allow spacebar keypresses to trigger an interaction ([c0a11ef](https://github.com/material-components/material-components-web/commit/c0a11ef0d000a098fd0c372be8f12d6a99302855))
		* textfield: Add coverage for suffix and prefix text within the font size mixin. ([19bb36a](https://github.com/material-components/material-components-web/commit/19bb36a46b51e79d8bf08948ab5b7d8e9358c2d8))
		* textfield: Add support for `focus-active-indicator-height` token. ([8c56759](https://github.com/material-components/material-components-web/commit/8c56759428e34766e263008470390487417f00c4))
		* textfield: add support for placeholder color in theme api ([b994146](https://github.com/material-components/material-components-web/commit/b994146f6d849bd80f280c147d64adae5b930a3c))
		* textfield: Fix bugs and compilation errors due to custom properties in the theme map ([1dc797e](https://github.com/material-components/material-components-web/commit/1dc797e7f4efe9010be7097b040c0fcb1902ca8c))
		* textfield: Fix several tokens in theming API ([d3344c1](https://github.com/material-components/material-components-web/commit/d3344c16fd9c006059174e1c3b6d90d2302e8134))
		* textfield: Fix several tokens in theming API ([9f17ff2](https://github.com/material-components/material-components-web/commit/9f17ff2cb20cb503cedcadbc473b09bc77c6a93e))
		* textfield: Fix several tokens in theming API ([271aedc](https://github.com/material-components/material-components-web/commit/271aedc306a6adc6acc1f2fe2bb460604c7c3a75))
		* textfield: Improve textfield character counter for screen reader ([2797ff8](https://github.com/material-components/material-components-web/commit/2797ff8b651ee34900cf38b115dc69193abdb7b8))
		* textfield: initializes 'valid' property from the DOM. ([b836b98](https://github.com/material-components/material-components-web/commit/b836b989225a6259220a98dd23fd2a4b99014031))
		* textfield: Make it possible to customise leading and trailing icon in disabled states separately ([00d8de0](https://github.com/material-components/material-components-web/commit/00d8de0aadef3f3caffc1ca2a13cf932057dcdbe))
		* textfield: styles that override floating-label font-size take into account that clients can change this font-size. ([ebb636f](https://github.com/material-components/material-components-web/commit/ebb636f3d44e1a194f822d7dfcb5d70feb817520))


		### Features

		* datepicker, select, textfield: Support customizing label size on these components. ([c0d21ec](https://github.com/material-components/material-components-web/commit/c0d21ecc9704bea1cb7c8cd83c1c6e2971f1d01b))
		* textfield: $custom-property-prefix is no longer private variable (same as outlined textfield). ([d76666a](https://github.com/material-components/material-components-web/commit/d76666ad4c53a619946d70b3991ca35ae5d87d04))
		* textfield: Add `static-styles` mixin ([82554d7](https://github.com/material-components/material-components-web/commit/82554d7709f8945af78415597d9b121afaddd1c0))
		* textfield: Add character counter to theming api ([1d37bf6](https://github.com/material-components/material-components-web/commit/1d37bf601f471b43f5b313bbc8ea58def2cc5c9f))
		* textfield: add support for several new tokens ([d71935c](https://github.com/material-components/material-components-web/commit/d71935c8bf8dd6e1a4a7a38e57d02d3de4f56f67))
		* textfield: changed the visibility of the mixin `filled-no-label` to public ([8879557](https://github.com/material-components/material-components-web/commit/8879557e677d9b160a106e46279b1b6855926fb5))
		* textfield: Changed visibility of $custom-property-prefix to public ([d96330c](https://github.com/material-components/material-components-web/commit/d96330c085b4fe8fc59c7eb835d41ebca3a08422))
		* textfield: Changed visibility of $custom-property-prefix to public ([f323399](https://github.com/material-components/material-components-web/commit/f323399371aec4378186a05b5a839e53d9e464c0))
		* textfield: Changed visibility of $custom-property-prefix to public. ([274610c](https://github.com/material-components/material-components-web/commit/274610c77e6a9c9f19780b688cc6686a97e453a1))
		* textfield: Ensure Theming API feature consistency ([7134a77](https://github.com/material-components/material-components-web/commit/7134a7752e5d06837e1eb3da7f2b49d6ba9fb72c))
		* Support '-5' density for text fields ([e457014](https://github.com/material-components/material-components-web/commit/e4570146f182059e919d089d26bc6b2813015f10))

character-counter/adapter.d.ts

		@@ -35,2 +35,7 @@ /**
		setContent(content: string): void;
		/**
		* Sets the max char length and char length of current value.
		* Allows more flexible character counter text.
		*/
		setCounterValue(currentLength: number, maxLength: number): void;
		}

character-counter/component.d.ts

		@@ -25,7 +25,9 @@ /**
		import { MDCTextFieldCharacterCounterFoundation } from './foundation';
		export declare type MDCTextFieldCharacterCounterFactory = (el: Element, foundation?: MDCTextFieldCharacterCounterFoundation) => MDCTextFieldCharacterCounter;
		/** MDC Text Field Character Counter Factory */
		export declare type MDCTextFieldCharacterCounterFactory = (el: HTMLElement, foundation?: MDCTextFieldCharacterCounterFoundation) => MDCTextFieldCharacterCounter;
		/** MDC Text Field Character Counter */
		export declare class MDCTextFieldCharacterCounter extends MDCComponent<MDCTextFieldCharacterCounterFoundation> {
		static attachTo(root: Element): MDCTextFieldCharacterCounter;
		static attachTo(root: HTMLElement): MDCTextFieldCharacterCounter;
		get foundationForTextField(): MDCTextFieldCharacterCounterFoundation;
		getDefaultFoundation(): MDCTextFieldCharacterCounterFoundation;
		}

character-counter/component.js

		@@ -26,2 +26,3 @@ /**
		import { MDCTextFieldCharacterCounterFoundation } from './foundation';
		/** MDC Text Field Character Counter */
		var MDCTextFieldCharacterCounter = /** @class */ (function (_super) {
		@@ -45,4 +46,5 @@ __extends(MDCTextFieldCharacterCounter, _super);
		var _this = this;
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		var adapter = {
		@@ -52,2 +54,3 @@ setContent: function (content) {
		},
		setCounterValue: function () { return undefined; },
		};
		@@ -54,0 +57,0 @@ return new MDCTextFieldCharacterCounterFoundation(adapter);

character-counter/foundation.d.ts

		@@ -25,2 +25,3 @@ /**
		import { MDCTextFieldCharacterCounterAdapter } from './adapter';
		/** MDC Text Field Character Counter Foundation */
		export declare class MDCTextFieldCharacterCounterFoundation extends MDCFoundation<MDCTextFieldCharacterCounterAdapter> {
		@@ -34,3 +35,4 @@ static get cssClasses(): {
		/**
		* See {@link MDCTextFieldCharacterCounterAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldCharacterCounterAdapter} for typing information on
		* parameters and return types.
		*/
		@@ -37,0 +39,0 @@ static get defaultAdapter(): MDCTextFieldCharacterCounterAdapter;

character-counter/foundation.js

		@@ -26,2 +26,3 @@ /**
		import { cssClasses, strings } from './constants';
		/** MDC Text Field Character Counter Foundation */
		var MDCTextFieldCharacterCounterFoundation = /** @class */ (function (_super) {
		@@ -48,3 +49,4 @@ __extends(MDCTextFieldCharacterCounterFoundation, _super);
		/**
		* See {@link MDCTextFieldCharacterCounterAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldCharacterCounterAdapter} for typing information on
		* parameters and return types.
		*/
		@@ -54,2 +56,3 @@ get: function () {
		setContent: function () { return undefined; },
		setCounterValue: function () { return undefined; },
		};
		@@ -63,2 +66,3 @@ },
		this.adapter.setContent(currentLength + " / " + maxLength);
		this.adapter.setCounterValue(currentLength, maxLength);
		};
		@@ -65,0 +69,0 @@ return MDCTextFieldCharacterCounterFoundation;

component.d.ts

		@@ -33,4 +33,5 @@ /**
		import { MDCTextFieldIconFactory } from './icon/component';
		/** MDC Text Field */
		export declare class MDCTextField extends MDCComponent<MDCTextFieldFoundation> implements MDCRippleCapableSurface {
		static attachTo(root: Element): MDCTextField;
		static attachTo(root: HTMLElement): MDCTextField;
		ripple: MDCRipple \| null;
		@@ -125,4 +126,6 @@ private input;
		/**
		* Enables or disables the use of native validation. Use this for custom validation.
		* @param useNativeValidation Set this to false to ignore native input validation.
		* Enables or disables the use of native validation. Use this for custom
		* validation.
		* @param useNativeValidation Set this to false to ignore native input
		* validation.
		*/
		@@ -129,0 +132,0 @@ set useNativeValidation(useNativeValidation: boolean);

component.js

		@@ -39,2 +39,3 @@ /**
		import { MDCTextFieldIcon } from './icon/component';
		/** MDC Text Field */
		var MDCTextField = /** @class */ (function (_super) {
		@@ -72,4 +73,6 @@ __extends(MDCTextField, _super);
		var nextElementSibling = this.root.nextElementSibling;
		var hasHelperLine = (nextElementSibling && nextElementSibling.classList.contains(cssClasses.HELPER_LINE));
		var helperTextEl = hasHelperLine && nextElementSibling && nextElementSibling.querySelector(helperTextStrings.ROOT_SELECTOR);
		var hasHelperLine = (nextElementSibling &&
		nextElementSibling.classList.contains(cssClasses.HELPER_LINE));
		var helperTextEl = hasHelperLine && nextElementSibling &&
		nextElementSibling.querySelector(helperTextStrings.ROOT_SELECTOR);
		this.helperText = helperTextEl ? helperTextFactory(helperTextEl) : null;
		@@ -79,3 +82,4 @@ // Character counter
		var characterCounterEl = this.root.querySelector(characterCounterStrings.ROOT_SELECTOR);
		// If character counter is not found in root element search in sibling element.
		// If character counter is not found in root element search in sibling
		// element.
		if (!characterCounterEl && hasHelperLine && nextElementSibling) {
		@@ -319,4 +323,6 @@ characterCounterEl = nextElementSibling.querySelector(characterCounterStrings.ROOT_SELECTOR);
		/**
		* Enables or disables the use of native validation. Use this for custom validation.
		* @param useNativeValidation Set this to false to ignore native input validation.
		* Enables or disables the use of native validation. Use this for custom
		* validation.
		* @param useNativeValidation Set this to false to ignore native input
		* validation.
		*/
		@@ -379,4 +385,5 @@ set: function (useNativeValidation) {
		MDCTextField.prototype.getDefaultFoundation = function () {
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
		@@ -391,18 +398,23 @@ var adapter = __assign(__assign(__assign(__assign(__assign({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
		return {
		addClass: function (className) { return _this.root.classList.add(className); },
		removeClass: function (className) { return _this.root.classList.remove(className); },
		addClass: function (className) {
		_this.root.classList.add(className);
		},
		removeClass: function (className) {
		_this.root.classList.remove(className);
		},
		hasClass: function (className) { return _this.root.classList.contains(className); },
		registerTextFieldInteractionHandler: function (evtType, handler) {
		_this.listen(evtType, handler);
		registerTextFieldInteractionHandler: function (eventType, handler) {
		_this.listen(eventType, handler);
		},
		deregisterTextFieldInteractionHandler: function (evtType, handler) {
		_this.unlisten(evtType, handler);
		deregisterTextFieldInteractionHandler: function (eventType, handler) {
		_this.unlisten(eventType, handler);
		},
		registerValidationAttributeChangeHandler: function (handler) {
		var getAttributesList = function (mutationsList) {
		return mutationsList
		.map(function (mutation) { return mutation.attributeName; })
		return mutationsList.map(function (mutation) { return mutation.attributeName; })
		.filter(function (attributeName) { return attributeName; });
		};
		var observer = new MutationObserver(function (mutationsList) { return handler(getAttributesList(mutationsList)); });
		var observer = new MutationObserver(function (mutationsList) {
		handler(getAttributesList(mutationsList));
		});
		var config = { attributes: true };
		@@ -424,3 +436,3 @@ observer.observe(_this.input, config);
		setInputAttr: function (attr, value) {
		_this.input.setAttribute(attr, value);
		_this.safeSetAttribute(_this.input, attr, value);
		},
		@@ -431,7 +443,7 @@ removeInputAttr: function (attr) {
		isFocused: function () { return document.activeElement === _this.input; },
		registerInputInteractionHandler: function (evtType, handler) {
		_this.input.addEventListener(evtType, handler, applyPassive());
		registerInputInteractionHandler: function (eventType, handler) {
		_this.input.addEventListener(eventType, handler, applyPassive());
		},
		deregisterInputInteractionHandler: function (evtType, handler) {
		_this.input.removeEventListener(evtType, handler, applyPassive());
		deregisterInputInteractionHandler: function (eventType, handler) {
		_this.input.removeEventListener(eventType, handler, applyPassive());
		},
		@@ -513,9 +525,10 @@ };
		}
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
		var adapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return ponyfill.matches(_this.input, ':active'); }, registerInteractionHandler: function (evtType, handler) {
		_this.input.addEventListener(evtType, handler, applyPassive());
		}, deregisterInteractionHandler: function (evtType, handler) {
		_this.input.removeEventListener(evtType, handler, applyPassive());
		var adapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return ponyfill.matches(_this.input, ':active'); }, registerInteractionHandler: function (eventType, handler) {
		_this.input.addEventListener(eventType, handler, applyPassive());
		}, deregisterInteractionHandler: function (eventType, handler) {
		_this.input.removeEventListener(eventType, handler, applyPassive());
		} });
		@@ -522,0 +535,0 @@ // tslint:enable:object-literal-sort-keys

foundation.d.ts

		@@ -26,2 +26,3 @@ /**
		import { MDCTextFieldFoundationMap } from './types';
		/** MDC Text Field Foundation */
		export declare class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {
		@@ -37,2 +38,3 @@ static get cssClasses(): {
		ROOT: string;
		/** MDC Text Field Foundation */
		TEXTAREA: string;
		@@ -68,5 +70,5 @@ WITH_LEADING_ICON: string;
		private receivedUserInput;
		private valid;
		private useNativeValidation;
		private validateOnValueChange;
		private valid;
		private readonly inputFocusHandler;
		@@ -110,3 +112,3 @@ private readonly inputBlurHandler;
		*/
		setTransformOrigin(evt: TouchEvent \| MouseEvent): void;
		setTransformOrigin(event: TouchEvent \| MouseEvent): void;
		/**
		@@ -113,0 +115,0 @@ * Handles input change of text input and text area.

foundation.js

		@@ -28,2 +28,3 @@ /**
		var INTERACTION_EVENTS = ['click', 'keydown'];
		/** MDC Text Field Foundation */
		var MDCTextFieldFoundation = /** @class */ (function (_super) {
		@@ -40,3 +41,2 @@ __extends(MDCTextFieldFoundation, _super);
		_this.receivedUserInput = false;
		_this.valid = true;
		_this.useNativeValidation = true;
		@@ -48,2 +48,4 @@ _this.validateOnValueChange = true;
		_this.trailingIcon = foundationMap.trailingIcon;
		_this.valid =
		!_this.adapter.hasClass(MDCTextFieldFoundation.cssClasses.INVALID);
		_this.inputFocusHandler = function () {
		@@ -58,4 +60,4 @@ _this.activateFocus();
		};
		_this.setPointerXOffset = function (evt) {
		_this.setTransformOrigin(evt);
		_this.setPointerXOffset = function (event) {
		_this.setTransformOrigin(event);
		};
		@@ -172,4 +174,4 @@ _this.textFieldInteractionHandler = function () {
		for (var POINTERDOWN_EVENTS_1 = __values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next(); !POINTERDOWN_EVENTS_1_1.done; POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next()) {
		var evtType = POINTERDOWN_EVENTS_1_1.value;
		this.adapter.registerInputInteractionHandler(evtType, this.setPointerXOffset);
		var eventType = POINTERDOWN_EVENTS_1_1.value;
		this.adapter.registerInputInteractionHandler(eventType, this.setPointerXOffset);
		}
		@@ -186,4 +188,4 @@ }
		for (var INTERACTION_EVENTS_1 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
		var evtType = INTERACTION_EVENTS_1_1.value;
		this.adapter.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
		var eventType = INTERACTION_EVENTS_1_1.value;
		this.adapter.registerTextFieldInteractionHandler(eventType, this.textFieldInteractionHandler);
		}
		@@ -209,4 +211,4 @@ }
		for (var POINTERDOWN_EVENTS_2 = __values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next(); !POINTERDOWN_EVENTS_2_1.done; POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next()) {
		var evtType = POINTERDOWN_EVENTS_2_1.value;
		this.adapter.deregisterInputInteractionHandler(evtType, this.setPointerXOffset);
		var eventType = POINTERDOWN_EVENTS_2_1.value;
		this.adapter.deregisterInputInteractionHandler(eventType, this.setPointerXOffset);
		}
		@@ -223,4 +225,4 @@ }
		for (var INTERACTION_EVENTS_2 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
		var evtType = INTERACTION_EVENTS_2_1.value;
		this.adapter.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
		var eventType = INTERACTION_EVENTS_2_1.value;
		this.adapter.deregisterTextFieldInteractionHandler(eventType, this.textFieldInteractionHandler);
		}
		@@ -302,8 +304,8 @@ }
		*/
		MDCTextFieldFoundation.prototype.setTransformOrigin = function (evt) {
		MDCTextFieldFoundation.prototype.setTransformOrigin = function (event) {
		if (this.isDisabled() \|\| this.adapter.hasOutline()) {
		return;
		}
		var touches = evt.touches;
		var targetEvent = touches ? touches[0] : evt;
		var touches = event.touches;
		var targetEvent = touches ? touches[0] : event;
		var targetClientRect = targetEvent.target.getBoundingClientRect();
		@@ -310,0 +312,0 @@ var normalizedX = targetEvent.clientX - targetClientRect.left;

helper-text/component.d.ts

		@@ -25,7 +25,9 @@ /**
		import { MDCTextFieldHelperTextFoundation } from './foundation';
		export declare type MDCTextFieldHelperTextFactory = (el: Element, foundation?: MDCTextFieldHelperTextFoundation) => MDCTextFieldHelperText;
		/** MDC Text Field Helper Text Factory */
		export declare type MDCTextFieldHelperTextFactory = (el: HTMLElement, foundation?: MDCTextFieldHelperTextFoundation) => MDCTextFieldHelperText;
		/** MDC Text Field Helper Text */
		export declare class MDCTextFieldHelperText extends MDCComponent<MDCTextFieldHelperTextFoundation> {
		static attachTo(root: Element): MDCTextFieldHelperText;
		static attachTo(root: HTMLElement): MDCTextFieldHelperText;
		get foundationForTextField(): MDCTextFieldHelperTextFoundation;
		getDefaultFoundation(): MDCTextFieldHelperTextFoundation;
		}

helper-text/component.js

		@@ -26,2 +26,3 @@ /**
		import { MDCTextFieldHelperTextFoundation } from './foundation';
		/** MDC Text Field Helper Text */
		var MDCTextFieldHelperText = /** @class */ (function (_super) {
		@@ -45,12 +46,21 @@ __extends(MDCTextFieldHelperText, _super);
		var _this = this;
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
		var adapter = {
		addClass: function (className) { return _this.root.classList.add(className); },
		removeClass: function (className) { return _this.root.classList.remove(className); },
		addClass: function (className) {
		_this.root.classList.add(className);
		},
		removeClass: function (className) {
		_this.root.classList.remove(className);
		},
		hasClass: function (className) { return _this.root.classList.contains(className); },
		getAttr: function (attr) { return _this.root.getAttribute(attr); },
		setAttr: function (attr, value) { return _this.root.setAttribute(attr, value); },
		removeAttr: function (attr) { return _this.root.removeAttribute(attr); },
		setAttr: function (attr, value) {
		_this.safeSetAttribute(_this.root, attr, value);
		},
		removeAttr: function (attr) {
		_this.root.removeAttribute(attr);
		},
		setContent: function (content) {
		@@ -57,0 +67,0 @@ _this.root.textContent = content;

helper-text/foundation.d.ts

		@@ -25,2 +25,3 @@ /**
		import { MDCTextFieldHelperTextAdapter } from './adapter';
		/** MDC Text Field Helper Text Foundation */
		export declare class MDCTextFieldHelperTextFoundation extends MDCFoundation<MDCTextFieldHelperTextAdapter> {
		@@ -30,2 +31,3 @@ static get cssClasses(): {
		HELPER_TEXT_VALIDATION_MSG: string;
		/** MDC Text Field Helper Text Foundation */
		ROOT: string;
		@@ -39,3 +41,4 @@ };
		/**
		* See {@link MDCTextFieldHelperTextAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldHelperTextAdapter} for typing information on
		* parameters and return types.
		*/
		@@ -60,3 +63,4 @@ static get defaultAdapter(): MDCTextFieldHelperTextAdapter;
		/**
		* @param isValidation True to make the helper text act as an error validation message.
		* @param isValidation True to make the helper text act as an error validation
		* message.
		*/
		@@ -63,0 +67,0 @@ setValidation(isValidation: boolean): void;

helper-text/foundation.js

		@@ -26,2 +26,3 @@ /**
		import { cssClasses, strings } from './constants';
		/** MDC Text Field Helper Text Foundation */
		var MDCTextFieldHelperTextFoundation = /** @class */ (function (_super) {
		@@ -48,3 +49,4 @@ __extends(MDCTextFieldHelperTextFoundation, _super);
		/**
		* See {@link MDCTextFieldHelperTextAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldHelperTextAdapter} for typing information on
		* parameters and return types.
		*/
		@@ -100,3 +102,4 @@ get: function () {
		/**
		* @param isValidation True to make the helper text act as an error validation message.
		* @param isValidation True to make the helper text act as an error validation
		* message.
		*/
		@@ -103,0 +106,0 @@ MDCTextFieldHelperTextFoundation.prototype.setValidation = function (isValidation) {

icon/adapter.d.ts

		@@ -51,11 +51,12 @@ /**
		*/
		registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener on the icon element for a given event.
		*/
		deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterInteractionHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* 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.
		*/
		notifyIconAction(): void;
		}

icon/component.d.ts

		@@ -25,7 +25,9 @@ /**
		import { MDCTextFieldIconFoundation } from './foundation';
		export declare type MDCTextFieldIconFactory = (el: Element, foundation?: MDCTextFieldIconFoundation) => MDCTextFieldIcon;
		/** MDC Text Field Icon Factory */
		export declare type MDCTextFieldIconFactory = (el: HTMLElement, foundation?: MDCTextFieldIconFoundation) => MDCTextFieldIcon;
		/** MDC Text Field Icon */
		export declare class MDCTextFieldIcon extends MDCComponent<MDCTextFieldIconFoundation> {
		static attachTo(root: Element): MDCTextFieldIcon;
		static attachTo(root: HTMLElement): MDCTextFieldIcon;
		get foundationForTextField(): MDCTextFieldIconFoundation;
		getDefaultFoundation(): MDCTextFieldIconFoundation;
		}

icon/component.js

		@@ -26,2 +26,3 @@ /**
		import { MDCTextFieldIconFoundation } from './foundation';
		/** MDC Text Field Icon */
		var MDCTextFieldIcon = /** @class */ (function (_super) {
		@@ -45,15 +46,26 @@ __extends(MDCTextFieldIcon, _super);
		var _this = this;
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
		var adapter = {
		getAttr: function (attr) { return _this.root.getAttribute(attr); },
		setAttr: function (attr, value) { return _this.root.setAttribute(attr, value); },
		removeAttr: function (attr) { return _this.root.removeAttribute(attr); },
		setAttr: function (attr, value) {
		_this.safeSetAttribute(_this.root, attr, value);
		},
		removeAttr: function (attr) {
		_this.root.removeAttribute(attr);
		},
		setContent: function (content) {
		_this.root.textContent = content;
		},
		registerInteractionHandler: function (evtType, handler) { return _this.listen(evtType, handler); },
		deregisterInteractionHandler: function (evtType, handler) { return _this.unlisten(evtType, handler); },
		notifyIconAction: function () { return _this.emit(MDCTextFieldIconFoundation.strings.ICON_EVENT, {} /* evtData /, true / shouldBubble */); },
		registerInteractionHandler: function (eventType, handler) {
		_this.listen(eventType, handler);
		},
		deregisterInteractionHandler: function (eventType, handler) {
		_this.unlisten(eventType, handler);
		},
		notifyIconAction: function () {
		_this.emit(MDCTextFieldIconFoundation.strings.ICON_EVENT, {} /* eventData /, true / shouldBubble */);
		},
		};
		@@ -60,0 +72,0 @@ // tslint:enable:object-literal-sort-keys

icon/foundation.d.ts

		@@ -25,2 +25,3 @@ /**
		import { MDCTextFieldIconAdapter } from './adapter';
		/** MDC Text Field Icon Foundation */
		export declare class MDCTextFieldIconFoundation extends MDCFoundation<MDCTextFieldIconAdapter> {
		@@ -35,3 +36,4 @@ static get strings(): {
		/**
		* See {@link MDCTextFieldIconAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldIconAdapter} for typing information on parameters
		* and return types.
		*/
		@@ -47,4 +49,4 @@ static get defaultAdapter(): MDCTextFieldIconAdapter;
		setContent(content: string): void;
		handleInteraction(evt: MouseEvent \| KeyboardEvent): void;
		handleInteraction(event: MouseEvent \| KeyboardEvent): void;
		}
		export default MDCTextFieldIconFoundation;

icon/foundation.js

		@@ -27,2 +27,3 @@ /**
		var INTERACTION_EVENTS = ['click', 'keydown'];
		/** MDC Text Field Icon Foundation */
		var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
		@@ -33,4 +34,4 @@ __extends(MDCTextFieldIconFoundation, _super);
		_this.savedTabIndex = null;
		_this.interactionHandler = function (evt) {
		_this.handleInteraction(evt);
		_this.interactionHandler = function (event) {
		_this.handleInteraction(event);
		};
		@@ -55,3 +56,4 @@ return _this;
		/**
		* See {@link MDCTextFieldIconAdapter} for typing information on parameters and return types.
		* See {@link MDCTextFieldIconAdapter} for typing information on parameters
		* and return types.
		*/
		@@ -79,4 +81,4 @@ get: function () {
		for (var INTERACTION_EVENTS_1 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
		var evtType = INTERACTION_EVENTS_1_1.value;
		this.adapter.registerInteractionHandler(evtType, this.interactionHandler);
		var eventType = INTERACTION_EVENTS_1_1.value;
		this.adapter.registerInteractionHandler(eventType, this.interactionHandler);
		}
		@@ -96,4 +98,4 @@ }
		for (var INTERACTION_EVENTS_2 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
		var evtType = INTERACTION_EVENTS_2_1.value;
		this.adapter.deregisterInteractionHandler(evtType, this.interactionHandler);
		var eventType = INTERACTION_EVENTS_2_1.value;
		this.adapter.deregisterInteractionHandler(eventType, this.interactionHandler);
		}
		@@ -128,7 +130,8 @@ }
		};
		MDCTextFieldIconFoundation.prototype.handleInteraction = function (evt) {
		var isEnterKey = evt.key === 'Enter' \|\| evt.keyCode === 13;
		var isSpaceKey = evt.key === ' ';
		if (evt.type === 'click' \|\| isEnterKey \|\| isSpaceKey) {
		evt.preventDefault(); // stop click from causing host label to focus
		MDCTextFieldIconFoundation.prototype.handleInteraction = function (event) {
		var isEnterKey = event.key === 'Enter' \|\|
		event.keyCode === 13;
		var isSpaceKey = event.key === ' ';
		if (event.type === 'click' \|\| isEnterKey \|\| isSpaceKey) {
		event.preventDefault(); // stop click from causing host label to focus
		// input
		@@ -135,0 +138,0 @@ this.adapter.notifyIconAction();

icon/README.md

		@@ -185,4 +185,4 @@ <!--docs:
		`setContent(content: string) => void` \| Sets the text content of the icon element.
		`registerInteractionHandler(evtType: string, handler: EventListener) => void` \| Registers an event listener for a given event.
		`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` \| Deregisters an event listener for a given event.
		`registerInteractionHandler(eventType: string, handler: EventListener) => void` \| Registers an event listener for a given event.
		`deregisterInteractionHandler(eventType: string, handler: EventListener) => void` \| Deregisters an event listener for a given event.
		`notifyIconAction() => void` \| Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon, which bubbles to the top-level text field element.
		@@ -197,2 +197,2 @@
		`setContent(content: string) => void` \| Updates the icon's text content.
		`handleInteraction(evt: Event) => void` \| Handles a text field interaction event.
		`handleInteraction(event: Event) => void` \| Handles a text field interaction event.

package.json

		{
		"name": "@material/textfield",
		"description": "The Material Components for the web text field component",
		"version": "15.0.0-canary.8647092f7.0",
		"version": "15.0.0-canary.8656bf0e0.0",
		"license": "MIT",
		@@ -21,19 +21,19 @@ "keywords": [
		"dependencies": {
		"@material/animation": "15.0.0-canary.8647092f7.0",
		"@material/base": "15.0.0-canary.8647092f7.0",
		"@material/density": "15.0.0-canary.8647092f7.0",
		"@material/dom": "15.0.0-canary.8647092f7.0",
		"@material/feature-targeting": "15.0.0-canary.8647092f7.0",
		"@material/floating-label": "15.0.0-canary.8647092f7.0",
		"@material/line-ripple": "15.0.0-canary.8647092f7.0",
		"@material/notched-outline": "15.0.0-canary.8647092f7.0",
		"@material/ripple": "15.0.0-canary.8647092f7.0",
		"@material/rtl": "15.0.0-canary.8647092f7.0",
		"@material/shape": "15.0.0-canary.8647092f7.0",
		"@material/theme": "15.0.0-canary.8647092f7.0",
		"@material/tokens": "15.0.0-canary.8647092f7.0",
		"@material/typography": "15.0.0-canary.8647092f7.0",
		"@material/animation": "15.0.0-canary.8656bf0e0.0",
		"@material/base": "15.0.0-canary.8656bf0e0.0",
		"@material/density": "15.0.0-canary.8656bf0e0.0",
		"@material/dom": "15.0.0-canary.8656bf0e0.0",
		"@material/feature-targeting": "15.0.0-canary.8656bf0e0.0",
		"@material/floating-label": "15.0.0-canary.8656bf0e0.0",
		"@material/line-ripple": "15.0.0-canary.8656bf0e0.0",
		"@material/notched-outline": "15.0.0-canary.8656bf0e0.0",
		"@material/ripple": "15.0.0-canary.8656bf0e0.0",
		"@material/rtl": "15.0.0-canary.8656bf0e0.0",
		"@material/shape": "15.0.0-canary.8656bf0e0.0",
		"@material/theme": "15.0.0-canary.8656bf0e0.0",
		"@material/tokens": "15.0.0-canary.8656bf0e0.0",
		"@material/typography": "15.0.0-canary.8656bf0e0.0",
		"tslib": "^2.1.0"
		},
		"gitHead": "1edf72197ddaf5b6318f71205888f8ae695e9b29"
		"gitHead": "36cab37e468233da3044a10c1df388f634163cc1"
		}

README.md

		@@ -492,6 +492,6 @@ <!--docs:
		`hasClass(className: string) => boolean` \| Returns true if the root element contains the given class name.
		`registerTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` \| Registers an event handler on the root element for a given event.
		`deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` \| Deregisters an event handler on the root element for a given event.
		`registerInputInteractionHandler(evtType: string, handler: EventListener) => void` \| Registers an event listener on the native input element for a given event.
		`deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void` \| Deregisters an event listener on the native input element for a given event.
		`registerTextFieldInteractionHandler(eventType: string, handler: EventListener) => void` \| Registers an event handler on the root element for a given event.
		`deregisterTextFieldInteractionHandler(eventType: string, handler: EventListener) => void` \| Deregisters an event handler on the root element for a given event.
		`registerInputInteractionHandler(eventType: string, handler: EventListener) => void` \| Registers an event listener on the native input element for a given event.
		`deregisterInputInteractionHandler(eventType: string, handler: EventListener) => void` \| Deregisters an event listener on the native input element for a given event.
		`registerValidationAttributeChangeHandler(handler: (attributeNames: string[]) => void) => MutationObserver` \| Registers a validation attribute change listener on the input element. Handler accepts list of attribute changes.
		@@ -536,3 +536,3 @@ `deregisterValidationAttributeChangeHandler(!MutationObserver) => void` \| Disconnects a validation attribute observer on the input element.
		`setDisabled(disabled: boolean) => void` \| Updates the input's disabled state.
		`handleTextFieldInteraction(evt: Event) => void` \| Handles click and keydown events originating from inside the Text Field component.
		`handleTextFieldInteraction(event: Event) => void` \| Handles click and keydown events originating from inside the Text Field component.
		`handleInput() => void` \| Handles text input and textarea input event.
		@@ -548,3 +548,3 @@ `handleValidationAttributeChange(attributesList: !Array<string>) => void` \| Handles validation attribute changes.
		`notchOutline(openNotch: boolean) => void` \| Opens/closes the notched outline.
		`setTransformOrigin(evt: TouchEvent \\| MouseEvent) => void` \| Sets the line ripple's transform origin, so that the line ripple activate animation will animate out from the user's click location.
		`setTransformOrigin(event: TouchEvent \\| MouseEvent) => void` \| Sets the line ripple's transform origin, so that the line ripple activate animation will animate out from the user's click location.
		`autoCompleteFocus() => void` \| Activates the Text Field's focus state in cases when the input value is changed programmatically (i.e., without user action).
		@@ -551,0 +551,0 @@ `setAutovalidate(shouldAutovalidate: boolean) => void` \| Sets whether or not the textfield should validate its input when `value` changes.

text_field_gss_gss.scss

_filled-text-field-theme.scss