@material/textfield - npm Package Compare versions

Comparing version 0.35.2 to 0.36.0-0

adapter.js

@@ -105,3 +105,4 @@ /**
    * Registers a validation attribute change listener on the input element.
-   * @param {function(!Array): undefined} handler
+   * Handler accepts list of attribute names.
+   * @param {function(!Array<string>): undefined} handler
    * @return {!MutationObserver}
@@ -108,0 +109,0 @@ */

constants.js

@@ -46,2 +46,8 @@ /**
 
-export {cssClasses, strings, numbers};
+// whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+// under section: `Validation-related attributes`
+const VALIDATION_ATTR_WHITELIST = [
+  'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
+];
+
+export {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST};

foundation.js

@@ -24,11 +24,5 @@ /**
 import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter';
-import {cssClasses, strings, numbers} from './constants';
+import {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST} from './constants';
 
 
-// whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
-// under section: `Validation-related attributes`
-const VALIDATION_ATTR_WHITELIST = [
-  'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
-];
-
 /**
@@ -61,3 +55,3 @@ * @extends {MDCFoundation<!MDCTextFieldAdapter>}
   get shouldFloat() {
-    return !this.isBadInput_() && (!!this.getValue() || this.isFocused_);
+    return this.isFocused_ || !!this.getValue() || this.isBadInput_();
   }
@@ -128,3 +122,4 @@
     /** @private {function(!Array): undefined} */
-    this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation(mutations);
+    this.validationAttributeChangeHandler_ = (attributesList) => this.handleValidationAttributeChange(attributesList);
+
     /** @private {!MutationObserver} */
@@ -137,3 +132,3 @@ this.validationObserver_;
     // Ensure label does not collide with any pre-filled value.
-    if (this.adapter_.hasLabel() && this.getValue()) {
+    if (this.adapter_.hasLabel() && (this.getValue() || this.isBadInput_())) {
       this.adapter_.floatLabel(this.shouldFloat);
@@ -156,4 +151,4 @@ this.notchOutline(this.shouldFloat);
     });
-    this.validationObserver_ = this.adapter_.registerValidationAttributeChangeHandler(
-      this.validationAttributeChangeHandler_);
+    this.validationObserver_ =
+        this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_);
   }
@@ -187,7 +182,7 @@
    * Handles validation attribute changes
-   * @param {!Array<MutationRecord>} mutationsList
+   * @param {!Array<string>} attributesList
    */
-  handleValidationAttributeMutation(mutationsList) {
-    mutationsList.some((mutation) => {
-      if (VALIDATION_ATTR_WHITELIST.indexOf(mutation.attributeName) > -1) {
+  handleValidationAttributeChange(attributesList) {
+    attributesList.some((attributeName) => {
+      if (VALIDATION_ATTR_WHITELIST.indexOf(attributeName) > -1) {
         this.styleValidity_(true);
@@ -348,2 +343,22 @@ return true;
   /**
+   * Sets the aria label of the icon.
+   * @param {string} label
+   */
+  setIconAriaLabel(label) {
+    if (this.icon_) {
+      this.icon_.setAriaLabel(label);
+    }
+  }
+
+  /**
+   * Sets the text content of the icon.
+   * @param {string} content
+   */
+  setIconContent(content) {
+    if (this.icon_) {
+      this.icon_.setContent(content);
+    }
+  }
+
+  /**
    * @return {boolean} True if the Text Field input fails in converting the
@@ -350,0 +365,0 @@ *     user-supplied value.

icon/adapter.js

@@ -52,2 +52,8 @@ /**
   /**
+   * Sets the text content of the icon element.
+   * @param {string} content
+   */
+  setContent(content) {}
+
+  /**
    * Registers an event listener on the icon element for a given event.
@@ -54,0 +60,0 @@ * @param {string} evtType

icon/foundation.js

@@ -43,2 +43,3 @@ /**
       removeAttr: () => {},
+      setContent: () => {},
       registerInteractionHandler: () => {},
@@ -77,6 +78,3 @@ deregisterInteractionHandler: () => {},
 
-  /**
-   * Sets the content of the helper text field.
-   * @param {boolean} disabled
-   */
+  /** @param {boolean} disabled */
   setDisabled(disabled) {
@@ -96,2 +94,12 @@ if (!this.savedTabIndex_) {
 
+  /** @param {string} label */
+  setAriaLabel(label) {
+    this.adapter_.setAttr('aria-label', label);
+  }
+
+  /** @param {string} content */
+  setContent(content) {
+    this.adapter_.setContent(content);
+  }
+
   /**
@@ -98,0 +106,0 @@ * Handles an interaction event

icon/index.js

@@ -51,2 +51,5 @@ /**
       removeAttr: (attr) => this.root_.removeAttribute(attr),
+      setContent: (content) => {
+        this.root_.textContent = content;
+      },
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
@@ -53,0 +56,0 @@ deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),

icon/README.md

@@ -136,2 +136,3 @@ <!--docs:
 `removeAttr(attr: string) => void` | Removes an attribute from the icon element.
+`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.
@@ -146,2 +147,4 @@ `deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.
 `setDisabled(disabled: boolean) => void` | Updates the icon's disabled state.
+`setAriaLabel(label: string) => void` | Updates the icon's aria-label.
+`setContent(content: string) => void` | Updates the icon's text content.
 `handleInteraction(evt: Event) => void` | Handles a text field interaction event.

index.js

@@ -313,2 +313,18 @@ /**
   /**
+   * Sets the aria label of the icon.
+   * @param {string} label
+   */
+  set iconAriaLabel(label) {
+    this.foundation_.setIconAriaLabel(label);
+  }
+
+  /**
+   * Sets the text content of the icon.
+   * @param {string} content
+   */
+  set iconContent(content) {
+    this.foundation_.setIconContent(content);
+  }
+
+  /**
    * Recomputes the outline SVG path for the outline element.
@@ -333,3 +349,4 @@ */
         registerValidationAttributeChangeHandler: (handler) => {
-          const observer = new MutationObserver(handler);
+          const getAttributesList = (mutationsList) => mutationsList.map((mutation) => mutation.attributeName);
+          const observer = new MutationObserver((mutationsList) => handler(getAttributesList(mutationsList)));
           const targetNode = this.root_.querySelector(strings.INPUT_SELECTOR);
@@ -336,0 +353,0 @@ const config = {attributes: true};

package.json

 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.35.2",
+  "version": "0.36.0-0",
   "license": "Apache-2.0",
@@ -23,3 +23,3 @@ "keywords": [
     "@material/notched-outline": "^0.35.0",
-    "@material/ripple": "^0.35.0",
+    "@material/ripple": "^0.36.0-0",
     "@material/rtl": "^0.35.0",
@@ -26,0 +26,0 @@ "@material/theme": "^0.35.0",

README.md

@@ -49,5 +49,5 @@ <!--docs:
 
-> NOTE: Text field supports `text` and `password` input types (e.g., `<input type="password" class="mdc-text-field__input">`).
+> NOTE: Text field supports `text`, `number`, and `password` input types (e.g., `<input type="password" class="mdc-text-field__input">`).
 >
-> Other input types (such as `number` and `date`) are not currently supported.
+> Other input types (such as `date`) are not currently supported.
 
@@ -236,2 +236,3 @@ > NOTE: For more details, see [MDC Line Ripple](../mdc-line-ripple/README.md)
 #### Other Mixins
+
 Mixin | Description
@@ -272,6 +273,8 @@ --- | ---
 `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(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.
+`registerValidationAttributeChangeHandler(handler: function(!Array<string>) => undefined) => !MutationObserver` | Registers a validation attribute change listener on the input element. Handler accepts list of attribute changes.
+`deregisterValidationAttributeChangeHandler(!MutationObserver) => void` | Disconnects a validation attribute observer on the input element.
 `getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape.
@@ -305,8 +308,10 @@ `isFocused() => boolean` | Returns whether the input is focused.
 `handleTextFieldInteraction(evt: Event) => void` | Handles click and keydown events originating from inside the Text Field component.
-`handleValidationAttributeMutation(mutationsList: !Array<MutationRecord>) => void` | Handles validation attribute changes.
+`handleValidationAttributeChange(attributesList: !Array<string>) => void` | Handles validation attribute changes.
 `activateFocus() => void` | Activates the focus state of the Text Field. Normally called in response to the input focus event.
 `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.
+`setIconAriaLabel(label: string) => void` | Sets the aria label of the icon.
+`setIconContent(content: string) => void` | Sets the text content of the icon.
 `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`.

No alert changes

Improved metrics

Total package byte prevSize

481229

increased by1.03%

Lines of code

7817

increased by1.61%

Number of lines in readme file

314

increased by1.62%

Dependency changes

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

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

• Updated@material/ripple@^0.36.0-0