Add text aligment property into numeric mask type (#8004)

* resolve #7998 Add text aligment property into numeric mask type

* work for  #7998 add markup test

* work for #7998 Add text aligment property into numeric mask type

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

src/question_text.ts

@@ -62,6 +62,7 @@ export class QuestionTextModel extends QuestionTextBase {
   @property({
     onSet: (newValue: string, target: QuestionTextModel) => { target.onSetMaskType(newValue); }
   }) maskType: string;
+  @property() inputTextAlignment: "left" | "right" | "auto" ;
 
   get maskTypeIsEmpty(): boolean {
     return this.maskType === "none";
@@ -530,10 +531,19 @@ export class QuestionTextModel extends QuestionTextBase {
   get inputStyle(): any {
     var style: any = {};
     style.width = this.inputWidth;
+    this.updateTextAlign(style);
     return style;
   }
+  private updateTextAlign(style: any) {
+    if (this.inputTextAlignment !== "auto") {
+      style.textAlign = this.inputTextAlignment;
+    } else if (this.maskType === "numeric" || this.maskType === "currency") {
+      style.textAlign = "right";
+    }
+  }
   //web-based methods
   private _isWaitingForEnter = false;
+
   private updateValueOnEvent(event: any) {
     const newValue = event.target.value;
     if (!this.isTwoValueEquals(this.value, newValue)) {
@@ -749,6 +759,7 @@ Serializer.addClass(
         return isMinMaxType(obj);
       },
     },
+    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"], visible: false },
     {
       name: "maskType:masktype",
       default: "none",

tests/markup/etalon_text.ts

@@ -121,3 +121,18 @@ registerMarkupTest({
   },
   snapshot: "text-datalist",
 });
+registerMarkupTest({
+  name: "Test Text numeric mask type markup",
+  json: {
+
+    questions: [
+      {
+        type: "text",
+        name: "q1",
+        maskType: "numeric",
+        titleLocation: "hidden"
+      }
+    ],
+  },
+  snapshot: "text-masktype-numeric",
+});

tests/markup/snapshots/text-masktype-numeric.snap.html

@@ -0,0 +1 @@
+<input aria-invalid="false" aria-label="q1" aria-required="false" class="sv_q_text_root" id="testid0i" placeholder="" style="text-align:right;" type="text">

tests/mask/mask_settings_tests.ts

@@ -1,6 +1,7 @@
 import { InputMaskBase } from "../../src/mask/mask_base";
 import { InputMaskPattern } from "../../src/mask/mask_pattern";
 import { InputMaskNumeric } from "../../src/mask/mask_numeric";
+import { InputMaskCurrency } from "../../src/mask/mask_currency";
 import { QuestionTextModel } from "../../src/question_text";
 
 export default QUnit.module("Question text: Input mask");
@@ -173,3 +174,14 @@ QUnit.test("Currency mask: value & inputValue", function (assert) {
   assert.equal(q.value, "$ 123,456", "masked value #4");
   assert.equal(q.inputValue, "$ 123,456", "masked inputValue #4");
 });
+
+QUnit.test("Currency mask: text aligment", function (assert) {
+  const q = new QuestionTextModel("q1");
+  assert.deepEqual(q.inputStyle, { width: undefined });
+
+  q.maskType = "currency";
+  assert.deepEqual(q.inputStyle, { width: undefined, textAlign: "right" });
+
+  q.inputTextAlignment = "left";
+  assert.deepEqual(q.inputStyle, { width: undefined, textAlign: "left" });
+});