Merge pull request #821 from dxc-technology/jialecl-defaultCheckedSwitch

Adding defaultChecked to switch

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/switch/properties/switch-table-properties/switch-table-properties.component.html

@@ -18,6 +18,11 @@
       uncontrolled and the value will be managed internally by the component.
     </td>
   </tr>
+  <tr>
+    <td>defaultChecked: boolean</td>
+    <td><code>false</code></td>
+    <td>Initial state of the checkbox, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>value: any</td>
     <td></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/switch-preview/switch-preview.component.html

@@ -3,9 +3,8 @@
   <div>
     <tbuilder-component-mode text="Default">
       <dxc-switch
-        [checked]="checked1"
-        label="Label before"
-        (onChange)="onChange1($event)"
+        [defaultChecked]="true"
+        label="Label before and default checked"
         margin="xsmall"
       ></dxc-switch>
 

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts

@@ -24,7 +24,12 @@ import { v4 as uuidv4 } from "uuid";
 import { SelectService } from "./services/select.service";
 import { VisualOptionFocus } from "./interfaces/visualFocus.interface";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
-import { SelectProperties, Space, Spacing, EmittedValue } from "./dxc-select.types";
+import {
+  SelectProperties,
+  Space,
+  Spacing,
+  EmittedValue,
+} from "./dxc-select.types";
 
 @Component({
   selector: "dxc-select",
@@ -66,11 +71,14 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
   value: string | string[];
 
   /**
-   * Helper text to be placed above the select.
+   * Initial value of the select, only when it is uncontrolled.
    */
   @Input()
   defaultValue: string | string[];
 
+  /**
+   * Helper text to be placed above the select.
+   */
   @Input()
   helperText: string;
 
@@ -184,14 +192,14 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
   });
 
   /**
-   * This event will be emitted when the user selects an option. An object including the new value (or values) 
+   * This event will be emitted when the user selects an option. An object including the new value (or values)
    * and the error (if the value selected is not valid) will be passed to this function.
    */
   @Output()
   onChange = new EventEmitter<EmittedValue>();
 
   /**
-   * This event will be emitted when the select loses the focus. An object including the value (or values) 
+   * This event will be emitted when the select loses the focus. An object including the value (or values)
    * and the error (if the value selected is not valid) will be passed to this function.
    */
   @Output()
@@ -286,7 +294,7 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
       ...this.defaultInputs.getValue(),
     })}`;
     this.controlled = this.value || this.value === "" ? true : false;
-    if (this.defaultValue || this.defaultValue === "" && !this.controlled) {
+    if (this.defaultValue || (this.defaultValue === "" && !this.controlled)) {
       this.value = this.defaultValue;
       this.setDefaultValues();
     }

projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.spec.ts

@@ -28,14 +28,15 @@ describe("DxcSwitch tests", () => {
       componentProperties: {
         label: "test-switch",
         onChange: { emit: onClickFunction } as any,
+        defaultChecked: true
       },
       imports: [MatSlideToggleModule],
     });
     const input = <HTMLInputElement>dxcSwitch.getByRole("switch");
-    expect(input.checked).toBeFalsy();
-    fireEvent.click(dxcSwitch.getByText("test-switch"));
-    expect(onClickFunction).toHaveBeenCalledWith(true);
     expect(input.checked).toBeTruthy();
+    fireEvent.click(dxcSwitch.getByText("test-switch"));
+    expect(onClickFunction).toHaveBeenCalledWith(false);
+    expect(input.checked).toBeFalsy();
   });
 
   test("controlled dxc-switch functionality", async () => {

projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.ts

@@ -37,6 +37,17 @@ export class DxcSwitchComponent implements OnChanges {
     this._checked = coerceBooleanProperty(value);
   }
   private _checked;
+  /**
+   * 	Initial state of the switch, only when it is uncontrolled.
+   */
+  @Input()
+  get defaultChecked(): boolean {
+    return this._defaultChecked;
+  }
+  set defaultChecked(value: boolean) {
+    this._defaultChecked = coerceBooleanProperty(value);
+  }
+  private _defaultChecked;
   /**
    * Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the switch is checked.
    */
@@ -136,7 +147,7 @@ export class DxcSwitchComponent implements OnChanges {
   }
 
   ngOnInit() {
-    this.renderedChecked = this.checked;
+    this.renderedChecked = this.checked || this.defaultChecked;
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }