FinlexTiles (@finlexlabs/tiles)

Library Name: finlex-tiles

Package Name: @finlexlabs/tiles

Repo Name: fx-ng-components

Steps to Build & Publish Library

Package Renaming

Go to ./src/finlex-tiles/package.json

Rename package name from finlex-tiles to @finlexlabs/tiles

Build

npm run build:tiles

It will build finlex-tiles using ng-packagr.

The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with npm run build:tiles, go to the dist folder cd dist/finlex-tiles and run npm publish.

(TL;DR) Simple example to use Finlex Tiles:

module.ts

import { FinlexTilesModule } from '@finlexlabs/tiles';

@NgModule({
	imports: [
		FinlexTilesModule
	]
)

export class MainModule { }

view.ts

  public tileConfig = {
    icon: "security",
    title: "D & O",
    description: "120 All finished contracts",
    percentage: 64,
    color: "accent"
  }

view.html

 <finlex-tiles [icon]="tileConfig.icon"
                 [title]="tileConfig.title"
                 [description]="tileConfig.description"
                 [percentage]="tileConfig.percentage"
                 [color]="tileConfig.color"></finlex-tiles>

(TL;DR) Simple example to use Finlex Circular Progress:

module.ts

import { FinlexTilesModule } from '@finlexlabs/tiles';

@NgModule({
	imports: [
		FinlexTilesModule
	]
)

export class MainModule { }

view.html

 <finlex-circular-progress [value]="60"></finlex-circular-progress>