@material/textfield - npm Package Compare versions

Comparing version 0.33.0 to 0.34.0

adapter.js

		@@ -192,10 +192,16 @@ /**
		* Only implement if outline element exists.
		* Updates SVG Path on outline element based on the
		* Updates SVG Path and outline element based on the
		* label element width and RTL context.
		* @param {number} labelWidth
		* @param {boolean} isRtl
		* @param {boolean=} isRtl
		*/
		updateOutlinePath(labelWidth, isRtl) {}
		notchOutline(labelWidth, isRtl) {}

		/**
		* Only implement if outline element exists.
		* Closes notch in outline element.
		*/
		closeOutline() {}
		}

		export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};

foundation.js

		@@ -93,3 +93,4 @@ /**
		hasOutline: () => {},
		updateOutlinePath: () => {},
		notchOutline: () => {},
		closeOutline: () => {},
		});
		@@ -139,2 +140,3 @@ }
		this.adapter_.floatLabel(this.shouldFloat);
		this.notchOutline(this.shouldFloat);
		}
		@@ -198,5 +200,6 @@
		/**
		* Updates the focus outline for outlined text fields.
		* Opens/closes the notched outline.
		* @param {boolean} openNotch
		*/
		updateOutline() {
		notchOutline(openNotch) {
		if (!this.adapter_.hasOutline() \|\| !this.adapter_.hasLabel()) {
		@@ -206,7 +209,11 @@ return;

		const isDense = this.adapter_.hasClass(cssClasses.DENSE);
		const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
		const labelWidth = this.adapter_.getLabelWidth() * labelScale;
		const isRtl = this.adapter_.isRtl();
		this.adapter_.updateOutlinePath(labelWidth, isRtl);
		if (openNotch) {
		const isDense = this.adapter_.hasClass(cssClasses.DENSE);
		const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
		const labelWidth = this.adapter_.getLabelWidth() * labelScale;
		const isRtl = this.adapter_.isRtl();
		this.adapter_.notchOutline(labelWidth, isRtl);
		} else {
		this.adapter_.closeOutline();
		}
		}
		@@ -221,3 +228,3 @@
		this.adapter_.activateLineRipple();
		this.updateOutline();
		this.notchOutline(this.shouldFloat);
		if (this.adapter_.hasLabel()) {
		@@ -268,2 +275,3 @@ this.adapter_.shakeLabel(this.shouldShake);
		this.adapter_.floatLabel(this.shouldFloat);
		this.notchOutline(this.shouldFloat);
		}
		@@ -292,2 +300,3 @@ if (shouldRemoveLabelFloat) {
		this.adapter_.floatLabel(this.shouldFloat);
		this.notchOutline(this.shouldFloat);
		}
		@@ -294,0 +303,0 @@ }

index.js

		@@ -116,10 +116,6 @@ /**
		this.ripple = null;
		if (this.root_.classList.contains(cssClasses.BOX) \|\| this.root_.classList.contains(cssClasses.OUTLINED)) {
		// For outlined text fields, the ripple is instantiated on the outline element instead of the root element
		// to clip the ripple at the outline while still allowing the label to be visible beyond the outline.
		const rippleCapableSurface = outlineElement ? this.outline_ : this;
		const rippleRoot = outlineElement ? outlineElement : this.root_;
		if (this.root_.classList.contains(cssClasses.BOX)) {
		const MATCHES = getMatchesProperty(HTMLElement.prototype);
		const adapter =
		Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (rippleCapableSurface)), {
		Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (this)), {
		isSurfaceActive: () => this.input_[MATCHES](':active'),
		@@ -130,3 +126,3 @@ registerInteractionHandler: (type, handler) => this.input_.addEventListener(type, handler),
		const foundation = new MDCRippleFoundation(adapter);
		this.ripple = rippleFactory(rippleRoot, foundation);
		this.ripple = rippleFactory(this.root_, foundation);
		}
		@@ -323,3 +319,4 @@ }
		layout() {
		this.foundation_.updateOutline();
		const openNotch = this.foundation_.shouldFloat;
		this.foundation_.notchOutline(openNotch);
		if (this.ripple) {
		@@ -407,4 +404,4 @@ this.ripple.layout();
		* @return {!{
		* notchOutline: function(number, boolean): undefined,
		* hasOutline: function(): boolean,
		* updateOutlinePath: function(number, boolean): undefined,
		* }}
		@@ -414,4 +411,5 @@ */
		return {
		notchOutline: (labelWidth, isRtl) => this.outline_.notch(labelWidth, isRtl),
		closeOutline: () => this.outline_.closeNotch(),
		hasOutline: () => !!this.outline_,
		updateOutlinePath: (labelWidth, isRtl) => this.outline_.updateSvgPath(labelWidth, isRtl),
		};
		@@ -418,0 +416,0 @@ }

package.json

		{
		"name": "@material/textfield",
		"description": "The Material Components for the web text field component",
		"version": "0.33.0",
		"version": "0.34.0",
		"license": "Apache-2.0",
		@@ -18,12 +18,12 @@ "keywords": [
		"dependencies": {
		"@material/animation": "^0.25.0",
		"@material/base": "^0.29.0",
		"@material/floating-label": "^0.33.0",
		"@material/line-ripple": "^0.33.0",
		"@material/notched-outline": "^0.33.0",
		"@material/ripple": "^0.33.0",
		"@material/rtl": "^0.33.0",
		"@material/theme": "^0.33.0",
		"@material/typography": "^0.28.0"
		"@material/animation": "^0.34.0",
		"@material/base": "^0.34.0",
		"@material/floating-label": "^0.34.0",
		"@material/line-ripple": "^0.34.0",
		"@material/notched-outline": "^0.34.0",
		"@material/ripple": "^0.34.0",
		"@material/rtl": "^0.34.0",
		"@material/theme": "^0.34.0",
		"@material/typography": "^0.34.0"
		}
		}

README.md

		@@ -34,3 +34,3 @@ <!--docs:
		```
		npm install --save @material/textfield
		npm install @material/textfield
		```
		@@ -252,3 +252,4 @@
		`hasOutline() => boolean` \| Returns whether there is an outline element
		`updateOutlinePath(labelWidth: number, isRtl: boolean) => void` \| Updates the outline path to create a notch for the label element
		`notchOutline(labelWidth: number, isRtl: boolean) => void` \| Updates the outline path to open the notch and update the notch width for the label element
		`closeOutline() => void` \| Closes the notch in the outline element

		@@ -278,5 +279,5 @@ #### `MDCTextFieldAdapter.getNativeInput()`
		`deactivateFocus() => void` \| Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
		`setHelperTextContent(content: string) => void` \| Sets the content of the helper text
		`updateOutline() => void` \| Updates the focus outline for outlined text fields
		`setHelperTextContent(content: string) => void` \| Sets the content of the helper text.
		`notchOutline(openNotch: boolean) => void` \| Opens/closes the notched outline.

		`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.

_mixins.scss