fix character counter styles for mobile view (#7231)

* work for #7220 fix character counter styles for mobile view

* work for #7220 fix import

---------

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

src/defaultCss/defaultV2Css.ts

@@ -319,6 +319,7 @@ export var defaultV2Css = {
     root: "sd-input sd-text",
     small: "sd-row__question--small",
     controlDisabled: "sd-input--disabled",
+    constrolWithCharacterCounter: "sd-text__character-counter",
     content: "sd-text__content sd-question__content",
     remainingCharacterCounter: "sd-remaining-character-counter",
     onError: "sd-input--error"
@@ -330,6 +331,7 @@ export var defaultV2Css = {
     itemLabelOnError: "sd-multipletext__item-container--error",
     itemLabelAllowFocus: "sd-multipletext__item-container--allow-focus",
     itemLabelAnswered: "sd-multipletext__item-container--answered",
+    itemWithCharacterCounter: "sd-multipletext-item__character-counter",
     item: "sd-multipletext__item",
     itemTitle: "sd-multipletext__item-title",
     content: "sd-multipletext__content sd-question__content",

src/defaultV2-theme/blocks/sd-input.scss

@@ -69,6 +69,15 @@ textarea {
   position: relative;
 }
 
+.sd-text__character-counter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sd-text__character-counter:focus-within {
+  padding-inline-end: calcSize(8);
+}
+
 .sd-remaining-character-counter {
   display: none;
   flex-direction: row;

src/defaultV2-theme/blocks/sd-multipletext.scss

@@ -77,6 +77,15 @@
   }
 }
 
+.sd-multipletext-item__character-counter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sd-question__content:focus-within .sd-multipletext-item__character-counter {
+  padding-inline-end: calcSize(8);
+}
+
 .sd-multipletext__cell {
   padding-left: 0;
   padding-right: 0;

src/question_multipletext.ts

@@ -736,6 +736,7 @@ export class QuestionMultipleTextModel extends Question
       .append(this.cssClasses.itemLabelAnswered, item.editor.isAnswered)
       .append(this.cssClasses.itemLabelAllowFocus, !this.isDesignMode)
       .append(this.cssClasses.itemLabelOnError, item.editor.errors.length > 0)
+      .append(this.cssClasses.itemWithCharacterCounter, !!item.getMaxLength())
       .toString();
   }
   public getItemCss(): string {

src/question_text.ts

@@ -9,6 +9,7 @@ import { settings } from "./settings";
 import { QuestionTextBase } from "./question_textbase";
 import { ExpressionRunner } from "./conditions";
 import { SurveyModel } from "./survey";
+import { CssClassBuilder } from "./utils/cssClassBuilder";
 
 /**
  * A class that describes the Single-Line Input question type.
@@ -398,6 +399,10 @@ export class QuestionTextModel extends QuestionTextBase {
   protected hasPlaceholder(): boolean {
     return !this.isReadOnly && this.inputType !== "range";
   }
+  protected getControlCssClassBuilder(): CssClassBuilder {
+    return super.getControlCssClassBuilder()
+      .append(this.cssClasses.constrolWithCharacterCounter, !!this.getMaxLength());
+  }
   public isReadOnlyRenderDiv(): boolean {
     return this.isReadOnly && settings.readOnly.textRenderMode === "div";
   }

src/question_textbase.ts

@@ -133,12 +133,14 @@ export class QuestionTextBase extends Question {
       }
     }
   }
-  public getControlClass(): string {
+  protected getControlCssClassBuilder(): CssClassBuilder {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
       .append(this.cssClasses.onError, this.hasCssError())
-      .append(this.cssClasses.controlDisabled, this.isReadOnly)
-      .toString();
+      .append(this.cssClasses.controlDisabled, this.isReadOnly);
+  }
+  public getControlClass(): string {
+    return this.getControlCssClassBuilder().toString();
   }
 
   //a11y

visualRegressionTests/tests/defaultV2/question.ts

@@ -616,6 +616,46 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Remaining character counter - mobile view", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(350, 500);
+      await initSurvey(framework, {
+        focusFirstQuestionAutomatic: true,
+        questions: [
+          {
+            name: "name",
+            type: "text",
+            maxLength: 25,
+            defaultValue: "Tewwwwwwwwwwwwwwwwwwwwst"
+          }, {
+            "type": "multipletext",
+            "name": "question1",
+            "defaultValue": {
+              "text1": "Tewwwwwwwwwwwwwwwwwwwwst1",
+              "text2": "Tewwwwwwwwwwwwwwwwwwwwst2"
+            },
+            "items": [
+              {
+                "name": "text1",
+                "maxLength": 25
+              },
+              {
+                "name": "text2",
+                "maxLength": 25
+              }
+            ]
+          }]
+      });
+
+      await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-with-focus.png", Selector(".sd-text__content"), t, comparer);
+      await takeElementScreenshot("question-multipletext-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-multipletext__content"), t, comparer);
+
+      await t.pressKey("tab");
+      await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-text__content"), t, comparer);
+      await takeElementScreenshot("question-multipletext-remaining-character-counter-mobile-view-with-focus.png", Selector(".sd-multipletext__content"), t, comparer);
+    });
+  });
+
   test("Remaining character counter matrixdynamic", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1280, 1100);