feat(accordion): ajusta navegação do elemento através de viewChild

ajusta navegação do elemento accordion através de viewChild fixes DTHFUI-7944
po-ui · Nov 17, 2023 · cbb93e8 · cbb93e8
1 parent 2f6b1a6
commit cbb93e8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/.../components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.html b/.../components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.html
@@ -1,5 +1,6 @@
 <div class="po-accordion-item-header">
   <button
+    #accordionElement
     [disabled]="disabledItem"
     [attr.aria-label]="label"
     [attr.aria-expanded]="expanded || false"

diff --git a/...ib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.ts b/...ib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { PoLanguageService } from '../../../services/po-language';
 import { poLocaleDefault } from '../../../services/po-language/po-language.constant';
 
@@ -10,6 +10,8 @@ import { poLocaleDefault } from '../../../services/po-language/po-language.const
 export class PoAccordionItemHeaderComponent {
   private language: string = poLocaleDefault;
 
+  @ViewChild('accordionElement', { read: ElementRef, static: true }) accordionElement: ElementRef;
+
   @Input('p-expanded') expanded: boolean = false;
 
   @Input('p-label') label: string;

diff --git a/projects/ui/src/lib/components/po-accordion/po-accordion.component.html b/projects/ui/src/lib/components/po-accordion/po-accordion.component.html
@@ -1,4 +1,4 @@
-<div class="po-accordion po-container po-container-no-padding">
+<div class="po-accordion">
   <div *ngIf="showManagerAccordion && poAccordionItems.length > 1" class="po-accordion-manager">
     <po-accordion-manager
       [p-expanded-all-items]="expandedAllItems"

diff --git a/projects/ui/src/lib/components/po-accordion/po-accordion.component.ts b/projects/ui/src/lib/components/po-accordion/po-accordion.component.ts
@@ -1,11 +1,12 @@
-import { Component, ContentChildren, QueryList, OnDestroy } from '@angular/core';
+import { Component, ContentChildren, OnDestroy, QueryList, ViewChildren } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoAccordionBaseComponent } from './po-accordion-base.component';
+import { PoAccordionItemHeaderComponent } from './po-accordion-item-header/po-accordion-item-header.component';
 import { PoAccordionItemComponent } from './po-accordion-item/po-accordion-item.component';
 import { PoAccordionService } from './services/po-accordion.service';
-import { PoLanguageService } from '../../services/po-language/po-language.service';
 
 /**
  * @docsExtends PoAccordionBaseComponent
@@ -35,6 +36,7 @@ import { PoLanguageService } from '../../services/po-language/po-language.servic
   providers: [PoAccordionService]
 })
 export class PoAccordionComponent extends PoAccordionBaseComponent implements OnDestroy {
+  @ViewChildren(PoAccordionItemHeaderComponent) accordionsHeader: QueryList<PoAccordionItemHeaderComponent>;
   @ContentChildren(PoAccordionItemComponent) poAccordionItems: QueryList<PoAccordionItemComponent>;
 
   expandedAllItems = false;