From e4d31d00033dd04ad07f5a3b4e205c52eeec9c00 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 13 Apr 2022 15:45:51 +0200 Subject: [PATCH] Adding defaultIsExpanded to accordion --- .../accordion-table-properties.component.html | 9 +++++++-- .../accordion-preview/accordion-preview.component.html | 1 + .../lib/dxc-accordion/dxc-accordion.component.spec.ts | 10 +++++----- .../src/lib/dxc-accordion/dxc-accordion.component.ts | 10 ++++++++-- .../src/lib/dxc-accordion/dxc-accordion.types.ts | 1 + 5 files changed, 22 insertions(+), 9 deletions(-) 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;