feat(accordion): default value for destroy on hide changed to match ngb

core/lib/accordion.spec.ts

@@ -259,7 +259,7 @@ describe(`Accordion`, () => {
 	});
 
 	test(`should have correct value for shouldBeInDOM`, () => {
-		const i = accordion.api.registerItem({props: {itemDestroyOnHide: true, itemVisible: true}});
+		const i = accordion.api.registerItem({props: {itemVisible: true}});
 		expect(i.state$().shouldBeInDOM).toBe(true);
 		i.api.collapse();
 		expect(i.state$().shouldBeInDOM).toBe(false);

core/lib/accordion.ts

@@ -379,7 +379,7 @@ const defaultAccordionConfig: AccordionProps = {
 	onHidden: noop,
 	className: '',
 	itemId: '',
-	itemDestroyOnHide: false,
+	itemDestroyOnHide: true,
 	itemDisabled: false,
 	itemVisible: false,
 	itemAnimation: true,

e2e/accordion/accordion.e2e-spec.ts

@@ -5,8 +5,15 @@ import {AccordionTogglePanels} from '../demo-po/accordion.po';
 type PromiseValue<T> = T extends Promise<infer U> ? U : never;
 type State = PromiseValue<ReturnType<AccordionPO['state']>>;
 
+function updateAccordionState(state: State, index: number, expanded: boolean) {
+	state.items[index].expanded = expanded ? 'true' : 'false';
+	state.items[index].isInDOM = expanded;
+	state.items[index].collapseId = expanded ? `${state.items[index].id}-collapse` : undefined;
+	state.items[index].labeledBy = expanded ? `${state.items[index].id}-toggle` : undefined;
+}
+
 test.describe.parallel(`Accordion tests`, () => {
-	test(`Default accordion behaviour`, async ({page}) => {
+	test(`Default accordion behavior`, async ({page}) => {
 		await page.goto('#/accordion/default');
 		const accordionPO = new AccordionPO(page, 0);
 
@@ -27,23 +34,23 @@ test.describe.parallel(`Accordion tests`, () => {
 				{
 					classes: ['accordion-item'],
 					id: itemsIds[1]!,
-					isInDOM: true,
-					collapseId: `${itemsIds[1]!}-collapse`,
+					isInDOM: false,
+					collapseId: undefined,
 					buttonId: `${itemsIds[1]!}-toggle`,
 					expanded: 'false',
 					disabled: 'false',
-					labeledBy: `${itemsIds[1]!}-toggle`,
+					labeledBy: undefined,
 					buttonControls: `${itemsIds[1]!}-collapse`,
 				},
 				{
 					classes: ['accordion-item'],
 					id: itemsIds[2]!,
-					isInDOM: true,
-					collapseId: `${itemsIds[2]!}-collapse`,
+					isInDOM: false,
+					collapseId: undefined,
 					buttonId: `${itemsIds[2]!}-toggle`,
 					expanded: 'false',
 					disabled: 'true',
-					labeledBy: `${itemsIds[2]!}-toggle`,
+					labeledBy: undefined,
 					buttonControls: `${itemsIds[2]!}-collapse`,
 				},
 			],
@@ -55,8 +62,8 @@ test.describe.parallel(`Accordion tests`, () => {
 		await accordionPO.locatorAccordionHeaders.nth(1).click();
 		await accordionPO.locatorAccordionHeaders.nth(2).click();
 
-		expectedState.items[0].expanded = 'false';
-		expectedState.items[1].expanded = 'true';
+		updateAccordionState(expectedState, 0, false);
+		updateAccordionState(expectedState, 1, true);
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 	});
 	test(`Toggle Panels`, async ({page}) => {
@@ -70,43 +77,85 @@ test.describe.parallel(`Accordion tests`, () => {
 				{
 					classes: ['accordion-item'],
 					id: itemsIds[0]!,
-					isInDOM: true,
-					collapseId: `${itemsIds[0]!}-collapse`,
+					isInDOM: false,
+					collapseId: undefined,
 					buttonId: `${itemsIds[0]!}-toggle`,
 					expanded: 'false',
 					disabled: 'false',
-					labeledBy: `${itemsIds[0]!}-toggle`,
+					labeledBy: undefined,
 					buttonControls: `${itemsIds[0]!}-collapse`,
 				},
 				{
 					classes: ['accordion-item'],
 					id: itemsIds[1]!,
-					isInDOM: true,
-					collapseId: `${itemsIds[1]!}-collapse`,
+					isInDOM: false,
+					collapseId: undefined,
 					buttonId: `${itemsIds[1]!}-toggle`,
 					expanded: 'false',
 					disabled: 'false',
-					labeledBy: `${itemsIds[1]!}-toggle`,
+					labeledBy: undefined,
 					buttonControls: `${itemsIds[1]!}-collapse`,
 				},
 			],
 			rootClasses: ['accordion'],
 		};
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 		await accordionDemoPO.locatorToggleFirst().click();
-		expectedState.items[0].expanded = 'true';
+		updateAccordionState(expectedState, 0, true);
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 		await accordionDemoPO.locatorToggleFirst().click();
 		await accordionDemoPO.locatorToggleSecond().click();
-		expectedState.items[0].expanded = 'false';
-		expectedState.items[1].expanded = 'true';
+		updateAccordionState(expectedState, 0, false);
+		updateAccordionState(expectedState, 1, true);
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 		await accordionDemoPO.locatorExpandAll().click();
-		expectedState.items[0].expanded = 'true';
+		updateAccordionState(expectedState, 0, true);
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 		await accordionDemoPO.locatorCollapseAll().click();
-		expectedState.items[0].expanded = 'false';
-		expectedState.items[1].expanded = 'false';
+		updateAccordionState(expectedState, 0, false);
+		updateAccordionState(expectedState, 1, false);
+		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
+	});
+
+	test(`Playground accordion behavior no destroy on hide`, async ({page}) => {
+		await page.goto('#/accordion/playground#{"config":{"itemDestroyOnHide":false}}');
+		const accordionPO = new AccordionPO(page, 0);
+
+		const itemsIds = await Promise.all((await accordionPO.locatorAccordionItems.all()).map((item) => item.getAttribute('id')));
+		const expectedState: State = {
+			items: [
+				{
+					classes: ['accordion-item'],
+					id: itemsIds[0]!,
+					isInDOM: true,
+					collapseId: `${itemsIds[0]!}-collapse`,
+					buttonId: `${itemsIds[0]!}-toggle`,
+					expanded: 'false',
+					disabled: 'false',
+					labeledBy: `${itemsIds[0]!}-toggle`,
+					buttonControls: `${itemsIds[0]!}-collapse`,
+				},
+				{
+					classes: ['accordion-item'],
+					id: itemsIds[1]!,
+					isInDOM: true,
+					collapseId: `${itemsIds[1]!}-collapse`,
+					buttonId: `${itemsIds[1]!}-toggle`,
+					expanded: 'false',
+					disabled: 'false',
+					labeledBy: `${itemsIds[1]!}-toggle`,
+					buttonControls: `${itemsIds[1]!}-collapse`,
+				},
+			],
+			rootClasses: ['accordion'],
+		};
+		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
+		//We are using the 'header' since if we would use the 'buttons' wouldn't be possible to click on the disabled one
+		await accordionPO.locatorAccordionHeaders.nth(0).click();
+		await accordionPO.locatorAccordionHeaders.nth(1).click();
+
+		expectedState.items[0].expanded = 'true';
+		expectedState.items[1].expanded = 'true';
 		await expect.poll(() => accordionPO.state()).toEqual(expectedState);
 	});
 });

e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-customheaders.html

@@ -33,17 +33,6 @@
 							"Toggle first"
 						</button>
 					</div>
-					<div
-					 aria-labelledby="rewritten-id-3"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-2"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 				<div
 				 class="accordion-item"
@@ -84,17 +73,6 @@
 							</button>
 						</div>
 					</div>
-					<div
-					 aria-labelledby="rewritten-id-6"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-5"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 				<div
 				 class="accordion-item"
@@ -116,17 +94,6 @@
 							"Third panel"
 						</button>
 					</div>
-					<div
-					 aria-labelledby="rewritten-id-9"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-8"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-default.html

@@ -62,17 +62,6 @@
 							</span>
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="rewritten-id-6"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-5"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 				<div
 				 class="accordion-item"
@@ -93,17 +82,6 @@
 							"Disabled"
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="rewritten-id-9"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-8"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-playground.html

@@ -26,17 +26,6 @@
 							"Header 1"
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="rewritten-id-3"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-2"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Body 1"
-						</div>
-					</div>
 				</div>
 				<div
 				 class="accordion-item"
@@ -56,17 +45,6 @@
 							"Header 2"
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="rewritten-id-6"
-					 class="accordion-collapse collapse"
-					 id="rewritten-id-5"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Body 2"
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

e2e/samplesMarkup.e2e-spec.ts-snapshots/accordion-togglepanels.html

@@ -26,17 +26,6 @@
 							"First panel"
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="first-toggle"
-					 class="accordion-collapse collapse"
-					 id="first-collapse"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 				<div
 				 class="accordion-item"
@@ -56,17 +45,6 @@
 							"Second panel"
 						</button>
 					</h2>
-					<div
-					 aria-labelledby="second-toggle"
-					 class="accordion-collapse collapse"
-					 id="second-collapse"
-					>
-						<div
-						 class="accordion-body"
-						>
-							"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
-						</div>
-					</div>
 				</div>
 			</div>
 			<hr />