Centeva-Core

This is an open source project. If you would like to contribute, check out the repo.

• Installation
• Components
  • Loading
  • Table
• Pipes
  • Capitalize
  • CelsiusToFahrenheit
  • Date
  • Dynamic
  • HighLight
  • MiddleDot
  • OrderBy
  • Percentage
  • PhoneNumber
  • Reverse
  • SafeHtml
• Directives
  • ClickOutside
  • NumberInput
• Utils
  • EmailValidation
  • PhoneValidation
  • SortByKey
  • Build CSV String
  • Build CSV Link

Installation

Using npm:

npm i centeva-core --save

Compatibility

| Version | Angular Compatibility | | - | - | | 4.x | 14.x | | 5.x | 15.x, 16.x (MDC-based Material) | | 6.x | 17.x, 18.x |

Components

Loading Component

Module Import

import {LoadingModule} from 'centeva-core';

Usage:

let isLoading = true;

<app-loading [loadingText]="'Loading Results..'" *ngIf="isLoading"></app-loading>

Loading Preview

Searchable Table

This table works with the PREQL nuget package. You will want to implement that on the backend to use this table.

Module Import

import {TableModule} from 'centeva-core';

API

Properties

| Name | Description | | ---- | ----------- | | @Input('isLoading')type: boolean | Whether or not data is loading. When this is set to true, a spinner will overlay on top of the table | @Input('tableLoadingText')type: string | Text that will appear when the table data is loading. Defaults to 'Loading Results..' | @Input('dataSource')type: AdvancedSearchResultsPage | Data source | @Input('currentFilter')type: SearchCriteriaRequest | Contains infomration on the current search request. | @Input('displayedColumns')type: TableColumn[] | This contains a list of the columns to display and the column types. | @Input('isRowClickable')type: boolean | If enabled, clicking anywhere on the table row will event the same event. Defaults to true. | @Input('noResultsText')type: string | Text that will be displayed on table when there are no results. Defaults to 'No results to display.' | @Output('searchChanged')type: SearchCriteriaRequest | Outputs when a filter or sort direction is changed. | @Output('rowSelected') | Outputs the row that was just clicked. Note: this is only available if the input isRowClickable is set to true. | @Output('columnSelected')Type: TableEmittedColumnClick | Outputs the column name, and the data in that row when a column was clicked. Note: this is only emitted if the column has the property isColumnClickable

Usage

import {AdvancedSearchResultsPaged, SearchCriteriaRequest, TableColumn} from 'centeva-core';
let isLoading: boolean;
let dataSource: AdvancedSearchResultsPaged;
let currentFilter: SearchCriteriaRequest;
let displayedColumns: TableColumn[];

<app-table [tableLoading]="isLoading" [dataSource]="dataSource" [currentFilter]="currentFilter" [displayedColumns]="displayedColumns" 
(searchChanged)="searchChanged($event)" (rowSelected)="rowSelected($event)"></app-table>

Table Preview

Pipes

Import:

import {CorePipesModule} from 'centeva-core';

Capitalize Pipe

Usage:

<span>{{'bob' | capitalize}}</span> ==> Bob

CelsiusToFahrenheit Pipe

Usage:

<span>{{0 | celsiusToFahrenheit}}</span> ==> 32

Date Pipe

Usage:

let date = new Date('01-01-2001');

<span>{{ date | date: 'YYYY-MM-DD'}}</span> ==> 2001-01-01

Dynamic Pipe

Usage:

let date = new Date('01-01-2001');
let datePipe = new DatePipe();

<span>{{ date | dynamic: datePipe:'YYYY-MM-DD'}}</span> ==> 2001-01-01

Highlight Pipe

Must set a css class named .highlight-text. This will put the styling you prefer on the highlighted value.

Usage:

let searchText = 'test';

<a target="_blank" class="title" href="{{URL}}" [innerHtml]="Name | highlight: searchText | safeHtml"></a>

MiddleDot Pipe

Usage:

<div>{{'dotMe' | middleDot}}</div> === 'd∙o∙t∙M∙e'

OrderBy Pipe

The first argument after orderBy is a list of fields to sort by. The second argument is a list of sort orders for each field; if this list is omitted it sorts by ascending order. If both arguments are omitted, the original collection is returned unsorted.

Usage:

const myCollection = [
    { lastName: 'Smith', firstName: 'John', age: 54 },
    { lastName: 'Marsh', firstName: 'Isabella', age: 41 }
    { lastName: 'Marsh', firstName: 'Franklin', age: 44 }];

<div *ngFor="col of myCollection | orderBy: ['lastName', 'age'], [SortOrder.Ascending, SortOrder.Descending]">
    {{col.lastName}}, {{col.firstName}} - {{col.age}}
</div>

Percentage Pipe

Return any value as a percentage

Usage:

<div>{{.872345 | percentage}}</div> === 87

Phone Number Pipe

Format any Phone Number on the fly.

Usage:

<div>{{435123456 | phoneNumber}}</div> === (435)123-3456

Reverse Pipe

Reverse any array.

Usage:

let arr = [1, 2, 3];

<div>{{arr | reverse}}</div> === [3, 2, 1]

SafeHtml Pipe

Bind to innerHtml safely with this pipe.

Usage:

<a target="_blank" class="title" href="{{URL}}" [innerHtml]="Name | safeHtml"></a>

Directives

ClickOutside Directive

Fire an event if a click happens anywhere outside of the element.

Usage:

let showValue = true;

<div *ngIf="showValue" (clickOutside)="showValue = false;">
    <span>VALUE</span>
</div>

NumberInput Directive

Disallow Any key except a number.

Usage:

<input numberInput [(ngModel)]="model"/>

Utils

Email Validation

Usage:

const emailValid = Utils.IsValidEmail('a'); ==> false;
const emailValid = Utils.IsValidEmail('[email protected]'); ==> true;

Phone Validation

Usage:

const emailValid = Utils.IsValidPhoneNumber('12345'); ==> false;
const emailValid = Utils.IsValidPhoneNumber('12345xa'); ==> false;
const emailValid = Utils.IsValidPhoneNumber('4351234567'); ==> true;
const emailValid = Utils.IsValidPhoneNumber('14351234567'); ==> true;

Sort By Key

Usage:

const list = [
{name: '103'},
{name: '102'},
{name: '104'},
{name: '105'},
{name: '101'},
];
const sortedList = Utils.SortByKey(list, 'name');

Build CSV String

Usage:

const ArrayVal = [['Header 1', 'Header 2'], ['Value 1', 'Value 2']];
const csv = Utils.buildCSVString(ArrayVal); ===> `"Header 1","Header 2"\n"Value 1","Value 2"`;

Build CSV Link

Build a CSV link from array that can be used to download CSV.

Usage:

const ArrayVal = [['Header 1', 'Header 2'], ['Value 1', 'Value 2']];
const csv = Utils.buildCSVLink(ArrayVal); ===> HTMLAnchorElement