@vaadin/text-area 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-text-area.js",
   "module": "vaadin-text-area.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -32,17 +33,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.2",
-    "@vaadin/field-base": "^22.0.2",
-    "@vaadin/input-container": "^22.0.2",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.2"
+    "@vaadin/component-base": "23.0.0-alpha4",
+    "@vaadin/field-base": "23.0.0-alpha4",
+    "@vaadin/input-container": "23.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

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

@@ -1,12 +1,20 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+/**
+ * Fired when the user commits a value change.
+ */
+export type TextAreaChangeEvent = Event & {
+  target: TextArea;
+};
+
 /**
  * Fired when the `invalid` property changes.
  */
@@ -23,7 +31,9 @@ export interface TextAreaCustomEventMap {
   'value-changed': TextAreaValueChangedEvent;
 }
 
-export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEventMap {}
+export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEventMap {
+  change: TextAreaChangeEvent;
+}
 
 /**
  * `<vaadin-text-area>` is a web component for multi-line text input.
@@ -66,7 +76,7 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+declare class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
    * Maximum number of characters (in Unicode code points) that the user can enter.
    */

package/src/vaadin-text-area.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
+import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -56,9 +57,10 @@ registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-ar
  * @extends HTMLElement
  * @mixes InputFieldMixin
  * @mixes ElementMixin
+ * @mixes PatternMixin
  * @mixes ThemableMixin
  */
-export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-text-area';
   }
@@ -210,7 +212,7 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
         this.ariaTarget = input;
       })
     );
-    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
     this.addEventListener('animationend', this._onAnimationEnd);
   }
 
@@ -276,8 +278,33 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
     inputField.style.removeProperty('display');
     inputField.style.removeProperty('height');
     inputField.scrollTop = scrollTop;
+  }
+
+  /**
+   * Returns true if the current textarea value satisfies all constraints (if any).
+   * @return {boolean}
+   */
+  checkValidity() {
+    if (!super.checkValidity()) {
+      return false;
+    }
 
-    this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight);
+    // 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;
+    }
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-lumo-styles/color.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';