Added expand and collapse events to repeater item component. (#25)

* Add `expand` and `collapse` events to `SkyRepeaterItemComponent`.

* Use `emit` instead of `next`.

package.json

@@ -35,8 +35,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.38.0",
-    "@blackbaud/skyux-builder": "1.30.0",
-    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5"
+    "@blackbaud/skyux": "2.42.0",
+    "@blackbaud/skyux-builder": "1.31.1",
+    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.6"
   }
 }

src/app/public/modules/repeater/fixtures/repeater.component.fixture.html

@@ -1,5 +1,8 @@
 <sky-repeater [expandMode]="expandMode">
-  <sky-repeater-item>
+  <sky-repeater-item
+    (collapse)="onCollapse()"
+    (expand)="onExpand()"
+  >
     <sky-repeater-item-context-menu *ngIf="showContextMenu">
       a
     </sky-repeater-item-context-menu>

src/app/public/modules/repeater/fixtures/repeater.component.fixture.ts

@@ -19,4 +19,8 @@ export class RepeaterTestComponent {
   public lastItemExpanded: boolean;
 
   public lastItemSelected = false;
+
+  public onCollapse(): void {}
+
+  public onExpand(): void {}
 }

src/app/public/modules/repeater/repeater-item.component.ts

@@ -1,7 +1,10 @@
 import {
   ChangeDetectorRef,
   Component,
-  Input
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output
 } from '@angular/core';
 
 import {
@@ -28,7 +31,7 @@ let nextId: number = 0;
   templateUrl: './repeater-item.component.html',
   animations: [skyAnimationSlide]
 })
-export class SkyRepeaterItemComponent {
+export class SkyRepeaterItemComponent implements OnDestroy {
   public contentId: string = `sky-radio-content-${++nextId}`;
 
   public get isExpanded(): boolean {
@@ -52,6 +55,12 @@ export class SkyRepeaterItemComponent {
   @Input()
   public selectable: boolean = false;
 
+  @Output()
+  public collapse = new EventEmitter<void>();
+
+  @Output()
+  public expand = new EventEmitter<void>();
+
   public slideDirection: string;
 
   public get isCollapsible(): boolean {
@@ -82,6 +91,11 @@ export class SkyRepeaterItemComponent {
     this.slideForExpanded(false);
   }
 
+  public ngOnDestroy(): void {
+    this.collapse.complete();
+    this.expand.complete();
+  }
+
   public headerClick() {
     if (this.isCollapsible) {
       this.updateForExpanded(!this.isExpanded, true);
@@ -101,6 +115,12 @@ export class SkyRepeaterItemComponent {
     } else if (this._isExpanded !== value) {
       this._isExpanded = value;
 
+      if (this._isExpanded) {
+        this.expand.emit();
+      } else {
+        this.collapse.emit();
+      }
+
       this.repeaterService.onItemCollapseStateChange(this);
       this.slideForExpanded(animate);
       this.changeDetector.markForCheck();

src/app/public/modules/repeater/repeater.component.spec.ts

@@ -197,6 +197,39 @@ describe('Repeater item component', () => {
         expect(fixture.nativeElement).toBeAccessible();
       });
     }));
+
+    it('should emit events when item is expanded/collapsed', fakeAsync(() => {
+      const fixture = TestBed.createComponent(RepeaterTestComponent);
+      const cmp = fixture.componentInstance;
+      cmp.expandMode = 'single';
+
+      const collapseSpy = spyOn(cmp, 'onCollapse').and.callThrough();
+      const expandSpy = spyOn(cmp, 'onExpand').and.callThrough();
+
+      fixture.detectChanges();
+      tick();
+
+      collapseSpy.calls.reset();
+      expandSpy.calls.reset();
+
+      let repeaterItems = cmp.repeater.items.toArray();
+      expect(repeaterItems[0].isExpanded).toBe(true);
+
+      fixture.nativeElement.querySelectorAll('.sky-chevron').item(0).click();
+      fixture.detectChanges();
+      tick();
+
+      expect(collapseSpy).toHaveBeenCalled();
+
+      collapseSpy.calls.reset();
+      expandSpy.calls.reset();
+
+      fixture.nativeElement.querySelectorAll('.sky-chevron').item(0).click();
+      fixture.detectChanges();
+      tick();
+
+      expect(expandSpy).toHaveBeenCalled();
+    }));
   });
 
   describe('with expand mode of "multiple"', () => {

src/app/visual/repeater/repeater-visual.component.html

@@ -132,7 +132,12 @@
   id="screenshot-repeater-selectable"
 >
   <sky-repeater [expandMode]="'single'">
-    <sky-repeater-item [isExpanded]="false" [selectable]="true">
+    <sky-repeater-item
+      [isExpanded]="false"
+      [selectable]="true"
+      (collapse)="onCollapse()"
+      (expand)="onExpand()"
+    >
       <sky-repeater-item-title>Title 1</sky-repeater-item-title>
       <sky-repeater-item-content>Content 1</sky-repeater-item-content>
     </sky-repeater-item>

src/app/visual/repeater/repeater-visual.component.ts

@@ -5,4 +5,12 @@ import { Component } from '@angular/core';
   templateUrl: './repeater-visual.component.html',
   styleUrls: ['./repeater-visual.component.scss']
 })
-export class RepeaterVisualComponent { }
+export class RepeaterVisualComponent {
+  public onCollapse(): void {
+    console.log('Collapsed.');
+  }
+
+  public onExpand(): void {
+    console.log('Expanded.');
+  }
+}