From 7056d99763633502038fc15b5da63803234ba3eb Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Wed, 1 Feb 2017 15:26:54 -0500
Subject: [PATCH 01/14] starting files for list-toolbar

---
 src/modules/list-toolbar/index.ts             |   4 +
 .../list-toolbar-item-renderer.component.scss |  79 ++++++++++
 .../list-toolbar-item-renderer.component.ts   |  17 +++
 .../list-toolbar-item.component.ts            |  16 ++
 .../list-toolbar/list-toolbar.component.html  |  28 ++++
 .../list-toolbar/list-toolbar.component.scss  |  51 +++++++
 .../list-toolbar/list-toolbar.component.ts    | 140 ++++++++++++++++++
 .../list-toolbar/list-toolbar.module.ts       |  30 ++++
 8 files changed, 365 insertions(+)
 create mode 100644 src/modules/list-toolbar/index.ts
 create mode 100644 src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
 create mode 100644 src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
 create mode 100644 src/modules/list-toolbar/list-toolbar-item.component.ts
 create mode 100644 src/modules/list-toolbar/list-toolbar.component.html
 create mode 100644 src/modules/list-toolbar/list-toolbar.component.scss
 create mode 100644 src/modules/list-toolbar/list-toolbar.component.ts
 create mode 100644 src/modules/list-toolbar/list-toolbar.module.ts

diff --git a/src/modules/list-toolbar/index.ts b/src/modules/list-toolbar/index.ts
new file mode 100644
index 000000000..0d9aeea4e
--- /dev/null
+++ b/src/modules/list-toolbar/index.ts
@@ -0,0 +1,4 @@
+export { SkyListToolbarComponent } from './list-toolbar.component';
+export { SkyListToolbarItemComponent } from './list-toolbar-item.component';
+export { SkyListToolbarItemRendererComponent } from './list-toolbar-item-renderer.component';
+export { SkyListToolbarModule } from './list-toolbar.module';
diff --git a/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss b/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
new file mode 100644
index 000000000..d2e4547d1
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
@@ -0,0 +1,79 @@
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+:host {
+  position: relative;
+  float: left;
+  margin-right: 6px;
+
+  /deep/ button, /deep/ input {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  /deep/ a {
+    @include sky-link();
+  }
+
+  /deep/ .toolbar-item-container {
+    position: relative;
+
+    input {
+      float: left;
+      width: 150px;
+      border-radius: 6px;
+      line-height: 1.42857;
+      border: 1px solid $sky-color-gray-lighter-er;
+      outline: none;
+      -webkit-appearance: none;
+
+      &:focus {
+        box-shadow: 3px 0 8px 0 $sky-search-bar-outline-color;
+        border: 1px solid $sky-color-blue;
+        border-right: none;
+      }
+
+      &[type='text'] {
+        padding: 6px;
+        padding-right: 30px;
+      }
+
+      &::-webkit-input-placeholder {
+        font-style: italic;
+      }
+      &:-moz-placeholder {
+        font-style: italic;
+      }
+      &::-moz-placeholder {
+        font-style: italic;
+      }
+      &:-ms-input-placeholder {
+        font-style: italic;
+      }
+    }
+
+    @media (min-width: 768px) {
+      input {
+        width: 300px;
+      }
+    }
+
+    button {
+      position: absolute;
+      right: 0;
+      margin: 0;
+      border-color: transparent;
+      background-color: transparent;
+      cursor: pointer;
+    }
+  }
+
+  /deep/ button {
+    border-radius: 3px;
+    color: $sky-color-black;
+    background-color: $sky-color-white;
+    border: 1px solid #e7eaec;
+    padding: 6px 12px;
+    cursor: pointer;
+  }
+}
diff --git a/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts b/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
new file mode 100644
index 000000000..b4a5f6a50
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
@@ -0,0 +1,17 @@
+import { Component, ViewContainerRef, ViewChild, Input, TemplateRef, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'sky-list-toolbar-item-renderer',
+  template: '<template #container></template>',
+  styles: [require('./list-toolbar-item-renderer.component.scss')]
+})
+export class SkyListToolbarItemRendererComponent implements OnInit {
+  @Input() public template: TemplateRef<any>;
+  @ViewChild('container', { read: ViewContainerRef }) private container: ViewContainerRef;
+
+  public ngOnInit() {
+    if (this.template !== undefined) {
+      this.container.createEmbeddedView(this.template, this);
+    }
+  }
+}
diff --git a/src/modules/list-toolbar/list-toolbar-item.component.ts b/src/modules/list-toolbar/list-toolbar-item.component.ts
new file mode 100644
index 000000000..b68a70eed
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar-item.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input, ContentChildren, TemplateRef, QueryList } from '@angular/core';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'sky-list-toolbar-item',
+  template: '<ng-content></ng-content>'
+})
+export class SkyListToolbarItemComponent {
+  @Input() public id: string = moment().toDate().getTime().toString();
+  @Input() public index: number = -1;
+  @Input() public location: string = 'left';
+  @ContentChildren(TemplateRef) private templates: QueryList<TemplateRef<any>>;
+  public get template(): TemplateRef<any> {
+    return this.templates.length > 0 ? this.templates.first : undefined;
+  }
+}
diff --git a/src/modules/list-toolbar/list-toolbar.component.html b/src/modules/list-toolbar/list-toolbar.component.html
new file mode 100644
index 000000000..efb35d84d
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar.component.html
@@ -0,0 +1,28 @@
+<ng-content></ng-content>
+
+<div>
+  <div class="sky-toolbar-standard" *ngIf="type === 'standard'">
+    <sky-list-toolbar-item-renderer *ngFor="let item of leftTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    <sky-list-toolbar-item-renderer *ngFor="let item of centerTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    <sky-list-toolbar-item-renderer *ngFor="let item of rightTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+  </div>
+  <div class="sky-toolbar-search" *ngIf="type === 'search'">
+    <div class="primary-bar">
+      <sky-list-toolbar-item-renderer [template]="search" sky-cmp-id="search"></sky-list-toolbar-item-renderer>
+    </div>
+    <div class="secondary-bar">
+      <sky-list-toolbar-item-renderer *ngFor="let item of leftTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+      <sky-list-toolbar-item-renderer *ngFor="let item of centerTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+      <sky-list-toolbar-item-renderer *ngFor="let item of rightTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    </div>
+  </div>
+</div>
+
+<template #search>
+  <div *ngIf="isSearchEnabled | async" class="toolbar-item-container">
+    <input #searchBox (keyup.enter)="updateSearchText(searchBox.value)" type="text" value="{{searchText | async}}" placeholder="{{placeholder}}" />
+    <button cmp-id="search" type="button">
+      <i class="fa fa-lg fa-search" (click)="updateSearchText(searchBox.value)"></i>
+    </button>
+  </div>
+</template>
diff --git a/src/modules/list-toolbar/list-toolbar.component.scss b/src/modules/list-toolbar/list-toolbar.component.scss
new file mode 100644
index 000000000..4ff883c47
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar.component.scss
@@ -0,0 +1,51 @@
+@import '../../scss/variables';
+
+:host {
+  display: block;
+  width: 100%;
+
+  /deep/ .standard, /deep/ .search {
+    min-height: 46px;
+  }
+
+  /deep/ .sky-toolbar-standard {
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    height: 46px;
+    padding: 6px;
+
+    sky-list-toolbar-item-renderer > a {
+      display: inline-block;
+      padding-top: 6px;
+    }
+  }
+
+  /deep/ .sky-toolbar-search {
+    background-color: #eee;
+
+    .primary-bar {
+      width: 100%;
+      display: block;
+      min-height: 46px;
+      padding: 7px;
+
+      sky-list-toolbar-item-renderer {
+        width: 100%;
+
+        .toolbar-item-container {
+          > input {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .secondary-bar {
+      width: 100%;
+      display: inline-block;
+      border-top: 1px solid #ccc;
+      padding: 6px 10px;
+      padding-bottom: 2px;
+    }
+  }
+}
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
new file mode 100644
index 000000000..284a09574
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -0,0 +1,140 @@
+import {
+  Component,
+  ContentChildren,
+  QueryList,
+  ViewChild,
+  TemplateRef,
+  Input,
+  OnInit,
+  AfterContentInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import {
+  ListToolbarConfigSetSearchEnabledAction
+} from './state/config/actions';
+import { Observable } from 'rxjs';
+import {
+  ListToolbarState,
+  ListToolbarStateDispatcher,
+  ListToolbarStateModel
+} from './state';
+import { ListToolbarModel } from '../list/state/toolbar/toolbar.model';
+import { ListToolbarItemModel } from '../list/state/toolbar/toolbar-item.model';
+import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
+import { ListState, ListStateDispatcher } from '../list/state';
+import { getValue } from 'microedge-rxstate/dist/helpers';
+
+@Component({
+  selector: 'sky-list-toolbar',
+  templateUrl: './list-toolbar.component.html',
+  styleUrls: ['./list-toolbar.component.scss'],
+  providers: [
+    ListToolbarState,
+    ListToolbarStateDispatcher,
+    ListToolbarStateModel
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SkyListToolbarComponent implements OnInit, AfterContentInit {
+  @Input() public type: string = 'standard';
+  @Input() public placeholder: string = 'Find in this list';
+  @Input() public searchEnabled: boolean | Observable<boolean>;
+
+  /* tslint:disable */
+  @Input('searchText') private searchTextInput: string | Observable<string>;
+  /* tslint:enable */
+
+  @ContentChildren(SkyListToolbarItemComponent)
+  private toolbarItems: QueryList<SkyListToolbarItemComponent>;
+
+  @ViewChild('search')
+  private searchTemplate: TemplateRef<any>;
+
+  constructor(
+    private state: ListState,
+    private dispatcher: ListStateDispatcher,
+    private toolbarState: ListToolbarState,
+    public toolbarDispatcher: ListToolbarStateDispatcher
+  ) {
+  }
+
+  public ngOnInit() {
+    this.dispatcher.toolbarExists(true);
+    getValue(this.searchTextInput, (searchText: string) => this.updateSearchText(searchText));
+    getValue(this.searchEnabled, (searchEnabled: any) =>
+      this.toolbarDispatcher.next(
+        new ListToolbarConfigSetSearchEnabledAction(
+          searchEnabled === undefined ? true : searchEnabled
+        )
+      )
+    );
+
+    this.dispatcher.toolbarAddItems([
+      this.type !== 'search' ?
+        new ListToolbarItemModel({
+          id: 'search',
+          template: this.searchTemplate,
+          location: 'center'
+        }) :
+        undefined
+    ].filter(s => s !== undefined));
+  }
+
+  public ngAfterContentInit() {
+    this.toolbarItems.forEach(toolbarItem =>
+      this.dispatcher.toolbarAddItems(
+        [new ListToolbarItemModel(toolbarItem)],
+        toolbarItem.index
+      )
+    );
+  }
+
+  get searchText() {
+    return this.state.map(s => s.search.searchText).distinctUntilChanged();
+  }
+
+  get leftTemplates() {
+    return Observable.combineLatest(
+      this.state.map(s => s.toolbar).distinctUntilChanged(),
+      this.view,
+      (toolbar: ListToolbarModel, view: string) => toolbar.items.filter(
+        (i: ListToolbarItemModel) =>
+          i.location === 'left' && (i.view === undefined || i.view === view)
+      )
+    );
+  }
+
+  get centerTemplates() {
+    return Observable.combineLatest(
+      this.state.map(s => s.toolbar).distinctUntilChanged(),
+      this.view,
+      (toolbar: ListToolbarModel, view: string) => toolbar.items.filter(
+        (i: ListToolbarItemModel) =>
+          i.location === 'center' && (i.view === undefined || i.view === view)
+      )
+    );
+  }
+
+  get rightTemplates() {
+    return Observable.combineLatest(
+      this.state.map(s => s.toolbar).distinctUntilChanged(),
+      this.view.distinctUntilChanged(),
+      (toolbar: ListToolbarModel, view: string) => {
+        return toolbar.items.filter(
+        (i: ListToolbarItemModel) =>
+          i.location === 'right' && (i.view === undefined || i.view === view)
+      );
+      });
+  }
+
+
+  private updateSearchText(searchText: string) {
+    this.dispatcher.searchSetText(searchText);
+  }
+
+  private get isSearchEnabled() {
+    return this.toolbarState.map(s => s.config)
+      .distinctUntilChanged()
+      .map(c => c.searchEnabled);
+  }
+}
diff --git a/src/modules/list-toolbar/list-toolbar.module.ts b/src/modules/list-toolbar/list-toolbar.module.ts
new file mode 100644
index 000000000..e017ffbf7
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkyDropdownModule } from '../dropdown';
+import { SkyListToolbarComponent } from './list-toolbar.component';
+import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
+import { SkyListToolbarItemRendererComponent } from './list-toolbar-item-renderer.component';
+import { SkyListToolbarSortComponent } from './list-toolbar-sort.component';
+
+@NgModule({
+  declarations: [
+    SkyListToolbarComponent,
+    SkyListToolbarItemComponent,
+    SkyListToolbarItemRendererComponent,
+    SkyListToolbarSortComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyDropdownModule
+  ],
+  exports: [
+    SkyListToolbarComponent,
+    SkyListToolbarItemComponent,
+    SkyListToolbarItemRendererComponent,
+    SkyListToolbarSortComponent
+  ],
+  providers: [
+  ]
+})
+export class SkyListToolbarModule {
+}

From a9da0a03c003d039ed0cd2dbdc4ae0faeb4d7f21 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Wed, 1 Feb 2017 17:49:03 -0500
Subject: [PATCH 02/14] Add standalone toolbar component

Also:
  - tweak input-group and search styles to not use table display since
we can use flex instead.
  - Used toolbar component in search demo.

TODO:
  - toolbar unit tests
  - toolbar visual tests
  - toolbar docs
  - use toolbar in list-toolbar component
---
 .../search/search-demo.component.html         | 41 ++++++++-----------
 src/core.ts                                   |  3 ++
 .../list-toolbar-item.component.ts            |  2 +-
 .../list-toolbar/list-toolbar.component.ts    |  6 ++-
 src/modules/search/search.component.scss      | 10 ++---
 src/modules/toolbar/index.ts                  |  3 ++
 .../toolbar/toolbar-item.component.html       |  3 ++
 .../toolbar/toolbar-item.component.scss       |  5 +++
 src/modules/toolbar/toolbar-item.component.ts | 12 ++++++
 src/modules/toolbar/toolbar.component.html    |  3 ++
 src/modules/toolbar/toolbar.component.scss    | 11 +++++
 src/modules/toolbar/toolbar.component.ts      | 12 ++++++
 src/modules/toolbar/toolbar.module.ts         | 20 +++++++++
 src/scss/_input-groups.scss                   | 18 +++-----
 src/scss/_variables.scss                      |  6 +++
 15 files changed, 108 insertions(+), 47 deletions(-)
 create mode 100644 src/modules/toolbar/index.ts
 create mode 100644 src/modules/toolbar/toolbar-item.component.html
 create mode 100644 src/modules/toolbar/toolbar-item.component.scss
 create mode 100644 src/modules/toolbar/toolbar-item.component.ts
 create mode 100644 src/modules/toolbar/toolbar.component.html
 create mode 100644 src/modules/toolbar/toolbar.component.scss
 create mode 100644 src/modules/toolbar/toolbar.component.ts
 create mode 100644 src/modules/toolbar/toolbar.module.ts

diff --git a/src/app/components/search/search-demo.component.html b/src/app/components/search/search-demo.component.html
index 613fbb1d7..5fc710247 100644
--- a/src/app/components/search/search-demo.component.html
+++ b/src/app/components/search/search-demo.component.html
@@ -1,29 +1,20 @@
-<style>
-  .sky-demo-search-bar {
-    position: relative;
-    padding: 5px;
-  }
-  .sky-demo-search-bar-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 0;
-
-  }
-</style>
-
-<div class="sky-demo-search-bar">
-  <button
-    class="sky-btn sky-btn-default sky-demo-search-bar-item"
-    (click)="searchApplied('Robert')"
-  >
-    Predefined search text
-  </button>
-  <sky-search
-    [searchText]="searchText"
-    (searchApply)="searchApplied($event)"
+<sky-toolbar>
+  <sky-toolbar-item>
+    <button
+      class="sky-btn sky-btn-default sky-demo-search-bar-item"
+      (click)="searchApplied('Robert')"
     >
-  </sky-search>
-</div>
+      Predefined search text
+    </button>
+  </sky-toolbar-item>
+  <sky-toolbar-item>
+    <sky-search
+      [searchText]="searchText"
+      (searchApply)="searchApplied($event)"
+      >
+    </sky-search>
+  </sky-toolbar-item>
+</sky-toolbar>
 <div>
   <sky-repeater expandMode="none">
     <sky-repeater-item *ngFor="let item of displayedItems">
diff --git a/src/core.ts b/src/core.ts
index b733b86f0..83b67c6ab 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -25,6 +25,7 @@ import { SkyRadioModule } from './modules/radio';
 import { SkyRepeaterModule } from './modules/repeater';
 import { SkySearchModule } from './modules/search';
 import { SkyTabsModule } from './modules/tabs';
+import { SkyToolbarModule } from './modules/toolbar';
 import { SkyTilesModule } from './modules/tiles';
 import { SkyWaitModule } from './modules/wait';
 
@@ -54,6 +55,7 @@ import { SkyWaitModule } from './modules/wait';
     SkySearchModule,
     SkyTabsModule,
     SkyTilesModule,
+    SkyToolbarModule,
     SkyWaitModule
   ]
 })
@@ -84,6 +86,7 @@ export * from './modules/repeater';
 export * from './modules/search';
 export * from './modules/tabs';
 export * from './modules/tiles';
+export * from './modules/toolbar';
 export * from './modules/wait';
 
 export const SKY_PROVIDERS: any[] = [
diff --git a/src/modules/list-toolbar/list-toolbar-item.component.ts b/src/modules/list-toolbar/list-toolbar-item.component.ts
index b68a70eed..4887f00a0 100644
--- a/src/modules/list-toolbar/list-toolbar-item.component.ts
+++ b/src/modules/list-toolbar/list-toolbar-item.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, ContentChildren, TemplateRef, QueryList } from '@angular/core';
-import * as moment from 'moment';
+let moment = require('moment');
 
 @Component({
   selector: 'sky-list-toolbar-item',
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 284a09574..3c642c2d6 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -1,3 +1,4 @@
+/*
 import {
   Component,
   ContentChildren,
@@ -41,9 +42,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @Input() public searchEnabled: boolean | Observable<boolean>;
 
   /* tslint:disable */
-  @Input('searchText') private searchTextInput: string | Observable<string>;
+  //@Input('searchText') private searchTextInput: string | Observable<string>;
   /* tslint:enable */
-
+/*
   @ContentChildren(SkyListToolbarItemComponent)
   private toolbarItems: QueryList<SkyListToolbarItemComponent>;
 
@@ -138,3 +139,4 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       .map(c => c.searchEnabled);
   }
 }
+*/
diff --git a/src/modules/search/search.component.scss b/src/modules/search/search.component.scss
index 980bdf1ff..b5f3cbe74 100644
--- a/src/modules/search/search.component.scss
+++ b/src/modules/search/search.component.scss
@@ -2,7 +2,7 @@
 
 @media (min-width: $sky-screen-sm-min) {
     .sky-search-input-container {
-        max-width: 300px;
+        min-width: 300px;
     }
 }
 
@@ -52,10 +52,12 @@
 
 .sky-search-item-dismiss {
     flex-shrink: 0;
+    display: flex;
 }
 
 .sky-search-item-input {
     flex-grow: 1;
+    display: flex;
 }
 
 /*  This is needed or else the input will be tiny
@@ -128,9 +130,3 @@
       border: 2px solid $sky-color-green;
       padding: 5px 11px;
 }
-
-.sky-search-container {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 0;
-}
diff --git a/src/modules/toolbar/index.ts b/src/modules/toolbar/index.ts
new file mode 100644
index 000000000..72b6e8ab1
--- /dev/null
+++ b/src/modules/toolbar/index.ts
@@ -0,0 +1,3 @@
+export { SkyToolbarComponent } from './toolbar.component';
+export { SkyToolbarItemComponent } from './toolbar-item.component';
+export { SkyToolbarModule } from './toolbar.module';
diff --git a/src/modules/toolbar/toolbar-item.component.html b/src/modules/toolbar/toolbar-item.component.html
new file mode 100644
index 000000000..3c16427e8
--- /dev/null
+++ b/src/modules/toolbar/toolbar-item.component.html
@@ -0,0 +1,3 @@
+<div class="sky-toolbar-item">
+  <ng-content></ng-content>
+</div>
diff --git a/src/modules/toolbar/toolbar-item.component.scss b/src/modules/toolbar/toolbar-item.component.scss
new file mode 100644
index 000000000..24f709a94
--- /dev/null
+++ b/src/modules/toolbar/toolbar-item.component.scss
@@ -0,0 +1,5 @@
+@import '../../scss/mixins';
+
+.sky-toolbar-item {
+    margin-right: $sky-margin-half;
+}
diff --git a/src/modules/toolbar/toolbar-item.component.ts b/src/modules/toolbar/toolbar-item.component.ts
new file mode 100644
index 000000000..04918eb9b
--- /dev/null
+++ b/src/modules/toolbar/toolbar-item.component.ts
@@ -0,0 +1,12 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-toolbar-item',
+  styleUrls: ['./toolbar-item.component.scss'],
+  templateUrl: './toolbar-item.component.html'
+})
+export class SkyToolbarItemComponent {
+
+}
diff --git a/src/modules/toolbar/toolbar.component.html b/src/modules/toolbar/toolbar.component.html
new file mode 100644
index 000000000..d7b65b59b
--- /dev/null
+++ b/src/modules/toolbar/toolbar.component.html
@@ -0,0 +1,3 @@
+<div class="sky-toolbar-container">
+  <ng-content></ng-content>
+</div>
diff --git a/src/modules/toolbar/toolbar.component.scss b/src/modules/toolbar/toolbar.component.scss
new file mode 100644
index 000000000..6bf938c93
--- /dev/null
+++ b/src/modules/toolbar/toolbar.component.scss
@@ -0,0 +1,11 @@
+@import '../../scss/mixins';
+
+.sky-toolbar-container {
+    min-height: $sky-toolbar-min-height;
+    background-color: $sky-toolbar-background-color;
+    padding: $sky-padding-half $sky-padding;
+    @include sky-border(dark, top, bottom);
+    display: flex;
+    align-items: center;
+    position: relative;
+}
diff --git a/src/modules/toolbar/toolbar.component.ts b/src/modules/toolbar/toolbar.component.ts
new file mode 100644
index 000000000..6f88fe64d
--- /dev/null
+++ b/src/modules/toolbar/toolbar.component.ts
@@ -0,0 +1,12 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-toolbar',
+  styleUrls: ['./toolbar.component.scss'],
+  templateUrl: './toolbar.component.html'
+})
+export class SkyToolbarComponent {
+
+}
diff --git a/src/modules/toolbar/toolbar.module.ts b/src/modules/toolbar/toolbar.module.ts
new file mode 100644
index 000000000..30edeb47a
--- /dev/null
+++ b/src/modules/toolbar/toolbar.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SkyToolbarComponent } from './toolbar.component';
+import { SkyToolbarItemComponent } from './toolbar-item.component';
+
+@NgModule({
+  declarations: [
+    SkyToolbarComponent,
+    SkyToolbarItemComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SkyToolbarComponent,
+    SkyToolbarItemComponent
+  ]
+})
+export class SkyToolbarModule { }
diff --git a/src/scss/_input-groups.scss b/src/scss/_input-groups.scss
index bf7df5b48..5b631bf15 100644
--- a/src/scss/_input-groups.scss
+++ b/src/scss/_input-groups.scss
@@ -2,8 +2,7 @@
 
 .sky-input-group {
   position: relative; // For dropdowns
-  display: table;
-  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+  display: flex;
 
   .sky-form-control {
     // Ensure that the input is always above the *appended* addon button for
@@ -16,23 +15,14 @@
   }
 }
 
-// Display as table-cell
 .sky-input-group-btn,
 .sky-input-group .sky-form-control {
-  display: table-cell;
 
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
 }
 
-// Addon and addon wrapper for buttons
-.sky-input-group-btn {
-  width: 1%;
-  white-space: nowrap;
-  vertical-align: middle; // Match the inputs
-}
-
 // Reset rounded corners
 .sky-input-group .sky-form-control:first-child,
 .sky-input-group-btn:first-child > .sky-btn,
@@ -42,12 +32,14 @@
 
 .sky-input-group .sky-form-control:last-child,
 .sky-input-group-btn:last-child > .sky-btn,
-.sky-input-group-btn:first-child > .sky-btn:not(:first-child) {
+.sky-input-group-btn:first-child > .sky-btn:not(:first-child),
+.sky-input-group-btn:not(:first-child) > .sky-btn {
   @include sky-border-left-radius(0);
 }
 
 // Button input groups
 .sky-input-group-btn {
+  display: flex;
   position: relative;
   // Jankily prevent input button groups from wrapping with `white-space` and
   // `font-size` in combination with `inline-block` on buttons.
@@ -57,6 +49,8 @@
   // Negative margin for spacing, position for bringing hovered/focused/actived
   // element above the siblings.
   > .sky-btn {
+    padding-top: 0;
+    padding-bottom: 0;
     position: relative;
     + .sky-btn {
       margin-left: -1px;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 7b6d22899..8062d61d0 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -135,6 +135,12 @@ $sky-paging-border-color: #ddd !default;
 $sky-paging-background-color: $sky-color-white !default;
 // end paging
 
+// begin toolbar
+$sky-toolbar-background-color: $sky-color-white !default;
+$sky-toolbar-min-height: 49px;
+// end toolbar
+
+
 // begin wait
 $sky-wait-color: $sky-color-blue !default;
 $sky-wait-mask-color: $sky-color-white !default;

From 69245e2d6215c3939e833ff55a5f78f649e5f0bf Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Thu, 2 Feb 2017 11:01:12 -0500
Subject: [PATCH 03/14] dont worry about search type for now

---
 .../list-toolbar/list-toolbar.component.html  | 48 ++++++++---------
 .../list-toolbar/list-toolbar.component.scss  | 51 -------------------
 .../list-toolbar/list-toolbar.component.ts    |  5 +-
 3 files changed, 27 insertions(+), 77 deletions(-)
 delete mode 100644 src/modules/list-toolbar/list-toolbar.component.scss

diff --git a/src/modules/list-toolbar/list-toolbar.component.html b/src/modules/list-toolbar/list-toolbar.component.html
index efb35d84d..908a73e4d 100644
--- a/src/modules/list-toolbar/list-toolbar.component.html
+++ b/src/modules/list-toolbar/list-toolbar.component.html
@@ -1,28 +1,30 @@
-<ng-content></ng-content>
-
-<div>
-  <div class="sky-toolbar-standard" *ngIf="type === 'standard'">
-    <sky-list-toolbar-item-renderer *ngFor="let item of leftTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-    <sky-list-toolbar-item-renderer *ngFor="let item of centerTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-    <sky-list-toolbar-item-renderer *ngFor="let item of rightTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-  </div>
-  <div class="sky-toolbar-search" *ngIf="type === 'search'">
-    <div class="primary-bar">
-      <sky-list-toolbar-item-renderer [template]="search" sky-cmp-id="search"></sky-list-toolbar-item-renderer>
-    </div>
-    <div class="secondary-bar">
-      <sky-list-toolbar-item-renderer *ngFor="let item of leftTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-      <sky-list-toolbar-item-renderer *ngFor="let item of centerTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-      <sky-list-toolbar-item-renderer *ngFor="let item of rightTemplates | async" [template]="item.template" [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
-    </div>
-  </div>
+<div class="sky-list-toolbar-container">
+  <sky-toolbar *ngIf="type === 'standard'">
+    <sky-toolbar-item  *ngFor="let item of leftTemplates | async">
+      <sky-list-toolbar-item-renderer
+        [template]="item.template"
+        [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    </sky-toolbar-item>
+    <sky-toolbar-item *ngFor="let item of centerTemplates | async">
+      <sky-list-toolbar-item-renderer
+        [template]="item.template"
+        [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    </sky-toolbar-item>
+    <sky-toolbar-item *ngFor="let item of rightTemplates | async">
+      <sky-list-toolbar-item-renderer
+        [template]="item.template"
+        [attr.sky-cmp-id]="item.id"></sky-list-toolbar-item-renderer>
+    </sky-toolbar-item>
+    <ng-content></ng-content>
+  </sky-toolbar>
 </div>
 
 <template #search>
-  <div *ngIf="isSearchEnabled | async" class="toolbar-item-container">
-    <input #searchBox (keyup.enter)="updateSearchText(searchBox.value)" type="text" value="{{searchText | async}}" placeholder="{{placeholder}}" />
-    <button cmp-id="search" type="button">
-      <i class="fa fa-lg fa-search" (click)="updateSearchText(searchBox.value)"></i>
-    </button>
+  <div *ngIf="isSearchEnabled | async">
+    <sky-search
+      [searchText]="searchText | async"
+      (searchApply)="updateSearchText($event)"
+      [placeholderText]="placeholder">
+    </sky-search>
   </div>
 </template>
diff --git a/src/modules/list-toolbar/list-toolbar.component.scss b/src/modules/list-toolbar/list-toolbar.component.scss
deleted file mode 100644
index 4ff883c47..000000000
--- a/src/modules/list-toolbar/list-toolbar.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import '../../scss/variables';
-
-:host {
-  display: block;
-  width: 100%;
-
-  /deep/ .standard, /deep/ .search {
-    min-height: 46px;
-  }
-
-  /deep/ .sky-toolbar-standard {
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    height: 46px;
-    padding: 6px;
-
-    sky-list-toolbar-item-renderer > a {
-      display: inline-block;
-      padding-top: 6px;
-    }
-  }
-
-  /deep/ .sky-toolbar-search {
-    background-color: #eee;
-
-    .primary-bar {
-      width: 100%;
-      display: block;
-      min-height: 46px;
-      padding: 7px;
-
-      sky-list-toolbar-item-renderer {
-        width: 100%;
-
-        .toolbar-item-container {
-          > input {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .secondary-bar {
-      width: 100%;
-      display: inline-block;
-      border-top: 1px solid #ccc;
-      padding: 6px 10px;
-      padding-bottom: 2px;
-    }
-  }
-}
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 3c642c2d6..297ba132c 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -1,4 +1,3 @@
-/*
 import {
   Component,
   ContentChildren,
@@ -44,7 +43,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   /* tslint:disable */
   //@Input('searchText') private searchTextInput: string | Observable<string>;
   /* tslint:enable */
-/*
+
   @ContentChildren(SkyListToolbarItemComponent)
   private toolbarItems: QueryList<SkyListToolbarItemComponent>;
 
@@ -139,4 +138,4 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       .map(c => c.searchEnabled);
   }
 }
-*/
+

From 516fc3cc26cdfb6933c266b861c698d97712072d Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Thu, 2 Feb 2017 14:39:50 -0500
Subject: [PATCH 04/14] update list state for toolbar and search stuff

---
 .../list-data-in-memory.provider.ts           | 68 +++++++++++++++-
 .../list-toolbar-item-renderer.component.scss | 79 -------------------
 .../list-toolbar-item-renderer.component.ts   |  3 +-
 .../list-toolbar/list-toolbar.component.html  |  2 +-
 .../list-toolbar/list-toolbar.component.ts    | 28 ++++---
 .../list-toolbar/list-toolbar.module.ts       |  7 +-
 .../list-toolbar/state/config/actions.ts      |  1 +
 .../list-toolbar/state/config/config.model.ts |  9 +++
 .../state/config/config.orchestrator.ts       | 23 ++++++
 .../state/config/set-search-enabled.action.ts |  3 +
 src/modules/list-toolbar/state/index.ts       |  3 +
 .../state/toolbar-state-action.type.ts        |  6 ++
 .../list-toolbar/state/toolbar-state.model.ts |  5 ++
 .../state/toolbar-state.rxstate.ts            | 10 +++
 .../state/toolbar-state.state-node.ts         | 16 ++++
 src/modules/list/list-data-request.model.ts   |  4 +
 src/modules/list/list.component.ts            | 12 ++-
 src/modules/list/state/index.ts               |  6 ++
 .../list/state/list-state-action.type.ts      | 15 +++-
 src/modules/list/state/list-state.model.ts    |  5 ++
 src/modules/list/state/list-state.rxstate.ts  | 38 ++++++++-
 .../list/state/list-state.state-node.ts       |  4 +
 src/modules/list/state/search/actions.ts      |  3 +
 src/modules/list/state/search/search.model.ts | 13 +++
 .../list/state/search/search.orchestrator.ts  | 38 +++++++++
 .../search/set-field-selectors.action.ts      |  3 +
 .../list/state/search/set-functions.action.ts |  3 +
 .../state/search/set-search-text.action.ts    |  3 +
 src/modules/list/state/toolbar/actions.ts     |  2 +
 src/modules/list/state/toolbar/load.action.ts |  7 ++
 .../list/state/toolbar/set-exists.action.ts   |  3 +
 .../list/state/toolbar/toolbar-item.model.ts  | 18 +++++
 .../list/state/toolbar/toolbar.model.ts       | 13 +++
 .../state/toolbar/toolbar.orchestrator.ts     | 48 +++++++++++
 34 files changed, 396 insertions(+), 105 deletions(-)
 delete mode 100644 src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
 create mode 100644 src/modules/list-toolbar/state/config/actions.ts
 create mode 100644 src/modules/list-toolbar/state/config/config.model.ts
 create mode 100644 src/modules/list-toolbar/state/config/config.orchestrator.ts
 create mode 100644 src/modules/list-toolbar/state/config/set-search-enabled.action.ts
 create mode 100644 src/modules/list-toolbar/state/index.ts
 create mode 100644 src/modules/list-toolbar/state/toolbar-state-action.type.ts
 create mode 100644 src/modules/list-toolbar/state/toolbar-state.model.ts
 create mode 100644 src/modules/list-toolbar/state/toolbar-state.rxstate.ts
 create mode 100644 src/modules/list-toolbar/state/toolbar-state.state-node.ts
 create mode 100644 src/modules/list/state/search/actions.ts
 create mode 100644 src/modules/list/state/search/search.model.ts
 create mode 100644 src/modules/list/state/search/search.orchestrator.ts
 create mode 100644 src/modules/list/state/search/set-field-selectors.action.ts
 create mode 100644 src/modules/list/state/search/set-functions.action.ts
 create mode 100644 src/modules/list/state/search/set-search-text.action.ts
 create mode 100644 src/modules/list/state/toolbar/actions.ts
 create mode 100644 src/modules/list/state/toolbar/load.action.ts
 create mode 100644 src/modules/list/state/toolbar/set-exists.action.ts
 create mode 100644 src/modules/list/state/toolbar/toolbar-item.model.ts
 create mode 100644 src/modules/list/state/toolbar/toolbar.model.ts
 create mode 100644 src/modules/list/state/toolbar/toolbar.orchestrator.ts

diff --git a/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts b/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
index e21bcee14..25c94c397 100644
--- a/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
+++ b/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
@@ -3,6 +3,7 @@ import { ListDataProvider } from '../list/list-data.provider';
 import { ListDataRequestModel } from '../list/list-data-request.model';
 import { ListDataResponseModel } from '../list/list-data-response.model';
 import { ListItemModel } from '../list/state/items/item.model';
+import { ListSearchModel } from '../list/state/search/search.model';
 
 let moment = require('moment');
 
@@ -10,11 +11,19 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
   private items: BehaviorSubject<Array<ListItemModel>> =
     new BehaviorSubject<Array<ListItemModel>>([]);
 
+  private lastItems: ListItemModel[];
+  private lastSearch: ListSearchModel;
+  private lastSearchResults: ListItemModel[];
+  private searchFunction: (data: any, searchText: string) => boolean;
+
   constructor(
-    data?: Observable<Array<any>>
+    data?: Observable<Array<any>>,
+    searchFunction?: (data: any, searchText: string) => boolean
   ) {
     super(data);
 
+    this.searchFunction = searchFunction;
+
     if (data) {
       data.subscribe(items => {
         this.items.next(items.map(d =>
@@ -29,7 +38,7 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
   }
 
   public get(request: ListDataRequestModel): Observable<ListDataResponseModel> {
-    return this.items.map((result: Array<ListItemModel>) => {
+    return this.filteredItems(request).map((result: Array<ListItemModel>) => {
         let itemStart = (request.pageNumber - 1) * request.pageSize;
         let pagedResult = result.slice(itemStart, itemStart + request.pageSize);
 
@@ -39,4 +48,59 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
         });
     });
   }
+
+  private filteredItems(request: ListDataRequestModel): Observable<Array<ListItemModel>> {
+    return this.items.map(items => {
+      let dataChanged = false;
+      let search = request.search;
+
+      if (this.lastItems === undefined || this.lastItems !== items) {
+        dataChanged = true;
+        this.lastItems = items;
+      }
+
+      let searchChanged = false;
+      if (this.lastSearch === undefined || this.lastSearch !== search) {
+        searchChanged = true;
+        this.lastSearch = search;
+      }
+
+      let result = items;
+
+      if (!dataChanged && !searchChanged && this.lastSearchResults !== undefined) {
+        result = this.lastSearchResults;
+      } else if (search.searchText !== undefined && search.searchText.length > 0) {
+        let searchText = search.searchText.toLowerCase();
+        let searchFunctions: any[];
+        if (this.searchFunction !== undefined) {
+          searchFunctions = [this.searchFunction];
+        } else {
+          searchFunctions = search.functions;
+        }
+
+        result = result.filter(item => {
+          let isMatch = false;
+
+          for (let i = 0; i < searchFunctions.length; i++) {
+            let searchFunction = searchFunctions[i];
+            let searchResult = searchFunction(item.data, searchText);
+
+            if (
+              (typeof searchResult === 'string' && searchResult.indexOf(searchText) !== -1) ||
+              searchResult === true
+            ) {
+              isMatch = true;
+              break;
+            }
+          }
+
+          return isMatch;
+        });
+
+        this.lastSearchResults = result;
+      }
+
+      return result;
+    });
+  }
 }
diff --git a/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss b/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
deleted file mode 100644
index d2e4547d1..000000000
--- a/src/modules/list-toolbar/list-toolbar-item-renderer.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '../../scss/variables';
-@import '../../scss/mixins';
-
-:host {
-  position: relative;
-  float: left;
-  margin-right: 6px;
-
-  /deep/ button, /deep/ input {
-    height: 32px;
-    font-size: 13px;
-  }
-
-  /deep/ a {
-    @include sky-link();
-  }
-
-  /deep/ .toolbar-item-container {
-    position: relative;
-
-    input {
-      float: left;
-      width: 150px;
-      border-radius: 6px;
-      line-height: 1.42857;
-      border: 1px solid $sky-color-gray-lighter-er;
-      outline: none;
-      -webkit-appearance: none;
-
-      &:focus {
-        box-shadow: 3px 0 8px 0 $sky-search-bar-outline-color;
-        border: 1px solid $sky-color-blue;
-        border-right: none;
-      }
-
-      &[type='text'] {
-        padding: 6px;
-        padding-right: 30px;
-      }
-
-      &::-webkit-input-placeholder {
-        font-style: italic;
-      }
-      &:-moz-placeholder {
-        font-style: italic;
-      }
-      &::-moz-placeholder {
-        font-style: italic;
-      }
-      &:-ms-input-placeholder {
-        font-style: italic;
-      }
-    }
-
-    @media (min-width: 768px) {
-      input {
-        width: 300px;
-      }
-    }
-
-    button {
-      position: absolute;
-      right: 0;
-      margin: 0;
-      border-color: transparent;
-      background-color: transparent;
-      cursor: pointer;
-    }
-  }
-
-  /deep/ button {
-    border-radius: 3px;
-    color: $sky-color-black;
-    background-color: $sky-color-white;
-    border: 1px solid #e7eaec;
-    padding: 6px 12px;
-    cursor: pointer;
-  }
-}
diff --git a/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts b/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
index b4a5f6a50..b045d88ff 100644
--- a/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
+++ b/src/modules/list-toolbar/list-toolbar-item-renderer.component.ts
@@ -2,8 +2,7 @@ import { Component, ViewContainerRef, ViewChild, Input, TemplateRef, OnInit} fro
 
 @Component({
   selector: 'sky-list-toolbar-item-renderer',
-  template: '<template #container></template>',
-  styles: [require('./list-toolbar-item-renderer.component.scss')]
+  template: '<template #container></template>'
 })
 export class SkyListToolbarItemRendererComponent implements OnInit {
   @Input() public template: TemplateRef<any>;
diff --git a/src/modules/list-toolbar/list-toolbar.component.html b/src/modules/list-toolbar/list-toolbar.component.html
index 908a73e4d..ba0e8c625 100644
--- a/src/modules/list-toolbar/list-toolbar.component.html
+++ b/src/modules/list-toolbar/list-toolbar.component.html
@@ -1,5 +1,5 @@
 <div class="sky-list-toolbar-container">
-  <sky-toolbar *ngIf="type === 'standard'">
+  <sky-toolbar>
     <sky-toolbar-item  *ngFor="let item of leftTemplates | async">
       <sky-list-toolbar-item-renderer
         [template]="item.template"
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 297ba132c..4428fa9e0 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -36,12 +36,14 @@ import { getValue } from 'microedge-rxstate/dist/helpers';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyListToolbarComponent implements OnInit, AfterContentInit {
-  @Input() public type: string = 'standard';
-  @Input() public placeholder: string = 'Find in this list';
-  @Input() public searchEnabled: boolean | Observable<boolean>;
+  @Input()
+  public placeholder: string;
+  @Input()
+  public searchEnabled: boolean | Observable<boolean>;
 
   /* tslint:disable */
-  //@Input('searchText') private searchTextInput: string | Observable<string>;
+  @Input('searchText')
+  private searchTextInput: string | Observable<string>;
   /* tslint:enable */
 
   @ContentChildren(SkyListToolbarItemComponent)
@@ -70,14 +72,12 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
     );
 
     this.dispatcher.toolbarAddItems([
-      this.type !== 'search' ?
-        new ListToolbarItemModel({
-          id: 'search',
-          template: this.searchTemplate,
-          location: 'center'
-        }) :
-        undefined
-    ].filter(s => s !== undefined));
+      new ListToolbarItemModel({
+        id: 'search',
+        template: this.searchTemplate,
+        location: 'center'
+      })
+    ]);
   }
 
   public ngAfterContentInit() {
@@ -93,6 +93,10 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
     return this.state.map(s => s.search.searchText).distinctUntilChanged();
   }
 
+  get view() {
+    return this.state.map(s => s.views.active).distinctUntilChanged();
+  }
+
   get leftTemplates() {
     return Observable.combineLatest(
       this.state.map(s => s.toolbar).distinctUntilChanged(),
diff --git a/src/modules/list-toolbar/list-toolbar.module.ts b/src/modules/list-toolbar/list-toolbar.module.ts
index e017ffbf7..6a64580ae 100644
--- a/src/modules/list-toolbar/list-toolbar.module.ts
+++ b/src/modules/list-toolbar/list-toolbar.module.ts
@@ -4,14 +4,12 @@ import { SkyDropdownModule } from '../dropdown';
 import { SkyListToolbarComponent } from './list-toolbar.component';
 import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
 import { SkyListToolbarItemRendererComponent } from './list-toolbar-item-renderer.component';
-import { SkyListToolbarSortComponent } from './list-toolbar-sort.component';
 
 @NgModule({
   declarations: [
     SkyListToolbarComponent,
     SkyListToolbarItemComponent,
-    SkyListToolbarItemRendererComponent,
-    SkyListToolbarSortComponent
+    SkyListToolbarItemRendererComponent
   ],
   imports: [
     CommonModule,
@@ -20,8 +18,7 @@ import { SkyListToolbarSortComponent } from './list-toolbar-sort.component';
   exports: [
     SkyListToolbarComponent,
     SkyListToolbarItemComponent,
-    SkyListToolbarItemRendererComponent,
-    SkyListToolbarSortComponent
+    SkyListToolbarItemRendererComponent
   ],
   providers: [
   ]
diff --git a/src/modules/list-toolbar/state/config/actions.ts b/src/modules/list-toolbar/state/config/actions.ts
new file mode 100644
index 000000000..0d07de78b
--- /dev/null
+++ b/src/modules/list-toolbar/state/config/actions.ts
@@ -0,0 +1 @@
+export { ListToolbarConfigSetSearchEnabledAction } from './set-search-enabled.action';
diff --git a/src/modules/list-toolbar/state/config/config.model.ts b/src/modules/list-toolbar/state/config/config.model.ts
new file mode 100644
index 000000000..e48d0ad45
--- /dev/null
+++ b/src/modules/list-toolbar/state/config/config.model.ts
@@ -0,0 +1,9 @@
+export class ListToolbarConfigModel {
+  public searchEnabled: boolean = true;
+
+  constructor(data?: any) {
+    if (data) {
+      this.searchEnabled = data.searchEnabled;
+    }
+  }
+}
diff --git a/src/modules/list-toolbar/state/config/config.orchestrator.ts b/src/modules/list-toolbar/state/config/config.orchestrator.ts
new file mode 100644
index 000000000..5c51e2d20
--- /dev/null
+++ b/src/modules/list-toolbar/state/config/config.orchestrator.ts
@@ -0,0 +1,23 @@
+import { ListToolbarStateOrchestrator } from '../toolbar-state.rxstate';
+import { ListToolbarConfigModel } from './config.model';
+
+import {
+  ListToolbarConfigSetSearchEnabledAction
+} from './actions';
+
+export class ListToolbarConfigOrchestrator
+  extends ListToolbarStateOrchestrator<ListToolbarConfigModel> {
+  constructor() {
+    super();
+
+    this
+      .register(ListToolbarConfigSetSearchEnabledAction, this.setSearchEnabled);
+  }
+
+  private setSearchEnabled(
+    state: ListToolbarConfigModel,
+    action: ListToolbarConfigSetSearchEnabledAction): ListToolbarConfigModel {
+    return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
+  }
+
+}
diff --git a/src/modules/list-toolbar/state/config/set-search-enabled.action.ts b/src/modules/list-toolbar/state/config/set-search-enabled.action.ts
new file mode 100644
index 000000000..7305756d2
--- /dev/null
+++ b/src/modules/list-toolbar/state/config/set-search-enabled.action.ts
@@ -0,0 +1,3 @@
+export class ListToolbarConfigSetSearchEnabledAction {
+  constructor(public enabled: true) {}
+}
diff --git a/src/modules/list-toolbar/state/index.ts b/src/modules/list-toolbar/state/index.ts
new file mode 100644
index 000000000..7a6997c47
--- /dev/null
+++ b/src/modules/list-toolbar/state/index.ts
@@ -0,0 +1,3 @@
+export { ListToolbarState } from './toolbar-state.state-node';
+export { ListToolbarStateDispatcher } from './toolbar-state.rxstate';
+export { ListToolbarStateModel } from './toolbar-state.model';
diff --git a/src/modules/list-toolbar/state/toolbar-state-action.type.ts b/src/modules/list-toolbar/state/toolbar-state-action.type.ts
new file mode 100644
index 000000000..af5bdf48c
--- /dev/null
+++ b/src/modules/list-toolbar/state/toolbar-state-action.type.ts
@@ -0,0 +1,6 @@
+import {
+  ListToolbarConfigSetSearchEnabledAction
+} from './config/actions';
+
+export type ListToolbarStateAction =
+  ListToolbarConfigSetSearchEnabledAction;
diff --git a/src/modules/list-toolbar/state/toolbar-state.model.ts b/src/modules/list-toolbar/state/toolbar-state.model.ts
new file mode 100644
index 000000000..c16e84c5f
--- /dev/null
+++ b/src/modules/list-toolbar/state/toolbar-state.model.ts
@@ -0,0 +1,5 @@
+import { ListToolbarConfigModel } from './config/config.model';
+
+export class ListToolbarStateModel {
+  public config: ListToolbarConfigModel = new ListToolbarConfigModel();
+}
diff --git a/src/modules/list-toolbar/state/toolbar-state.rxstate.ts b/src/modules/list-toolbar/state/toolbar-state.rxstate.ts
new file mode 100644
index 000000000..233b3b8d3
--- /dev/null
+++ b/src/modules/list-toolbar/state/toolbar-state.rxstate.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { StateDispatcher, StateOrchestrator } from 'microedge-rxstate/dist';
+import { ListToolbarStateAction } from './toolbar-state-action.type';
+
+@Injectable()
+export class ListToolbarStateDispatcher extends StateDispatcher<ListToolbarStateAction> {
+}
+
+export class ListToolbarStateOrchestrator<T> extends StateOrchestrator<T, ListToolbarStateAction> {
+}
diff --git a/src/modules/list-toolbar/state/toolbar-state.state-node.ts b/src/modules/list-toolbar/state/toolbar-state.state-node.ts
new file mode 100644
index 000000000..624450728
--- /dev/null
+++ b/src/modules/list-toolbar/state/toolbar-state.state-node.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { StateNode } from 'microedge-rxstate/dist';
+import { ListToolbarStateModel } from './toolbar-state.model';
+import { ListToolbarStateDispatcher } from './toolbar-state.rxstate';
+import { ListToolbarConfigOrchestrator } from './config/config.orchestrator';
+
+@Injectable()
+export class ListToolbarState extends StateNode<ListToolbarStateModel> {
+  constructor(initialState: ListToolbarStateModel, dispatcher: ListToolbarStateDispatcher) {
+    super(initialState, dispatcher);
+
+    this
+      .register('config', ListToolbarConfigOrchestrator)
+      .begin();
+  }
+}
diff --git a/src/modules/list/list-data-request.model.ts b/src/modules/list/list-data-request.model.ts
index 63c9bfeea..d24ff3c31 100644
--- a/src/modules/list/list-data-request.model.ts
+++ b/src/modules/list/list-data-request.model.ts
@@ -1,11 +1,15 @@
+import { ListSearchModel } from './state/search/search.model';
+
 export class ListDataRequestModel {
   public pageSize: number = 10;
   public pageNumber: number = 1;
+  public search: ListSearchModel;
 
   constructor(data?: any) {
     if (data !== undefined) {
       this.pageSize = data.pageSize;
       this.pageNumber = data.pageNumber;
+      this.search = data.search;
     }
   }
 }
diff --git a/src/modules/list/list.component.ts b/src/modules/list/list.component.ts
index 964675764..f1fb2fd68 100644
--- a/src/modules/list/list.component.ts
+++ b/src/modules/list/list.component.ts
@@ -13,6 +13,8 @@ import { ListState, ListStateDispatcher } from './state';
 import { Observable } from 'rxjs/Observable';
 import { ListViewComponent } from './list-view.component';
 
+import { ListSearchModel } from './state/search/search.model';
+
 import {
   ListViewsLoadAction,
   ListViewsSetActiveAction
@@ -48,6 +50,9 @@ export class SkyListComponent implements AfterContentInit {
   @Input()
   public sortFields?: string | Array<string> | Observable<Array<string>> | Observable<string>;
 
+  /* tslint:disable-next-line */
+  @Input('search') private searchFunction: (data: any, searchText: string) => boolean;
+
   private dataFirstLoad: boolean = false;
 
   @ContentChildren(ListViewComponent)
@@ -101,14 +106,16 @@ export class SkyListComponent implements AfterContentInit {
     }
 
     if (!this.dataProvider) {
-      this.dataProvider = new SkyListInMemoryDataProvider(data);
+      this.dataProvider = new SkyListInMemoryDataProvider(data, this.searchFunction);
     }
 
     return Observable.combineLatest(
+      this.state.map(s => s.search).distinctUntilChanged(),
       this.state.map(s => s.paging.itemsPerPage).distinctUntilChanged(),
       this.state.map(s => s.paging.pageNumber).distinctUntilChanged(),
       data.distinctUntilChanged(),
       (
+        search: ListSearchModel,
         itemsPerPage: number,
         pageNumber: number,
         itemsData: Array<any>
@@ -126,7 +133,8 @@ export class SkyListComponent implements AfterContentInit {
         } else {
           response = this.dataProvider.get(new ListDataRequestModel({
             pageSize: itemsPerPage,
-            pageNumber: pageNumber
+            pageNumber: pageNumber,
+            search: search
           }));
         }
 
diff --git a/src/modules/list/state/index.ts b/src/modules/list/state/index.ts
index 2ffccd356..bfaff9ba8 100644
--- a/src/modules/list/state/index.ts
+++ b/src/modules/list/state/index.ts
@@ -5,3 +5,9 @@ export * from './items/actions';
 export * from './items/item.model';
 export * from './paging/actions';
 export * from './paging/paging.model';
+export * from './toolbar/actions';
+export * from './toolbar/toolbar.model';
+export * from './toolbar/toolbar-item.model';
+export * from './search/actions';
+export * from './search/search.model';
+
diff --git a/src/modules/list/state/list-state-action.type.ts b/src/modules/list/state/list-state-action.type.ts
index e073e2bdf..40f55b157 100644
--- a/src/modules/list/state/list-state-action.type.ts
+++ b/src/modules/list/state/list-state-action.type.ts
@@ -13,7 +13,20 @@ import {
   ListViewsSetActiveAction
 } from './views/actions';
 
+import {
+  ListToolbarItemsLoadAction,
+  ListToolbarSetExistsAction
+} from './toolbar/actions';
+
+import {
+  ListSearchSetSearchTextAction,
+  ListSearchSetFunctionsAction,
+  ListSearchSetFieldSelectorsAction
+} from './search/actions';
+
 export type ListStateAction =
   ListItemsSetLoadingAction | ListItemsLoadAction |
   ListPagingSetMaxPagesAction | ListPagingSetItemsPerPageAction | ListPagingSetPageNumberAction |
-  ListViewsLoadAction | ListViewsSetActiveAction;
+  ListViewsLoadAction | ListViewsSetActiveAction | ListToolbarItemsLoadAction |
+  ListToolbarSetExistsAction | ListSearchSetSearchTextAction | ListSearchSetFunctionsAction |
+  ListSearchSetFieldSelectorsAction;
diff --git a/src/modules/list/state/list-state.model.ts b/src/modules/list/state/list-state.model.ts
index e6adcc2fb..36e1b79e5 100644
--- a/src/modules/list/state/list-state.model.ts
+++ b/src/modules/list/state/list-state.model.ts
@@ -2,9 +2,14 @@ import { AsyncList } from 'microedge-rxstate/dist';
 import { ListPagingModel } from './paging/paging.model';
 import { ListItemModel } from './items/item.model';
 import { ListViewsModel } from './views/views.model';
+import { ListToolbarModel } from './toolbar/toolbar.model';
+import { ListSearchModel } from './search/search.model';
 
 export class ListStateModel {
   public paging: ListPagingModel = new ListPagingModel();
   public items: AsyncList<ListItemModel> = new AsyncList<ListItemModel>();
   public views: ListViewsModel = new ListViewsModel();
+  public toolbar: ListToolbarModel = new ListToolbarModel();
+  public search: ListSearchModel = new ListSearchModel();
+
 }
diff --git a/src/modules/list/state/list-state.rxstate.ts b/src/modules/list/state/list-state.rxstate.ts
index c73b24d6a..e5dc4c9a9 100644
--- a/src/modules/list/state/list-state.rxstate.ts
+++ b/src/modules/list/state/list-state.rxstate.ts
@@ -1,9 +1,25 @@
 import { Injectable } from '@angular/core';
-import { StateDispatcher, StateOrchestrator } from 'microedge-rxstate/dist';
+import {
+  StateDispatcher,
+  StateOrchestrator
+} from 'microedge-rxstate/dist';
 import { ListStateAction } from './list-state-action.type';
 
 import { ListViewsSetActiveAction } from './views/actions';
 
+import {
+  ListToolbarItemsLoadAction,
+  ListToolbarSetExistsAction
+} from './toolbar/actions';
+
+import { ListToolbarItemModel } from './toolbar/toolbar-item.model';
+
+import {
+  ListSearchSetFunctionsAction,
+  ListSearchSetSearchTextAction,
+  ListSearchSetFieldSelectorsAction
+} from './search/actions';
+
 export class ListStateOrchestrator<T> extends StateOrchestrator<T, ListStateAction> {
 }
 
@@ -13,4 +29,24 @@ export class ListStateDispatcher extends StateDispatcher<ListStateAction> {
   public viewsSetActive(id: string) {
     this.next(new ListViewsSetActiveAction(id));
   }
+
+  public toolbarExists(exists: boolean): void {
+    this.next(new ListToolbarSetExistsAction(exists));
+  }
+
+  public toolbarAddItems(items: ListToolbarItemModel[], index: number = -1): void {
+    setTimeout(() => this.next(new ListToolbarItemsLoadAction(items, index)));
+  }
+
+  public searchSetFunctions(sortFunctions: ((data: any, searchText: string) => boolean)[]): void {
+    this.next(new ListSearchSetFunctionsAction(sortFunctions));
+  }
+
+  public searchSetFieldSelectors(fieldSelectors: Array<string>): void {
+    this.next(new ListSearchSetFieldSelectorsAction(fieldSelectors));
+  }
+
+  public searchSetText(searchText: string) {
+    this.next(new ListSearchSetSearchTextAction(searchText));
+  }
 }
diff --git a/src/modules/list/state/list-state.state-node.ts b/src/modules/list/state/list-state.state-node.ts
index 2b0e4c8fc..38f5857cd 100644
--- a/src/modules/list/state/list-state.state-node.ts
+++ b/src/modules/list/state/list-state.state-node.ts
@@ -7,6 +7,8 @@ import { ListStateDispatcher } from './list-state.rxstate';
 import { ListItemsOrchestrator } from './items/items.orchestrator';
 import { ListPagingOrchestrator } from './paging/paging.orchestrator';
 import { ListViewsOrchestrator } from './views/views.orchestrator';
+import { ListToolbarOrchestrator } from './toolbar/toolbar.orchestrator';
+import { ListSearchOrchestrator } from './search/search.orchestrator';
 
 @Injectable()
 export class ListState extends StateNode<ListStateModel> {
@@ -16,6 +18,8 @@ export class ListState extends StateNode<ListStateModel> {
     this
       .register('items', ListItemsOrchestrator)
       .register('paging', ListPagingOrchestrator)
+      .register('search', ListSearchOrchestrator)
+      .register('toolbar', ListToolbarOrchestrator)
       .register('views', ListViewsOrchestrator)
       .begin();
   }
diff --git a/src/modules/list/state/search/actions.ts b/src/modules/list/state/search/actions.ts
new file mode 100644
index 000000000..526d7fd54
--- /dev/null
+++ b/src/modules/list/state/search/actions.ts
@@ -0,0 +1,3 @@
+export { ListSearchSetSearchTextAction } from './set-search-text.action';
+export { ListSearchSetFunctionsAction } from './set-functions.action';
+export { ListSearchSetFieldSelectorsAction } from './set-field-selectors.action';
diff --git a/src/modules/list/state/search/search.model.ts b/src/modules/list/state/search/search.model.ts
new file mode 100644
index 000000000..e30fb3dfd
--- /dev/null
+++ b/src/modules/list/state/search/search.model.ts
@@ -0,0 +1,13 @@
+export class ListSearchModel {
+  public searchText: string = '';
+  public functions: Array<(data: any, searchText: string) => boolean> = [];
+  public fieldSelectors: Array<string> = [];
+
+  constructor(data?: any) {
+    if (data) {
+      this.searchText = data.searchText;
+      this.functions = [...data.functions];
+      this.fieldSelectors = data.fieldSelectors;
+    }
+  }
+}
diff --git a/src/modules/list/state/search/search.orchestrator.ts b/src/modules/list/state/search/search.orchestrator.ts
new file mode 100644
index 000000000..1b3a4d9aa
--- /dev/null
+++ b/src/modules/list/state/search/search.orchestrator.ts
@@ -0,0 +1,38 @@
+import { ListStateOrchestrator } from '../list-state.rxstate';
+import { ListSearchModel } from './search.model';
+import { ListSearchSetSearchTextAction } from './set-search-text.action';
+import { ListSearchSetFunctionsAction } from './set-functions.action';
+import { ListSearchSetFieldSelectorsAction } from './set-field-selectors.action';
+
+export class ListSearchOrchestrator extends ListStateOrchestrator<ListSearchModel> {
+  constructor() {
+    super();
+
+    this
+      .register(ListSearchSetSearchTextAction, this.setSearchText)
+      .register(ListSearchSetFunctionsAction, this.setFunctions)
+      .register(ListSearchSetFieldSelectorsAction, this.setFieldSelectors);
+   }
+
+  private setSearchText(
+    state: ListSearchModel,
+    action: ListSearchSetSearchTextAction): ListSearchModel {
+    return new ListSearchModel(
+      Object.assign({}, state, { searchText: action.searchText ? action.searchText : '' })
+    );
+  }
+
+  private setFunctions(
+    state: ListSearchModel,
+    action: ListSearchSetFunctionsAction): ListSearchModel {
+    return new ListSearchModel(Object.assign({}, state, { functions: [...action.functions] }));
+  }
+
+  private setFieldSelectors(
+    state: ListSearchModel,
+    action: ListSearchSetFieldSelectorsAction): ListSearchModel {
+    return new ListSearchModel(
+      Object.assign({}, state, { fieldSelectors: [...action.fieldSelectors] })
+    );
+  }
+}
diff --git a/src/modules/list/state/search/set-field-selectors.action.ts b/src/modules/list/state/search/set-field-selectors.action.ts
new file mode 100644
index 000000000..5d7593bc6
--- /dev/null
+++ b/src/modules/list/state/search/set-field-selectors.action.ts
@@ -0,0 +1,3 @@
+export class ListSearchSetFieldSelectorsAction {
+  constructor(public fieldSelectors: Array<string> = []) {}
+}
diff --git a/src/modules/list/state/search/set-functions.action.ts b/src/modules/list/state/search/set-functions.action.ts
new file mode 100644
index 000000000..61ff7b403
--- /dev/null
+++ b/src/modules/list/state/search/set-functions.action.ts
@@ -0,0 +1,3 @@
+export class ListSearchSetFunctionsAction {
+  constructor(public functions: Array<(data: any, searchText: string) => boolean> = []) {}
+}
diff --git a/src/modules/list/state/search/set-search-text.action.ts b/src/modules/list/state/search/set-search-text.action.ts
new file mode 100644
index 000000000..d16aff9a7
--- /dev/null
+++ b/src/modules/list/state/search/set-search-text.action.ts
@@ -0,0 +1,3 @@
+export class ListSearchSetSearchTextAction {
+  constructor(public searchText: string) {}
+}
diff --git a/src/modules/list/state/toolbar/actions.ts b/src/modules/list/state/toolbar/actions.ts
new file mode 100644
index 000000000..e6fd9b5ab
--- /dev/null
+++ b/src/modules/list/state/toolbar/actions.ts
@@ -0,0 +1,2 @@
+export { ListToolbarItemsLoadAction } from './load.action';
+export { ListToolbarSetExistsAction } from './set-exists.action';
diff --git a/src/modules/list/state/toolbar/load.action.ts b/src/modules/list/state/toolbar/load.action.ts
new file mode 100644
index 000000000..b00940bdb
--- /dev/null
+++ b/src/modules/list/state/toolbar/load.action.ts
@@ -0,0 +1,7 @@
+import { ListToolbarItemModel } from './toolbar-item.model';
+
+export class ListToolbarItemsLoadAction {
+  constructor(public items: ListToolbarItemModel[], public index: number = -1) {
+
+  }
+}
diff --git a/src/modules/list/state/toolbar/set-exists.action.ts b/src/modules/list/state/toolbar/set-exists.action.ts
new file mode 100644
index 000000000..acea09a2c
--- /dev/null
+++ b/src/modules/list/state/toolbar/set-exists.action.ts
@@ -0,0 +1,3 @@
+export class ListToolbarSetExistsAction {
+  constructor(public exists: boolean) {}
+}
diff --git a/src/modules/list/state/toolbar/toolbar-item.model.ts b/src/modules/list/state/toolbar/toolbar-item.model.ts
new file mode 100644
index 000000000..c8037c5e7
--- /dev/null
+++ b/src/modules/list/state/toolbar/toolbar-item.model.ts
@@ -0,0 +1,18 @@
+import { TemplateRef } from '@angular/core';
+
+export class ListToolbarItemModel {
+  public template: TemplateRef<any>;
+  public location: string;
+  public view: string;
+
+  public id: string;
+
+  constructor(data?: any) {
+    if (data) {
+      this.template = data.template;
+      this.location = data.location;
+      this.view = data.view;
+      this.id = data.id;
+    }
+  }
+}
diff --git a/src/modules/list/state/toolbar/toolbar.model.ts b/src/modules/list/state/toolbar/toolbar.model.ts
new file mode 100644
index 000000000..a568a4efe
--- /dev/null
+++ b/src/modules/list/state/toolbar/toolbar.model.ts
@@ -0,0 +1,13 @@
+import { ListToolbarItemModel } from './toolbar-item.model';
+
+export class ListToolbarModel {
+  public exists: boolean;
+  public items: ListToolbarItemModel[] = [];
+
+  constructor(data?: any) {
+    if (data) {
+      this.exists = data.exists;
+      this.items = data.items;
+    }
+  }
+}
diff --git a/src/modules/list/state/toolbar/toolbar.orchestrator.ts b/src/modules/list/state/toolbar/toolbar.orchestrator.ts
new file mode 100644
index 000000000..838e68c1a
--- /dev/null
+++ b/src/modules/list/state/toolbar/toolbar.orchestrator.ts
@@ -0,0 +1,48 @@
+import { ListStateOrchestrator } from '../list-state.rxstate';
+import { ListToolbarModel } from './toolbar.model';
+import { ListToolbarItemModel } from './toolbar-item.model';
+import {
+  ListToolbarItemsLoadAction,
+  ListToolbarSetExistsAction
+} from './actions';
+
+export class ListToolbarOrchestrator
+  extends ListStateOrchestrator<ListToolbarModel> {
+
+  constructor() {
+    super();
+
+    this
+      .register(ListToolbarSetExistsAction, this.setExists)
+      .register(ListToolbarItemsLoadAction, this.load);
+  }
+
+  private setExists(
+    state: ListToolbarModel,
+    action: ListToolbarSetExistsAction
+  ): ListToolbarModel {
+    const newModel = new ListToolbarModel(state);
+    newModel.exists = action.exists;
+    return newModel;
+  }
+
+  private load(
+    state: ListToolbarModel,
+    action: ListToolbarItemsLoadAction
+  ): ListToolbarModel {
+    const newModel = new ListToolbarModel(state);
+    const newListItems = action.items.map(item => new ListToolbarItemModel(item));
+
+    let resultItems = [...state.items];
+    if (action.index === -1 || action.index > state.items.length) {
+      resultItems = [...resultItems, ...newListItems];
+    } else if (action.index === 0) {
+      resultItems = [...newListItems, ...resultItems];
+    } else {
+      newListItems.reverse().forEach(item => resultItems.splice(action.index, 0, item));
+    }
+
+    newModel.items = resultItems;
+    return newModel;
+  }
+}

From ddd7e2d9cefee1be6cf3867b49c13fa1617aeabe Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Thu, 2 Feb 2017 15:52:14 -0500
Subject: [PATCH 05/14] Get list toolbar with grid and search working

---
 src/app/components/demo-components.service.ts | 32 ++++++++
 src/app/components/list-toolbar/index.html    | 80 +++++++++++++++++++
 .../list-toolbar-demo-custom.component.html   | 18 +++++
 .../list-toolbar-demo-custom.component.ts     | 18 +++++
 .../list-toolbar-demo.component.html          |  8 ++
 .../list-toolbar-demo.component.ts            | 18 +++++
 src/core.ts                                   |  3 +
 src/modules/grid/grid-column.component.ts     | 15 +++-
 src/modules/grid/grid-column.model.ts         |  2 +
 src/modules/grid/grid.component.html          |  4 +-
 src/modules/grid/grid.component.scss          |  6 ++
 src/modules/grid/grid.component.ts            |  3 +
 .../list-toolbar/list-toolbar.component.ts    |  3 -
 .../list-toolbar/list-toolbar.module.ts       |  6 +-
 .../list-view-grid.component.html             |  1 +
 .../list-view-grid.component.ts               | 30 ++++++-
 src/modules/list/list-view.component.ts       | 21 ++++-
 src/modules/list/state/index.ts               |  1 -
 src/modules/search/search.component.ts        |  7 +-
 19 files changed, 263 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/list-toolbar/index.html
 create mode 100644 src/app/components/list-toolbar/list-toolbar-demo-custom.component.html
 create mode 100644 src/app/components/list-toolbar/list-toolbar-demo-custom.component.ts
 create mode 100644 src/app/components/list-toolbar/list-toolbar-demo.component.html
 create mode 100644 src/app/components/list-toolbar/list-toolbar-demo.component.ts

diff --git a/src/app/components/demo-components.service.ts b/src/app/components/demo-components.service.ts
index 9de14b70a..2a31d0371 100644
--- a/src/app/components/demo-components.service.ts
+++ b/src/app/components/demo-components.service.ts
@@ -260,6 +260,38 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'List toolbar',
+        icon: 'wrench',
+        // tslint:disable-next-line
+        summary:
+          `The list toolbar component displays a SKY UX-themed toolbar for the list component.`,
+        url: '/components/list-toolbar',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'list-toolbar-demo.component.html',
+              fileContents: require('!!raw!./list-toolbar/list-toolbar-demo.component.html')
+            },
+            {
+              name: 'list-toolbar-demo.component.ts',
+              fileContents: require('!!raw!./list-toolbar/list-toolbar-demo.component.ts'),
+              componentName: 'SkyListToolbarDemoComponent',
+              bootstrapSelector: 'sky-list-toolbar-demo'
+            },
+            {
+              name: 'list-toolbar-demo-custom.component.html',
+              fileContents: require('!!raw!./list-toolbar/list-toolbar-demo-custom.component.html')
+            },
+            {
+              name: 'list-toolbar-demo-custom.component.ts',
+              fileContents: require('!!raw!./list-toolbar/list-toolbar-demo-custom.component.ts'),
+              componentName: 'SkyListToolbarDemoCustomComponent',
+              bootstrapSelector: 'sky-list-toolbar-demo-custom'
+            }
+          ];
+        }
+      },
       {
          name: 'List view grid',
          icon: 'table',
diff --git a/src/app/components/list-toolbar/index.html b/src/app/components/list-toolbar/index.html
new file mode 100644
index 000000000..174369ef3
--- /dev/null
+++ b/src/app/components/list-toolbar/index.html
@@ -0,0 +1,80 @@
+<sky-demo-page title="List toolbar">
+  <sky-demo-page-summary>
+    The list toolbar component displays a SKY UX-themed toolbar for the list component.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties>
+    <sky-demo-page-property
+        propertyName="placeholder"
+        defaultValue="Find in this list"
+        isOptional="true"
+    >
+      Specific the placeholder text for the search bar.
+      Acceptable values: <code>string</code>.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="searchEnabled"
+        defaultValue=""
+        isOptional="true"
+    >
+      Specific whether the search bar is enabled.
+      Acceptable values: <code>boolean or Observable boolean</code>.
+    </sky-demo-page-property>
+
+    <sky-demo-page-property
+        propertyName="searchText"
+        defaultValue=""
+        isOptional="true"
+    >
+      Specific a text string to search with.
+      Acceptable values: <code>string or Observable string</code>.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Child components">
+    <sky-demo-page-property
+        propertyName="sky-list-toolbar-item"
+    >
+      This list toolbar item component defines a given toolbar item. It is used in conjunction with the
+      list toolbar component.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="List toolbar item properties">
+    <sky-demo-page-property
+        propertyName="id"
+        defaultValue="moment().toDate().getTime().toString()"
+        isOptional="true"
+    >
+      Specifies the id of the item.
+      Acceptable values: <code>string</code>.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="index"
+        defaultValue="-1"
+        isOptional="true"
+    >
+      Specifies the index of the item at the given item location.
+      Acceptable values: <code>number</code>.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="location"
+        defaultValue="left"
+        isOptional="true"
+    >
+      Specifies the toolbar location of the item.
+      Acceptable values: <code>'left', 'center', or 'right'</code>.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <h3>List with standard toolbar</h3>
+    <sky-list-toolbar-demo></sky-list-toolbar-demo>
+
+    <h3>List with toolbar with custom items</h3>
+    <sky-list-toolbar-demo-custom></sky-list-toolbar-demo-custom>
+
+    <sky-demo-page-code demoName="List toolbar"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>
diff --git a/src/app/components/list-toolbar/list-toolbar-demo-custom.component.html b/src/app/components/list-toolbar/list-toolbar-demo-custom.component.html
new file mode 100644
index 000000000..3bccfd294
--- /dev/null
+++ b/src/app/components/list-toolbar/list-toolbar-demo-custom.component.html
@@ -0,0 +1,18 @@
+<sky-list [data]="items" [defaultView]="grid">
+  <sky-list-toolbar>
+    <sky-list-toolbar-item id="custom-item" location="left">
+      <template><button class="sky-btn sky-btn-default">Left</button></template>
+    </sky-list-toolbar-item>
+    <sky-list-toolbar-item id="custom-item2" location="center" index="1">
+      <template><button class="sky-btn sky-btn-default">Center</button></template>
+    </sky-list-toolbar-item>
+    <sky-list-toolbar-item id="custom-item3" location="right">
+      <template><button class="sky-btn sky-btn-default">Right</button></template>
+    </sky-list-toolbar-item>
+  </sky-list-toolbar>
+
+  <sky-list-view-grid fit="scroll" #grid>
+    <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
+    <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
+  </sky-list-view-grid>
+</sky-list>
diff --git a/src/app/components/list-toolbar/list-toolbar-demo-custom.component.ts b/src/app/components/list-toolbar/list-toolbar-demo-custom.component.ts
new file mode 100644
index 000000000..a032b580c
--- /dev/null
+++ b/src/app/components/list-toolbar/list-toolbar-demo-custom.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'sky-list-toolbar-demo-custom',
+  templateUrl: './list-toolbar-demo-custom.component.html'
+})
+export class SkyListToolbarDemoCustomComponent {
+  public items: Observable<any> = Observable.of([
+    { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
+    { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
+    { id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
+    { id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
+    { id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
+    { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
+    { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
+  ]);
+}
diff --git a/src/app/components/list-toolbar/list-toolbar-demo.component.html b/src/app/components/list-toolbar/list-toolbar-demo.component.html
new file mode 100644
index 000000000..c58f4b998
--- /dev/null
+++ b/src/app/components/list-toolbar/list-toolbar-demo.component.html
@@ -0,0 +1,8 @@
+<sky-list [data]="items" [defaultView]="grid">
+  <sky-list-toolbar></sky-list-toolbar>
+
+  <sky-list-view-grid fit="scroll" #grid>
+    <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
+    <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
+  </sky-list-view-grid>
+ </sky-list>
diff --git a/src/app/components/list-toolbar/list-toolbar-demo.component.ts b/src/app/components/list-toolbar/list-toolbar-demo.component.ts
new file mode 100644
index 000000000..f9e284d85
--- /dev/null
+++ b/src/app/components/list-toolbar/list-toolbar-demo.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'sky-list-toolbar-demo',
+  templateUrl: './list-toolbar-demo.component.html'
+})
+export class SkyListToolbarDemoComponent {
+  public items: Observable<any> = Observable.of([
+    { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
+    { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
+    { id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
+    { id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
+    { id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
+    { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
+    { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
+  ]);
+}
diff --git a/src/core.ts b/src/core.ts
index b84ccd5ba..5ee7c4ab9 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -16,6 +16,7 @@ import { SkyKeyInfoModule } from './modules/key-info';
 import { SkyLabelModule } from './modules/label';
 import { SkyListModule } from './modules/list';
 import { SkyListPagingModule } from './modules/list-paging';
+import { SkyListToolbarModule } from './modules/list-toolbar';
 import { SkyListViewGridModule } from './modules/list-view-grid';
 import { SkyMediaQueryModule } from './modules/media-queries';
 import { SkyModalModule } from './modules/modal';
@@ -46,6 +47,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyLabelModule,
     SkyListModule,
     SkyListPagingModule,
+    SkyListToolbarModule,
     SkyListViewGridModule,
     SkyMediaQueryModule,
     SkyModalModule,
@@ -78,6 +80,7 @@ export * from './modules/label';
 export * from './modules/list';
 export * from './modules/list/state';
 export * from './modules/list-paging';
+export * from './modules/list-toolbar';
 export * from './modules/list-view-grid';
 export * from './modules/modal';
 export * from './modules/media-queries';
diff --git a/src/modules/grid/grid-column.component.ts b/src/modules/grid/grid-column.component.ts
index cc767944f..de4ed45c4 100644
--- a/src/modules/grid/grid-column.component.ts
+++ b/src/modules/grid/grid-column.component.ts
@@ -29,6 +29,9 @@ export class SkyGridColumnComponent {
   public type: string;
 
   /* tslint:disable */
+  @Input('search')
+  private searchFunction: (value: any, searchText: string) => boolean = this.search;
+
   @Input('template')
   private templateInput: TemplateRef<any>;
   /* tslint:enable */
@@ -38,5 +41,15 @@ export class SkyGridColumnComponent {
 
   public get template(): TemplateRef<any> {
     return (this.templates.length > 0 ? this.templates.first : undefined) || this.templateInput;
-  };
+  }
+
+  private search(value: any, searchText: string): boolean {
+    /* tslint:disable */
+    if (value !== undefined && value !== null) {
+      return value.toString().toLowerCase().indexOf(searchText) !== -1;
+    }
+    /* tslint:enable */
+
+    return false;
+  }
 }
diff --git a/src/modules/grid/grid-column.model.ts b/src/modules/grid/grid-column.model.ts
index 04702207f..1be6bd751 100644
--- a/src/modules/grid/grid-column.model.ts
+++ b/src/modules/grid/grid-column.model.ts
@@ -9,6 +9,7 @@ export class SkyGridColumnModel {
   public width: number;
   public hidden: boolean;
   public locked: boolean;
+  public searchFunction: (data: any, searchText: string) => boolean;
 
   constructor(template: TemplateRef<any>, data?: any) {
     this.template = template;
@@ -21,6 +22,7 @@ export class SkyGridColumnModel {
       this.width = data.width ? Number(data.width) : undefined;
       this.hidden = data.hidden;
       this.locked = data.locked;
+      this.searchFunction = data.searchFunction;
     }
   }
 }
diff --git a/src/modules/grid/grid.component.html b/src/modules/grid/grid.component.html
index f3b2a1ce4..648e52dd7 100644
--- a/src/modules/grid/grid.component.html
+++ b/src/modules/grid/grid.component.html
@@ -1,6 +1,8 @@
 <div class="sky-grid">
   <div class="sky-grid-table-container" [style.height.px]="height" [style.width.px]="width">
-    <table class="sky-grid-table" [ngClass]="{ 'sky-grid-fit': fit !== 'scroll' }">
+    <table
+      class="sky-grid-table"
+      [ngClass]="{ 'sky-grid-fit': fit !== 'scroll', 'sky-grid-has-toolbar': hasToolbar }">
       <thead>
         <tr dragula="sky-grid-heading">
           <th
diff --git a/src/modules/grid/grid.component.scss b/src/modules/grid/grid.component.scss
index 894b4b6f4..85eda3114 100644
--- a/src/modules/grid/grid.component.scss
+++ b/src/modules/grid/grid.component.scss
@@ -67,3 +67,9 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+.sky-grid-has-toolbar {
+  .sky-grid-heading {
+    border-top-width: 0px;
+  }
+}
diff --git a/src/modules/grid/grid.component.ts b/src/modules/grid/grid.component.ts
index 3031b9ea0..c43670649 100644
--- a/src/modules/grid/grid.component.ts
+++ b/src/modules/grid/grid.component.ts
@@ -47,6 +47,9 @@ export class SkyGridComponent implements AfterContentInit, OnChanges {
   @Input()
   public columns: Array<SkyGridColumnModel>;
 
+  @Input()
+  public hasToolbar: boolean = false;
+
   @Output()
   public selectedColumnIdsChange = new EventEmitter<Array<string>>();
 
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 4428fa9e0..1d4ec2d1d 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -27,7 +27,6 @@ import { getValue } from 'microedge-rxstate/dist/helpers';
 @Component({
   selector: 'sky-list-toolbar',
   templateUrl: './list-toolbar.component.html',
-  styleUrls: ['./list-toolbar.component.scss'],
   providers: [
     ListToolbarState,
     ListToolbarStateDispatcher,
@@ -131,7 +130,6 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       });
   }
 
-
   private updateSearchText(searchText: string) {
     this.dispatcher.searchSetText(searchText);
   }
@@ -142,4 +140,3 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       .map(c => c.searchEnabled);
   }
 }
-
diff --git a/src/modules/list-toolbar/list-toolbar.module.ts b/src/modules/list-toolbar/list-toolbar.module.ts
index 6a64580ae..0ce17ebf2 100644
--- a/src/modules/list-toolbar/list-toolbar.module.ts
+++ b/src/modules/list-toolbar/list-toolbar.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SkyDropdownModule } from '../dropdown';
+import { SkyToolbarModule } from '../toolbar';
+import { SkySearchModule } from '../search';
 import { SkyListToolbarComponent } from './list-toolbar.component';
 import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
 import { SkyListToolbarItemRendererComponent } from './list-toolbar-item-renderer.component';
@@ -13,7 +14,8 @@ import { SkyListToolbarItemRendererComponent } from './list-toolbar-item-rendere
   ],
   imports: [
     CommonModule,
-    SkyDropdownModule
+    SkyToolbarModule,
+    SkySearchModule
   ],
   exports: [
     SkyListToolbarComponent,
diff --git a/src/modules/list-view-grid/list-view-grid.component.html b/src/modules/list-view-grid/list-view-grid.component.html
index 549fa6ce9..3b7eabdde 100644
--- a/src/modules/list-view-grid/list-view-grid.component.html
+++ b/src/modules/list-view-grid/list-view-grid.component.html
@@ -7,6 +7,7 @@
     [data]="items | async"
     [selectedColumnIds]="selectedColumnIds | async"
     [columns]="columns | async"
+    [hasToolbar]="hasToolbar | async"
     (selectedColumnIdsChange)="columnIdsChanged($event)">
   </sky-grid>
   <sky-wait [isWaiting]="loading | async"></sky-wait>
diff --git a/src/modules/list-view-grid/list-view-grid.component.ts b/src/modules/list-view-grid/list-view-grid.component.ts
index 29dda7f04..baa1317c8 100644
--- a/src/modules/list-view-grid/list-view-grid.component.ts
+++ b/src/modules/list-view-grid/list-view-grid.component.ts
@@ -10,7 +10,11 @@ import {
 } from '@angular/core';
 import { ListViewComponent } from '../list/list-view.component';
 import { ListState } from '../list/state';
-import { GridState, GridStateDispatcher, GridStateModel } from './state';
+import {
+  GridState,
+  GridStateDispatcher,
+  GridStateModel
+} from './state';
 import { ListStateDispatcher } from '../list/state';
 import { ListViewGridColumnsLoadAction } from './state/columns/actions';
 import { ListViewDisplayedGridColumnsLoadAction } from './state/displayed-columns/actions';
@@ -24,6 +28,7 @@ import {
 import {
   ListItemModel
 } from '../list/state';
+import { getData } from '../list/helpers';
 
 @Component({
   selector: 'sky-list-view-grid',
@@ -64,6 +69,11 @@ export class SkyListViewGridComponent
   @ViewChild(SkyGridComponent)
   public gridComponent: SkyGridComponent;
 
+  /* tslint:disable */
+  @Input('search')
+  private searchFunction: (data: any, searchText: string) => boolean;
+  /* tslint:enable */
+
   @ContentChildren(SkyGridColumnComponent, {descendants: true})
   private columnComponents: QueryList<SkyGridColumnComponent>;
 
@@ -142,6 +152,24 @@ export class SkyListViewGridComponent
         });
   }
 
+  public onViewActive() {
+    let sub = this.gridState.map(s => s.displayedColumns.items)
+      .distinctUntilChanged()
+      .subscribe(displayedColumns => {
+        let setFunctions =
+          this.searchFunction !== undefined ? [this.searchFunction] :
+            displayedColumns
+              .map(column => (data: any, searchText: string) =>
+                column.searchFunction(getData(data, column.field), searchText)
+              )
+              .filter(c => c !== undefined);
+
+        this.dispatcher.searchSetFieldSelectors(displayedColumns.map(d => d.field));
+        this.dispatcher.searchSetFunctions(setFunctions);
+      });
+    this.subscriptions.push(sub);
+  }
+
   get items(): Observable<ListItemModel[]> {
     return Observable.combineLatest(
       this.state.map(s => s.items.items).distinctUntilChanged(),
diff --git a/src/modules/list/list-view.component.ts b/src/modules/list/list-view.component.ts
index 5ed0ba7d2..dbbc682c6 100644
--- a/src/modules/list/list-view.component.ts
+++ b/src/modules/list/list-view.component.ts
@@ -1,13 +1,22 @@
+import {
+  OnDestroy
+} from '@angular/core';
+
 import { ListState } from './state';
+
 import { SkyListComponent } from '../list/list.component';
-import { BehaviorSubject, Observable } from 'rxjs';
+import {
+  BehaviorSubject,
+  Observable
+} from 'rxjs';
 
 let moment = require('moment');
 
-export abstract class ListViewComponent {
+export abstract class ListViewComponent implements OnDestroy {
   protected viewName: string;
   protected state: ListState;
   protected list: SkyListComponent;
+  protected subscriptions: Array<any> = [];
   /* tslint:disable */
   private initialized: BehaviorSubject<boolean> = new BehaviorSubject(false);
   /* tslint:enable */
@@ -29,6 +38,10 @@ export abstract class ListViewComponent {
     return this.viewName;
   }
 
+  get hasToolbar() {
+    return this.state.map(s => s.toolbar.exists);
+  }
+
   get active(): Observable<boolean> {
     return this.state.map(s => s.views.active === this.viewId);
   }
@@ -39,4 +52,8 @@ export abstract class ListViewComponent {
 
   public onViewInactive() {
   }
+
+  public ngOnDestroy() {
+    this.subscriptions.forEach(s => s.unsubscribe());
+  }
 }
diff --git a/src/modules/list/state/index.ts b/src/modules/list/state/index.ts
index bfaff9ba8..ca0730ec4 100644
--- a/src/modules/list/state/index.ts
+++ b/src/modules/list/state/index.ts
@@ -10,4 +10,3 @@ export * from './toolbar/toolbar.model';
 export * from './toolbar/toolbar-item.model';
 export * from './search/actions';
 export * from './search/search.model';
-
diff --git a/src/modules/search/search.component.ts b/src/modules/search/search.component.ts
index 04438282c..8e0d1948d 100644
--- a/src/modules/search/search.component.ts
+++ b/src/modules/search/search.component.ts
@@ -13,7 +13,8 @@ import {
   Input,
   EventEmitter,
   OnChanges,
-  SimpleChanges
+  SimpleChanges,
+  ChangeDetectorRef
 } from '@angular/core';
 
 import {
@@ -94,7 +95,8 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
     private mediaQueryService: SkyMediaQueryService,
     private elRef: ElementRef,
     private searchAdapter: SkySearchAdapterService,
-    private resources: SkyResourcesService
+    private resources: SkyResourcesService,
+    private changeRef: ChangeDetectorRef
   ) {}
 
   public ngOnInit() {
@@ -206,5 +208,6 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
     } else {
       this.mobileSearchShown = false;
     }
+    this.changeRef.markForCheck();
   }
 }

From 09348ebec1a67033f57000550b73aed1614ec9e3 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 10:49:57 -0500
Subject: [PATCH 06/14] update grid with hasToolbar and search tests

---
 .../grid/fixtures/grid.component.fixture.html |  4 +-
 .../grid/fixtures/grid.component.fixture.ts   | 12 +++++
 src/modules/grid/grid.component.spec.ts       | 54 +++++++++++++++++++
 src/modules/list/list.component.ts            |  6 ++-
 4 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/modules/grid/fixtures/grid.component.fixture.html b/src/modules/grid/fixtures/grid.component.fixture.html
index 703761997..322df3c23 100644
--- a/src/modules/grid/fixtures/grid.component.fixture.html
+++ b/src/modules/grid/fixtures/grid.component.fixture.html
@@ -2,6 +2,7 @@
 <sky-grid
   fit="scroll"
   [selectedColumnIds]="selectedColumnIds"
+  [hasToolbar]="hasToolbar"
   [data]="data"
   [width]="600"
   [height]="400">
@@ -13,7 +14,8 @@
   <sky-grid-column
     field="column2"
     heading="Column2"
-    [width]="150">
+    [width]="150"
+    [search]="searchFunction">
     <template
       let-row="row">
       {{row?.column2}}
diff --git a/src/modules/grid/fixtures/grid.component.fixture.ts b/src/modules/grid/fixtures/grid.component.fixture.ts
index 46d3a486d..0367585c5 100644
--- a/src/modules/grid/fixtures/grid.component.fixture.ts
+++ b/src/modules/grid/fixtures/grid.component.fixture.ts
@@ -11,6 +11,18 @@ let moment = require('moment');
   template: require('./grid.component.fixture.html')
 })
 export class GridTestComponent {
+  public hasToolbar: boolean = false;
+
+  public searchedData: any;
+  public searchText: string;
+
+  public searchFunction: (data: any, searchText: string) => boolean =
+    (data: any, searchText: string) => {
+    this.searchedData = data;
+    this.searchText = searchText;
+    return true
+  };
+
   public selectedColumnIds: Array<string> = [
     'column1',
     'column2',
diff --git a/src/modules/grid/grid.component.spec.ts b/src/modules/grid/grid.component.spec.ts
index 6fbd97cec..095ac4318 100644
--- a/src/modules/grid/grid.component.spec.ts
+++ b/src/modules/grid/grid.component.spec.ts
@@ -23,6 +23,10 @@ import {
   SkyGridColumnModel
 } from './';
 
+import {
+  expect
+} from '../testing';
+
 let moment = require('moment');
 
 describe('Grid Component', () => {
@@ -218,6 +222,56 @@ describe('Grid Component', () => {
         verifyData(false, true);
       });
 
+      it('should change styles based on hasToolbar input', () => {
+        expect(element.query(By.css('.sky-grid-table')).nativeElement)
+          .not.toHaveCssClass('sky-grid-has-toolbar');
+        component.hasToolbar = true;
+        fixture.detectChanges();
+        expect(element.query(By.css('.sky-grid-table')).nativeElement)
+          .toHaveCssClass('sky-grid-has-toolbar');
+      });
+
+      it('should allow the access of search function on displayed columns', () => {
+        let searchFunctions = component.grid.displayedColumns.map(column => {
+          return column.searchFunction
+        });
+
+        expect(searchFunctions.length).toBe(5);
+        for (let i = 0; i < searchFunctions.length; i++) {
+          let result = searchFunctions[i]('Something', 'something');
+          expect(result).toBe(true);
+        }
+
+        expect(component.searchText).toBe('something');
+        expect(component.searchedData).toBe('Something');
+
+        component.searchText = '';
+        component.searchedData = '';
+
+        for (let i = 0; i < searchFunctions.length; i++) {
+          let result = searchFunctions[i]('blaah', 'something');
+          if (component.searchText !== '') {
+            expect(result).toBe(true);
+          } else {
+            expect(result).toBe(false);
+          }
+          component.searchText = '';
+          component.searchedData = '';
+
+        }
+
+         for (let i = 0; i < searchFunctions.length; i++) {
+          let result = searchFunctions[i](undefined, 'something');
+          if (component.searchText !== '') {
+            expect(result).toBe(true);
+          } else {
+            expect(result).toBe(false);
+          }
+          component.searchText = '';
+          component.searchedData = '';
+        }
+      });
+
       describe('Models and State', () => {
 
         it('should construct ListViewGridColumnModel without data', () => {
diff --git a/src/modules/list/list.component.ts b/src/modules/list/list.component.ts
index f1fb2fd68..3fd73babb 100644
--- a/src/modules/list/list.component.ts
+++ b/src/modules/list/list.component.ts
@@ -50,8 +50,10 @@ export class SkyListComponent implements AfterContentInit {
   @Input()
   public sortFields?: string | Array<string> | Observable<Array<string>> | Observable<string>;
 
-  /* tslint:disable-next-line */
-  @Input('search') private searchFunction: (data: any, searchText: string) => boolean;
+  /* tslint:disable */
+  @Input('search')
+  private searchFunction: (data: any, searchText: string) => boolean;
+  /* tslint:enable */
 
   private dataFirstLoad: boolean = false;
 

From 8a52e54a0ec2598e0c1603c0588c1aa1d91415d8 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 10:55:54 -0500
Subject: [PATCH 07/14] Add initial tests for list-toolbar

---
 .../list-toolbar.component.fixture.html       | 10 +++
 .../list-toolbar.component.fixture.ts         |  8 ++
 .../list-toolbar.component.spec.ts            | 73 +++++++++++++++++++
 3 files changed, 91 insertions(+)
 create mode 100644 src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
 create mode 100644 src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
 create mode 100644 src/modules/list-toolbar/list-toolbar.component.spec.ts

diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
new file mode 100644
index 000000000..37d77267f
--- /dev/null
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
@@ -0,0 +1,10 @@
+<sky-list-toolbar>
+  <sky-list-toolbar-item id="custom-item" location="right" [index]="0">
+    <template>Custom Item</template>
+  </sky-list-toolbar-item>
+  <sky-list-toolbar-item id="custom-item-test2" location="right" [index]="2">
+    <template>Custom Item</template>
+  </sky-list-toolbar-item>
+  <sky-list-toolbar-item id="custom-item-no-template" location="left" [index]="5000"></sky-list-toolbar-item>
+  <sky-list-toolbar-sort label="Custom" field="custom" type="string"></sky-list-toolbar-sort>
+</sky-list-toolbar>
diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
new file mode 100644
index 000000000..9d04e968c
--- /dev/null
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+ @Component({
+   selector: 'sky-test-cmp',
+   template: require('./list-toolbar.component.fixture.html')
+ })
+ export class ListToolbarTestComponent {
+ }
diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/src/modules/list-toolbar/list-toolbar.component.spec.ts
new file mode 100644
index 000000000..6032f5c7d
--- /dev/null
+++ b/src/modules/list-toolbar/list-toolbar.component.spec.ts
@@ -0,0 +1,73 @@
+import {
+  TestBed,
+  async
+} from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import {
+  ListState,
+  ListStateDispatcher
+} from '../list/state';
+import { ListViewsLoadAction } from '../list/state/views/actions';
+import { ListViewModel } from '../list/state/views/view.model';
+import { SkyListToolbarModule } from './';
+import {
+  ListToolbarTestComponent
+} from './fixtures/list-toolbar.component.fixture';
+
+describe('List Toolbar Component', () => {
+  describe('List Toolbar Fixture', () => {
+    let state: ListState,
+        dispatcher: ListStateDispatcher,
+        fixture: any,
+        nativeElement: HTMLElement,
+        element: DebugElement;
+
+    beforeEach(async(() => {
+      dispatcher = new ListStateDispatcher();
+      state = new ListState(dispatcher);
+
+      TestBed.configureTestingModule({
+        declarations: [
+          ListToolbarTestComponent
+        ],
+        imports: [
+          SkyListToolbarModule
+        ],
+        providers: [
+          { provide: ListState, useValue: state },
+          { provide: ListStateDispatcher, useValue: dispatcher }
+        ]
+      });
+
+      fixture = TestBed.createComponent(ListToolbarTestComponent);
+      nativeElement = fixture.nativeElement as HTMLElement;
+      element = fixture.debugElement as DebugElement;
+      fixture.detectChanges();
+
+      // always skip the first update to ListState, when state is ready
+      // run detectChanges once more then begin tests
+      state.skip(1).take(1).subscribe(() => fixture.detectChanges());
+    }));
+
+    describe('search', () => {
+      it('should be visible by default', () => {
+        expect(element.query(By.css("[cmp-id='search']"))).not.toBeNull();
+      });
+    });
+
+    it('should load custom items', () => {
+      fixture.detectChanges();
+      expect(element.query(
+        By.css('[cmp-id="custom-item"]')).nativeElement.textContent.trim()
+      ).toContain('Custom Item');
+    });
+
+    it('should display an empty render for a custom item without template', () => {
+      fixture.detectChanges();
+      expect(element.query(
+        By.css('[cmp-id="custom-item-no-template"]')
+      ).nativeElement.textContent.trim()).toBe('');
+    });
+  });
+});

From 2f3e8fc4d1152692f36bf04125d50f7b0d6cd201 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 14:25:48 -0500
Subject: [PATCH 08/14] More tests for list toolbar

---
 .../grid/fixtures/grid.component.fixture.ts   | 14 ++--
 src/modules/grid/grid.component.spec.ts       |  2 +-
 .../list-toolbar.component.fixture.html       |  9 ++-
 .../list-toolbar.component.fixture.ts         | 14 +++-
 .../list-toolbar/list-toolbar.component.html  |  3 +-
 .../list-toolbar.component.spec.ts            | 64 +++++++++++++------
 .../list-toolbar/list-toolbar.component.ts    | 18 ++++--
 .../state/config/set-search-enabled.action.ts |  2 +-
 8 files changed, 84 insertions(+), 42 deletions(-)

diff --git a/src/modules/grid/fixtures/grid.component.fixture.ts b/src/modules/grid/fixtures/grid.component.fixture.ts
index 0367585c5..1328ebac5 100644
--- a/src/modules/grid/fixtures/grid.component.fixture.ts
+++ b/src/modules/grid/fixtures/grid.component.fixture.ts
@@ -16,13 +16,6 @@ export class GridTestComponent {
   public searchedData: any;
   public searchText: string;
 
-  public searchFunction: (data: any, searchText: string) => boolean =
-    (data: any, searchText: string) => {
-    this.searchedData = data;
-    this.searchText = searchText;
-    return true
-  };
-
   public selectedColumnIds: Array<string> = [
     'column1',
     'column2',
@@ -53,4 +46,11 @@ export class GridTestComponent {
   public templates: QueryList<TemplateRef<any>>;
   @ViewChildren(TemplateRef)
   public viewtemplates: QueryList<TemplateRef<any>>;
+
+  public searchFunction: (data: any, searchText: string) => boolean =
+    (data: any, searchText: string) => {
+    this.searchedData = data;
+    this.searchText = searchText;
+    return true;
+  };
 }
diff --git a/src/modules/grid/grid.component.spec.ts b/src/modules/grid/grid.component.spec.ts
index 095ac4318..e563b3a98 100644
--- a/src/modules/grid/grid.component.spec.ts
+++ b/src/modules/grid/grid.component.spec.ts
@@ -233,7 +233,7 @@ describe('Grid Component', () => {
 
       it('should allow the access of search function on displayed columns', () => {
         let searchFunctions = component.grid.displayedColumns.map(column => {
-          return column.searchFunction
+          return column.searchFunction;
         });
 
         expect(searchFunctions.length).toBe(5);
diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
index 37d77267f..e15a78c11 100644
--- a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
@@ -1,10 +1,9 @@
-<sky-list-toolbar>
-  <sky-list-toolbar-item id="custom-item" location="right" [index]="0">
+<sky-list-toolbar [searchEnabled]="searchEnabled" #toolbar>
+  <sky-list-toolbar-item id="custom-item" location="right" [index]="2">
     <template>Custom Item</template>
   </sky-list-toolbar-item>
-  <sky-list-toolbar-item id="custom-item-test2" location="right" [index]="2">
-    <template>Custom Item</template>
+  <sky-list-toolbar-item id="custom-item-test2" location="right">
+    <template>Custom Item 2</template>
   </sky-list-toolbar-item>
   <sky-list-toolbar-item id="custom-item-no-template" location="left" [index]="5000"></sky-list-toolbar-item>
-  <sky-list-toolbar-sort label="Custom" field="custom" type="string"></sky-list-toolbar-sort>
 </sky-list-toolbar>
diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
index 9d04e968c..59f08cdf3 100644
--- a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
@@ -1,8 +1,20 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  ViewChild
+} from '@angular/core';
+
+import {
+  SkyListToolbarComponent
+} from '../list-toolbar.component';
 
  @Component({
    selector: 'sky-test-cmp',
    template: require('./list-toolbar.component.fixture.html')
  })
  export class ListToolbarTestComponent {
+
+   public searchEnabled: boolean;
+
+   @ViewChild(SkyListToolbarComponent)
+    public toolbar: SkyListToolbarComponent;
  }
diff --git a/src/modules/list-toolbar/list-toolbar.component.html b/src/modules/list-toolbar/list-toolbar.component.html
index ba0e8c625..b2b61fcff 100644
--- a/src/modules/list-toolbar/list-toolbar.component.html
+++ b/src/modules/list-toolbar/list-toolbar.component.html
@@ -22,7 +22,8 @@
 <template #search>
   <div *ngIf="isSearchEnabled | async">
     <sky-search
-      [searchText]="searchText | async"
+      #searchComponent
+      [searchText]="searchTextInput | async"
       (searchApply)="updateSearchText($event)"
       [placeholderText]="placeholder">
     </sky-search>
diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/src/modules/list-toolbar/list-toolbar.component.spec.ts
index 6032f5c7d..e4d42194c 100644
--- a/src/modules/list-toolbar/list-toolbar.component.spec.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.spec.ts
@@ -1,6 +1,7 @@
 import {
   TestBed,
-  async
+  async,
+  ComponentFixture
 } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -8,19 +9,25 @@ import {
   ListState,
   ListStateDispatcher
 } from '../list/state';
-import { ListViewsLoadAction } from '../list/state/views/actions';
-import { ListViewModel } from '../list/state/views/view.model';
 import { SkyListToolbarModule } from './';
 import {
   ListToolbarTestComponent
 } from './fixtures/list-toolbar.component.fixture';
 
+import {
+  ListToolbarItemModel
+} from '../list/state';
+
+
+import { expect } from '../testing';
+
 describe('List Toolbar Component', () => {
   describe('List Toolbar Fixture', () => {
     let state: ListState,
         dispatcher: ListStateDispatcher,
-        fixture: any,
+        fixture: ComponentFixture<ListToolbarTestComponent>,
         nativeElement: HTMLElement,
+        component: ListToolbarTestComponent,
         element: DebugElement;
 
     beforeEach(async(() => {
@@ -43,31 +50,50 @@ describe('List Toolbar Component', () => {
       fixture = TestBed.createComponent(ListToolbarTestComponent);
       nativeElement = fixture.nativeElement as HTMLElement;
       element = fixture.debugElement as DebugElement;
-      fixture.detectChanges();
+      component = fixture.componentInstance;
+    }));
 
+    function initializeToolbar() {
+      fixture.detectChanges();
       // always skip the first update to ListState, when state is ready
       // run detectChanges once more then begin tests
       state.skip(1).take(1).subscribe(() => fixture.detectChanges());
-    }));
+    }
 
     describe('search', () => {
-      it('should be visible by default', () => {
-        expect(element.query(By.css("[cmp-id='search']"))).not.toBeNull();
-      });
-    });
+      it('should be visible by default', async(() => {
+        initializeToolbar();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(element.query(By.css('input'))).not.toBeNull();
+        });
+      }));
 
-    it('should load custom items', () => {
-      fixture.detectChanges();
-      expect(element.query(
-        By.css('[cmp-id="custom-item"]')).nativeElement.textContent.trim()
-      ).toContain('Custom Item');
+      it('should be able to disable search', async(() => {
+        component.searchEnabled = false;
+        initializeToolbar();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(element.query(By.css('input'))).toBeNull();
+        });
+      }));
     });
 
+    it('should load custom items', async(() => {
+      initializeToolbar();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        let items = element.queryAll(By.css('.sky-toolbar-item'));
+        expect(items[0].nativeElement).toHaveText('');
+        expect(items[1].query(By.css('input'))).not.toBeNull();
+        expect(items[2].nativeElement).toHaveText('Custom Item');
+        expect(items[3].nativeElement).toHaveText('Custom Item 2');
+      });
+
+    }));
+
     it('should display an empty render for a custom item without template', () => {
-      fixture.detectChanges();
-      expect(element.query(
-        By.css('[cmp-id="custom-item-no-template"]')
-      ).nativeElement.textContent.trim()).toBe('');
+
     });
   });
 });
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 1d4ec2d1d..2d579ed4c 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -6,6 +6,7 @@ import {
   TemplateRef,
   Input,
   OnInit,
+  SimpleChanges,
   AfterContentInit,
   ChangeDetectionStrategy
 } from '@angular/core';
@@ -24,6 +25,8 @@ import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
 import { ListState, ListStateDispatcher } from '../list/state';
 import { getValue } from 'microedge-rxstate/dist/helpers';
 
+import { SkySearchComponent } from '../search';
+
 @Component({
   selector: 'sky-list-toolbar',
   templateUrl: './list-toolbar.component.html',
@@ -40,10 +43,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @Input()
   public searchEnabled: boolean | Observable<boolean>;
 
-  /* tslint:disable */
-  @Input('searchText')
-  private searchTextInput: string | Observable<string>;
-  /* tslint:enable */
+  @Input()
+  private searchText: string | Observable<string>;
 
   @ContentChildren(SkyListToolbarItemComponent)
   private toolbarItems: QueryList<SkyListToolbarItemComponent>;
@@ -51,6 +52,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @ViewChild('search')
   private searchTemplate: TemplateRef<any>;
 
+  @ViewChild('searchComponent')
+  public searchComponent: SkySearchComponent;
+
   constructor(
     private state: ListState,
     private dispatcher: ListStateDispatcher,
@@ -61,8 +65,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
 
   public ngOnInit() {
     this.dispatcher.toolbarExists(true);
-    getValue(this.searchTextInput, (searchText: string) => this.updateSearchText(searchText));
-    getValue(this.searchEnabled, (searchEnabled: any) =>
+    getValue(this.searchText, (searchText: string) => this.updateSearchText(searchText));
+    getValue(this.searchEnabled, (searchEnabled: boolean) =>
       this.toolbarDispatcher.next(
         new ListToolbarConfigSetSearchEnabledAction(
           searchEnabled === undefined ? true : searchEnabled
@@ -88,7 +92,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
     );
   }
 
-  get searchText() {
+  get searchTextInput() {
     return this.state.map(s => s.search.searchText).distinctUntilChanged();
   }
 
diff --git a/src/modules/list-toolbar/state/config/set-search-enabled.action.ts b/src/modules/list-toolbar/state/config/set-search-enabled.action.ts
index 7305756d2..460a68730 100644
--- a/src/modules/list-toolbar/state/config/set-search-enabled.action.ts
+++ b/src/modules/list-toolbar/state/config/set-search-enabled.action.ts
@@ -1,3 +1,3 @@
 export class ListToolbarConfigSetSearchEnabledAction {
-  constructor(public enabled: true) {}
+  constructor(public enabled: boolean) {}
 }

From 5a4d717c3573b74d5652e3b75d3c9ff245560817 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 15:21:52 -0500
Subject: [PATCH 09/14] working on more tests

---
 .../list-toolbar.component.fixture.html       |  7 ++-
 .../list-toolbar.component.fixture.ts         | 12 ++--
 .../list-toolbar.component.spec.ts            | 58 +++++++++++++++++--
 .../list-toolbar/list-toolbar.component.ts    | 14 +++--
 src/modules/list/state/index.ts               |  3 +
 5 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
index e15a78c11..f734022e1 100644
--- a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.html
@@ -1,4 +1,7 @@
-<sky-list-toolbar [searchEnabled]="searchEnabled" #toolbar>
+<sky-list-toolbar
+[searchEnabled]="searchEnabled"
+[searchText]="searchText"
+#toolbar>
   <sky-list-toolbar-item id="custom-item" location="right" [index]="2">
     <template>Custom Item</template>
   </sky-list-toolbar-item>
@@ -7,3 +10,5 @@
   </sky-list-toolbar-item>
   <sky-list-toolbar-item id="custom-item-no-template" location="left" [index]="5000"></sky-list-toolbar-item>
 </sky-list-toolbar>
+
+<template #default><span class="sky-test-toolbar"></span></template>
diff --git a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
index 59f08cdf3..4c328d45c 100644
--- a/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
+++ b/src/modules/list-toolbar/fixtures/list-toolbar.component.fixture.ts
@@ -1,6 +1,7 @@
 import {
   Component,
-  ViewChild
+  ViewChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -13,8 +14,11 @@ import {
  })
  export class ListToolbarTestComponent {
 
-   public searchEnabled: boolean;
+  public searchEnabled: boolean;
+  public searchText: string;
+  @ViewChild(SkyListToolbarComponent)
+  public toolbar: SkyListToolbarComponent;
 
-   @ViewChild(SkyListToolbarComponent)
-    public toolbar: SkyListToolbarComponent;
+  @ViewChild('default')
+  public default: TemplateRef<any>;
  }
diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/src/modules/list-toolbar/list-toolbar.component.spec.ts
index e4d42194c..f3917c74b 100644
--- a/src/modules/list-toolbar/list-toolbar.component.spec.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.spec.ts
@@ -13,14 +13,15 @@ import { SkyListToolbarModule } from './';
 import {
   ListToolbarTestComponent
 } from './fixtures/list-toolbar.component.fixture';
+import { expect } from '../testing';
 
 import {
+  ListViewsLoadAction,
+  ListViewsSetActiveAction,
+  ListViewModel,
   ListToolbarItemModel
 } from '../list/state';
 
-
-import { expect } from '../testing';
-
 describe('List Toolbar Component', () => {
   describe('List Toolbar Fixture', () => {
     let state: ListState,
@@ -69,7 +70,7 @@ describe('List Toolbar Component', () => {
         });
       }));
 
-      it('should be able to disable search', async(() => {
+      it('should be able to disable search on initialization', async(() => {
         component.searchEnabled = false;
         initializeToolbar();
         fixture.whenStable().then(() => {
@@ -77,6 +78,15 @@ describe('List Toolbar Component', () => {
           expect(element.query(By.css('input'))).toBeNull();
         });
       }));
+
+      it('should set search text on initialization', async(() => {
+        component.searchText = 'searchText';
+        initializeToolbar();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(component.toolbar.searchComponent.searchText).toBe('searchText');
+        });
+      }));
     });
 
     it('should load custom items', async(() => {
@@ -92,8 +102,44 @@ describe('List Toolbar Component', () => {
 
     }));
 
-    it('should display an empty render for a custom item without template', () => {
+    it('should not display items not in the current view', async(() => {
 
-    });
+
+      initializeToolbar();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+
+         dispatcher.next(
+          new ListViewsLoadAction([new ListViewModel('myview', 'view label')])
+        );
+        fixture.detectChanges();
+
+        // activate the default view
+        dispatcher.next(new ListViewsSetActiveAction('myview'));
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          dispatcher.toolbarAddItems([
+            new ListToolbarItemModel({
+              id: 'newitem',
+              location: 'center',
+              view: 'myview'
+            })
+          ]);
+
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let items = element.queryAll(By.css('.sky-toolbar-item'));
+            console.log(items.length);
+            expect(items[0].nativeElement).toHaveText('');
+            expect(items[1].query(By.css('input'))).not.toBeNull();
+            expect(items[2].nativeElement).toHaveText('Custom Item');
+            expect(items[3].nativeElement).toHaveText('Custom Item 2');
+          });
+        });
+      });
+    }));
   });
 });
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 2d579ed4c..830c39caf 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -6,7 +6,6 @@ import {
   TemplateRef,
   Input,
   OnInit,
-  SimpleChanges,
   AfterContentInit,
   ChangeDetectionStrategy
 } from '@angular/core';
@@ -43,6 +42,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @Input()
   public searchEnabled: boolean | Observable<boolean>;
 
+  @ViewChild('searchComponent')
+  public searchComponent: SkySearchComponent;
+
   @Input()
   private searchText: string | Observable<string>;
 
@@ -52,9 +54,6 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @ViewChild('search')
   private searchTemplate: TemplateRef<any>;
 
-  @ViewChild('searchComponent')
-  public searchComponent: SkySearchComponent;
-
   constructor(
     private state: ListState,
     private dispatcher: ListStateDispatcher,
@@ -116,8 +115,11 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       this.state.map(s => s.toolbar).distinctUntilChanged(),
       this.view,
       (toolbar: ListToolbarModel, view: string) => toolbar.items.filter(
-        (i: ListToolbarItemModel) =>
-          i.location === 'center' && (i.view === undefined || i.view === view)
+        (i: ListToolbarItemModel) => {
+          console.log('view: ', view);
+          return i.location === 'center' && (i.view === undefined || i.view === view)
+        }
+
       )
     );
   }
diff --git a/src/modules/list/state/index.ts b/src/modules/list/state/index.ts
index ca0730ec4..1f7392d69 100644
--- a/src/modules/list/state/index.ts
+++ b/src/modules/list/state/index.ts
@@ -10,3 +10,6 @@ export * from './toolbar/toolbar.model';
 export * from './toolbar/toolbar-item.model';
 export * from './search/actions';
 export * from './search/search.model';
+export * from './views/actions';
+export * from './views/view.model';
+export * from './views/views.model';

From 05adc02674118ddd419cee9b627f04a35e746482 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 16:23:12 -0500
Subject: [PATCH 10/14] Add tests for view specific items and applying search
 text

---
 .../list-toolbar.component.spec.ts            | 79 +++++++++++++------
 .../list-toolbar/list-toolbar.component.ts    | 14 ++--
 2 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/src/modules/list-toolbar/list-toolbar.component.spec.ts
index f3917c74b..082f9c20c 100644
--- a/src/modules/list-toolbar/list-toolbar.component.spec.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.spec.ts
@@ -19,7 +19,8 @@ import {
   ListViewsLoadAction,
   ListViewsSetActiveAction,
   ListViewModel,
-  ListToolbarItemModel
+  ListToolbarItemModel,
+  ListToolbarItemsLoadAction
 } from '../list/state';
 
 describe('List Toolbar Component', () => {
@@ -87,6 +88,23 @@ describe('List Toolbar Component', () => {
           expect(component.toolbar.searchComponent.searchText).toBe('searchText');
         });
       }));
+
+      it('should update list state search text on component apply', () => {
+        let stateChecked = false;
+        initializeToolbar();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+
+          component.toolbar.searchComponent.applySearchText('something');
+          fixture.detectChanges();
+          state.take(1).subscribe((state) => {
+            expect(state.search.searchText).toBe('something');
+            stateChecked = true;
+          });
+          fixture.detectChanges();
+          expect(stateChecked).toBe(true);
+        });
+      });
     });
 
     it('should load custom items', async(() => {
@@ -104,41 +122,54 @@ describe('List Toolbar Component', () => {
 
     it('should not display items not in the current view', async(() => {
 
-
       initializeToolbar();
       fixture.whenStable().then(() => {
         fixture.detectChanges();
 
-         dispatcher.next(
+        dispatcher.next(
           new ListViewsLoadAction([new ListViewModel('myview', 'view label')])
         );
         fixture.detectChanges();
 
-        // activate the default view
+          // activate the default view
         dispatcher.next(new ListViewsSetActiveAction('myview'));
         fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
-          fixture.detectChanges();
-          dispatcher.toolbarAddItems([
-            new ListToolbarItemModel({
-              id: 'newitem',
-              location: 'center',
-              view: 'myview'
-            })
-          ]);
+        dispatcher.next(new ListToolbarItemsLoadAction([
+          new ListToolbarItemModel({
+            id: 'newitem',
+            location: 'center',
+            view: 'myview',
+            template: component.default
+          })
+        ]));
+        fixture.detectChanges();
+
+        let items = element.queryAll(By.css('.sky-toolbar-item'));
+        expect(items[0].nativeElement).toHaveText('');
+        expect(items[1].query(By.css('input'))).not.toBeNull();
+        expect(items[2].query(By.css('span')).nativeElement).toHaveCssClass('sky-test-toolbar');
+        expect(items[3].nativeElement).toHaveText('Custom Item');
+        expect(items[4].nativeElement).toHaveText('Custom Item 2');
+
+         dispatcher.next(new ListToolbarItemsLoadAction([
+          new ListToolbarItemModel({
+            id: 'newitem2',
+            location: 'center',
+            view: 'myview1',
+            template: component.default
+          })
+        ]));
+        fixture.detectChanges();
+
+        items = element.queryAll(By.css('.sky-toolbar-item'));
+        expect(items[0].nativeElement).toHaveText('');
+        expect(items[1].query(By.css('input'))).not.toBeNull();
+        expect(items[2].query(By.css('span')).nativeElement).toHaveCssClass('sky-test-toolbar');
+        expect(items[3].nativeElement).toHaveText('Custom Item');
+        expect(items[4].nativeElement).toHaveText('Custom Item 2');
+
 
-          fixture.detectChanges();
-          fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            let items = element.queryAll(By.css('.sky-toolbar-item'));
-            console.log(items.length);
-            expect(items[0].nativeElement).toHaveText('');
-            expect(items[1].query(By.css('input'))).not.toBeNull();
-            expect(items[2].nativeElement).toHaveText('Custom Item');
-            expect(items[3].nativeElement).toHaveText('Custom Item 2');
-          });
-        });
       });
     }));
   });
diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/src/modules/list-toolbar/list-toolbar.component.ts
index 830c39caf..4ba99d744 100644
--- a/src/modules/list-toolbar/list-toolbar.component.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.ts
@@ -105,7 +105,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       this.view,
       (toolbar: ListToolbarModel, view: string) => toolbar.items.filter(
         (i: ListToolbarItemModel) =>
-          i.location === 'left' && (i.view === undefined || i.view === view)
+          i.location === 'left' && this.itemIsInView(i.view, view)
       )
     );
   }
@@ -116,10 +116,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       this.view,
       (toolbar: ListToolbarModel, view: string) => toolbar.items.filter(
         (i: ListToolbarItemModel) => {
-          console.log('view: ', view);
-          return i.location === 'center' && (i.view === undefined || i.view === view)
+          return i.location === 'center' && this.itemIsInView(i.view, view);
         }
-
       )
     );
   }
@@ -131,11 +129,15 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       (toolbar: ListToolbarModel, view: string) => {
         return toolbar.items.filter(
         (i: ListToolbarItemModel) =>
-          i.location === 'right' && (i.view === undefined || i.view === view)
-      );
+          i.location === 'right' && this.itemIsInView(i.view, view)
+        );
       });
   }
 
+  private itemIsInView(itemView: string, activeView: string) {
+    return (itemView === undefined || itemView === activeView);
+  }
+
   private updateSearchText(searchText: string) {
     this.dispatcher.searchSetText(searchText);
   }

From abd66b7069deefa37b5d64219a5ffb6a7d68437d Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 16:25:47 -0500
Subject: [PATCH 11/14] fix lint errors

---
 src/modules/list-toolbar/list-toolbar.component.spec.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/src/modules/list-toolbar/list-toolbar.component.spec.ts
index 082f9c20c..d4332e96c 100644
--- a/src/modules/list-toolbar/list-toolbar.component.spec.ts
+++ b/src/modules/list-toolbar/list-toolbar.component.spec.ts
@@ -97,8 +97,8 @@ describe('List Toolbar Component', () => {
 
           component.toolbar.searchComponent.applySearchText('something');
           fixture.detectChanges();
-          state.take(1).subscribe((state) => {
-            expect(state.search.searchText).toBe('something');
+          state.take(1).subscribe((s) => {
+            expect(s.search.searchText).toBe('something');
             stateChecked = true;
           });
           fixture.detectChanges();
@@ -169,7 +169,6 @@ describe('List Toolbar Component', () => {
         expect(items[3].nativeElement).toHaveText('Custom Item');
         expect(items[4].nativeElement).toHaveText('Custom Item 2');
 
-
       });
     }));
   });

From 07d314128b96da6b7ceaddaa8e2fee350f064434 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Fri, 3 Feb 2017 17:08:31 -0500
Subject: [PATCH 12/14] tests for searching

TODO:
  - list view grid test for provided search function
  - toolbar load action index test
  - docs for column search function
  - docs for view grid search function
  - refine list-toolbar docs
  - action button test coverage
---
 .../list-data-in-memory.provider.ts           |   2 +
 .../fixtures/list-dual.component.fixture.html |   1 +
 .../list/fixtures/list-fixtures.module.ts     |   2 +
 .../list/fixtures/list.component.fixture.html |   1 +
 .../list/fixtures/list.component.fixture.ts   |   6 +-
 src/modules/list/list.component.spec.ts       | 102 +++++++++++++++++-
 6 files changed, 112 insertions(+), 2 deletions(-)

diff --git a/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts b/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
index 25c94c397..f27f36889 100644
--- a/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
+++ b/src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts
@@ -67,6 +67,8 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
 
       let result = items;
 
+      /* ignore if until multiple different types of filtering can occur */
+      /* istanbul ignore next */
       if (!dataChanged && !searchChanged && this.lastSearchResults !== undefined) {
         result = this.lastSearchResults;
       } else if (search.searchText !== undefined && search.searchText.length > 0) {
diff --git a/src/modules/list/fixtures/list-dual.component.fixture.html b/src/modules/list/fixtures/list-dual.component.fixture.html
index 138074d20..ae68bc7ff 100644
--- a/src/modules/list/fixtures/list-dual.component.fixture.html
+++ b/src/modules/list/fixtures/list-dual.component.fixture.html
@@ -1,4 +1,5 @@
 <sky-list [data]="items">
+  <sky-list-toolbar></sky-list-toolbar>
   <sky-list-view-grid fit="scroll" #first [name]="'First'">
     <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
     <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
diff --git a/src/modules/list/fixtures/list-fixtures.module.ts b/src/modules/list/fixtures/list-fixtures.module.ts
index 81c351598..cbe89cf40 100644
--- a/src/modules/list/fixtures/list-fixtures.module.ts
+++ b/src/modules/list/fixtures/list-fixtures.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { SkyListModule } from '../';
 import { SkyListViewGridModule } from '../../list-view-grid';
+import { SkyListToolbarModule } from '../../list-toolbar';
 import { SkyGridModule } from '../../grid';
 
 import { ListTestComponent } from './list.component.fixture';
@@ -20,6 +21,7 @@ import { ListEmptyTestComponent } from './list-empty.component.fixture';
     CommonModule,
     SkyListModule,
     SkyListViewGridModule,
+    SkyListToolbarModule,
     SkyGridModule,
     FormsModule
   ],
diff --git a/src/modules/list/fixtures/list.component.fixture.html b/src/modules/list/fixtures/list.component.fixture.html
index 852ece423..317fa6728 100644
--- a/src/modules/list/fixtures/list.component.fixture.html
+++ b/src/modules/list/fixtures/list.component.fixture.html
@@ -1,4 +1,5 @@
 <sky-list [data]="items" [defaultView]="default">
+  <sky-list-toolbar #toolbar></sky-list-toolbar>
   <sky-list-view-grid fit="scroll" #default>
     <sky-grid-column field="column1" heading="Column1">
       <template let-row="row">{{row.column1}}</template>
diff --git a/src/modules/list/fixtures/list.component.fixture.ts b/src/modules/list/fixtures/list.component.fixture.ts
index aef29d893..336a70aab 100644
--- a/src/modules/list/fixtures/list.component.fixture.ts
+++ b/src/modules/list/fixtures/list.component.fixture.ts
@@ -1,13 +1,17 @@
 import { Component, ViewChild, Inject } from '@angular/core';
 import { SkyListComponent } from '../list.component';
 import { BehaviorSubject } from 'rxjs';
+import { SkyListToolbarComponent } from '../../list-toolbar';
 
 @Component({
   selector: 'sky-test-cmp',
   template: require('./list.component.fixture.html')
 })
 export class ListTestComponent {
-  @ViewChild(SkyListComponent) public list: SkyListComponent;
+  @ViewChild(SkyListComponent)
+  public list: SkyListComponent;
+  @ViewChild('toolbar')
+  public toolbar: SkyListToolbarComponent;
 
   constructor(@Inject('items') public items: any) {
   }
diff --git a/src/modules/list/list.component.spec.ts b/src/modules/list/list.component.spec.ts
index 6b642d40c..eb1d60a91 100644
--- a/src/modules/list/list.component.spec.ts
+++ b/src/modules/list/list.component.spec.ts
@@ -18,6 +18,14 @@ import { ListDualTestComponent } from './fixtures/list-dual.component.fixture';
 import { ListEmptyTestComponent } from './fixtures/list-empty.component.fixture';
 import { SkyListComponent, SkyListModule, ListDataRequestModel, ListDataResponseModel } from './';
 import { SkyListViewGridModule, SkyListViewGridComponent } from '../list-view-grid';
+import { SkyListToolbarModule } from '../list-toolbar';
+import {
+  ListSearchModel,
+  ListSearchSetFunctionsAction,
+  ListSearchSetFieldSelectorsAction,
+  ListToolbarItemModel,
+  ListToolbarItemsLoadAction
+} from './state';
 
 import { SkyListInMemoryDataProvider } from '../list-data-provider-in-memory';
 
@@ -63,6 +71,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -90,6 +99,12 @@ describe('List Component', () => {
         fixture.detectChanges();
       }));
 
+      function applySearch(value: string) {
+        component.toolbar.searchComponent.applySearchText(value);
+        fixture.detectChanges();
+        return fixture.whenStable();
+      }
+
       it('should load data', () => {
         expect(element.queryAll(By.css('tr.sky-grid-row')).length).toBe(7);
       });
@@ -123,6 +138,19 @@ describe('List Component', () => {
         expect(element.queryAll(By.css('tr.sky-grid-row')).length).toBe(2);
       });
 
+      it('should search based on input text', async(() => {
+        applySearch('banana').then(() => {
+
+          fixture.detectChanges();
+          expect(element.queryAll(By.css('tr.sky-grid-row')).length).toBe(2);
+
+          applySearch('banana').then(() => {
+            fixture.detectChanges();
+            expect(element.queryAll(By.css('tr.sky-grid-row')).length).toBe(2);
+          });
+        });
+      }));
+
       describe('refreshDisplayedItems', () => {
         it('should refresh items', async(() => {
           component.list.refreshDisplayedItems();
@@ -193,6 +221,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -258,6 +287,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -321,6 +351,36 @@ describe('List Component', () => {
 
         expect(list.displayedItems).not.toBe(null);
       }));
+
+      it('data provider filteredItems with no search function', () => {
+        let provider = fixture.componentInstance.list.dataProvider;
+        let request = new ListDataRequestModel({
+          pageSize: 10,
+          pageNumber: 1,
+          search: new ListSearchModel(),
+
+        });
+
+        let response = provider.get(request);
+        response.take(1).subscribe();
+        response.take(1).subscribe((r: any) => expect(r.count).toBe(2));
+
+      });
+
+      it('data provider filteredItems with defined search function', () => {
+        let provider = fixture.componentInstance.list.dataProvider;
+        provider.searchFunction = (data: any, searchText: string) => { return 'search'; }
+
+        let request = new ListDataRequestModel({
+          pageSize: 10,
+         pageNumber: 1,
+         search: new ListSearchModel({ searchText: 'search', functions: [() => {}] }),
+        });
+
+        let response = provider.get(request);
+        response.take(1).subscribe((r: any) => expect(r.count).toBe(2));
+
+      });
     });
 
     describe('List Component with no data', () => {
@@ -343,6 +403,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -403,6 +464,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -483,6 +545,7 @@ describe('List Component', () => {
             ListFixturesModule,
             SkyListModule,
             SkyListViewGridModule,
+            SkyListToolbarModule,
             FormsModule
           ],
           providers: [
@@ -510,7 +573,7 @@ describe('List Component', () => {
         fixture.detectChanges();
       }));
 
-      it('should switch views when clicking view selector', () => {
+      it('should switch views when setting view active', () => {
         fixture.detectChanges();
         expect(element.queryAll(
           By.css('sky-list-view-grid[ng-reflect-name="First"] th.sky-grid-heading')
@@ -547,6 +610,43 @@ describe('List Component', () => {
       expect(model.count).toBe(undefined);
       expect(model.items).toBe(undefined);
     });
+
+     it('should construct ListSearchSetFunctionsAction', () => {
+      let action = new ListSearchSetFunctionsAction();
+      expect(action).not.toBeUndefined();
+    });
+
+    it('should construct ListSearchSetFieldSelectorsAction', () => {
+      let action = new ListSearchSetFieldSelectorsAction();
+      expect(action).not.toBeUndefined();
+    });
+
+    it('should construct ListToolbarItemModel without data', () => {
+      let model = new ListToolbarItemModel();
+      expect(model.template).toBeUndefined();
+      expect(model.location).toBeUndefined();
+      expect(model.view).toBeUndefined();
+      expect(model.id).toBeUndefined();
+    });
+
+    it('should construct ListToolbarItemsLoadAction action', async(() => {
+      let action = new ListToolbarItemsLoadAction([new ListToolbarItemModel()]);
+      expect(action).not.toBeUndefined();
+    }));
+
+    describe('toolbar load action', () => {
+      it('should handle index of -1 or greater than current length', () => {
+
+      });
+
+      it('should handle index of 0', () => {
+
+      });
+
+      it('should handle index of less than current length', () => {
+
+      });
+    });
   });
 
 });

From c71a8623717db8e327a9aac865d55f7790cf464b Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Mon, 6 Feb 2017 10:23:21 -0500
Subject: [PATCH 13/14] Finish unit tests for list toolbar

---
 .../action-button.component.spec.ts           |   4 +
 .../list-view-grid.component.fixture.html     |  10 +-
 .../list-view-grid.component.fixture.ts       |   2 +
 .../list-view-grid.component.spec.ts          |  28 ++++-
 src/modules/list/list.component.spec.ts       | 119 ++++++++++++++++--
 5 files changed, 153 insertions(+), 10 deletions(-)

diff --git a/src/modules/action-button/action-button.component.spec.ts b/src/modules/action-button/action-button.component.spec.ts
index 7585dcf87..c59658577 100644
--- a/src/modules/action-button/action-button.component.spec.ts
+++ b/src/modules/action-button/action-button.component.spec.ts
@@ -85,6 +85,10 @@ describe('Action button component', () => {
   });
 
   it('should emit a click event on enter press', () => {
+
+    debugElement.query(By.css('.sky-action-button')).triggerEventHandler('keyup', { which: 15});
+    fixture.detectChanges();
+    expect(cmp.buttonIsClicked).toBe(false);
     debugElement.query(By.css('.sky-action-button')).triggerEventHandler('keyup', { which: 13});
     fixture.detectChanges();
     expect(cmp.buttonIsClicked).toBe(true);
diff --git a/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.html b/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.html
index 7c336a85e..b589f6ff0 100644
--- a/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.html
+++ b/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.html
@@ -1,4 +1,12 @@
-<sky-list-view-grid fit="scroll" [name]="gridview" [hiddenColumns]="hiddenColumns" [width]="600" [height]="400" selectionEnabled="true">
+<sky-list-view-grid
+  fit="scroll"
+  [name]="gridview"
+  [hiddenColumns]="hiddenColumns"
+  [width]="600"
+  [height]="400"
+  selectionEnabled="true"
+  [search]="searchFn"
+  >
   <sky-grid-column field="column1" heading="Column1" [locked]="true"></sky-grid-column>
   <sky-grid-column field="column2" heading="Column2" [width]="150">
     <template let-row="row">{{row.column2}}</template>
diff --git a/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.ts b/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.ts
index bcddfb405..7318e8ebb 100644
--- a/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.ts
+++ b/src/modules/list-view-grid/fixtures/list-view-grid.component.fixture.ts
@@ -15,4 +15,6 @@ export class ListViewGridTestComponent {
   public templates: QueryList<TemplateRef<any>>;
   @ViewChildren(TemplateRef)
   public viewtemplates: QueryList<TemplateRef<any>>;
+
+  public searchFn: (data: any, searchText: string) => boolean;
 }
diff --git a/src/modules/list-view-grid/list-view-grid.component.spec.ts b/src/modules/list-view-grid/list-view-grid.component.spec.ts
index 9e786eb90..e520e206a 100644
--- a/src/modules/list-view-grid/list-view-grid.component.spec.ts
+++ b/src/modules/list-view-grid/list-view-grid.component.spec.ts
@@ -1,6 +1,8 @@
 import {
   TestBed,
-  async
+  async,
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -148,7 +150,7 @@ describe('List View Grid Component', () => {
       });
     });
 
-    describe('hidden column property', () => {
+    describe('nonstandard setup', () => {
       it('should respect the hidden property when not hidden columns and displayed columns', () => {
         component.hiddenColumns = undefined;
         setupTest();
@@ -170,6 +172,28 @@ describe('List View Grid Component', () => {
           By.css('th[sky-cmp-id="hiddenCol2"]')
         ).nativeElement.textContent.trim()).toBe('Column7');
       });
+
+      it('should handle setting a searchFunction', fakeAsync(() => {
+        let appliedData: any;
+        let appliedSearch: string;
+        component.searchFn = (data: any, searchText: string) => {
+          appliedData = data;
+          appliedSearch = searchText;
+          return true;
+        };
+
+        setupTest();
+
+        tick();
+
+        state.take(1).subscribe((current) => {
+          current.search.functions[0]('something', 'searchText');
+          expect(appliedData).toBe('something');
+          expect(appliedSearch).toBe('searchText');
+        });
+
+        tick();
+      }));
     });
 
   });
diff --git a/src/modules/list/list.component.spec.ts b/src/modules/list/list.component.spec.ts
index eb1d60a91..df6360890 100644
--- a/src/modules/list/list.component.spec.ts
+++ b/src/modules/list/list.component.spec.ts
@@ -1,6 +1,8 @@
 import {
   TestBed,
-  async
+  async,
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -635,17 +637,120 @@ describe('List Component', () => {
     }));
 
     describe('toolbar load action', () => {
-      it('should handle index of -1 or greater than current length', () => {
+      it('should handle index of -1 or greater than current length', fakeAsync(() => {
+        let dispatcher = new ListStateDispatcher();
+        let state = new ListState(dispatcher);
+
+        state.skip(1).take(1).subscribe(() => tick());
+        tick();
+
+        let newItems: ListToolbarItemModel[] = [
+          new ListToolbarItemModel({
+            id: '0'
+          }),
+          new ListToolbarItemModel({
+            id: '2'
+          })
+        ];
+        dispatcher.toolbarAddItems(newItems, -1);
 
-      });
+        tick();
 
-      it('should handle index of 0', () => {
+        state.take(1).subscribe((current) => {
+          expect(current.toolbar.items.length).toBe(2);
+        });
 
-      });
+        tick();
+
+        newItems = [
+          new ListToolbarItemModel({
+            id: 'blue'
+          })
+        ];
 
-      it('should handle index of less than current length', () => {
+        dispatcher.toolbarAddItems(newItems, 6);
 
-      });
+        tick();
+
+        state.take(1).subscribe((current) => {
+          expect(current.toolbar.items[2].id).toBe('blue');
+        });
+
+        tick();
+
+      }));
+
+      it('should handle index of 0', fakeAsync(() => {
+        let dispatcher = new ListStateDispatcher();
+        let state = new ListState(dispatcher);
+
+        state.skip(1).take(1).subscribe(() => tick());
+        tick();
+
+        let newItems: ListToolbarItemModel[] = [
+          new ListToolbarItemModel({
+            id: '0'
+          }),
+          new ListToolbarItemModel({
+            id: '2'
+          })
+        ];
+        dispatcher.toolbarAddItems(newItems, -1);
+
+        tick();
+
+        newItems = [
+          new ListToolbarItemModel({
+            id: 'blue'
+          })
+        ];
+
+        dispatcher.toolbarAddItems(newItems, 0);
+
+        tick();
+
+        state.take(1).subscribe((current) => {
+          expect(current.toolbar.items[0].id).toBe('blue');
+        });
+
+        tick();
+      }));
+
+      it('should handle index of less than current length', fakeAsync(() => {
+         let dispatcher = new ListStateDispatcher();
+        let state = new ListState(dispatcher);
+
+        state.skip(1).take(1).subscribe(() => tick());
+        tick();
+
+        let newItems: ListToolbarItemModel[] = [
+          new ListToolbarItemModel({
+            id: '0'
+          }),
+          new ListToolbarItemModel({
+            id: '2'
+          })
+        ];
+        dispatcher.toolbarAddItems(newItems, -1);
+
+        tick();
+
+        newItems = [
+          new ListToolbarItemModel({
+            id: 'blue'
+          })
+        ];
+
+        dispatcher.toolbarAddItems(newItems, 1);
+
+        tick();
+
+        state.take(1).subscribe((current) => {
+          expect(current.toolbar.items[1].id).toBe('blue');
+        });
+
+        tick();
+      }));
     });
   });
 

From ac3e022dac2c5a7ef408b158b2eb1eaea622ddf0 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Mon, 6 Feb 2017 10:39:01 -0500
Subject: [PATCH 14/14] Update documentation for toolbar and search

---
 src/app/components/grid/index.html           | 12 +++++++++---
 src/app/components/list-toolbar/index.html   |  2 +-
 src/app/components/list-view-grid/index.html |  9 ---------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/app/components/grid/index.html b/src/app/components/grid/index.html
index c1e92b715..fe82bd14a 100644
--- a/src/app/components/grid/index.html
+++ b/src/app/components/grid/index.html
@@ -69,21 +69,27 @@
     </sky-demo-page-property>
     <sky-demo-page-property
       propertyName="width"
-      optional="true">
+      isOptional="true">
       Specifies the width of the column.
     </sky-demo-page-property>
     <sky-demo-page-property
       propertyName="locked"
-      optional="true"
+      isOptional="true"
       defaultValue="false">
       Specifies whether the column is locked. If set to <code>true</code>, then the column cannot be dragged to another position, and other columns cannot be dragged before the locked column.
     </sky-demo-page-property>
     <sky-demo-page-property
       propertyName="hidden"
-      optional="true"
+      isOptional="true"
       defaultValue="false">
       Specifies whether the column is initially hidden when grid <code>selectedColumnIds</code> are not provided.
     </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="search"
+      isOptional="true">
+      Specifies a search function to apply for the specific column. By default, the column will execute a string compare on the column data.
+      Acceptable values: <code>(data: any, searchText: string) => boolean</code>
+    </sky-demo-page-property>
   </sky-demo-page-properties>
 
   <sky-demo-page-example>
diff --git a/src/app/components/list-toolbar/index.html b/src/app/components/list-toolbar/index.html
index 174369ef3..df2a18f88 100644
--- a/src/app/components/list-toolbar/index.html
+++ b/src/app/components/list-toolbar/index.html
@@ -17,7 +17,7 @@
         defaultValue=""
         isOptional="true"
     >
-      Specific whether the search bar is enabled.
+      Specifies whether the search bar is enabled.
       Acceptable values: <code>boolean or Observable boolean</code>.
     </sky-demo-page-property>
 
diff --git a/src/app/components/list-view-grid/index.html b/src/app/components/list-view-grid/index.html
index 653e0a91a..eb8a49426 100644
--- a/src/app/components/list-view-grid/index.html
+++ b/src/app/components/list-view-grid/index.html
@@ -60,16 +60,7 @@
       Specify a search function to apply on the view data.
       Acceptable value: <code>(data: any, searchText: string) => boolean</code>.
     </sky-demo-page-property>
-    <sky-demo-page-property
-        propertyName="selectionEnabled"
-        defaultValue=""
-        isOptional="true"
-    >
-      Specify if the grid will have a static selector column with checkboxes.
-      Acceptable value: <code>boolean or Observable boolean</code>.
-    </sky-demo-page-property>
   </sky-demo-page-properties>
-
   <sky-demo-page-example>
     <sky-list-view-grid-demo></sky-list-view-grid-demo>
     <sky-demo-page-code demoName="List view grid"></sky-demo-page-code>