@next-level-integration/search-bar

Install:

npm install @next-level-integration/search-bar

Importing:

import { NliSearchBarModule } from '@next-level-integration/search-bar';

Add this to the styles:

.nli-primary {
color: mat-color($primary-color) !important;
}
.nli-accent {
color: mat-color($accent-color) !important;
}
.nli-warn {
color: mat-color($warn-color) !important;
}
.nli-primary-bg {
background-color: mat-color($primary-color) !important;
}
.nli-accent-bg {
background-color: mat-color($accent-color) !important;
}
.nli-warn-bg {
background-color: mat-color($warn-color) !important;
}
.nli-primary-border {
border-color: mat-color($primary-color) !important;
border-top-color: mat-color($primary-color) !important;
border-bottom-color: mat-color($primary-color) !important;
border-left-color: mat-color($primary-color) !important;
border-right-color: mat-color($primary-color) !important;
}
.nli-accent-border {
border-color: mat-color($accent-color) !important;
border-top-color: mat-color($accent-color) !important;
border-bottom-color: mat-color($accent-color) !important;
border-left-color: mat-color($accent-color) !important;
border-right-color: mat-color($accent-color) !important;
}
.nli-warn-border {
border-color: mat-color($warn-color) !important;
border-top-color: mat-color($warn-color) !important;
border-bottom-color: mat-color($warn-color) !important;
border-left-color: mat-color($warn-color) !important;
border-right-color: mat-color($warn-color) !important;
}

Usage

HTML

<nli-search-bar placeHolder="Search" (onSearch)="search($event)" value="Search...">
</nli-search-bar>

Changelog:

• 1.0.0 Initial version
• 1.0.1 small fixes
• 2.0.0 Moved from BrowserModule and BrowserAnimationsModule to CommonModule
• 2.0.1 Fixed search bar CSS
• 2.0.2 Fixed search bar CSS for IE
• 2.0.3 Fixed search bar CSS for IE