fix(ui): centered toggle switch vertically (#1413)

* fix(ui): centered toggle switch vertically

* fix(ui): encapsulated mat-slide-toggle in a div

* fix(style): added align-items center property

* fix(code): fixed linting

Author: 23nobody

projects/components/src/toggle-switch/toggle-switch.component.scss

@@ -1,7 +1,10 @@
 @import 'color-palette';
 @import 'font';
 
-:host {
+.toggle-switch {
+  display: flex;
+  align-items: center;
+
   ::ng-deep {
     .mat-slide-toggle {
       &.disabled {

projects/components/src/toggle-switch/toggle-switch.component.ts

@@ -7,15 +7,17 @@ import { ToggleSwitchSize } from './toggle-switch-size';
   styleUrls: ['./toggle-switch.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-slide-toggle
-      color="primary"
-      [checked]="this.checked"
-      [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
-      [disabled]="this.disabled"
-      (change)="this.onToggle($event)"
-    >
-      <div class="label">{{ this.label }}</div>
-    </mat-slide-toggle>
+    <div class="toggle-switch">
+      <mat-slide-toggle
+        color="primary"
+        [checked]="this.checked"
+        [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
+        [disabled]="this.disabled"
+        (change)="this.onToggle($event)"
+      >
+        <div class="label">{{ this.label }}</div>
+      </mat-slide-toggle>
+    </div>
   `
 })
 export class ToggleSwitchComponent {