add toggle to enable/disable block audits

frontend/src/app/shared/components/toggle/toggle.component.html

@@ -1,8 +1,8 @@
 <div class="d-flex align-items-center">
-  <span style="margin-bottom: 0.5rem">{{ textLeft }}</span>&nbsp;
-  <label class="switch">
+  <span>{{ textLeft }}</span>&nbsp;
+  <label class="switch" style="margin-bottom: 0;">
     <input type="checkbox" [checked]="checked" (change)="onToggleStatusChanged($event)">
-    <span class="slider round"></span>
+    <span class="slider round" [class.animate]="animate"></span>
   </label>
-  &nbsp;<span style="margin-bottom: 0.5rem">{{ textRight }}</span>
+  &nbsp;<span>{{ textRight }}</span>
 </div>

frontend/src/app/shared/components/toggle/toggle.component.scss

@@ -22,8 +22,6 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
 }
 
 .slider:before {
@@ -34,6 +32,9 @@
   left: 2px;
   bottom: 2px;
   background-color: white;
+}
+
+.slider.animate, .slider.animate:before {
   -webkit-transition: .4s;
   transition: .4s;
 }

frontend/src/app/shared/components/toggle/toggle.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, AfterViewInit } from '@angular/core';
+import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 
 @Component({
   selector: 'app-toggle',
@@ -11,9 +11,15 @@ export class ToggleComponent implements AfterViewInit {
   @Input() textLeft: string;
   @Input() textRight: string;
   @Input() checked: boolean = false;
+  animate: boolean = false;
+
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) { }
 
   ngAfterViewInit(): void {
-    this.toggleStatusChanged.emit(false);
+    this.animate = true;
+    setTimeout(() => { this.cd.markForCheck()});
   }
 
   onToggleStatusChanged(e): void {