feat: add readonly state for textarea (#2987)

Co-authored-by: Akshat Patel <[email protected]>

Author: eduardmarcinco

src/input/textarea-label.component.ts

@@ -144,6 +144,10 @@ export class TextareaLabelComponent implements AfterViewInit {
 
 	@HostBinding("class.cds--form-item") labelClass = true;
 
+	@HostBinding("class.cds--text-area__wrapper--readonly") get isReadonly() {
+		return this.wrapper?.nativeElement.querySelector("textarea")?.readOnly ?? false;
+	}
+
 	/**
 	 * Creates an instance of Label.
 	 */

src/input/textarea.stories.ts

@@ -32,6 +32,7 @@ const Template = (args) => ({
 			[theme]="theme"
 			[rows]="rows"
 			[cols]="cols"
+			[readonly]="readonly"
 			aria-label="textarea"></textarea>
 		</cds-textarea-label>
 	`
@@ -49,7 +50,8 @@ Basic.args = {
 	cols: 50,
 	rows: 4,
 	autocomplete: "on",
-	theme: "dark"
+	theme: "dark",
+	readonly: false
 };
 Basic.argTypes = {
 	autocomplete: {