Skip to content

Commit

Permalink
Adicionar opção de pegar filhos não diretos no sq-accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
danielpcs committed Oct 22, 2024
1 parent 9842ec9 commit e3ecbe4
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 5 deletions.
50 changes: 47 additions & 3 deletions src/components/sq-accordion/sq-accordion.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -48,16 +50,41 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
*/
@Input() openFirst?: boolean

/**
* Indicates whether only direct children of the host element should be included in the accordion.
* If true, only `SqCollapseComponent` instances that are direct children of the host element will be included in the accordion.
* If false, all `SqCollapseComponent` instances within the host element will be included in the accordion.
* Default is true.
*/
@Input() directChildrenOnly = true

/**
* 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.filterDirectChildren()

this.collapsesSubscription = this.collapses.changes.subscribe(() => {
this.filterDirectChildren()
})

if (this.openFirst) {
const collapses = this.collapses.toArray()
if (collapses?.length) {
Expand Down Expand Up @@ -88,6 +115,8 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
collapse.openedEmitter.unsubscribe()
})
}

this.collapsesSubscription?.unsubscribe()
}

/**
Expand All @@ -104,4 +133,19 @@ export class SqAccordionComponent implements AfterContentInit, OnDestroy {
}
collapse.toggleCollapse()
}

/**
* Filters the collapses to include only direct children of the host element.
* If `directChildrenOnly` is true, it will reset the `collapses` QueryList to only include
* `SqCollapseComponent` instances that are direct children of the host element.
*/
filterDirectChildren() {
if (this.directChildrenOnly) {
const hostElement = this.elementRef.nativeElement
const directChildren = this.collapses.filter(collapse =>
collapse['elementRef'].nativeElement.parentElement.parentElement === hostElement
)
this.collapses.reset(directChildren)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@squidit/ngx-css",
"version": "1.3.59",
"version": "1.3.60",
"peerDependencies": {
"@angular/common": ">=15.0.0",
"@angular/cdk": ">=15.0.0",
Expand Down

0 comments on commit e3ecbe4

Please sign in to comment.