Added activeIndex class to repeater

e2e/repeater.e2e-spec.ts

@@ -4,15 +4,6 @@ import {
 } from '@skyux-sdk/e2e';
 
 describe('Repeater', () => {
-  it('should match the baseline sort screenshot', (done) => {
-    SkyHostBrowser.get('visual/sort');
-    SkyHostBrowser.setWindowBreakpoint('lg');
-    SkyHostBrowser.scrollTo('#screenshot-sort-full');
-    expect('#screenshot-sort-full').toMatchBaselineScreenshot(done, {
-      screenshotName: 'sort'
-    });
-  });
-
   it('should match previous repeater screenshot', (done) => {
     SkyHostBrowser.get('visual/repeater');
     SkyHostBrowser.setWindowBreakpoint('lg');
@@ -22,6 +13,15 @@ describe('Repeater', () => {
     });
   });
 
+  it('should match previous repeater screenshot when an item is active', (done) => {
+    SkyHostBrowser.get('visual/repeater');
+    SkyHostBrowser.setWindowBreakpoint('lg');
+    SkyHostBrowser.scrollTo('#screenshot-repeater-with-active-item');
+    expect('#screenshot-repeater-with-active-item').toMatchBaselineScreenshot(done, {
+      screenshotName: 'repeater-with-active-item'
+    });
+  });
+
   it('should match previous repeater screenshot when all are collapsed', (done) => {
     SkyHostBrowser.get('visual/repeater');
     SkyHostBrowser.setWindowBreakpoint('lg');

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

@@ -1,5 +1,6 @@
 <sky-repeater [expandMode]="expandMode">
   <sky-repeater-item
+    [isActive]="isActive"
     (collapse)="onCollapse()"
     (expand)="onExpand()"
   >

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

@@ -12,19 +12,22 @@ import {
   templateUrl: './repeater.component.fixture.html'
 })
 export class RepeaterTestComponent {
-  @ViewChild(SkyRepeaterComponent)
-  public repeater: SkyRepeaterComponent;
-
-  public showContextMenu: boolean;
-
-  public removeLastItem: boolean;
 
   public expandMode = 'single';
 
+  public isActive = false;
+
   public lastItemExpanded: boolean;
 
   public lastItemSelected = false;
 
+  public removeLastItem: boolean;
+
+  public showContextMenu: boolean;
+
+  @ViewChild(SkyRepeaterComponent)
+  public repeater: SkyRepeaterComponent;
+
   public onCollapse(): void {}
 
   public onExpand(): void {}

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

@@ -1,6 +1,7 @@
 <div
   class="sky-repeater-item sky-padding-even-default"
   [ngClass]="{
+    'sky-repeater-item-active': isActive,
     'sky-repeater-item-collapsible': isCollapsible,
     'sky-repeater-item-selected': isSelected
   }"

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

@@ -21,6 +21,13 @@
       padding-top:10px;
     }
   }
+
+  &.sky-repeater-item-active {
+    background-color: #eeeeef;
+    color: #212327;
+    padding-left: 6px;
+    border-left: 4px solid #00b4f1;
+  }
 }
 
 .sky-repeater-item-left {

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

@@ -58,6 +58,9 @@ export class SkyRepeaterItemComponent implements OnDestroy {
     this._isSelected = value;
   }
 
+  @Input()
+  public isActive: boolean = false;
+
   @Input()
   public showInlineForm: boolean = false;
 

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

@@ -536,6 +536,31 @@ describe('Repeater item component', () => {
     }));
   });
 
+  it('should add and remove active css class when isActive value changes', fakeAsync(() => {
+    let fixture = TestBed.createComponent(RepeaterTestComponent);
+    let cmp: RepeaterTestComponent = fixture.componentInstance;
+    let el = fixture.nativeElement;
+    fixture.detectChanges();
+    tick();
+
+    let activeRepeaterItem = el.querySelectorAll('.sky-repeater-item-active');
+    expect(activeRepeaterItem.length).toBe(0);
+
+    cmp.isActive = true;
+    fixture.detectChanges();
+    tick();
+
+    activeRepeaterItem = el.querySelectorAll('.sky-repeater-item-active');
+    expect(activeRepeaterItem.length).toBe(1);
+
+    cmp.isActive = false;
+    fixture.detectChanges();
+    tick();
+
+    activeRepeaterItem = el.querySelectorAll('.sky-repeater-item-active');
+    expect(activeRepeaterItem.length).toBe(0);
+  }));
+
   describe('with inline-form', () => {
     let fixture: ComponentFixture<RepeaterInlineFormFixtureComponent>;
     let el: HTMLElement;

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

@@ -20,6 +20,29 @@ <h3>Basic repeater</h3>
   </sky-repeater>
 </div>
 
+<div
+  class="app-screenshot sky-margin-stacked-default"
+  id="screenshot-repeater-with-active-item"
+>
+  <h3>Repeater with isActive enabled on click</h3>
+  <sky-repeater>
+    <sky-repeater-item
+      [isActive]="activeId === 1"
+      (click)="activeId = 1"
+    >
+      <sky-repeater-item-title>Title 1</sky-repeater-item-title>
+      <sky-repeater-item-content>Content 1</sky-repeater-item-content>
+    </sky-repeater-item>
+    <sky-repeater-item
+      [isActive]="activeId === 2"
+      (click)="activeId = 2"
+    >
+      <sky-repeater-item-title>Title 2</sky-repeater-item-title>
+      <sky-repeater-item-content>Content 2</sky-repeater-item-content>
+    </sky-repeater-item>
+  </sky-repeater>
+</div>
+
 <div
   class="app-screenshot sky-margin-stacked-default"
   id="screenshot-repeater-collapsed"

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

@@ -15,6 +15,10 @@ import {
 })
 export class RepeaterVisualComponent {
 
+  public activeId = 1;
+
+  public activeInlineFormId: number;
+
   public customConfig: SkyInlineFormConfig = {
     buttonLayout: SkyInlineFormButtonLayout.Custom,
     buttons: [
@@ -46,8 +50,6 @@ export class RepeaterVisualComponent {
     }
   ];
 
-  public activeInlineFormId: number;
-
   public onCollapse(): void {
     console.log('Collapsed.');
   }