Fix repeater collapsible on push

src/demos/repeater/repeater-demo.component.ts

@@ -1,8 +1,12 @@
-import { Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component
+} from '@angular/core';
 
 @Component({
   selector: 'sky-repeater-demo',
-  templateUrl: './repeater-demo.component.html'
+  templateUrl: './repeater-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyRepeaterDemoComponent {
   public items: any[];

src/modules/repeater/repeater-item-content.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
   selector: 'sky-repeater-item-content',

src/modules/repeater/repeater-item-context-menu.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
   selector: 'sky-repeater-item-context-menu',

src/modules/repeater/repeater-item-title.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
   selector: 'sky-repeater-item-title',

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

@@ -1,6 +1,6 @@
 <section
     class="sky-repeater-item"
-    [ngClass]="{'sky-repeater-item-collapsible': isCollapsible, 'sky-repeater-item-selected': isSelected}"
+    [ngClass]="{'sky-repeater-item-collapsible': (isCollapsibleObservable | async), 'sky-repeater-item-selected': isSelected}"
 >
 
   <div class="sky-repeater-item-left">
@@ -29,7 +29,7 @@
       <h1 class="sky-repeater-item-title" #titleEl>
         <ng-content select="sky-repeater-item-title"></ng-content>
       </h1>
-      <div class="sky-repeater-item-chevron" [hidden]="!isCollapsible">
+      <div class="sky-repeater-item-chevron" [hidden]="!(isCollapsibleObservable | async)">
         <sky-chevron
             [direction]="isExpanded ? 'up' : 'down'"
             (directionChange)="chevronDirectionChange($event)"

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

@@ -3,11 +3,23 @@ import {
   Input
 } from '@angular/core';
 
-import { skyAnimationSlide } from '../animation/slide';
+import {
+  BehaviorSubject
+} from 'rxjs/BehaviorSubject';
 
-import { SkyRepeaterService } from './repeater.service';
-import { SkyLogService } from '../log/log.service';
-import { SkyCheckboxChange } from '../checkbox/checkbox.component';
+import {
+  skyAnimationSlide
+} from '../animation/slide';
+import {
+  SkyRepeaterService
+} from './repeater.service';
+import {
+  SkyLogService
+} from '../log/log.service';
+import {
+  SkyCheckboxChange
+} from '../checkbox/checkbox.component';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'sky-repeater-item',
@@ -16,6 +28,7 @@ import { SkyCheckboxChange } from '../checkbox/checkbox.component';
   animations: [skyAnimationSlide]
 })
 export class SkyRepeaterItemComponent {
+
   public get isExpanded(): boolean {
     return this._isExpanded;
   }
@@ -34,22 +47,25 @@ export class SkyRepeaterItemComponent {
 
   public slideDirection: string;
 
-  public get isCollapsible(): boolean {
-    return this._isCollapsible;
+  public get isCollapsibleObservable(): Observable<boolean> {
+    return this._isCollapsible.asObservable();
   }
 
+  public get isCollapsible(): boolean {
+    return this._isCollapsible.getValue();
+  }
   public set isCollapsible(value: boolean) {
-    if (this._isCollapsible !== value) {
-      this._isCollapsible = value;
+    if (this.isCollapsible !== value) {
+      this._isCollapsible.next(value);
 
       /*istanbul ignore else */
-      if (!this._isCollapsible) {
+      if (!value) {
         this.updateForExpanded(true, false);
       }
     }
   }
 
-  private _isCollapsible = true;
+  private _isCollapsible: BehaviorSubject<boolean> = new BehaviorSubject(true);
 
   private _isExpanded = true;