feat: readonly state for password input (#2976)

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

Author: eduardmarcinco

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

@@ -200,14 +200,17 @@ export class PasswordInputLabelComponent extends BaseIconButton implements After
 	/**
 	 * Reference to the wrapper element.
 	 */
-	@ViewChild("wrapper") wrapper: ElementRef<HTMLDivElement>;
+	@ViewChild("wrapper", { static: true }) wrapper: ElementRef<HTMLDivElement>;
 
 	/**
 	 * Binding for applying class to host element.
 	 */
 	@HostBinding("class.cds--form-item") labelClass = true;
 	@HostBinding("class.cds--password-input-wrapper") passwordInputWrapper = true;
 	@HostBinding("class.cds--text-input-wrapper") textInputWrapper = true;
+	@HostBinding("class.cds--text-input-wrapper--readonly") get isReadonly() {
+		return this.wrapper?.nativeElement.querySelector("input")?.readOnly;
+	}
 
 	/**
 	 * Constructor for PasswordInputLabelComponent.

src/input/password.stories.ts

@@ -1,8 +1,8 @@
 /* tslint:disable variable-name */
 
-import { moduleMetadata, Meta } from "@storybook/angular";
-import { InputModule, PasswordInputLabelComponent } from ".";
 import { FormsModule } from "@angular/forms";
+import { Meta, moduleMetadata } from "@storybook/angular";
+import { InputModule, PasswordInputLabelComponent } from ".";
 
 export default {
 	title: "Components/Input/Password",
@@ -34,7 +34,8 @@ const Template = (args) => ({
 				[disabled]="disabled"
 				[theme]="theme"
 				[placeholder]="placeholder"
-				[autocomplete]="autocomplete">
+				[autocomplete]="autocomplete"
+				[readonly]="readonly">
 		</cds-password-label>
 	`
 });
@@ -50,7 +51,8 @@ Basic.args = {
 	placeholder: "Placeholder",
 	autocomplete: "on",
 	theme: "dark",
-	size: "md"
+	size: "md",
+	readonly: false
 };
 Basic.argTypes = {
 	autocomplete: {