Allow masks into vaadin-text-area components

Author: brunovianarezende

Diff for: vcf-input-mask-demo/src/main/java/com/vaadin/componentfactory/demo/InputMaskDemoView.java

@@ -20,6 +20,7 @@
 import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.textfield.TextArea;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.data.value.ValueChangeMode;
 import com.vaadin.flow.router.Route;
@@ -41,6 +42,7 @@ public InputMaskDemoView() {
     createBasicInputMaskOnDatePickerDemo();
     createNumberInputMaskOnTextFieldDemo();
     createRegExpInputMaskOnTextFieldDemo();
+    createBasicInputMaskOnTextAreaDemo();
   }
 
   private void createNumberInputMaskOnTextFieldDemo() {
@@ -138,4 +140,29 @@ private void createBasicInputMaskOnDatePickerDemo() {
     add(createCard("Simple input mask on date picker", dateField, message));
   }
 
+  private void createBasicInputMaskOnTextAreaDemo() {
+    Div message = createMessageDiv("simple-input-mask-on-text-area-demo-message");
+    Span maskedValueSpan = new Span();
+    Span unmaskedValueSpan = new Span();
+
+
+    TextArea phoneField = new TextArea("Phone");
+    phoneField.setPlaceholder(PHONE_MASK);
+    InputMask phoneFieldMask = new InputMask(PHONE_MASK);
+    phoneFieldMask.extend(phoneField);
+
+    phoneField.addValueChangeListener(ev -> {
+      phoneFieldMask.getMaskedValue(masked -> {
+        maskedValueSpan.setText("Masked value: " + masked);
+      });
+      phoneFieldMask.getUnmaskedValue(unmasked -> {
+        unmaskedValueSpan.setText(" - Unmasked value: " + unmasked);
+      });
+      message.add(maskedValueSpan, unmaskedValueSpan);
+    });
+
+    phoneField.setId("simple-input-mask-on-text-area");
+
+    add(createCard("Simple input mask on text area", phoneField, message));
+  }
 }

Diff for: vcf-input-mask/src/main/resources/META-INF/resources/frontend/src/input-mask.js

@@ -41,7 +41,7 @@ class InputMask extends LitElement {
   /** Initialize imask property */
   _initImask(){
 	this._parentElement = this.parentElement;
-	if ('VAADIN-TEXT-FIELD' === this.parentElement.tagName.toUpperCase()) {
+	if (['VAADIN-TEXT-FIELD', 'VAADIN-TEXT-AREA'].includes(this.parentElement.tagName.toUpperCase())) {
 	  this.imask = new IMask(this.parentElement.inputElement, this._generateIMaskOptions(JSON.parse(this.options)));  
 	  this._boundHandleUnmaskedValueChange = this._handleUnmaskedValueChange.bind(this);
 	  this._parentElement.addEventListener("change", this._boundHandleUnmaskedValueChange);