[DSC-2434] Replace third-party ui-switch with switch component

Author: atarix83

src/app/accessibility/accessibility-settings.service.spec.ts

@@ -31,7 +31,7 @@ describe('accessibilitySettingsService', () => {
   let cookieService: CookieServiceMock;
   let authService: AuthServiceStub;
   let ePersonService: EPersonDataService;
-  let klaroService: KlaroServiceStub;
+  let klaroService: any;
   let appConfig: AppConfig;
 
   beforeEach(() => {

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -8,10 +8,10 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
       </label>
 
       <div class="col-sm-4">
-        <ui-switch [id]="'disableNotificationTimeOutInput'"
-                   [(ngModel)]="formValues.notificationTimeOutEnabled"
-                   [ngModelOptions]="{ standalone: true }"
-        ></ui-switch>
+        <ds-switch
+          [options]="switchOptions"
+          [(selectedValue)]="formValues.notificationTimeOutEnabled">
+        </ds-switch>
       </div>
 
       <div *dsContextHelp="{

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -10,7 +10,6 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import {
   BehaviorSubject,
   Subscription,
@@ -20,7 +19,6 @@ import {
   distinctUntilChanged,
   map,
 } from 'rxjs/operators';
-import { AlertType } from 'src/app/shared/alert/alert-type';
 
 import {
   AccessibilitySetting,
@@ -29,13 +27,19 @@ import {
 } from '../../accessibility/accessibility-settings.service';
 import { AuthService } from '../../core/auth/auth.service';
 import { AlertComponent } from '../../shared/alert/alert.component';
+import { AlertType } from '../../shared/alert/alert-type';
 import { ContextHelpDirective } from '../../shared/context-help.directive';
 import { KlaroService } from '../../shared/cookies/klaro.service';
 import {
   hasValue,
   isEmpty,
 } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import {
+  SwitchColor,
+  SwitchComponent,
+  SwitchOption,
+} from '../../shared/switch/switch.component';
 
 /**
  * Component providing the form where users can update accessibility settings.
@@ -47,9 +51,9 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
     CommonModule,
     TranslateModule,
     FormsModule,
-    UiSwitchModule,
     ContextHelpDirective,
     AlertComponent,
+    SwitchComponent,
   ],
   standalone: true,
 })
@@ -62,6 +66,15 @@ export class AccessibilitySettingsComponent implements OnInit, OnDestroy {
   isAuthenticated: BehaviorSubject<boolean> = new BehaviorSubject(false);
   cookieIsAccepted: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success ,
+      label: 'info.accessibility-settings.notificationTimeOutEnabled.label.enabled' },
+    { value: false, label: 'info.accessibility-settings.notificationTimeOutEnabled.label.disabled' },
+  ];
+
   private subscriptions: Subscription[] = [];
 
   constructor(

src/assets/i18n/en.json5

@@ -2957,6 +2957,10 @@
 
   "info.accessibility-settings.liveRegionTimeOut.invalid": "Live region time out must be greater than 0",
 
+  "info.accessibility-settings.notificationTimeOutEnabled.label.disabled": "Disabled",
+
+  "info.accessibility-settings.notificationTimeOutEnabled.label.enabled": "Enabled",
+
   "info.accessibility-settings.notificationTimeOut.label": "Notification time out (in seconds)",
 
   "info.accessibility-settings.notificationTimeOut.hint": "The duration after which a notification disappears.",