feat: added custom values for checked and unchecked states

Author: vicmans

README.md

@@ -58,6 +58,7 @@ Use
 | name | `string` | `undefined` | Name to attach to the generated input field |
 | fontSize | `number` | `10` | Font size in pixels |
 | fontColor | `string  Object` | `undefined` | If `string` - color when checked <br>If `Object` - colors for labels when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|
+| values | `{checked: any, unchecked: any}` | `{checked: true, unchecked: false}` | Values for checked and unchecked states, by default checked value is `true` and unchecked value is `false` <br>Example: `{checked: 1, unchecked: 0}`.|
 
 ### Outputs events
 

package.json

@@ -2,7 +2,7 @@
   "name": "ng-toggle-button",
   "description": "A toggle button component",
   "author": "vicmans",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "homepage": "https://github.com/vicmans/ng-toggle-button#readme",
   "repository": {
     "type": "git",

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

@@ -1,7 +1,7 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item" href="https://vicmans.com">
-      <img src="https://vicmans.com/v.png" width="28" height="28"> Victor
+    <a class="navbar-item" href="http://vicmans.com">
+      <img src="http://vicmans.com/v.png" width="28" height="28"> Victor
     </a>
   </div>
   <a class="button is-light" href="https://github.com/vicmans/ng-toggle-button">
@@ -19,7 +19,7 @@ <h2 class="subtitle">Examples:</h2>
   ></ng-toggle>
 
   <h2 class="subtitle">
-    ngModel
+    Custom
   </h2>
   <ng-toggle
     [(ngModel)]="prueba"
@@ -76,6 +76,16 @@ <h2 class="subtitle">
     [switchColor]="{checked: '#00a388', unchecked: '#BFCBD9'}"
   ></ng-toggle>
   <br>
+  <h2 class="subtitle">
+    Custom values
+  </h2>
+  <ng-toggle
+    [(ngModel)]="custom"
+    [labels]="{checked: 'yes', unchecked: 'no'}"
+    [values]="{checked: 'si', unchecked: 'no'}"
+    [width]="55"
+  ></ng-toggle>
+  <p class="is-family-code">ngModel: {{custom}}</p>
   <h2 class="subtitle">
     Configure
   </h2>
@@ -92,6 +102,7 @@ <h2 class="subtitle">
         [switchColor]="config.switchColor"
         [fontColor]="config.fontColor"
         [fontSize]="config.fontSize"
+        [values]="config.values"
         (change)="changeEvent()"
       ></ng-toggle>
       <br>
@@ -106,6 +117,7 @@ <h2 class="subtitle">
   [labels]="{{config.labels|json}}"
   [color]="{{config.color|json}}"
   [switchColor]="{{config.switchColor|json}}"
+  [values]="{{config.values|json}}"
   [fontColor]="{{config.fontColor|json}}">
 &lt;/ng-toggle>
       </pre>
@@ -190,6 +202,29 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">checked value: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <input class="input" type="text" [(ngModel)]="config.values.checked">
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">unchecked value: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <input class="input" type="text" [(ngModel)]="config.values.unchecked">
+          </div>
+        </div>
+      </div>
+
+
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">checked color: </label>

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

@@ -8,10 +8,11 @@ import { FormGroup, FormControl } from '@angular/forms';
 })
 export class AppComponent {
   title = 'ng-toggle-button';
-  prueba = false
+  prueba = true
+  custom = 'si'
 
   config = {
-    value: true,
+    value: 1,
     name: '',
     disabled: false,
     height: 25,
@@ -28,6 +29,10 @@ export class AppComponent {
       unchecked: 'off',
       checked: 'on',
     },
+    values: {
+      unchecked: 0,
+      checked: 1,
+    },
     checkedLabel: '',
     uncheckedLabel: '',
     fontColor: {checked: '#fafafa', unchecked: '#f45a32'}

projects/ng-toggle/README.md

@@ -58,6 +58,7 @@ Use
 | name | `string` | `undefined` | Name to attach to the generated input field |
 | fontSize | `number` | `10` | Font size in pixels |
 | fontColor | `string  Object` | `undefined` | If `string` - color when checked <br>If `Object` - colors for labels when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|
+| values | `{checked: any, unchecked: any}` | `{checked: true, unchecked: false}` | Values for checked and unchecked states, by default checked value is `true` and unchecked value is `false` <br>Example: `{checked: 1, unchecked: 0}`.|
 
 ### Outputs events
 

projects/ng-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-toggle-button",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Angular toggle button switch",
   "author": "vicmans",
   "license": "MIT",

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

@@ -38,6 +38,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
   @Input() checkedLabel: string = ''
   @Input() uncheckedLabel: string = ''
   @Input() fontColor: string | toggleConfig
+  @Input() values: valueConfig = {checked: true, unchecked: false}
   @Input('ngModel') model: boolean
   cssColors: boolean = false
 
@@ -47,7 +48,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
   constructor() { }
 
   ngOnInit() {
-    this.toggled = this.model !== undefined ? this.model : this.value
+    this.setToogle()
   }
 
   onChange = (_:any) => { }
@@ -61,9 +62,9 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
 
   writeValue(value: any): void {
     if (value) {
-      this.value = value || false;
+      this.value = value == true ? this.values.checked : this.values.unchecked;
     } else {
-      this.value = false;
+      this.value = this.values.unchecked;
     }
   }
   registerOnChange(fn: any): void {
@@ -76,6 +77,13 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
     this.disabled = isDisabled;
   }
 
+  setToogle() {
+    const value = this.model !== undefined ? this.model : this.value
+    let index = Object.values(this.values).findIndex(el => el == value)
+    if(index > -1)
+      this.toggled = Object.keys(this.values)[index] == 'checked' ? true : false
+  }
+
   get coreStyle () {
     return {
       width: px(this.width),
@@ -177,10 +185,15 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
     const toggled = !this.toggled;
     this.toggled = toggled;
 
-    this.value = toggled;
+    this.value = this.getValue(toggled)
     this.onTouch();
-    this.onChange(toggled);
+    this.onChange(this.value);
+  }
+
+  getValue(key: boolean) {
+    return key === true ? this.values['checked'] : this.values['unchecked']
   }
+  
 }
 
 export const isObject = (value) => {
@@ -206,4 +219,9 @@ export const translate = (x, y) => {
 export type toggleConfig = {
   checked: string,
   unchecked: string
+}
+
+export type valueConfig = {
+  checked: any,
+  unchecked: any
 }