#ADF-696 Now accordion opens/closes on click of group header along with emitting heading click event (#1936)

This commit is contained in:
Deepak Paul
2017-06-06 19:57:44 +05:30
committed by Eugenio Romano
parent eae9064213
commit 8b7b57efe6
3 changed files with 6 additions and 8 deletions

View File

@@ -1,10 +1,10 @@
<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}"> <div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="onHeadingClick()"> <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon"> <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i> <i class="material-icons">{{headingIcon}}</i>
</div> </div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div> <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
<div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle" (click)="toggleOpen($event)"> <div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">
<i class="material-icons">{{getAccordionIcon()}}</i> <i class="material-icons">{{getAccordionIcon()}}</i>
</div> </div>
</div> </div>

View File

@@ -107,8 +107,8 @@ describe('AccordionGroupComponent', () => {
expect(headName).toEqual(heading); expect(headName).toEqual(heading);
done(); done();
}); });
let header = element.querySelector('.adf-panel-heading');
component.onHeadingClick(); header.click();
}); });
}); });

View File

@@ -79,13 +79,11 @@ export class AccordionGroupComponent implements OnDestroy {
toggleOpen(event: MouseEvent): void { toggleOpen(event: MouseEvent): void {
event.preventDefault(); event.preventDefault();
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;
this.headingClick.emit(this.heading);
} }
getAccordionIcon(): string { getAccordionIcon(): string {
return this.isOpen ? 'expand_less' : 'expand_more'; return this.isOpen ? 'expand_less' : 'expand_more';
} }
onHeadingClick() {
this.headingClick.emit(this.heading);
}
} }