Using AccordionTab inside of div or another element and not directly inside of an Accordion

[cetincakiroglu]

I want to create a custom directive for the accordion control. In the directive I want to listen to the active index change event and save the state of accordion tabs. The states are later reloaded when the user logs back in.
I am using this.accordion.activeIndexChange

This works fine when the accordion tab is added directly inside the accordion control like this:

<p-accordion>
    <p-accordionTab>

But if I add the tab inside a div or some other element then the accordion control does not see any of the tab and adds nothing to its tabsList property, basically the tabList is empty in this case, and because of that activeIndexChange or other functionality does not work. I believe the reason is that accordion control only look for direct descendants when creating the children list of type accordion tab,

<p-accordion>
    <div>
      <p-accordionTab>

The other problem it causes it is if you set multiple=false in which only one tab can be opened does not work, so you can put 3 tabs inside a tab inside accordion and say multiple=false and still be able to keep all three open.

This is the current code for creating the children
@ContentChildren(AccordionTab) tabList: QueryList | undefined;

I believe it should be this
@ContentChildren(AccordionTab, {descendants: true}) tabList: QueryList | undefined;

Live example: https://stackblitz.com/edit/jzsflk?file=src%2Fapp%2Fdemo%2Faccordion-basic-demo.html,src%2Fapp%2Fdemo%2Faccordion-basic-demo.ts