clean toggle switch disabled prop

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

Author: louisgreiner

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

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

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

@@ -105,5 +105,10 @@
   &.disabled {
     opacity: 0.6;
     pointer-events: none;
+
+    .toggle-label,
+    .slider {
+      cursor: default;
+    }
   }
 }

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

@@ -14,6 +14,9 @@ export class ToggleSwitchButtonComponent {
   @Input() disabled = false;
 
   onToggle(check: boolean): void {
+    if (this.disabled) {
+      return;
+    }
     if (!this.labelTrue || !this.labelFalse) {
       this.onChange(!this.checked);
       return;