Merge pull request #93 from squidit/Feature/SQ-66660-front-colapsar-s…

…q-collapse-que-nao-sao-filhos-direto-de-um-sq-accordion

Feature/SQ-66660 - Permitir colapsar sq-collapse que não são filhos direto de um sq-accordion

src/components/sq-accordion/sq-accordion.component.ts

@@ -4,10 +4,12 @@ import {
   ContentChildren,
   QueryList,
   AfterContentInit,
-  OnDestroy
+  OnDestroy,
+  ElementRef
 } from '@angular/core'
 import { SqCollapseComponent } from './sq-collapse/sq-collapse.component'
 import { sleep } from '../../helpers/sleep.helper'
+import { Subscription } from 'rxjs'
 
 /**
  * Represents the SqAccordionComponent, an accordion component that manages a collection of SqCollapseComponents.
@@ -51,13 +53,30 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
   /**
    * A QueryList containing the SqCollapseComponent instances within the accordion.
    */
-  @ContentChildren(SqCollapseComponent)
-  collapses: QueryList<SqCollapseComponent> = [] as unknown as QueryList<SqCollapseComponent>
+  @ContentChildren(SqCollapseComponent, { descendants: true }) collapses: QueryList<SqCollapseComponent> = [] as unknown as QueryList<SqCollapseComponent>
+
+  /**
+   * A subscription to the changes of the collapses QueryList.
+   * This subscription is used to update the collapses QueryList when the content changes.
+   */
+  collapsesSubscription: Subscription = new Subscription()
+
+  /**
+   * Initializes a new instance of the SqAccordionComponent class.
+   * @param elementRef - The ElementRef instance.
+   */
+  constructor(private elementRef: ElementRef) {}
 
   /**
    * Performs actions after the content has been initialized.
    */
   async ngAfterContentInit() {
+    this.filterChildren()
+
+    this.collapsesSubscription = this.collapses.changes.subscribe(() => {
+      this.filterChildren()
+    })
+
     if (this.openFirst) {
       const collapses = this.collapses.toArray()
       if (collapses?.length) {
@@ -88,6 +107,8 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
         collapse.openedEmitter.unsubscribe()
       })
     }
+
+    this.collapsesSubscription?.unsubscribe()
   }
 
   /**
@@ -104,4 +125,23 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
     }
     collapse.toggleCollapse()
   }
+
+  /**
+   * Filters the children of the accordion.
+   * This method is used to filter the children of the accordion and update the collapses QueryList.
+   */
+  filterChildren() {
+    const hostElement = this.elementRef.nativeElement
+    const filteredChildren = this.collapses.filter(collapse => {
+      let parent = collapse['elementRef'].nativeElement.parentElement
+      for (let i = 0; i < 4; i++) {
+      if (parent === hostElement) {
+        return true
+      }
+      parent = parent.parentElement
+      }
+      return false
+    })
+    this.collapses.reset(filteredChildren)
+  }
 }

src/components/sq-accordion/sq-collapse/sq-collapse.component.ts

@@ -125,8 +125,9 @@ export class SqCollapseComponent {
   /**
    * Component Constructor
    * @param colorsHelper - The ColorsHelper instance
+   * @param elementRef - The ElementRef instance
    */
-  constructor(public colorsHelper: ColorsHelper) { }
+  constructor(public colorsHelper: ColorsHelper, public elementRef: ElementRef) { }
 
   /**
    * Toggles the state of the collapse component.

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.60",
+  "version": "1.3.61",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/cdk": ">=15.0.0",