ComponentsLib

This is the UI components library for BlueKey frontend projects.

Table component

The bluekey-core-table component is used to display a table with the data provided through the table input. It also provides event outputs for rowClickEvent and addRowEvent.

Inputs

table: This input is used to pass the Table data to the component. showLoader: This input is used to pass a boolean toggling a loader. highlightRowIdentifier: This input is used to highlight a row in the table (used for deeplinking). error: This is the error object returned by the API's response. It is used to display an error message.

Outputs

rowClickEvent: This event is emitted when a row in the table is clicked, and it provides the clicked row data. addRowEvent: This event is emitted when the add row button is clicked, and it provides the command button data consisting of:

{
    "text": "Add Row",
    "command": "post",
    "style": "",
    "uri": "endpoint",
    "buttonType": "standard"
}

Example usage

<bluekey-core-table
    [table]="tableData"
    [error]="errorObj"
    [highlightRowIdentifier]="identifier"
    (addRowEvent)="handleFunction($event)"
    (rowClickEvent)="handleFunction($event)"
></bluekey-core-table>

Sidebar Component

The bluekey-core-sidebar component is used to display a navigation sidebar with links provided through the navLinks input. It allows customization of the sidebar's style via the sidebarStyle input and controls the expansion state of the sidebar.

Inputs

navLinks: This input is used to pass the navigation links to the sidebar. Each link should be an object of type NavLinks, which includes properties for the link text, URL, and any icon.

sidebarStyle: This input is used to customize the sidebar's appearance, including its background color and text color. The expected object is of type SidebarStyle with properties for backgroundColor and textColor.

Properties

isExpanded: A boolean property that controls the expansion state of the sidebar. It is true by default, indicating that the sidebar is expanded.

Example Usage

<bluekey-core-sidebar
    [navLinks]="links"
    [sidebarStyle]="{
        backgroundColor: '#333',
        textColor: '#fff'
    }"
></bluekey-core-sidebar>

Code scaffolding

Run ng generate component component-name --project components-lib to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project components-lib.

Note: Don't forget to add --project components-lib or else it will be added to the default project in your angular.json file.

Build

Run ng build components-lib to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build components-lib, go to the dist folder cd dist/components-lib and run npm publish.