Brni Library

Last stable version released: none.

Last version released: beta-version (0.0.11)

Introduction

This library mainly built with Angular 9.1.9, Rxjs 6.5.5 and CSS Spinner by LukeHaas (https://projects.lukehaas.me/css-loaders/).

Brni Library provides a component (BL-Search-Google-Like-Component) for simulating the google like searching highly customable.

Installation

With NPM:

npm install --save brni-library

Usage

In your Angular module:

.....

import {BrniLibraryModule} from 'brni-library';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    BrniLibraryModule
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Styling

You can personalize the color and the font-size, used by Brni’s Library, declaring two custom CSS variables in your stylesheet (for example styles.scss)

For Example:

:root {
—lib-brni-primary-color: orange;
—lib-brni-font-size: “small”;
}

If you don’t declare these two custom CSS variables (—lib-brni-primary-color and —lib-brni-font-size) or for browser don’t support CSS variables, the library uses the default values: #0085AD and “medium”.

BL-Search-Google-Like-Component

Example with Static DataSource (debounceTime 500ms):

Example with Static DataSource (debounceTime 3000ms):

Example with Dynamic DataSource (debounceTime 500ms):

Input Parameters

• placeholder (type: string - default value: “Enter text”): placeholder for the input tag

• debounceTime (type: number - default value: 500): milliseconds of debounce time for the input tag

• isDynamicDataSource (type: boolean - default value: false): the dataSource can be dynamic or not. The static DS will never changes independly which user enters on the input tag. The dynamic DS will change each time user digits a text on the input tag and debounce time expires

• dataSourceObj (type: IBLDataSource): Datasource which contains all items selectable

The type of dataSourceObj must be:

IBLDataSource<T>
{
  searchedValue?: string,
  dataSource: T[];
}

The searchedValue parameter (inside the IBLDataSource type) must contains the searchText inserted by the user and returned by the Output Event Emitter searchedValue. For Non-Dynamic DataSource, the searchedValue parameter is optional.

• dataSourcePropertyToUse (type: string - default value: null): if the type T of datasource’s item is a string, this parameter is optional (must be null). Otherwise, this parameter must corresponds to the name of object’s parameter which we want to use for the searching

• noResultsFound (type: string - default value: “No results found”)

• heightInputText (type: string - default value: “30px”)

• maxHeightDropdown (type: string - default value: “200px”)

• width (type: string - default value: “200px”)

• delayBlurEvent (type: number - default value: 150)

Output Parameters

• searchedValue (type: EventEmitter): text inside the input tag. This EventEmitter fires when debounce time expires or when user click on a item inside the dropdown.

• selectedValue (type: EventEmitter): item (of the datasource) selected by the user in the dropdown

• waitingForDataSource (type: EventEmitter): EventEmitter “active” for dynamic datasource. When user enter text inside the input tag and debounce time expires, the Component start waiting for datasource (emitting true). In the dropdown appears a spinner until the datasource will be received by the component (detected by searchedValue parameter in IBLDataSource Type). When datasource will be received, this EventEmitter emits false.

License

MIT