diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md index 6ce142af94..7f37e9ea6f 100644 --- a/projects/angular/clarity.api.md +++ b/projects/angular/clarity.api.md @@ -2919,8 +2919,12 @@ export class ClrPasswordContainer extends ClrAbstractContainer { // (undocumented) focusService: FocusService_2; // (undocumented) + hidePasswordText(label: string): string; + // (undocumented) show: boolean; // (undocumented) + showPasswordText(label: string): string; + // (undocumented) toggle(): void; // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration; diff --git a/projects/angular/src/forms/password/password-container.spec.ts b/projects/angular/src/forms/password/password-container.spec.ts index 6341b3f7a3..dadf3c1d37 100644 --- a/projects/angular/src/forms/password/password-container.spec.ts +++ b/projects/angular/src/forms/password/password-container.spec.ts @@ -104,10 +104,10 @@ export default function (): void { it('should provide screen-reader only text for toggle button', () => { const button: HTMLButtonElement = containerEl.querySelector('button'); - expect(button.textContent.trim()).toEqual('Show password'); + expect(button.textContent.trim()).toEqual('Show password for Hello World'); button.click(); fixture.detectChanges(); - expect(button.textContent.trim()).toEqual('Hide password'); + expect(button.textContent.trim()).toEqual('Hide password for Hello World'); }); }); }); diff --git a/projects/angular/src/forms/password/password-container.ts b/projects/angular/src/forms/password/password-container.ts index 49884a8034..81aee45d73 100644 --- a/projects/angular/src/forms/password/password-container.ts +++ b/projects/angular/src/forms/password/password-container.ts @@ -40,7 +40,7 @@ export const TOGGLE_SERVICE_PROVIDER = { provide: TOGGLE_SERVICE, useFactory: To > - {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }} + {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }} @@ -118,4 +118,12 @@ export class ClrPasswordContainer extends ClrAbstractContainer { this.show = !this.show; this.toggleService.next(this.show); } + + showPasswordText(label: string) { + return this.commonStrings.parse(this.commonStrings.keys.passwordShow, { LABEL: label }); + } + + hidePasswordText(label: string) { + return this.commonStrings.parse(this.commonStrings.keys.passwordHide, { LABEL: label }); + } } diff --git a/projects/angular/src/utils/i18n/common-strings.default.ts b/projects/angular/src/utils/i18n/common-strings.default.ts index e6935ce472..1d62aa734e 100644 --- a/projects/angular/src/utils/i18n/common-strings.default.ts +++ b/projects/angular/src/utils/i18n/common-strings.default.ts @@ -108,8 +108,8 @@ export const commonStringsDefault: ClrCommonStrings = { * Password Input * Screen-reader text for the hide/show password field button */ - passwordHide: 'Hide password', - passwordShow: 'Show password', + passwordHide: 'Hide password for {LABEL}', + passwordShow: 'Show password for {LABEL}', /** * Datagrid footer; sr-only text after the number of selected rows.