@vaadin/text-area 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,17 +33,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

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

@@ -26,10 +26,17 @@ export type TextAreaInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type TextAreaValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type TextAreaValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface TextAreaCustomEventMap {
   'invalid-changed': TextAreaInvalidChangedEvent;
 
   'value-changed': TextAreaValueChangedEvent;
+
+  validated: TextAreaValidatedEvent;
 }
 
 export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEventMap {
@@ -76,6 +83,7 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**

package/src/vaadin-text-area.js

@@ -54,6 +54,7 @@ registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-ar
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes InputFieldMixin
@@ -201,29 +202,6 @@ export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableM
     return this.$.clearButton;
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    this._inputField = this.shadowRoot.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._updateHeight();
-    this.__scrollPositionUpdated();
-  }
-
   /**
    * @protected
    * @override
@@ -246,6 +224,24 @@ export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableM
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
     this.addEventListener('animationend', this._onAnimationEnd);
+
+    this._inputField = this.shadowRoot.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._updateHeight();
+    this.__scrollPositionUpdated();
   }
 
   /** @private */