Adding character counter to Text input textfield/textarea component

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java

@@ -56,6 +56,10 @@ public class TextInputImpl extends AbstractFieldImpl implements TextInput {
     @Nullable
     protected String format;
 
+    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
+    @Default(booleanValues = false)
+    protected boolean showCharCounter;
+
     @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "pattern")
     @Nullable
     protected String pattern;
@@ -74,6 +78,11 @@ public boolean isMultiLine() {
         return multiLine;
     }
 
+    @Override
+    public boolean showCharCounter() {
+        return showCharCounter;
+    }
+
     @Override
     public String getFieldType() {
         if (isMultiLine()) {

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TextInput.java

@@ -66,4 +66,14 @@ default String getFormat() {
         return null;
     }
 
+    /**
+     * Returns {@code true} if character counter needs to be shown, otherwise {@code false}.
+     *
+     * @return {@code true} if character counter needs to be shown, otherwise {@code false}
+     * @since com.adobe.cq.forms.core.components.models.form 0.0.1
+     */
+    @JsonIgnore
+    default boolean showCharCounter() {
+        return false;
+    }
 }

bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImplTest.java

@@ -231,6 +231,15 @@ void testIsMultiLine() {
         assertEquals(false, textInputMock.isMultiLine());
     }
 
+    @Test
+    void testShowCharCounter() {
+        TextInput textInput = Utils.getComponentUnderTest(PATH_TEXTINPUT_CUSTOMIZED, TextInput.class, context);
+        assertEquals(true, textInput.showCharCounter());
+        TextInput textInputMock = Mockito.mock(TextInput.class);
+        Mockito.when(textInputMock.showCharCounter()).thenCallRealMethod();
+        assertEquals(false, textInputMock.showCharCounter());
+    }
+
     @Test
     void testGetPlaceHolder() {
         TextInput textInput = Utils.getComponentUnderTest(PATH_TEXTINPUT_CUSTOMIZED, TextInput.class, context);

bundles/af-core/src/test/resources/form/textinput/test-content.json

@@ -10,6 +10,7 @@
     "jcr:primaryType": "nt:unstructured",
     "sling:resourceType"    : "core/fd/components/form/textinput/v1/textinput",
     "name" : "abc",
+    "showCharCounter" : true,
     "jcr:title" : "def",
     "hideTitle" : false,
     "dorExclusion": true,
@@ -73,6 +74,7 @@
     "sling:resourceType"    : "core/fd/components/form/textinput/v1/textinput",
     "name" : "abc",
     "multiLine" : true,
+    "showCharCounter" : true,
     "fieldType": "multiline-input",
     "jcr:title" : "def",
     "hideTitle" : false,

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html

@@ -0,0 +1,6 @@
+<template data-sly-template.characterCounter="${@ componentId, showCharCounter, maxLength, bemBlock}">
+  <div data-sly-test="${showCharCounter}" class="${bemBlock}__charcounter" aria-label="Character Counter">
+    <span class="${bemBlock}__charcount" aria-label="Current Character Count"></span>
+    <span data-sly-test="${maxLength}" class="${bemBlock}__maxchar" aria-label="Maximum Character Count">/${maxLength @ i18n, locale=request.locale}</span>
+  </div>
+</template>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/README.md

@@ -56,6 +56,9 @@ BLOCK cmp-adaptiveform-textinput
     ELEMENT cmp-adaptiveform-textinput__label
     ELEMENT cmp-adaptiveform-textinput__label-container
     ELEMENT cmp-adaptiveform-textinput__widget
+    ELEMENT cmp-adaptiveform-textinput__charcounter
+    ELEMENT cmp-adaptiveform-textinput__charcount
+    ELEMENT cmp-adaptiveform-textinput__maxchar
     ELEMENT cmp-adaptiveform-textinput__questionmark
     ELEMENT cmp-adaptiveform-textinput__shortdescription
     ELEMENT cmp-adaptiveform-textinput__longdescription

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/_cq_dialog/.content.xml

@@ -221,6 +221,14 @@
                                                     fieldLabel="Maximum Number of characters"
                                                     min="0"
                                                     name="./maxLength"/>
+                                            <showCharCounter
+                                                    jcr:primaryType="nt:unstructured"
+                                                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
+                                                    checked="{Boolean}false"
+                                                    fieldLabel="Show Character Counter?"
+                                                    name="./showCharCounter"
+                                                    text="Show Character Counter?"
+                                                    value="true"/>
                                             <maxLengthMessage
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/textarea"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/clientlibs/site/css/textinputview.css

@@ -41,3 +41,7 @@ textarea.cmp-adaptiveform-textinput__widget{
 .cmp-adaptiveform-textinput__questionmark {
 
 }
+.cmp-adaptiveform-textinput__charcounter {
+}
+.cmp-adaptiveform-textinput__charcount {
+}

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/clientlibs/site/js/textinputview.js

@@ -34,7 +34,8 @@
             description: `.${TextInput.bemBlock}__longdescription`,
             qm: `.${TextInput.bemBlock}__questionmark`,
             errorDiv: `.${TextInput.bemBlock}__errormessage`,
-            tooltipDiv: `.${TextInput.bemBlock}__shortdescription`
+            tooltipDiv: `.${TextInput.bemBlock}__shortdescription`,
+            counterSpan: `.${TextInput.bemBlock}__charcount`
         };
 
         constructor(params) {
@@ -64,6 +65,9 @@
         getQuestionMarkDiv() {
             return this.element.querySelector(TextInput.selectors.qm);
         }
+        getCounterSpan() {
+            return this.element.querySelector(TextInput.selectors.counterSpan);
+        }
 
         setModel(model) {
             super.setModel(model);
@@ -79,6 +83,19 @@
                 this.setActive();
                 this.setWidgetValueToModelValue();
             });
+            this.setupCharacterCounter();
+        }
+
+        setupCharacterCounter() {
+        	const counterSpan = this.getCounterSpan();
+        	const updateCharacterCounter = () => {
+        		const charCount = this.widget.value.length;
+        		if (counterSpan) {
+        			counterSpan.textContent = Granite.I18n.getMessage(charCount);
+        		}
+        	};
+        	this.widget.addEventListener('input', updateCharacterCounter);
+        	updateCharacterCounter(); // Set the initial character count
         }
     }
 

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html

@@ -19,6 +19,7 @@
      data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
      data-sly-use.label="${renderer.labelPath}"
      data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
+     data-sly-use.characterCounter="${renderer.characterCounterPath}"
      data-sly-use.longDescription="${renderer.longDescriptionPath}"
      data-sly-use.errorMessage="${renderer.errorMessagePath}"
      data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
@@ -65,6 +66,7 @@
            minlength="${text.minLength}"
            maxlength="${text.maxLength}"
            dir="auto"/>
+    <div data-sly-call="${characterCounter.characterCounter @componentId=text.id, showCharCounter=text.showCharCounter, maxLength=text.maxLength, bemBlock='cmp-adaptiveform-textinput'}" data-sly-unwrap></div>
     <div data-sly-call="${shortDescription.shortDescription @componentId=text.id, shortDescriptionVisible=text.tooltipVisible, shortDescription=text.tooltip, bemBlock='cmp-adaptiveform-textinput'}" data-sly-unwrap>
     </div>
     <div data-sly-call="${longDescription.longDescription @componentId=text.id, longDescription=text.description, bemBlock='cmp-adaptiveform-textinput'}" data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.js

@@ -22,13 +22,15 @@ use(function () {
   var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html";
   var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html"
   var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html";
+  var characterCounterPath = "core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html";
 
   return {
     labelPath: labelPath,
     shortDescriptionPath: shortDescriptionPath,
     longDescriptionPath: longDescriptionPath,
     questionMarkPath: questionMarkPath,
     errorMessagePath: errorMessagePath,
+    characterCounterPath: characterCounterPath,
     clientlibs: clientlibsArr
   }
 });

ui.tests/test-module/specs/textinput/textinput.authoring.spec.js

@@ -50,6 +50,8 @@ describe('Page - Authoring', function () {
         // Check If Dialog Options Are Visible
         cy.get("[name='./multiLine']")
             .should("exist");
+         cy.get("[name='./showCharCounter']")
+            .should("exist");
         cy.get("[name='./autocomplete']")
             .should("exist");