From f381bd666a0b7ed727c87c1c347522b73db78b42 Mon Sep 17 00:00:00 2001
From: Akshat Patel <akshat@live.ca>
Date: Thu, 14 Nov 2024 00:03:45 -0500
Subject: [PATCH 1/2] feat: enable textarea counter

Signed-off-by: Akshat Patel <akshat@live.ca>
---
 src/input/text-area.directive.ts      | 14 +++++++++++++-
 src/input/textarea-label.component.ts | 12 ++++++++++--
 src/input/textarea.stories.ts         | 15 ++++++++++++---
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts
index 06b473cabb..aa1e3fa04e 100644
--- a/src/input/text-area.directive.ts
+++ b/src/input/text-area.directive.ts
@@ -1,4 +1,9 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import {
+	Directive,
+	ElementRef,
+	HostBinding,
+	Input
+} from "@angular/core";
 
 /**
  * A directive for applying styling to a textarea element.
@@ -28,7 +33,14 @@ export class TextArea {
 		return this.theme === "light";
 	}
 
+	/**
+	 * Binding maxlength to textarea
+	 */
+	@Input() @HostBinding("attr.maxlength") maxlength: number;
+
 	@HostBinding("attr.data-invalid") get getInvalidAttr() {
 		return this.invalid ? true : undefined;
 	}
+
+	constructor(public elementRef: ElementRef<HTMLTextAreaElement>) {}
 }
diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts
index 3221fe07c3..7a8e786715 100644
--- a/src/input/textarea-label.component.ts
+++ b/src/input/textarea-label.component.ts
@@ -49,6 +49,11 @@ import { TextArea } from "./text-area.directive";
 						<ng-content></ng-content>
 					</ng-template>
 				</label>
+				<div
+					*ngIf="enableCounter && textArea?.maxlength > 0 && textArea.elementRef"
+					class="cds--label">
+					{{textArea.elementRef?.nativeElement?.value?.length}} / {{textArea.maxlength}}
+				</div>
 			</div>
 			<div
 				class="cds--text-area__wrapper"
@@ -166,6 +171,10 @@ export class TextareaLabelComponent implements AfterViewInit {
 	 * Set the arialabel for label
 	 */
 	@Input() ariaLabel: string;
+	/**
+	 * Enable textarea character counter
+	 */
+	@Input() enableCounter = false;
 
 	/**
 	 * Experimental: enable fluid state
@@ -175,8 +184,7 @@ export class TextareaLabelComponent implements AfterViewInit {
 	// @ts-ignore
 	@ViewChild("wrapper", { static: false }) wrapper: ElementRef<HTMLDivElement>;
 
-	// @ts-ignore
-	@ContentChild(TextArea, { static: false }) textArea: TextArea;
+	@ContentChild(TextArea) textArea: TextArea;
 
 	@HostBinding("class.cds--form-item") labelClass = true;
 
diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts
index a90ebf2762..2a0121ddb6 100644
--- a/src/input/textarea.stories.ts
+++ b/src/input/textarea.stories.ts
@@ -25,7 +25,9 @@ export default {
 		theme: "dark",
 		readonly: false,
 		fluid: false,
-		skeleton: false
+		skeleton: false,
+		maxlength: undefined,
+		enableCounter: false
 	},
 	argTypes: {
 		autocomplete: {
@@ -35,6 +37,9 @@ export default {
 		theme: {
 			options: ["light", "dark"],
 			control: "radio"
+		},
+		maxlength: {
+			control: "number"
 		}
 	},
 	component: TextareaLabelComponent
@@ -51,7 +56,8 @@ const Template = (args) => ({
 		[fluid]="fluid"
 		[skeleton]="skeleton"
 		[warn]="warn"
-		[warnText]="warnText">
+		[warnText]="warnText"
+		[enableCounter]="enableCounter">
 		{{label}}
 		<textarea
 			cdsTextArea
@@ -62,7 +68,10 @@ const Template = (args) => ({
 			[rows]="rows"
 			[cols]="cols"
 			[readonly]="readonly"
-			aria-label="textarea"></textarea>
+			[maxlength]="maxlength"
+			aria-label="textarea"
+			style="width: 100%;">
+		</textarea>
 		</cds-textarea-label>
 	`
 });

From b240c38e2210330ce88d78a39b90e5835e9232ee Mon Sep 17 00:00:00 2001
From: Akshat Patel <38994122+Akshat55@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:44:24 -0500
Subject: [PATCH 2/2] fix: update character count on key up event

Signed-off-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com>
---
 src/input/textarea-label.component.ts | 12 ++++++--
 src/input/textarea.stories.ts         | 42 +++++++++++++--------------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts
index 7a8e786715..791da13aab 100644
--- a/src/input/textarea-label.component.ts
+++ b/src/input/textarea-label.component.ts
@@ -52,7 +52,7 @@ import { TextArea } from "./text-area.directive";
 				<div
 					*ngIf="enableCounter && textArea?.maxlength > 0 && textArea.elementRef"
 					class="cds--label">
-					{{textArea.elementRef?.nativeElement?.value?.length}} / {{textArea.maxlength}}
+					{{characterCounter}} / {{textArea.maxlength}}
 				</div>
 			</div>
 			<div
@@ -61,7 +61,8 @@ import { TextArea } from "./text-area.directive";
 					'cds--text-area__wrapper--warn': warn
 				}"
 				[attr.data-invalid]="(invalid ? true : null)"
-				#wrapper>
+				#wrapper
+				(keyup)="keyDownEvent($event)">
 				<svg
 					*ngIf="!fluid && invalid"
 					cdsIcon="warning--filled"
@@ -175,11 +176,11 @@ export class TextareaLabelComponent implements AfterViewInit {
 	 * Enable textarea character counter
 	 */
 	@Input() enableCounter = false;
-
 	/**
 	 * Experimental: enable fluid state
 	 */
 	@Input() fluid = false;
+	characterCounter = 0;
 
 	// @ts-ignore
 	@ViewChild("wrapper", { static: false }) wrapper: ElementRef<HTMLDivElement>;
@@ -219,6 +220,7 @@ export class TextareaLabelComponent implements AfterViewInit {
 					this.changeDetectorRef.detectChanges();
 				}
 				inputElement.setAttribute("id", this.labelInputID);
+				this.characterCounter = this.textArea.elementRef?.nativeElement?.value?.length;
 				return;
 			}
 
@@ -236,4 +238,8 @@ export class TextareaLabelComponent implements AfterViewInit {
 	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}
+
+	keyDownEvent(event) {
+		this.characterCounter = event.target.textLength;
+	}
 }
diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts
index 2a0121ddb6..28a0c47eb9 100644
--- a/src/input/textarea.stories.ts
+++ b/src/input/textarea.stories.ts
@@ -49,29 +49,29 @@ const Template = (args) => ({
 	props: args,
 	template: `
 		<cds-textarea-label
-		[helperText]="helperText"
-		[invalid]="invalid"
-		[disabled]="disabled"
-		[invalidText]="invalidText"
-		[fluid]="fluid"
-		[skeleton]="skeleton"
-		[warn]="warn"
-		[warnText]="warnText"
-		[enableCounter]="enableCounter">
-		{{label}}
-		<textarea
-			cdsTextArea
-			[placeholder]="placeholder"
+			[helperText]="helperText"
 			[invalid]="invalid"
 			[disabled]="disabled"
-			[theme]="theme"
-			[rows]="rows"
-			[cols]="cols"
-			[readonly]="readonly"
-			[maxlength]="maxlength"
-			aria-label="textarea"
-			style="width: 100%;">
-		</textarea>
+			[invalidText]="invalidText"
+			[fluid]="fluid"
+			[skeleton]="skeleton"
+			[warn]="warn"
+			[warnText]="warnText"
+			[enableCounter]="enableCounter">
+			{{label}}
+			<textarea
+				cdsTextArea
+				[placeholder]="placeholder"
+				[invalid]="invalid"
+				[disabled]="disabled"
+				[theme]="theme"
+				[rows]="rows"
+				[cols]="cols"
+				[readonly]="readonly"
+				[maxlength]="maxlength"
+				[attr.aria-label]="textarea"
+				style="width: 100%;">
+			</textarea>
 		</cds-textarea-label>
 	`
 });