diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java index 7f980f9f89..852e9ebe9a 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java +++ b/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()) { diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TextInput.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TextInput.java index 4415ceabde..a287e6152d 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TextInput.java +++ b/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; + } } diff --git a/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImplTest.java b/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImplTest.java index 1b7debab49..aace3fe8ac 100644 --- a/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImplTest.java +++ b/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); diff --git a/bundles/af-core/src/test/resources/form/textinput/test-content.json b/bundles/af-core/src/test/resources/form/textinput/test-content.json index 6ec6ba2def..7fa1447d79 100644 --- a/bundles/af-core/src/test/resources/form/textinput/test-content.json +++ b/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, diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html new file mode 100644 index 0000000000..065b5bc6ad --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/README.md index b76b834337..fe285d488c 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/README.md +++ b/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 diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/_cq_dialog/.content.xml index 98b9df871f..ab49ee4122 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/_cq_dialog/.content.xml +++ b/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"/> + { + const charCount = this.widget.value.length; + if (counterSpan) { + counterSpan.textContent = charCount; + } + }; + this.widget.addEventListener('input', updateCharacterCounter); + updateCharacterCounter(); // Set the initial character count } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html index 23e41392be..0a3942efcc 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html +++ b/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}"> @@ -65,6 +66,7 @@ minlength="${text.minLength}" maxlength="${text.maxLength}" dir="auto"/> +
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.js index 07c81379d4..8f9917fdc3 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.js @@ -22,6 +22,7 @@ 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, @@ -29,6 +30,7 @@ use(function () { longDescriptionPath: longDescriptionPath, questionMarkPath: questionMarkPath, errorMessagePath: errorMessagePath, + characterCounterPath: characterCounterPath, clientlibs: clientlibsArr } }); \ No newline at end of file diff --git a/ui.tests/test-module/specs/textinput/textinput.authoring.spec.js b/ui.tests/test-module/specs/textinput/textinput.authoring.spec.js index f8799b436d..a1c220c53d 100644 --- a/ui.tests/test-module/specs/textinput/textinput.authoring.spec.js +++ b/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");