Adding defaultChecked to checkbox component

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

@@ -18,6 +18,13 @@
       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: string</td>
     <td></td>

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

@@ -11,6 +11,16 @@
       </dxc-checkbox>
     </tbuilder-component-mode>
 
+    <tbuilder-component-mode text="Default Checked">
+      <dxc-checkbox
+        [defaultChecked]="true"
+        label="Label"
+        margin="xsmall"
+      >
+      </dxc-checkbox>
+    </tbuilder-component-mode>
+
+
     <tbuilder-component-mode text="Label Position">
       <dxc-checkbox
         [checked]="checked2"

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

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CheckboxPreviewComponent implements OnInit {
 
-  checked1: boolean = false;
+  checked1: boolean = true;
   checked2: boolean = false;
   checked3: boolean = false;
 

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

@@ -26,18 +26,19 @@ describe("DxcCheckbox tests", () => {
     const dxcCheckbox = await render(DxcCheckboxComponent, {
       componentProperties: {
         label: "test-checkbox",
+        defaultChecked: true,
         onChange: { emit: onClickFunction } as any,
       },
       imports: [MatCheckboxModule],
     });
     expect(dxcCheckbox);
 
     const input = <HTMLInputElement>dxcCheckbox.getByRole("checkbox");
-    expect(input.checked).toBeFalsy();
+    expect(input.checked).toBeTruthy();
     const dxcInput = dxcCheckbox.getByText("test-checkbox");
     fireEvent.click(dxcInput);
-    expect(onClickFunction).toHaveBeenCalledWith(true);
-    expect(input.checked).toBeTruthy();
+    expect(onClickFunction).toHaveBeenCalledWith(false);
+    expect(input.checked).toBeFalsy();
   });
 
   test("Controlled dxc-checkbox", async () => {

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

@@ -37,6 +37,12 @@ export class DxcCheckboxComponent implements OnInit {
   }
   private _checked;
 
+  /**
+   * 	Initial state of the checkbox, only when it is uncontrolled.
+   */
+  @Input()
+  defaultChecked: boolean = false;
+
   /**
    * Will be passed to the value attribute of the html input element. When inside a form,
    * this value will be only submitted if the checkbox is checked.
@@ -125,6 +131,7 @@ export class DxcCheckboxComponent implements OnInit {
 
   defaultInputs = new BehaviorSubject<CheckboxProperties>({
     checked: false,
+    defaultChecked: false,
     value: null,
     label: null,
     labelPosition: "before",
@@ -173,7 +180,7 @@ export class DxcCheckboxComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.renderedChecked = this.checked;
+    this.renderedChecked = this.checked || this.defaultChecked;
 
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
     if (this.disabled) {

projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.types.ts

@@ -16,6 +16,7 @@ export type Spacing = {
 
 export interface CheckboxProperties {
   checked?: boolean;
+  defaultChecked?: boolean;
   value?: string;
   label: string;
   labelPosition?: "before" | "after";