@vaadin/vaadin-text-field - npm Package Compare versions

Comparing version 2.9.2 to 2.10.0

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "main": "vaadin-text-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-email-field.js

@@ -66,3 +66,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -69,0 +69,0 @@

src/vaadin-integer-field.js

@@ -35,3 +35,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -38,0 +38,0 @@

src/vaadin-number-field.d.ts

@@ -52,2 +52,11 @@ /**
   _createConstraintsObserver(): void;
+
+  /**
+   * Native [type=number] inputs don't update their value
+   * when you are entering input that the browser is unable to parse
+   * e.g. "--5", hence we have to override this method from `InputMixin`
+   * so that, when value is empty, it would additionally check
+   * for bad input based on the native `validity.badInput` property.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
   _valueChanged(newVal: unknown|null, oldVal: unknown|null): void;
@@ -54,0 +63,0 @@ checkValidity(): boolean;

src/vaadin-number-field.js

@@ -108,3 +108,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -283,3 +283,3 @@
   _setValue(value) {
-    this.value = this.inputElement.value = String(parseFloat(value));
+    this.value = this._inputElementValue = String(parseFloat(value));
     this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
@@ -416,2 +416,17 @@ }
   }
+
+  /**
+   * Native [type=number] inputs don't update their value
+   * when you are entering input that the browser is unable to parse
+   * e.g. "--5", hence we have to override this method from `InputMixin`
+   * so that, when value is empty, it would additionally check
+   * for bad input based on the native `validity.badInput` property.
+   *
+   * @param {InputEvent} event
+   * @protected
+   * @override
+   */
+  _setHasInputValue(event) {
+    this._hasInputValue = event.target.value.length > 0 || event.target.validity.badInput;
+  }
 }
@@ -418,0 +433,0 @@

src/vaadin-password-field.js

@@ -79,3 +79,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -82,0 +82,0 @@

src/vaadin-text-area.js

@@ -152,3 +152,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -279,3 +279,3 @@
 
-    if (!this.pattern || !this.inputElement.value) {
+    if (!this.pattern || !this._inputElementValue) {
       // Mark as valid if there is no pattern, or the value is empty
@@ -286,3 +286,3 @@ return true;
     try {
-      const match = this.inputElement.value.match(this.pattern);
+      const match = this._inputElementValue.match(this.pattern);
       return match ? match[0] === match.input : false;
@@ -289,0 +289,0 @@ } catch (_) {

src/vaadin-text-field-mixin.d.ts

@@ -37,2 +37,14 @@ /**
   /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   */
+  readonly _inputElementValueProperty: string;
+
+  /**
+   * The input element's value.
+   */
+  _inputElementValue: string;
+
+  /**
    * Whether the value of the control can be automatically completed by the browser.
@@ -142,2 +154,7 @@ * List of available options at:
   /**
+   * Whether the input element has a non-empty value.
+   */
+  _hasInputValue: boolean|null|undefined;
+
+  /**
    * This property is set to true when the control value is invalid.
@@ -172,2 +189,7 @@ */
   _createConstraintsObserver(): void;
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
   _onChange(e: Event): void;
@@ -182,7 +204,14 @@ _valueChanged(newVal: unknown|null, oldVal: unknown|null): void;
   ready(): void;
+  _setInvalid(invalid: boolean): void;
 
   /**
-   * Returns true if `value` is valid.
-   * `<iron-form>` uses this to check the validity for all its elements.
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
    *
+   * The method fires a `validated` event with the result of the validation.
+   *
    * @returns True if the value is valid.
@@ -189,0 +218,0 @@ */

src/vaadin-text-field-mixin.js

@@ -296,2 +296,13 @@ /**
       /**
+       * Whether the input element has a non-empty value.
+       *
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
+      /**
        * This property is set to true when the control value is invalid.
@@ -406,2 +417,57 @@ * @type {boolean}
 
+  /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return 'value';
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValue() {
+    return this.inputElement ? this.inputElement[this._inputElementValueProperty] : undefined;
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   */
+  set _inputElementValue(value) {
+    if (this.inputElement) {
+      this.inputElement[this._inputElementValueProperty] = value;
+    }
+  }
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   *
+   * @param {InputEvent} event
+   * @protected
+   */
+  _setHasInputValue(event) {
+    this._hasInputValue = event.target.value.length > 0;
+  }
+
+  /**
+   * An input event listener used to update `_hasInputValue` property.
+   * Do not override this method.
+   *
+   * @param {Event} event
+   * @private
+   */
+  __onInput(event) {
+    this._setHasInputValue(event);
+    this._onInput(event);
+  }
+
   /** @private */
@@ -454,2 +520,13 @@ _onInput(e) {
   /**
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
+  /**
    * @param {!Event} e
@@ -495,5 +572,5 @@ * @protected
     } else if (newVal !== undefined) {
-      this.inputElement.value = newVal;
+      this._inputElementValue = newVal;
     } else {
-      this.value = this.inputElement.value = '';
+      this.value = this._inputElementValue = '';
     }
@@ -541,3 +618,3 @@
     if (this.value) {
-      this.inputElement.value = this.value;
+      this._inputElementValue = this.value;
       this.validate();
@@ -622,3 +699,3 @@ }
     if (!required && !minlength && !maxlength && !pattern) {
-      this.invalid = false;
+      this._setInvalid(false);
     } else {
@@ -671,3 +748,3 @@ this.validate();
 
-    this._boundOnInput = this._onInput.bind(this);
+    this._boundOnInput = this.__onInput.bind(this);
     this._boundOnChange = this._onChange.bind(this);
@@ -719,12 +796,38 @@ this._boundOnBlur = this._onBlur.bind(this);
   /**
-   * Returns true if `value` is valid.
-   * `<iron-form>` uses this to check the validity for all its elements.
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
    *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
+   *
    * @return {boolean} True if the value is valid.
    */
   validate() {
-    return !(this.invalid = !this.checkValidity());
+    const isValid = this.checkValidity();
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   clear() {
+    this._hasInputValue = false;
     this.value = '';
@@ -966,2 +1069,10 @@ }
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 };

src/vaadin-text-field.js

@@ -119,3 +119,3 @@ /**
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
@@ -122,0 +122,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145070

2.92%

Lines of code

3591

4.27%

Number of low supply chain risk alerts

17

-10.53%

No dependency changes