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}