@vaadin/vaadin-text-field 2.8.6 → 2.9.2

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-text-field",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.8.6",
+  "version": "2.9.2",
   "main": "vaadin-text-field.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -34,22 +32,25 @@
   },
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-control-state-mixin": "^2.2.1",
-    "@vaadin/vaadin-element-mixin": "^2.4.1",
     "@vaadin/vaadin-lumo-styles": "^1.6.0",
     "@vaadin/vaadin-material-styles": "^1.3.2",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1"
-  },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+    "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1"
+    "wct-browser-legacy": "^1.0.1",
+    "@vaadin/vaadin-demo-helpers": "^3.0.0",
+    "@vaadin/vaadin-button": "^2.1.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-email-field.js

@@ -63,7 +63,7 @@ class EmailFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
   }
 
   static get template() {

package/src/vaadin-integer-field.js

@@ -32,7 +32,7 @@ class IntegerFieldElement extends NumberFieldElement {
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
   }
 
   static get properties() {

package/src/vaadin-number-field.js

@@ -105,7 +105,7 @@ class NumberFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
   }
 
   static get properties() {

package/src/vaadin-password-field.js

@@ -76,7 +76,7 @@ class PasswordFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
   }
 
   static get properties() {

package/src/vaadin-text-area.d.ts

@@ -79,7 +79,18 @@ declare class TextAreaElement extends
   ThemableMixin(
   PolymerElement)))) {
   readonly _slottedTagName: string;
+
+  /**
+   * A regular expression that the value is checked against.
+   * The pattern must match the entire value, not just some subset.
+   */
+  pattern: string|null|undefined;
   ready(): void;
+
+  /**
+   * Returns true if the current textarea value satisfies all constraints (if any).
+   */
+  checkValidity(): boolean;
 }
 
 declare global {

package/src/vaadin-text-area.js

@@ -110,13 +110,18 @@ class TextAreaElement extends
       :host {
         animation: 1ms vaadin-text-area-appear;
       }
+
+      /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
+      :host([disabled]) [part='value'] {
+        user-select: none;
+      }
     </style>
 
     <div class="vaadin-text-area-container">
 
       <label part="label" on-click="focus" id="[[_labelId]]">[[label]]</label>
 
-      <div part="input-field" id="[[_inputId]]">
+      <div part="input-field" id="[[_inputId]]" on-scroll="__scrollPositionUpdated">
 
         <slot name="prefix"></slot>
 
@@ -144,7 +149,19 @@ class TextAreaElement extends
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * A regular expression that the value is checked against.
+       * The pattern must match the entire value, not just some subset.
+       */
+      pattern: {
+        type: String
+      }
+    };
   }
 
   static get observers() {
@@ -158,6 +175,29 @@ class TextAreaElement extends
     super.ready();
     this._updateHeight();
     this.addEventListener('animationend', this._onAnimationEnd);
+
+    this._inputField = this.root.querySelector('[part=input-field]');
+    // Wheel scrolling results in async scroll events. Preventing the wheel
+    // event, scrolling manually and then synchronously updating the scroll position CSS variable
+    // allows us to avoid some jumpy behavior that would occur on wheel otherwise.
+    this._inputField.addEventListener('wheel', (e) => {
+      const scrollTopBefore = this._inputField.scrollTop;
+      this._inputField.scrollTop += e.deltaY;
+
+      if (scrollTopBefore !== this._inputField.scrollTop) {
+        e.preventDefault();
+        this.__scrollPositionUpdated();
+      }
+    });
+
+    this.__scrollPositionUpdated();
+  }
+
+  /** @private */
+  __scrollPositionUpdated() {
+    this.updateStyles({
+      '--_text-area-vertical-scroll-position': this._inputField.scrollTop + 'px',
+    });
   }
 
   /** @private */
@@ -222,6 +262,33 @@ class TextAreaElement extends
     this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight);
   }
 
+  /**
+   * Returns true if the current textarea value satisfies all constraints (if any).
+   * @return {boolean}
+   */
+  checkValidity() {
+    if (!super.checkValidity()) {
+      return false;
+    }
+
+    // Native <textarea> does not support pattern attribute, so we have a custom logic
+    // according to WHATWG spec for <input>, with tests inspired by web-platform-tests
+    // https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute
+
+    if (!this.pattern || !this.inputElement.value) {
+      // Mark as valid if there is no pattern, or the value is empty
+      return true;
+    }
+
+    try {
+      const match = this.inputElement.value.match(this.pattern);
+      return match ? match[0] === match.input : false;
+    } catch (_) {
+      // If the pattern can not be compiled, then report as valid
+      return true;
+    }
+  }
+
   /**
    * Fired when the text-area height changes.
    *

package/src/vaadin-text-field.js

@@ -116,7 +116,7 @@ class TextFieldElement extends
   }
 
   static get version() {
-    return '2.8.6';
+    return '2.9.2';
   }
 
   static get properties() {

package/theme/material/vaadin-text-area-styles.js

@@ -20,6 +20,11 @@ const $_documentContainer = html`<dom-module id="material-text-area" theme-for="
         white-space: pre-wrap; /* override \`nowrap\` from <vaadin-text-field> */
         align-self: stretch; /* override \`baseline\` from <vaadin-text-field> */
       }
+
+      [part='input-field']::before,
+      [part='input-field']::after {
+        bottom: calc(var(--_text-area-vertical-scroll-position) * -1);
+      }
     </style>
   </template>
 </dom-module>`;