diff --git a/src/input/password-input-label.component.ts b/src/input/password-input-label.component.ts index 6b86894665..238f7d4e66 100644 --- a/src/input/password-input-label.component.ts +++ b/src/input/password-input-label.component.ts @@ -200,7 +200,7 @@ export class PasswordInputLabelComponent extends BaseIconButton implements After /** * Reference to the wrapper element. */ - @ViewChild("wrapper") wrapper: ElementRef; + @ViewChild("wrapper", { static: true }) wrapper: ElementRef; /** * Binding for applying class to host element. @@ -208,6 +208,9 @@ export class PasswordInputLabelComponent extends BaseIconButton implements After @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. diff --git a/src/input/password.stories.ts b/src/input/password.stories.ts index fe32995e88..13a66a39e7 100644 --- a/src/input/password.stories.ts +++ b/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"> ` }); @@ -50,7 +51,8 @@ Basic.args = { placeholder: "Placeholder", autocomplete: "on", theme: "dark", - size: "md" + size: "md", + readonly: false }; Basic.argTypes = { autocomplete: {