Adding defaultIsExpanded to accordion

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

@@ -42,12 +42,17 @@
       will be managed internally by the component.
     </td>
   </tr>
+  <tr>
+    <td>defaultIsExpanded: boolean</td>
+    <td></td>
+    <td>Initial state of the panel, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
     <td>
-      This event will emit in case the user clicks the accordion to expand
-      or collapse the panel. The new state of the panel will be passed as a
+      This event will emit in case the user clicks the accordion to expand or
+      collapse the panel. The new state of the panel will be passed as a
       parameter.
     </td>
   </tr>

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

@@ -5,6 +5,7 @@
       assistiveText="Assistive text"
       margin="xsmall"
       padding="medium"
+      [defaultIsExpanded]="true"
     >
       <div>
         <dxc-button label="hola" mode="text"> </dxc-button>

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

@@ -29,12 +29,12 @@ describe("DxcAccordion tests", () => {
     expect(getByText("assistiveText")).toBeTruthy();
   });
 
-  test("uncontrolled dxc-accordion", async () => {
+  test("defaultIsExpanded dxc-accordion", async () => {
     const projection = "Content inside the ng-content!";
     const onClickFunction = jest.fn();
 
     await render(
-      `<dxc-accordion label="test-accordion" assistiveText="assistiveText" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
+      `<dxc-accordion label="test-accordion" defaultIsExpanded="true" assistiveText="assistiveText" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
       {
         componentProperties: { onClickFunction },
         imports: [MatExpansionModule, BackgroundProviderInnerModule],
@@ -45,12 +45,12 @@ describe("DxcAccordion tests", () => {
     expect(screen.getByText("test-accordion")).toBeTruthy();
     expect(screen.getByText("assistiveText"));
 
-    expect(screen.getByText(projection).hidden);
+    expect(screen.getByText(projection).hidden).toBeFalsy();;
     fireEvent.click(screen.getByText("test-accordion"));
     expect(onClickFunction).toHaveBeenCalled();
-    expect(screen.getByText(projection).hidden).toBeFalsy();
+    expect(screen.getByText(projection).hidden)
     fireEvent.click(screen.getByText("test-accordion"));
-    expect(screen.getByText(projection).hidden);
+    expect(screen.getByText(projection).hidden).toBeFalsy();
   });
 
   test("controlled dxc-accordion", async () => {

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

@@ -23,7 +23,6 @@ import { QueryList, ChangeDetectorRef, ElementRef } from "@angular/core";
 import { BackgroundProviderComponent } from "../background-provider/background-provider.component";
 import { AccordionProperties, Space, Spacing } from "./dxc-accordion.types";
 
-
 @Component({
   selector: "dxc-accordion",
   templateUrl: "./dxc-accordion.component.html",
@@ -82,6 +81,11 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
     this._isExpanded = coerceBooleanProperty(value);
   }
   private _isExpanded;
+  /**
+   * Initial state of the panel, only when it is uncontrolled.
+   */
+  @Input()
+  defaultIsExpanded: boolean = false;
   /**
    * Value of the tabindex.
    */
@@ -109,6 +113,7 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
     label: "",
     assistiveText: "",
     isExpanded: false,
+    defaultIsExpanded: false,
     margin: null,
     padding: null,
     disabled: false,
@@ -133,7 +138,8 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
   }
 
   ngOnInit() {
-    this.renderedIsExpanded = this.isExpanded || false;
+    this.renderedIsExpanded = this.isExpanded || this.defaultIsExpanded;
+    console.log(this.renderedIsExpanded);
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }
 

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

@@ -19,6 +19,7 @@ export interface AccordionProperties {
   assistiveText?: string;
   disabled: boolean;
   isExpanded: boolean;
+  defaultIsExpanded?:boolean
   margin?: Space | Spacing;
   padding?: Space | Spacing;
   tabIndexValue?: number;