feat:🎸 add disable state

NsdHSO · Sep 25, 2023 · 4a6c7c7 · 4a6c7c7
1 parent afad341
commit 4a6c7c7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/ftx-sivan-shared/src/lib/components/toogle/toggle.component.html b/ftx-sivan-shared/src/lib/components/toogle/toggle.component.html
@@ -2,7 +2,10 @@
   class="cursor-pointer w-16 bg-slate-100 rounded-full border-solid border"
   [ngClass]="{
     'border-green-300': control.value,
-    'border-red-300': !control.value
+    'border-red-300': !control.value,
+    'border-red-500': !control.value && control.disabled,
+    'border-green-500': control.value && control.disabled,
+    'bg-slate-300 ': control.disabled
   }"
   (click)="mutateToggle()"
 >
@@ -20,7 +23,9 @@
         [ngClass]="{
           'border-red-300': !control.value,
           'border-green-300': control.value,
-          'h-[1.60rem]': !valuesToggled
+          'h-[1.60rem]': !valuesToggled,
+          'opacity-80': control.disabled,
+          'bg-emerald-900':  control.disabled && control.value,
         }"
       >
         <mat-icon
@@ -34,6 +39,10 @@
         ></mat-icon>
         <ng-template #noData>
           <div
+            [ngClass]="{
+						          'text-white':  control.disabled,
+
+						}"
             [innerText]="control.value ? 'Yes' : 'No'"
             class="rounded-full transition-all duration-300 !w-fit text-gray-500 dark:text-blue-50"
           ></div>

diff --git a/ftx-sivan-shared/src/lib/components/toogle/toggle.component.ts b/ftx-sivan-shared/src/lib/components/toogle/toggle.component.ts
@@ -2,14 +2,7 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BaseComponent } from '../base/base.component';
 import { MatIconModule } from '@angular/material/icon';
-import {
-  AbstractControl,
-  FormControl,
-  FormControlName,
-  FormsModule,
-  NgControl,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ValueToggle } from 'ngx-ftx-forms';
 
 @Component({
@@ -21,7 +14,10 @@ import { ValueToggle } from 'ngx-ftx-forms';
 })
 export class ToggleComponent extends BaseComponent {
   @Input({ required: false }) valuesToggled?: ValueToggle[] | null;
+
   public mutateToggle() {
-    this.controls.setValue(!this.control.value);
+    if (!this.control.disabled) {
+      this.controls.setValue(!this.control.value);
+    }
   }
 }