diff --git a/src/question_text.ts b/src/question_text.ts index 736d778010..dba4d91b2e 100644 --- a/src/question_text.ts +++ b/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", diff --git a/tests/markup/etalon_text.ts b/tests/markup/etalon_text.ts index db3bf8a1c8..b2b0069be0 100644 --- a/tests/markup/etalon_text.ts +++ b/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", +}); diff --git a/tests/markup/snapshots/text-masktype-numeric.snap.html b/tests/markup/snapshots/text-masktype-numeric.snap.html new file mode 100644 index 0000000000..b1b1d84b76 --- /dev/null +++ b/tests/markup/snapshots/text-masktype-numeric.snap.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tests/mask/mask_settings_tests.ts b/tests/mask/mask_settings_tests.ts index 6ba0450781..bfcabdf6c4 100644 --- a/tests/mask/mask_settings_tests.ts +++ b/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" }); +}); \ No newline at end of file