Toolbar with search

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',

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>

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"
+    >
+      Specifies 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>

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>

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' }
+  ]);
+}

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>

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' }
+  ]);
+}

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>

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';

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);

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}}

src/modules/grid/fixtures/grid.component.fixture.ts

@@ -11,6 +11,11 @@ let moment = require('moment');
   template: require('./grid.component.fixture.html')
 })
 export class GridTestComponent {
+  public hasToolbar: boolean = false;
+
+  public searchedData: any;
+  public searchText: string;
+
   public selectedColumnIds: Array<string> = [
     'column1',
     'column2',
@@ -41,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;
+  };
 }

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;
+  }
 }

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;
     }
   }
 }

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

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;
+  }
+}