toggle-switch: allows to be disabled

Signed-off-by: Louis Greiner <[email protected]>

Author: louisgreiner

src/app/view/toggle-switch-button/toggle-switch-button.component.html

@@ -1,7 +1,11 @@
-<div class="toggle-switch-button-component">
-  <span *ngIf="!!labelFalse" [ngClass]="createLabelCheckedTag(false)" (click)="onToggle(false)">{{
-    labelFalse
-  }}</span>
+<div class="toggle-switch-button-component" [ngClass]="{disabled: disabled}">
+  <span
+    *ngIf="labelFalse"
+    [ngClass]="createLabelCheckedTag(false)"
+    (click)="!disabled && onToggle(false)"
+    [style.cursor]="disabled ? 'default' : 'pointer'"
+    >{{ labelFalse }}</span
+  >
   <label class="toggle-switch">
     <input
       type="checkbox"
@@ -11,7 +15,11 @@
     />
     <span class="slider"></span>
   </label>
-  <span *ngIf="!!labelTrue" [ngClass]="createLabelCheckedTag(true)" (click)="onToggle(true)">{{
-    labelTrue
-  }}</span>
+  <span
+    *ngIf="labelTrue"
+    [ngClass]="createLabelCheckedTag(true)"
+    (click)="!disabled && onToggle(true)"
+    [style.cursor]="disabled ? 'default' : 'pointer'"
+    >{{ labelTrue }}</span
+  >
 </div>

src/app/view/toggle-switch-button/toggle-switch-button.component.scss

@@ -101,4 +101,9 @@
   input.non-default + .slider:before {
     background: $COLOR_SBB_RED;
   }
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
 }

src/app/view/toggle-switch-button/toggle-switch-button.component.ts

@@ -8,19 +8,20 @@ import {Component, EventEmitter, Input, Output} from "@angular/core";
 export class ToggleSwitchButtonComponent {
   @Output() checkedChanged = new EventEmitter<boolean>();
   @Input() checked = false;
-  @Input() labelFalse: string = "";
-  @Input() labelTrue: string = "";
-  @Input() tagNonDefault: boolean = false;
+  @Input() labelFalse = "";
+  @Input() labelTrue = "";
+  @Input() tagNonDefault = false;
+  @Input() disabled = false;
 
-  onToggle(check: boolean) {
+  onToggle(check: boolean): void {
     if (!this.labelTrue || !this.labelFalse) {
       this.onChange(!this.checked);
       return;
     }
     this.onChange(check);
   }
 
-  onChange(isChecked: boolean) {
+  onChange(isChecked: boolean): void {
     if (this.checked !== isChecked) {
       this.checked = isChecked;
       this.checkedChanged.next(this.checked);