Feature/search box (#122)

* added search-input atomic component for search-boxes * added clear event to search-input * renamed to search dir and added blur event * change search-box to search package * changed input into type="search" and added searchDebounce event * search-box molecule component * added search module * added flex="none" scss rule * added CovalentSearchModule in docs modules * added doc files * added demo for search input and search box * updated docs in demo for search components * added docblocks to code API * updated README.md * added showUnderline input * feature(search): back icon attribute * update(search): getter property instead of private member * added backIcon to readme * update(search-box): hide float label * fix(search-box): only hide focused label * updating backIcon desc
Teradata · Oct 27, 2016 · 8783f60 · 8783f60
1 parent 9ea75f3
commit 8783f60
Show file tree

Hide file tree

Showing 19 changed files with 633 additions and 0 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { CovalentJsonFormatterModule } from '../platform/json-formatter';
 import { CovalentChipsModule } from '../platform/chips';
 import { CovalentChartsModule } from '../platform/charts';
 import { CovalentDataTableModule } from '../platform/data-table';
+import { CovalentSearchModule } from '../platform/search';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import { CovalentDataTableModule } from '../platform/data-table';
     CovalentChipsModule.forRoot(),
     CovalentChartsModule.forRoot(),
     CovalentDataTableModule.forRoot(),
+    CovalentSearchModule.forRoot(),
     appRoutes,
   ], // modules needed to run this module
   providers: [

diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
@@ -72,6 +72,11 @@ export class ComponentsComponent {
     icon: 'show_chart',
     route: 'charts',
     title: 'Charts',
+  }, {
+    description: 'Search and filter items',
+    icon: 'search',
+    route: 'search',
+    title: 'Search',
   }, {
     description: 'Responsive service & directive',
     icon: 'devices',

diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -19,6 +19,7 @@ import { DirectivesComponent } from './directives/directives.component';
 import { PipesComponent } from './pipes/pipes.component';
 import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
+import { SearchDemoComponent } from './search/search.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
@@ -29,6 +30,7 @@ import { CovalentJsonFormatterModule } from '../../../platform/json-formatter';
 import { CovalentChipsModule } from '../../../platform/chips';
 import { CovalentChartsModule } from '../../../platform/charts';
 import { CovalentDataTableModule } from '../../../platform/data-table';
+import { CovalentSearchModule } from '../../../platform/search';
 
 @NgModule({
   declarations: [
@@ -49,6 +51,7 @@ import { CovalentDataTableModule } from '../../../platform/data-table';
     PipesComponent,
     ChartsDemoComponent,
     DataTableDemoComponent,
+    SearchDemoComponent,
     MaterialComponentsComponent,
   ],
   imports: [
@@ -60,6 +63,7 @@ import { CovalentDataTableModule } from '../../../platform/data-table';
     CovalentChipsModule.forRoot(),
     CovalentChartsModule.forRoot(),
     CovalentDataTableModule.forRoot(),
+    CovalentSearchModule.forRoot(),
     componentsRoutes,
   ],
 })

diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts
@@ -17,6 +17,7 @@ import { DirectivesComponent } from './directives/directives.component';
 import { PipesComponent } from './pipes/pipes.component';
 import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
+import { SearchDemoComponent } from './search/search.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
 
 const routes: Routes = [{
@@ -59,6 +60,9 @@ const routes: Routes = [{
     }, {
       component: DialogsDemoComponent,
       path: 'dialogs',
+    }, {
+      component: SearchDemoComponent,
+      path: 'search',
     }, {
       component: DirectivesComponent,
       path: 'directives',

diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
@@ -66,6 +66,11 @@ export class ComponentsOverviewComponent {
       icon: 'show_chart',
       route: 'charts',
       title: 'Charts',
+    }, {
+      color: 'lime-700',
+      icon: 'search',
+      route: 'search',
+      title: 'Search',
     }, {
       color: 'red-700',
       icon: 'devices',

diff --git a/src/app/components/components/search/search.component.html b/src/app/components/components/search/search.component.html
@@ -0,0 +1,113 @@
+<md-card>
+  <md-card-title>Search</md-card-title>
+  <md-card-subtitle>Search and filter items</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <div layout="row" layout-align="start center">
+      <md-button-toggle-group name="mode" (change)="modeChange()" [(ngModel)]="debounce">
+        <md-button-toggle md-tooltip="Enter/Clear Events" [value]="0"><md-icon>search</md-icon> Enter/Clear</md-button-toggle>
+        <md-button-toggle md-tooltip="Debounce Events" [value]="1"><md-icon>keyboard</md-icon> Debounce</md-button-toggle>
+      </md-button-toggle-group>
+    </div>
+    <h3>Search Input</h3>
+    <p>Search Value: {{searchInputTerm || 'Empty'}}</p>
+    <div layout="row" layout-align="start center">
+      <td-search-input *ngIf="debounce" [showUnderline]="true" placeholder="Search here" (searchDebounce)="searchInputTerm = $event"></td-search-input>
+      <td-search-input *ngIf="!debounce" [showUnderline]="true" placeholder="Search here" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''"></td-search-input>
+    </div>
+    <h3>Search Box</h3>
+    <p>Search Value: {{searchBoxTerm || 'Empty'}}</p>
+    <div layout-gt-xs="row">
+      <md-card flex-gt-xs="60">
+        <div layout="row" layout-align="start center" class="push-left push-right">
+          <span class="md-title">Card</span>
+          <span flex></span>
+          <td-search-box *ngIf="debounce" placeholder="Search here" [alwaysVisible]="alwaysVisible" (searchDebounce)="searchBoxTerm = $event" flex></td-search-box>
+          <td-search-box *ngIf="!debounce" placeholder="Search here" [alwaysVisible]="alwaysVisible" (search)="searchBoxTerm = $event" (clear)="searchBoxTerm = ''" flex></td-search-box>
+        </div>
+        <md-divider></md-divider>
+        <md-card-content>card content</md-card-content>
+      </md-card>
+    </div>
+    <h3>Search Box in Toolbar</h3>
+    <md-toolbar color="primary">
+      <td-search-box backIcon="arrow_back" placeholder="Search here" [alwaysVisible]="alwaysVisible" flex></td-search-box>
+      <button md-icon-button><md-icon>more_vert</md-icon></button>
+    </md-toolbar>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <button md-button color="primary" (click)="toggleAlwaysVisible()">Toggle Search Box Always Visible</button>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>TdSearchInputComponent</md-card-title>
+  <md-card-subtitle>How to use this component</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h2><code><![CDATA[<td-search-input>]]></code></h2>
+    <p>Use <code><![CDATA[<td-search-input>]]></code> element to generate a search input with its animated cancel button.</p>
+    <h3>Properties:</h3>
+    <p>The <code><![CDATA[<td-search-input>]]></code> component has {{searchInputAttrs.length}} properties:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="searchInputAttrs">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+      <![CDATA[
+        <td-search-input placeholder="Search here" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+        </td-search-input>
+      ]]>
+    </td-highlight>
+    <h3>Setup:</h3>
+    <p>Import the [CovalentSearchModule] using the <code>forRoot()</code> method in your NgModule:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { CovalentSearchModule } from '@covalent/search';
+        @NgModule({
+          imports: [
+            CovalentSearchModule.forRoot(),
+            ...
+          ],
+          ...
+        })
+        export class MyModule {}
+      ]]>
+    </td-highlight>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>TdSearchBoxComponent</md-card-title>
+  <md-card-subtitle>How to use this component</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h2><code><![CDATA[<td-search-box>]]></code></h2>
+    <p>Use <code><![CDATA[<td-search-box>]]></code> element to generate a search box with animations.</p>
+    <h3>Properties:</h3>
+    <p>The <code><![CDATA[<td-search-box>]]></code> component has {{searchBoxAttrs.length}} properties:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="searchBoxAttrs">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+      <![CDATA[
+        <td-search-box backIcon="arrow_back" placeholder="Search here" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+        </td-search-box>
+      ]]>
+    </td-highlight>
+  </md-card-content>
+</md-card>
diff --git a/src/app/components/components/search/search.component.scss b/src/app/components/components/search/search.component.scss
diff --git a/src/app/components/components/search/search.component.ts b/src/app/components/components/search/search.component.ts
@@ -0,0 +1,85 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'search-demo',
+  styleUrls: ['search.component.scss'],
+  templateUrl: 'search.component.html',
+})
+export class SearchDemoComponent {
+
+  searchInputAttrs: Object[] = [{
+    description: `Debounce timeout between keypresses. Defaults to 400.`,
+    name: 'debounce?',
+    type: 'number',
+  }, {
+    description: `Placeholder for the underlying input component.`,
+    name: 'placeholder?',
+    type: 'string',
+  }, {
+    description: `Sets if the input underline should be visible. Defaults to 'false'.`,
+    name: 'showUnderline?',
+    type: 'boolean',
+  }, {
+    description: `Event emitted after the [debounce] timeout.`,
+    name: 'searchDebounce',
+    type: 'function($event)',
+  }, {
+    description: `Event emitted after the key enter has been pressed.`,
+    name: 'search',
+    type: 'function($event)',
+  }, {
+    description: `Event emitted after the clear icon has been clicked.`,
+    name: 'clear',
+    type: 'function($event)',
+  }];
+
+  searchBoxAttrs: Object[] = [{
+    description: `Debounce timeout between keypresses. Defaults to 400.`,
+    name: 'debounce?',
+    type: 'number',
+  }, {
+    description: `Placeholder for the underlying input component.`,
+    name: 'placeholder?',
+    type: 'string',
+  }, {
+    description: `The icon used to close the search toggle, only shown when [alwaysVisible] is false.
+                  Defaults to 'search' icon.`,
+    name: 'backIcon?',
+    type: 'string',
+  }, {
+    description: `Sets if the input underline should be visible. Defaults to 'false'.`,
+    name: 'showUnderline?',
+    type: 'boolean',
+  }, {
+    description: `Sets if the input should always be visible. Defaults to 'false'.`,
+    name: 'alwaysVisible?',
+    type: 'boolean',
+  }, {
+    description: `Event emitted after the [debounce] timeout.`,
+    name: 'searchDebounce',
+    type: 'function($event)',
+  }, {
+    description: `Event emitted after the key enter has been pressed.`,
+    name: 'search',
+    type: 'function($event)',
+  }, {
+    description: `Event emitted after the clear icon has been clicked.`,
+    name: 'clear',
+    type: 'function($event)',
+  }];
+
+  searchInputTerm: string = '';
+  searchBoxTerm: string = '';
+  debounce: number = 0;
+  alwaysVisible: boolean = false;
+
+  modeChange(): void {
+    this.searchInputTerm = '';
+    this.searchBoxTerm = '';
+  }
+
+  toggleAlwaysVisible(): void {
+    this.alwaysVisible = !this.alwaysVisible;
+  }
+
+}
diff --git a/src/platform/core/styles/_layout.scss b/src/platform/core/styles/_layout.scss
@@ -568,4 +568,7 @@ $layout-breakpoint-lg: 1920px !default;
   }
 }
 
+[flex="none"] {
+  flex: none;
+}
 
diff --git a/src/platform/search/README.md b/src/platform/search/README.md
@@ -0,0 +1,69 @@
+# td-search-input
+
+`td-search-input` element to generate a search input with its animated cancel button.
+
+## API Summary
+
+Properties:
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400.
+| `placeholder?` | `string` | Placeholder for the underlying input component.
+| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'.
+| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout.
+| `search` | `function($event)` | Event emitted after the key enter has been pressed.
+| `clear?` | `function` | Event emitted after the clear icon has been clicked.
+
+## Usage
+
+Example for HTML usage:
+
+ ```html
+<td-search-input placeholder="Search here" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+</td-search-input>
+ ```
+
+# td-search-box
+
+`td-search-box` element to generate a search box with animations.
+
+## API Summary
+
+Properties:
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400.
+| `placeholder?` | `string` | Placeholder for the underlying input component.
+| `backIcon?` | `string` | The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
+| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'.
+| `alwaysVisible?` | `boolean` | Sets if the input should always be visible. Defaults to 'false'.
+| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout.
+| `search` | `function($event)` | Event emitted after the key enter has been pressed.
+| `clear?` | `function` | Event emitted after the clear icon has been clicked.
+
+## Usage
+
+Example for HTML usage:
+
+ ```html
+<td-search-box placeholder="Search here" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+</td-search-box>
+ ```
+
+## Setup
+
+Import the [CovalentSearchModule] using the forRoot() method in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/chips';
+@NgModule({
+  imports: [
+    CovalentSearchModule.forRoot(),
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
diff --git a/src/platform/search/index.ts b/src/platform/search/index.ts
@@ -0,0 +1,3 @@
+export { TdSearchBoxComponent } from './search-box/search-box.component';
+export { TdSearchInputComponent } from './search-input/search-input.component';
+export { CovalentSearchModule } from './search.module';