diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html
index 66e2c0ac8..2a21c0040 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html
+++ b/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.
+
+ | defaultIsExpanded: boolean |
+ |
+ Initial state of the panel, only when it is uncontrolled. |
+
| onClick: EventEmitter |
|
- 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.
|
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/accordion-preview/accordion-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/accordion-preview/accordion-preview.component.html
index 0a1761ad4..4fa27fd1f 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/accordion-preview/accordion-preview.component.html
+++ b/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"
>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.spec.ts
index 7d8ad0136..1c4e04ddd 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.spec.ts
+++ b/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(
- `${projection}`,
+ `${projection}`,
{
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 () => {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
index 66eac8d4b..df8a42868 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
+++ b/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())}`;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.types.ts
index 09662bf1d..1894cb4f5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.types.ts
+++ b/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;