feat: add readonly state

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

Author: abiramcodes

src/input/input.stories.ts

@@ -32,6 +32,7 @@ const Template = (args) => ({
 			[disabled]="disabled"
 			[theme]="theme"
 			[placeholder]="placeholder"
+			[readonly]="readonly"
 			[autocomplete]="autocomplete">
 		</cds-text-label>
 	`
@@ -48,7 +49,8 @@ Basic.args = {
 	placeholder: "Placeholder",
 	autocomplete: "on",
 	theme: "dark",
-	size: "md"
+	size: "md",
+	readonly: false
 };
 Basic.argTypes = {
 	autocomplete: {

src/input/text-input-label.component.ts

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