feat(accordion): add output for isOpen state changes

steelsojka · Sep 11, 2017 · 9bf24f4 · 9bf24f4
1 parent 101fb20
commit 9bf24f4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts
@@ -1,5 +1,5 @@
 import {
-  Component, HostBinding, Inject, Input, OnDestroy, OnInit
+  Component, HostBinding, Inject, Input, OnDestroy, OnInit, Output, EventEmitter
 } from '@angular/core';
 import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { AccordionComponent } from './accordion.component';
@@ -18,7 +18,7 @@ import { AccordionComponent } from './accordion.component';
       <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">
         <div class="panel-title">
           <div role="button" class="accordion-toggle" [attr.aria-expanded]="isOpen">
-            <div *ngIf="heading"[ngClass]="{'text-muted': isDisabled}">{{heading}}</div>
+            <div *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">{{heading}}</div>
             <ng-content select="[accordion-heading]"></ng-content>
           </div>
         </div>
@@ -42,6 +42,8 @@ export class AccordionPanelComponent implements OnInit, OnDestroy {
   @Input() public panelClass: string;
   /** if <code>true</code> — disables accordion group */
   @Input() public isDisabled: boolean;
+  /** Emits when the opened state changes */
+  @Output() public isOpenChanges: EventEmitter<boolean> = new EventEmitter();
 
   // Questionable, maybe .panel-open should be on child div.panel element?
   /** Is accordion group open or closed */
@@ -53,6 +55,8 @@ export class AccordionPanelComponent implements OnInit, OnDestroy {
 
   public set isOpen(value: boolean) {
     this._isOpen = value;
+    this.isOpenChanges.emit(this.isOpen);
+
     if (value) {
       this.accordion.closeOtherPanels(this);
     }

diff --git a/src/spec/accordion.component.spec.ts b/src/spec/accordion.component.spec.ts
@@ -9,19 +9,22 @@ const html = `
 
     <accordion-group heading="Panel 1"
                      [isOpen]="panels[0].isOpen"
-                     [isDisabled]="panels[0].isDisabled">
+                     [isDisabled]="panels[0].isDisabled"
+                     (isOpenChanges)="panels[0].isOpenChangesValue = $event">
       Content of panel 1
     </accordion-group>
 
     <accordion-group heading="Panel 2"
                      [isOpen]="panels[1].isOpen"
-                     [isDisabled]="panels[1].isDisabled">
+                     [isDisabled]="panels[1].isDisabled"
+                     (isOpenChanges)="panels[1].isOpenChangesValue = $event">
       Content of panel 2
     </accordion-group>
 
     <accordion-group heading="Panel 3"
                      [isOpen]="panels[2].isOpen"
-                     [isDisabled]="panels[2].isDisabled">
+                     [isDisabled]="panels[2].isDisabled"
+                     (isOpenChanges)="panels[2].isOpenChangesValue = $event">
       Content of panel 3
     </accordion-group>
 
@@ -137,6 +140,31 @@ describe('Component: Accordion', () => {
     fixture.detectChanges();
     expectOpenPanels(element, [false, false, false]);
   });
+
+  it('should output the open state when it is changed internally', () => {
+    const headingLinks = element.querySelectorAll('.accordion-toggle');
+
+    // Clicking (internal state modified)
+    headingLinks[0].click();
+    fixture.detectChanges();
+    expect(context.panels[0].isOpenChangesValue).toBe(true);
+    expect(context.panels[1].isOpenChangesValue).toBe(false);
+    expect(context.panels[2].isOpenChangesValue).toBe(false);
+
+    // State modified by parent component
+    headingLinks[2].click();
+    fixture.detectChanges();
+    expect(context.panels[0].isOpenChangesValue).toBe(false);
+    expect(context.panels[1].isOpenChangesValue).toBe(false);
+    expect(context.panels[2].isOpenChangesValue).toBe(true);
+
+    // Modified by binding
+    context.panels[1].isOpen = true;
+    fixture.detectChanges();
+    expect(context.panels[0].isOpenChangesValue).toBe(false);
+    expect(context.panels[1].isOpenChangesValue).toBe(true);
+    expect(context.panels[2].isOpenChangesValue).toBe(false);
+  });
 });
 
 @Component({
@@ -147,9 +175,9 @@ describe('Component: Accordion', () => {
 class TestAccordionComponent {
   public oneAtATime:boolean = true;
   public panels:any[] = [
-    {isOpen: false, isDisabled: false},
-    {isOpen: false, isDisabled: false},
-    {isOpen: false, isDisabled: false}
+    {isOpen: false, isDisabled: false, isOpenChangesValue: null},
+    {isOpen: false, isDisabled: false, isOpenChangesValue: null},
+    {isOpen: false, isDisabled: false, isOpenChangesValue: null}
   ];
 
   public constructor(config: AccordionConfig) {