@vaadin/vaadin-text-field 2.8.4 → 2.9.1

package/README.md

@@ -1,19 +1,18 @@
-[![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-text-field)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-text-field.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-text-field)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-text-field/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-text-field?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-text-field>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-text-field)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-text-field.svg)](https://vaadin.com/directory/component/vaadinvaadin-text-field)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-text-field) monorepository.
+> This repository contains the source code and releases of `<vaadin-text-field>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-text-field&gt;
+[&lt;vaadin-text-field&gt;](https://vaadin.com/components/vaadin-text-field) is a themable Web Component providing input controls in forms, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-text-field/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-text-field/html-api)
 
-[&lt;vaadin-text-field&gt;](https://vaadin.com/components/vaadin-text-field) is a themable Web Component providing input controls in forms, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-text-field)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-text-field)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```

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.4",
+  "version": "2.9.1",
   "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",
@@ -40,10 +38,9 @@
     "@vaadin/vaadin-material-styles": "^1.3.2",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "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",
@@ -51,5 +48,9 @@
     "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.4';
+    return '2.9.1';
   }
 
   static get template() {

package/src/vaadin-integer-field.js

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

package/src/vaadin-number-field.js

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

package/src/vaadin-password-field.js

@@ -76,7 +76,7 @@ class PasswordFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.8.4';
+    return '2.9.1';
   }
 
   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>
 
@@ -129,7 +134,7 @@ class TextAreaElement extends
 
       </div>
 
-      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
+      <div part="helper-text" id="[[_helperTextId]]">
         <slot name="helper">[[helperText]]</slot>
       </div>
 
@@ -144,7 +149,19 @@ class TextAreaElement extends
   }
 
   static get version() {
-    return '2.8.4';
+    return '2.9.1';
+  }
+
+  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,7 +175,25 @@ class TextAreaElement extends
     super.ready();
     this._updateHeight();
     this.addEventListener('animationend', this._onAnimationEnd);
-    this.__safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+    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) => {
+      e.preventDefault();
+      this._inputField.scrollTop += e.deltaY;
+      this.__scrollPositionUpdated();
+    });
+
+    this.__scrollPositionUpdated();
+  }
+
+  /** @private */
+  __scrollPositionUpdated() {
+    this.updateStyles({
+      '--_text-area-vertical-scroll-position': this._inputField.scrollTop + 'px',
+    });
   }
 
   /** @private */
@@ -187,18 +222,25 @@ class TextAreaElement extends
     const scrollTop = inputField.scrollTop;
     const input = this.inputElement;
 
-    const inputWidth = getComputedStyle(input).width;
-
-    const valueLength = this.value ? this.value.length : 0;
     // Only clear the height when the content shortens to minimize scrollbar flickering.
+    const valueLength = this.value ? this.value.length : 0;
+
     if (this._oldValueLength >= valueLength) {
+      const inputFieldHeight = getComputedStyle(inputField).height;
+      const inputWidth = getComputedStyle(input).width;
+
+      // Temporarily fix the height of the wrapping input field container to prevent changing the browsers scroll
+      // position while resetting the textareas height. If the textarea had a large height, then removing its height
+      // will reset its height to the default of two rows. That might reduce the height of the page, and the
+      // browser might adjust the scroll position before we can restore the measured height of the textarea.
+      inputField.style.display = 'block';
+      inputField.style.height = inputFieldHeight;
+
       // Fix the input element width so its scroll height isn't affected by host's disappearing scrollbars
       input.style.maxWidth = inputWidth;
+
+      // Clear the height of the textarea to allow measuring a reduced scroll height
       input.style.height = 'auto';
-      // Avoid a jumpy Safari rendering issue
-      if (this.__safari) {
-        inputField.style.display = 'block';
-      }
     }
     this._oldValueLength = valueLength;
 
@@ -210,11 +252,39 @@ class TextAreaElement extends
     // Restore
     input.style.removeProperty('max-width');
     inputField.style.removeProperty('display');
+    inputField.style.removeProperty('height');
     inputField.scrollTop = scrollTop;
 
     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

@@ -101,7 +101,7 @@ class TextFieldElement extends
 
       </div>
 
-      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
+      <div part="helper-text" id="[[_helperTextId]]">
         <slot name="helper">[[helperText]]</slot>
       </div>
 
@@ -116,7 +116,7 @@ class TextFieldElement extends
   }
 
   static get version() {
-    return '2.8.4';
+    return '2.9.1';
   }
 
   static get properties() {

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

@@ -29,12 +29,12 @@ const $_documentContainer = html`<dom-module id="lumo-text-area" theme-for="vaad
         border: none;
       }
 
-      :host(:hover:not([readonly]):not([focused])) [part="input-field"] {
+      :host(:hover:not([readonly]):not([focused]):not([invalid])) [part="input-field"] {
         background-color: var(--lumo-contrast-20pct);
       }
 
       @media (pointer: coarse) {
-        :host(:hover:not([readonly]):not([focused])) [part="input-field"] {
+        :host(:hover:not([readonly]):not([focused]):not([invalid])) [part="input-field"] {
           background-color: var(--lumo-contrast-10pct);
         }
 

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>`;