diff --git a/angular/lib/src/lib/accordion/accordion.component.ts b/angular/lib/src/lib/accordion/accordion.component.ts
index 5282fad734..eae17db3d1 100644
--- a/angular/lib/src/lib/accordion/accordion.component.ts
+++ b/angular/lib/src/lib/accordion/accordion.component.ts
@@ -18,7 +18,7 @@ import {
toSlotContextWidget,
useDirectiveForHost,
} from '@agnos-ui/angular-headless';
-import {NgIf} from '@angular/common';
+import {NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet} from '@angular/common';
import type {AfterContentChecked, AfterViewInit, OnChanges, Signal, SimpleChanges} from '@angular/core';
import {
ChangeDetectionStrategy,
@@ -60,10 +60,65 @@ export class AccordionItemStructureDirective {
@Component({
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [UseDirective, SlotDirective, NgIf, AccordionHeaderDirective, AccordionBodyDirective],
+ imports: [
+ UseDirective,
+ SlotDirective,
+ NgIf,
+ AccordionHeaderDirective,
+ AccordionBodyDirective,
+ NgSwitch,
+ NgSwitchCase,
+ NgSwitchDefault,
+ NgTemplateOutlet,
+ ],
template: `
-
+
= {
itemButtonClass: typeString,
itemCollapseClass: typeString,
itemBodyClass: typeString,
+ itemHeadingTag: typeString,
};
const configItemValidator: ConfigValidator
= {
@@ -451,6 +464,7 @@ const configItemValidator: ConfigValidator = {
itemButtonClass: typeString,
itemCollapseClass: typeString,
itemBodyClass: typeString,
+ itemHeadingTag: typeString,
};
function createAccordionItem(
@@ -553,6 +567,7 @@ export function createAccordion(config?: PropsConfig): Accordion
itemButtonClass$,
itemCollapseClass$,
itemHeaderClass$,
+ itemHeadingTag$,
onItemVisibleChange$,
onItemHidden$,
onItemShown$,
@@ -575,6 +590,7 @@ export function createAccordion(config?: PropsConfig): Accordion
itemButtonClass: itemButtonClass$,
itemCollapseClass: itemCollapseClass$,
itemHeaderClass: itemHeaderClass$,
+ itemHeadingTag: itemHeadingTag$,
onItemVisibleChange: onItemVisibleChange$,
onItemHidden: onItemHidden$,
onItemShown: onItemShown$,
diff --git a/react/lib/Accordion.tsx b/react/lib/Accordion.tsx
index 9932d3202e..d70561b594 100644
--- a/react/lib/Accordion.tsx
+++ b/react/lib/Accordion.tsx
@@ -13,9 +13,13 @@ import {createContext, forwardRef, useContext, useEffect, useImperativeHandle} f
const AccordionDIContext: React.Context> = createContext({});
const DefaultSlotStructure = (slotContext: AccordionItemContext) => {
const collapseSetRef = useDirective(slotContext.widget.directives.collapseDirective);
+ const re = new RegExp('^h[1-6]$');
+ const Heading: keyof JSX.IntrinsicElements = re.test(slotContext.state.itemHeadingTag)
+ ? (slotContext.state.itemHeadingTag as keyof JSX.IntrinsicElements)
+ : 'h2';
return (
<>
-
+
-
+
{slotContext.state.shouldBeInDOM ? (
-
+
{#if state.shouldBeInDOM}