Password visibility switch, input value overflow fix

feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts

@@ -10,6 +10,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
+import { useFeatureStyles } from '@spartacus/core';
 
 @Component({
   selector: 'cx-csagent-login-form',
@@ -24,7 +25,9 @@ export class CSAgentLoginFormComponent implements OnInit {
   @Output()
   submitEvent = new EventEmitter<{ userId: string; password: string }>();
 
-  constructor(protected fb: UntypedFormBuilder) {}
+  constructor(protected fb: UntypedFormBuilder) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   ngOnInit(): void {
     this.csAgentLoginForm = this.fb.group({

feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.ts

@@ -14,6 +14,7 @@ import {
   AuthService,
   FeatureConfigService,
   RoutingService,
+  useFeatureStyles,
 } from '@spartacus/core';
 import { CustomFormValidators } from '@spartacus/storefront';
 import { UserRegisterFacade } from '@spartacus/user/profile/root';
@@ -68,7 +69,9 @@ export class OrderGuestRegisterFormComponent implements OnDestroy {
     protected routingService: RoutingService,
     protected authService: AuthService,
     protected fb: UntypedFormBuilder
-  ) {}
+  ) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   submit() {
     if (this.guestRegisterForm.valid) {

feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.ts

@@ -6,7 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { User } from '@spartacus/core';
+import { useFeatureStyles, User } from '@spartacus/core';
 import { LoadStatus } from '@spartacus/organization/administration/core';
 import { Observable } from 'rxjs';
 import { filter, first, map, switchMap, take } from 'rxjs/operators';
@@ -29,7 +29,9 @@ export class UserChangePasswordFormComponent {
     protected itemService: UserItemService,
     protected formService: UserChangePasswordFormService,
     protected messageService: MessageService
-  ) {}
+  ) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   save(form: UntypedFormGroup): void {
     this.itemService.current$

feature-libs/user/account/components/login-form/login-form.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { LoginFormComponentService } from './login-form-component.service';
 
@@ -15,7 +16,9 @@ import { LoginFormComponentService } from './login-form-component.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginFormComponent {
-  constructor(protected service: LoginFormComponentService) {}
+  constructor(protected service: LoginFormComponentService) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   form: UntypedFormGroup = this.service.form;
   isUpdating$: Observable<boolean> = this.service.isUpdating$;

feature-libs/user/account/components/otp-login-form/otp-login-form.component.ts

@@ -15,7 +15,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { RoutingService, WindowRef } from '@spartacus/core';
+import { RoutingService, useFeatureStyles, WindowRef } from '@spartacus/core';
 import { CustomFormValidators } from '@spartacus/storefront';
 import { BehaviorSubject, Observable, tap } from 'rxjs';
 
@@ -58,6 +58,10 @@ export class OneTimePasswordLoginFormComponent {
 
   @HostBinding('class.user-form') style = true;
 
+  constructor() {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
+
   onSubmit(): void {
     if (!this.form.valid) {
       this.form.markAllAsTouched();

feature-libs/user/profile/components/register/register.component.ts

@@ -24,6 +24,7 @@ import {
   GlobalMessageType,
   OAuthFlow,
   RoutingService,
+  useFeatureStyles,
 } from '@spartacus/core';
 import { CustomFormValidators, sortTitles } from '@spartacus/storefront';
 import { Title, UserSignUp } from '@spartacus/user/profile/root';
@@ -118,7 +119,9 @@ export class RegisterComponent implements OnInit, OnDestroy {
     protected anonymousConsentsConfig: AnonymousConsentsConfig,
     protected authConfigService: AuthConfigService,
     protected registerComponentService: RegisterComponentService
-  ) {}
+  ) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   ngOnInit() {
     this.titles$ = this.registerComponentService.getTitles().pipe(

feature-libs/user/profile/components/reset-password/reset-password.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { ResetPasswordComponentService } from './reset-password-component.service';
 
@@ -21,7 +22,9 @@ export class ResetPasswordComponent {
 
   token$: Observable<string> = this.service.resetToken$;
 
-  constructor(protected service: ResetPasswordComponentService) {}
+  constructor(protected service: ResetPasswordComponentService) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   onSubmit(token: string) {
     this.service.resetPassword(token);

feature-libs/user/profile/components/update-email/update-email.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { UpdateEmailComponentService } from './update-email-component.service';
 
@@ -16,7 +17,9 @@ import { UpdateEmailComponentService } from './update-email-component.service';
   host: { class: 'user-form' },
 })
 export class UpdateEmailComponent {
-  constructor(protected service: UpdateEmailComponentService) {}
+  constructor(protected service: UpdateEmailComponentService) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   form: UntypedFormGroup = this.service.form;
   isUpdating$: Observable<boolean> = this.service.isUpdating$;

feature-libs/user/profile/components/update-password/my-account-v2-password.component.ts

@@ -6,7 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { GlobalMessageType } from '@spartacus/core';
+import { GlobalMessageType, useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { UpdatePasswordComponentService } from './update-password-component.service';
 
@@ -26,6 +26,10 @@ export class MyAccountV2PasswordComponent {
   form: UntypedFormGroup = this.service.form;
   isUpdating$: Observable<boolean> = this.service.isUpdating$;
 
+  constructor() {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
+
   onSubmit(): void {
     this.service.updatePassword();
   }

feature-libs/user/profile/components/update-password/update-password.component.ts

@@ -11,9 +11,9 @@ import {
   inject,
 } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { RoutingService, useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { UpdatePasswordComponentService } from './update-password-component.service';
-import { RoutingService } from '@spartacus/core';
 
 @Component({
   selector: 'cx-update-password',
@@ -26,7 +26,9 @@ export class UpdatePasswordComponent {
     optional: true,
   });
 
-  constructor(protected service: UpdatePasswordComponentService) {}
+  constructor(protected service: UpdatePasswordComponentService) {
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
+  }
 
   form: UntypedFormGroup = this.service.form;
   isUpdating$: Observable<boolean> = this.service.isUpdating$;

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -582,6 +582,11 @@ export interface FeatureTogglesInterface {
    */
   a11ySearchBoxFocusOnEscape?: boolean;
 
+  /**
+   * Stops the inputs value from obstructing the 'PasswordVisibilityToggleComponent'.
+   */
+  a11yPasswordVisibliltyBtnValueOverflow?: boolean;
+
   /**
    * `StoreComponent and MyPreferredStoreComponent` an icon in a button that triggers showing
    * store's opening hours has an acceptable contrast ratio in a default theme
@@ -760,6 +765,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDialogTriggerRefocus: false,
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
+  a11yPasswordVisibliltyBtnValueOverflow: false,
   a11yViewHoursButtonIconContrast: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -376,6 +376,7 @@ if (environment.cpq) {
         a11yDialogTriggerRefocus: true,
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
+        a11yPasswordVisibliltyBtnValueOverflow: true,
         a11yViewHoursButtonIconContrast: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,

projects/storefrontstyles/scss/cxbase/blocks/forms.scss

@@ -503,3 +503,12 @@ form {
     }
   }
 }
+
+input[cxpasswordvisibilityswitch] {
+  @include forFeature('a11yPasswordVisibliltyBtnValueOverflow') {
+    $password-visibbility-btn-width: 30px;
+    padding-inline-end: calc(
+      $password-visibbility-btn-width + $input-padding-x
+    );
+  }
+}