feat: add optional color for slide-toggle when unactivated

libs/shell/controls/src/lib/ui/slide-toggle/slide-toggle.component.html

@@ -24,6 +24,17 @@
         <mat-hint>The toggle color</mat-hint>
       </mat-form-field>
     </mat-list-item>
+    <mat-list-item role="listitem" class="color-config-container">
+      <mat-form-field class="full-width">
+        <input
+          matInput
+          type="color"
+          placeholder="Unchecked Color"
+          [formControl]="uncheckedColorFormControl"
+        />
+        <mat-hint>The toggle unchecked color</mat-hint>
+      </mat-form-field>
+    </mat-list-item>
     <mat-list-item role="listitem" class="disabled-config-container">
       <mat-checkbox
         class="full-width"
@@ -50,6 +61,7 @@
     class="widget"
     [checked]="checked"
     [color]="colorFormControl.value"
+    [uncheckedColor]="uncheckedColorFormControl.value"
     [disabled]="disabled"
     [title]="titleFormControl.value"
     (toggleChange)="checked = $event"
@@ -64,6 +76,7 @@
 <span>&lt;gor-slide-toggle</span>
 <span>  [checked]=&quot;{{checked}}&quot;</span>
 <span>  [color]=&quot;{{colorFormControl.value}}&quot;</span>
+<span>  [uncheckedColor]=&quot;{{uncheckedColorFormControl.value}}&quot;</span>
 <span>  [disabled]=&quot;{{disabled}}&quot;</span>
 <span>  [title]=&quot;{{titleFormControl.value}}&quot;&gt;</span>
 <span>&lt;/gor-slide-toggle&gt;</span>

libs/shell/controls/src/lib/ui/slide-toggle/slide-toggle.component.ts

@@ -9,6 +9,7 @@ import { FormControl } from "@angular/forms";
 export class SlideToggleComponent implements OnInit {
   checked = true;
   colorFormControl = new FormControl("#08B25A");
+  uncheckedColorFormControl = new FormControl("#000000")
   disabled = false;
   titleFormControl = new FormControl("click me");
 

libs/ui-toolkit/slide-toggle/src/lib/slide-toggle-group.component.html

@@ -7,11 +7,12 @@
           [id]="toggle?.cod"
           [checked]="toggle?.checked"
           [color]="toggle?.color"
+          [uncheckedColor]="toggle?.uncheckedColor"
           [title]="toggle?.title"
           (toggleChange)="toggleChange(toggle?.cod, $event)"
           ngDefaultControl
         ></gor-slide-toggle>
       </div>
     </ng-container>
   </div>
-</ng-container>
+</ng-container>

libs/ui-toolkit/slide-toggle/src/lib/slide-toggle.component.html

@@ -1,9 +1,9 @@
 <div class="toggle" [ngClass]="{ disabled: disabled }">
   <label class="switch">
     <input type="checkbox" [checked]="checked" (change)="changeChecked()" />
-    <span class="slider round" [style.backgroundColor]="checked ? color : ''">
+    <span class="slider round" [style.backgroundColor]="checked ? color : uncheckedColor">
       <span class="slider-before" [ngClass]="{ active: checked }"></span>
     </span>
   </label>
   <span class="title">{{ title }}</span>
-</div>
+</div>

libs/ui-toolkit/slide-toggle/src/lib/slide-toggle.component.ts

@@ -22,6 +22,12 @@ export class SlideToggleComponent {
   @Input() public color = '';
 
   /**
+   * The toggle color when unchecked.
+   */
+  @Input() public uncheckedColor = '';
+
+  /**
+
    * The toggle disable state.
    */
   @Input() public disabled = false;

libs/ui-toolkit/slide-toggle/src/lib/slide-toggle.model.ts

@@ -22,8 +22,15 @@ export interface ToggleData {
 
 
   /**
-   * The custom color for the toggle.
+   * The custom color for the toggle when activated.
    * @Optional
    */
   color?: string;
+
+
+    /**
+   * The custom color for the toggle when unactivated.
+   * @Optional
+   */
+  uncheckedColor?: string;
 }

libs/ui-toolkit/slide-toggle/src/lib/slide-toggle.stories.ts

@@ -0,0 +1,74 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { SlideToggleComponent } from './slide-toggle.component';
+import { SlideToggleGroupComponent } from './slide-toggle-group.component';
+import { ToggleData } from './slide-toggle.model';
+import { text, withKnobs, boolean } from '@storybook/addon-knobs';
+
+storiesOf('slide-toggle', module)
+  .addDecorator(
+    moduleMetadata({
+        imports: [CommonModule],
+        declarations: [SlideToggleComponent, SlideToggleGroupComponent],
+ })
+)
+.addDecorator(withKnobs)
+.add(
+    'three different cases about slide-toggle',
+    () => {
+        const data: Array<ToggleData> = [{
+            cod: "1",
+            checked: true,
+            title: "activate color",
+            color: "#10c0c6",
+            uncheckedColor: ""
+        },
+        {
+            cod: "2",
+            checked: true,
+            title: "both colors",
+            color: "#10c0c6",
+            uncheckedColor: "#456888"
+        },
+        {
+        cod: "3",
+        checked: false,
+        title: "UNACTIVATE COLOR",
+        color: "",
+        uncheckedColor: "#456888"
+        }
+    ];
+
+        const labels = ['title'];
+
+        return {
+
+        template: `
+            <gor-slide-toggle-group
+                [data]='${JSON.stringify(data)}'
+                [labels]='${JSON.stringify(labels)}'
+            >
+            </gor-slide-toggle-group>
+      `
+        }}
+    )
+
+.add('editable', () => ({
+    props: {
+        cod: text("cod","1"),
+        checked: boolean("checked", true),
+        title: text("title", "slide-toggle"),
+        color: text("color", "#10c0c6"),
+        uncheckedColor: text("uncheckedColor", "#456888"),
+    },
+    template: `
+       <gor-slide-toggle
+       [id]="cod"
+       [checked]="checked"
+       [color]="color"
+       [uncheckedColor]="uncheckedColor"
+       [title]="title"
+       >
+        </gor-slide-toggle>
+        `
+    }));