add config for disabled styles (#52)

Author: pflopez

projects/demo/src/app/app.component.html

@@ -31,10 +31,18 @@ <h2 class="subtitle">
   <h2 class="subtitle">
     Disabled
   </h2>
+    <ng-toggle
+      [value]="false"
+      [disabled]="true"
+      [color]="{checked: '#00FF00', unchecked: 'red', disabled: '#ddd'}"
+      [labels]="{checked: 'si', unchecked: 'no'}"
+    ></ng-toggle>
   <ng-toggle
     [value]="false"
     [disabled]="true"
-    [color]="{checked: '#00FF00', unchecked: 'red', disabled: '#ddd'}"
+    [color]="{checked: '#00FF00', unchecked: 'red', disabled: '#eee'}"
+    [switchColor]="{disabled: '#ddd', checked: '#000', unchecked: '#000'}"
+    [fontColor]="{ checked: '#fff', unchecked :'#fff', disabled: '#aaa'}"
     [labels]="{checked: 'si', unchecked: 'no'}"
   ></ng-toggle>
 
@@ -284,6 +292,17 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">disabled color: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <input type="color" [(ngModel)]="config.color.disabled" aria-label="color disabled">
+          </div>
+        </div>
+      </div>
+
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">checked switchColor: </label>
@@ -306,6 +325,17 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">disabled switchColor: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <input type="color" [(ngModel)]="config.switchColor.disabled" aria-label="color disabled">
+          </div>
+        </div>
+      </div>
+
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">checked fontColor: </label>
@@ -328,6 +358,17 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">disabled fontColor: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <input type="color" [(ngModel)]="config.fontColor.disabled" aria-label="fontColor disabled">
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </section>

projects/demo/src/app/app.component.ts

@@ -25,8 +25,13 @@ export class AppComponent {
     color: {
       unchecked: '#BFCBD9',
       checked: '#BFCBD9',
+      disabled: '#DBDBDB',
+    },
+    switchColor: {
+      checked: '#00a388',
+      unchecked: 'red',
+      disabled: '#c0c0c0'
     },
-    switchColor: {checked: '#00a388', unchecked: 'red'},
     labels: {
       unchecked: 'off',
       checked: 'on',
@@ -35,7 +40,11 @@ export class AppComponent {
       unchecked: 0,
       checked: 1,
     },
-    fontColor: {checked: '#fafafa', unchecked: '#f45a32'}
+    fontColor: {
+      checked: '#fafafa',
+      unchecked: '#f45a32',
+      disabled: '#ffffff'
+    }
   }
   myForm: FormGroup;
   constructor() {

projects/ng-toggle/src/lib/ng-toggle.component.ts

@@ -44,7 +44,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
   @Input('aria-describedby') ariaDescribedby: string;
   cssColors: boolean = false
-  
+
   @Output() change = new EventEmitter()
   @Output() valueChange = new EventEmitter()
   toggled: boolean
@@ -69,7 +69,6 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
 
   onInput(value: boolean) {
     this.value = value;
-    console.log(this.value, value, 'calue')
     this.onTouch();
     this.onChange(this.value);
   }
@@ -130,7 +129,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
     let background = this.switchColor
       ? this.switchColorCurrent
       : null
-    background = this.disabled ? DISABLED_BUTTON_COLOR : background
+    background = this.disabled ? this.switchColorDisabled : background
     return {
       width: px(this.buttonRadius),
       height: px(this.buttonRadius),
@@ -177,6 +176,10 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
   get switchColorUnchecked () {
     return get(this.switchColor, 'unchecked', DEFAULT_SWITCH_COLOR)
   }
+  get switchColorDisabled(){
+    return get(this.switchColor, 'disabled', DISABLED_BUTTON_COLOR)
+  }
+
   get switchColorCurrent () {
     if (!isObject(this.switchColor)) {
       return this.switchColor || DEFAULT_SWITCH_COLOR
@@ -192,10 +195,17 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
   get fontColorUnchecked () {
     return get(this.fontColor, 'unchecked', DEFAULT_SWITCH_COLOR)
   }
+
+  get fontColorDisabled(){
+    return get(this.fontColor, 'disabled', DEFAULT_SWITCH_COLOR)
+  }
   get fontColorCurrent () {
     if (!isObject(this.fontColor)) {
       return this.fontColor || DEFAULT_SWITCH_COLOR
     }
+    if(this.disabled){
+      return this.fontColorDisabled
+    }
     return this.toggled
       ? this.fontColorChecked
       : this.fontColorUnchecked
@@ -227,7 +237,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
       this.focused = true;
     }
   }
-  
+
   onFocusout(event: FocusEvent) {
     if (!this._elementRef.nativeElement.contains(event.relatedTarget as Element)) {
       this.focused = false;