@covalent/core 4.0.0 → 4.1.0-develop.5

package/package.json

@@ -1,18 +1,115 @@
 {
   "name": "@covalent/core",
-  "version": "4.0.0",
-  "description": "Teradata UI Platform built on Angular Material",
-  "keywords": [
-    "angular",
-    "material",
-    "material design",
-    "components",
-    "covalent",
-    "reusable"
-  ],
-  "schematics": "./schematics/collection.json",
-  "ng-update": {
-    "migrations": "./schematics/migration.json"
+  "version": "4.1.0-develop.5",
+  "exports": {
+    ".": {
+      "sass": "./theming/_all-theme.scss",
+      "types": "./covalent-core.d.ts",
+      "esm2020": "./esm2020/covalent-core.mjs",
+      "es2020": "./fesm2020/covalent-core.mjs",
+      "es2015": "./fesm2015/covalent-core.mjs",
+      "node": "./fesm2015/covalent-core.mjs",
+      "default": "./fesm2020/covalent-core.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./breadcrumbs": {
+      "types": "./breadcrumbs/covalent-core-breadcrumbs.d.ts",
+      "esm2020": "./esm2020/breadcrumbs/covalent-core-breadcrumbs.mjs",
+      "es2020": "./fesm2020/covalent-core-breadcrumbs.mjs",
+      "es2015": "./fesm2015/covalent-core-breadcrumbs.mjs",
+      "node": "./fesm2015/covalent-core-breadcrumbs.mjs",
+      "default": "./fesm2020/covalent-core-breadcrumbs.mjs"
+    },
+    "./common": {
+      "types": "./common/covalent-core-common.d.ts",
+      "esm2020": "./esm2020/common/covalent-core-common.mjs",
+      "es2020": "./fesm2020/covalent-core-common.mjs",
+      "es2015": "./fesm2015/covalent-core-common.mjs",
+      "node": "./fesm2015/covalent-core-common.mjs",
+      "default": "./fesm2020/covalent-core-common.mjs"
+    },
+    "./dialogs": {
+      "types": "./dialogs/covalent-core-dialogs.d.ts",
+      "esm2020": "./esm2020/dialogs/covalent-core-dialogs.mjs",
+      "es2020": "./fesm2020/covalent-core-dialogs.mjs",
+      "es2015": "./fesm2015/covalent-core-dialogs.mjs",
+      "node": "./fesm2015/covalent-core-dialogs.mjs",
+      "default": "./fesm2020/covalent-core-dialogs.mjs"
+    },
+    "./dynamic-menu": {
+      "types": "./dynamic-menu/covalent-core-dynamic-menu.d.ts",
+      "esm2020": "./esm2020/dynamic-menu/covalent-core-dynamic-menu.mjs",
+      "es2020": "./fesm2020/covalent-core-dynamic-menu.mjs",
+      "es2015": "./fesm2015/covalent-core-dynamic-menu.mjs",
+      "node": "./fesm2015/covalent-core-dynamic-menu.mjs",
+      "default": "./fesm2020/covalent-core-dynamic-menu.mjs"
+    },
+    "./file": {
+      "types": "./file/covalent-core-file.d.ts",
+      "esm2020": "./esm2020/file/covalent-core-file.mjs",
+      "es2020": "./fesm2020/covalent-core-file.mjs",
+      "es2015": "./fesm2015/covalent-core-file.mjs",
+      "node": "./fesm2015/covalent-core-file.mjs",
+      "default": "./fesm2020/covalent-core-file.mjs"
+    },
+    "./json-formatter": {
+      "types": "./json-formatter/covalent-core-json-formatter.d.ts",
+      "esm2020": "./esm2020/json-formatter/covalent-core-json-formatter.mjs",
+      "es2020": "./fesm2020/covalent-core-json-formatter.mjs",
+      "es2015": "./fesm2015/covalent-core-json-formatter.mjs",
+      "node": "./fesm2015/covalent-core-json-formatter.mjs",
+      "default": "./fesm2020/covalent-core-json-formatter.mjs"
+    },
+    "./layout": {
+      "types": "./layout/covalent-core-layout.d.ts",
+      "esm2020": "./esm2020/layout/covalent-core-layout.mjs",
+      "es2020": "./fesm2020/covalent-core-layout.mjs",
+      "es2015": "./fesm2015/covalent-core-layout.mjs",
+      "node": "./fesm2015/covalent-core-layout.mjs",
+      "default": "./fesm2020/covalent-core-layout.mjs"
+    },
+    "./menu": {
+      "types": "./menu/covalent-core-menu.d.ts",
+      "esm2020": "./esm2020/menu/covalent-core-menu.mjs",
+      "es2020": "./fesm2020/covalent-core-menu.mjs",
+      "es2015": "./fesm2015/covalent-core-menu.mjs",
+      "node": "./fesm2015/covalent-core-menu.mjs",
+      "default": "./fesm2020/covalent-core-menu.mjs"
+    },
+    "./message": {
+      "types": "./message/covalent-core-message.d.ts",
+      "esm2020": "./esm2020/message/covalent-core-message.mjs",
+      "es2020": "./fesm2020/covalent-core-message.mjs",
+      "es2015": "./fesm2015/covalent-core-message.mjs",
+      "node": "./fesm2015/covalent-core-message.mjs",
+      "default": "./fesm2020/covalent-core-message.mjs"
+    },
+    "./search": {
+      "types": "./search/covalent-core-search.d.ts",
+      "esm2020": "./esm2020/search/covalent-core-search.mjs",
+      "es2020": "./fesm2020/covalent-core-search.mjs",
+      "es2015": "./fesm2015/covalent-core-search.mjs",
+      "node": "./fesm2015/covalent-core-search.mjs",
+      "default": "./fesm2020/covalent-core-search.mjs"
+    },
+    "./side-sheet": {
+      "types": "./side-sheet/covalent-core-side-sheet.d.ts",
+      "esm2020": "./esm2020/side-sheet/covalent-core-side-sheet.mjs",
+      "es2020": "./fesm2020/covalent-core-side-sheet.mjs",
+      "es2015": "./fesm2015/covalent-core-side-sheet.mjs",
+      "node": "./fesm2015/covalent-core-side-sheet.mjs",
+      "default": "./fesm2020/covalent-core-side-sheet.mjs"
+    },
+    "./user-profile": {
+      "types": "./user-profile/covalent-core-user-profile.d.ts",
+      "esm2020": "./esm2020/user-profile/covalent-core-user-profile.mjs",
+      "es2020": "./fesm2020/covalent-core-user-profile.mjs",
+      "es2015": "./fesm2015/covalent-core-user-profile.mjs",
+      "node": "./fesm2015/covalent-core-user-profile.mjs",
+      "default": "./fesm2020/covalent-core-user-profile.mjs"
+    }
   },
   "repository": {
     "type": "git",
@@ -23,32 +120,27 @@
   },
   "license": "MIT",
   "author": "Teradata UX",
-  "contributors": [
-    "Kyle Ledbetter <kyle.ledbetter@teradata.com>",
-    "Richa Vyas <richa.vyas@teradata.com>",
-    "Ed Morales <eduardo.morales@teradata.com>",
-    "Jason Weaver <jason.weaver@teradata.com>",
-    "Jeremy Wilken <jeremy.wilken@teradata.com>",
-    "Jeremy Smartt <jeremy.smartt@teradata.com>",
-    "Steven Ov <steven.ov@teradata.com>"
-  ],
   "peerDependencies": {
-    "@angular/common": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/core": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/forms": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/router": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/cdk": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/material": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0"
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@covalent/core": "4.1.0-develop.5",
+    "@angular/router": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/material": "^13.2.1",
+    "rxjs": "~7.4.0",
+    "@angular/animations": "^13.2.0",
+    "@angular/forms": "^13.2.0",
+    "@angular/cdk": "^13.2.1",
+    "@angular/platform-browser-dynamic": "^13.2.0"
   },
-  "main": "bundles/covalent-core.umd.js",
-  "module": "fesm2015/covalent-core.js",
-  "es2015": "fesm2015/covalent-core.js",
-  "esm2015": "esm2015/covalent-core.js",
-  "fesm2015": "fesm2015/covalent-core.js",
-  "typings": "covalent-core.d.ts",
-  "metadata": "covalent-core.metadata.json",
-  "sideEffects": false,
   "dependencies": {
     "tslib": "^2.0.0"
-  }
+  },
+  "module": "fesm2015/covalent-core.mjs",
+  "es2020": "fesm2020/covalent-core.mjs",
+  "esm2020": "esm2020/covalent-core.mjs",
+  "fesm2020": "fesm2020/covalent-core.mjs",
+  "fesm2015": "fesm2015/covalent-core.mjs",
+  "typings": "covalent-core.d.ts",
+  "sideEffects": false
 }

package/search/README.md

@@ -6,56 +6,56 @@
 
 #### Inputs
 
-+ backIcon?: string
-  + The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
-+ searchIcon?: string
-  + The icon used to open/focus the search toggle. Defaults to 'search' icon.
-+ clearIcon?: string
-  + The icon used to clear the search input. Defaults to 'cancel' icon.
-+ showUnderline?: boolean
-  + Sets if the input underline should be visible. Defaults to 'false'.
-+ debounce?: number
-  + Debounce timeout between keypresses. Defaults to 400.
-+ alwaysVisible?: boolean
-  + Sets if the input should always be visible. Defaults to 'false'.
-+ 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.
+- searchIcon?: string
+  - The icon used to open/focus the search toggle. Defaults to 'search' icon.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- showUnderline?: boolean
+  - Sets if the input underline should be visible. Defaults to 'false'.
+- debounce?: number
+  - Debounce timeout between keypresses. Defaults to 400.
+- alwaysVisible?: boolean
+  - Sets if the input should always be visible. Defaults to 'false'.
+- placeholder?: string
+  - Placeholder for the underlying input component.
 
 #### Events
 
-+ searchDebounce?: string
-  + Event emitted after the [debounce] timeout.
-  + Emits a [string].
-+ search?: string
-  + Event emitted after the key enter has been pressed.
-  + Emits a [string].
-+ clear?: string
-  + Event emitted after the clear icon has been clicked.
-  + Emits [void].
-+ blur: function
-  + Event emitted after the blur event has been called in underlying input.
-  + Emits [void].
+- searchDebounce?: string
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search?: string
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear?: string
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
 
 ## Usage
 
 Example for HTML usage:
 
 ```html
-<td-search-box 
-    backIcon="arrow_back" 
-    placeholder="Search here" 
-    [(ngModel)]="searchInputTerm" 
-    [showUnderline]="false|true" 
-    [debounce]="500" 
-    [alwaysVisible]="false|true" 
-    (searchDebounce)="searchInputTerm = $event" 
-    (search)="searchInputTerm = $event" 
-    (clear)="searchInputTerm = ''" 
-    (blur)="onBlurEvent()">
+<td-search-box
+  backIcon="arrow_back"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  [alwaysVisible]="false|true"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+  (blur)="onBlurEvent()"
+>
 </td-search-box>
 ```
 
-
 # TdSearchInputComponent: td-search-input
 
 `td-search-input` element to generate a search input with its animated cancel button.
@@ -64,53 +64,54 @@ Example for HTML usage:
 
 #### Inputs
 
-+ 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'.
-+ clearIcon?: string
-  + The icon used to clear the search input. Defaults to 'cancel' icon.
-+ appearance?: MatFormFieldAppearance
-  + Appearance style for the underlying input component.
+- 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'.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- appearance?: MatFormFieldAppearance
+  - Appearance style for the underlying input component.
 
 #### Events
 
-+ searchDebounce: function
-  + Event emitted after the [debounce] timeout.
-  + Emits a [string].
-+ search: function
-  + Event emitted after the key enter has been pressed.
-  + Emits a [string].
-+ clear: function
-  + Event emitted after the clear icon has been clicked.
-  + Emits [void].
-+ blur: function
-  + Event emitted after the blur event has been called in underlying input.
-  + Emits [void].
+- searchDebounce: function
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search: function
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear: function
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
 
 #### Methods
 
-+ focus: function
-  + Method to focus to underlying input.
-+ clearSearch: function
-  + Method to clear the underlying input. 
+- focus: function
+  - Method to focus to underlying input.
+- clearSearch: function
+  - Method to clear the underlying input.
 
 ## Usage
 
 Example for HTML usage:
 
 ```html
-<td-search-input 
-    appearance="legacy|standard|fill|outline"
-    placeholder="Search here" 
-    [(ngModel)]="searchInputTerm" 
-    [showUnderline]="false|true" 
-    [debounce]="500" 
-    (searchDebounce)="searchInputTerm = $event" 
-    (search)="searchInputTerm = $event" 
-    (clear)="searchInputTerm = ''">
+<td-search-input
+  appearance="legacy|standard|fill|outline"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+>
 </td-search-input>
 ```
 

package/search/covalent-core-search.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
+/// <amd-module name="@covalent/core/search" />
+export * from './public_api';

package/search/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-search.umd.js",
-  "module": "../fesm2015/covalent-core-search.js",
-  "es2015": "../fesm2015/covalent-core-search.js",
-  "esm2015": "../esm2015/search/covalent-core-search.js",
-  "fesm2015": "../fesm2015/covalent-core-search.js",
+  "module": "../fesm2015/covalent-core-search.mjs",
+  "es2020": "../fesm2020/covalent-core-search.mjs",
+  "esm2020": "../esm2020/search/covalent-core-search.mjs",
+  "fesm2020": "../fesm2020/covalent-core-search.mjs",
+  "fesm2015": "../fesm2015/covalent-core-search.mjs",
   "typings": "covalent-core-search.d.ts",
-  "metadata": "covalent-core-search.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/search"
-}
+}

package/search/search-box/search-box.component.d.ts

@@ -1,14 +1,15 @@
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { TdSearchInputComponent } from '../search-input/search-input.component';
-import { IControlValueAccessor } from '@covalent/core/common';
+import * as i0 from "@angular/core";
 export declare class TdSearchBoxBase {
     _changeDetectorRef: ChangeDetectorRef;
     constructor(_changeDetectorRef: ChangeDetectorRef);
 }
-export declare const _TdSearchBoxMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdSearchBoxBase;
-export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implements IControlValueAccessor {
+export declare class TdSearchBoxComponent implements ControlValueAccessor {
+    private _changeDetectorRef;
     private _searchVisible;
-    _searchInput: TdSearchInputComponent;
+    _searchInput?: TdSearchInputComponent;
     get searchVisible(): boolean;
     /**
      * backIcon?: string
@@ -48,6 +49,7 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
      * Placeholder for the underlying input component.
      */
     placeholder: string;
+    value: unknown;
     /**
      * searchDebounce: function($event)
      * Event emitted after the [debounce] timeout.
@@ -67,8 +69,11 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
      * blur: function()
      * Event emitted after the blur event has been called in underlying input.
      */
-    blur: EventEmitter<void>;
+    blurSearch: EventEmitter<void>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
+    writeValue(value: unknown): void;
+    registerOnChange(): void;
+    registerOnTouched(): void;
     /**
      * Method executed when the search icon is clicked.
      */
@@ -78,4 +83,6 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
     handleSearch(value: string): void;
     handleClear(): void;
     handleBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdSearchBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchBoxComponent, "td-search-box", never, { "backIcon": "backIcon"; "searchIcon": "searchIcon"; "clearIcon": "clearIcon"; "showUnderline": "showUnderline"; "debounce": "debounce"; "alwaysVisible": "alwaysVisible"; "placeholder": "placeholder"; "value": "value"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blurSearch": "blurSearch"; }, never, never>;
 }

package/search/search-input/search-input.component.d.ts

@@ -1,16 +1,17 @@
 import { OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { Dir } from '@angular/cdk/bidi';
 import { MatInput } from '@angular/material/input';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { IControlValueAccessor } from '@covalent/core/common';
+import * as i0 from "@angular/core";
 export declare class TdSearchInputBase {
     _changeDetectorRef: ChangeDetectorRef;
     constructor(_changeDetectorRef: ChangeDetectorRef);
 }
-export declare const _TdSearchInputMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdSearchInputBase;
-export declare class TdSearchInputComponent extends _TdSearchInputMixinBase implements IControlValueAccessor, OnInit {
+export declare class TdSearchInputComponent implements ControlValueAccessor, OnInit {
     private _dir;
-    _input: MatInput;
+    private _changeDetectorRef;
+    _input?: MatInput;
     /**
      * appearance?: MatFormFieldAppearance
      * Appearance style for the underlying input component.
@@ -37,6 +38,7 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * Defaults to 'cancel' icon.
      */
     clearIcon: string;
+    value?: unknown;
     /**
      * searchDebounce: function($event)
      * Event emitted after the [debounce] timeout.
@@ -56,10 +58,13 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * blur: function()
      * Event emitted after the blur event has been called in underlying input.
      */
-    blur: EventEmitter<void>;
+    blurSearch: EventEmitter<void>;
     get isRTL(): boolean;
     constructor(_dir: Dir, _changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(): void;
+    registerOnTouched(): void;
     /**
      * Method to focus to underlying input.
      */
@@ -72,4 +77,6 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      */
     clearSearch(): void;
     private _searchTermChanged;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdSearchInputComponent, [{ optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchInputComponent, "td-search-input", never, { "appearance": "appearance"; "showUnderline": "showUnderline"; "debounce": "debounce"; "placeholder": "placeholder"; "clearIcon": "clearIcon"; "value": "value"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blurSearch": "blurSearch"; }, never, never>;
 }

package/search/search.module.d.ts

@@ -1,2 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./search-input/search-input.component";
+import * as i2 from "./search-box/search-box.component";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/input";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/material/button";
 export declare class CovalentSearchModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSearchModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentSearchModule, [typeof i1.TdSearchInputComponent, typeof i2.TdSearchBoxComponent], [typeof i3.FormsModule, typeof i4.CommonModule, typeof i5.MatInputModule, typeof i6.MatIconModule, typeof i7.MatButtonModule], [typeof i1.TdSearchInputComponent, typeof i2.TdSearchBoxComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentSearchModule>;
 }

package/search/src/search-box/README.md

@@ -0,0 +1,73 @@
+# TdSearchBoxComponent: td-search-box
+
+`td-search-box` element to generate a search box with animations.
+
+## API Summary
+
+#### Inputs
+
+- backIcon?: string
+  - The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
+- searchIcon?: string
+  - The icon used to open/focus the search toggle. Defaults to 'search' icon.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- showUnderline?: boolean
+  - Sets if the input underline should be visible. Defaults to 'false'.
+- debounce?: number
+  - Debounce timeout between keypresses. Defaults to 400.
+- alwaysVisible?: boolean
+  - Sets if the input should always be visible. Defaults to 'false'.
+- placeholder?: string
+  - Placeholder for the underlying input component.
+
+#### Events
+
+- searchDebounce?: string
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search?: string
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear?: string
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
+
+## Setup
+
+Import the [CovalentSearchModule] in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/core/search';
+@NgModule({
+  imports: [
+    CovalentSearchModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+<td-search-box
+  backIcon="arrow_back"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  [alwaysVisible]="false|true"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+  (blur)="onBlurEvent()"
+>
+</td-search-box>
+```

package/search/src/search-input/README.md

@@ -0,0 +1,74 @@
+# TdSearchInputComponent: td-search-input
+
+`td-search-input` element to generate a search input with its animated cancel button.
+
+## API Summary
+
+#### Inputs
+
+- 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'.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- appearance?: MatFormFieldAppearance
+  - Appearance style for the underlying input component.
+
+#### Events
+
+- searchDebounce: function
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search: function
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear: function
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
+
+#### Methods
+
+- focus: function
+  - Method to focus to underlying input.
+- clearSearch: function
+  - Method to clear the underlying input.
+
+## Setup
+
+Import the [CovalentSearchModule] in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/core/search';
+@NgModule({
+  imports: [
+    CovalentSearchModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+<td-search-input
+  appearance="legacy|standard|fill|outline"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+>
+</td-search-input>
+```