open-index/open-npm huggingface dataset:
npm package: @finlexlabs/animations
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
Latest version: 0.0.1

# FinlexAnimations

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.

## Code scaffolding

Run `ng generate component component-name --project finlex-animations` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project finlex-animations`.
> Note: Don't forget to add `--project finlex-animations` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build finlex-animations` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

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

## Running unit tests

Run `ng test finlex-animations` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @finlexlabs/common-services
Description: Library Name: finlex-common-services
Latest version: 0.0.44

# FinlexCommonServices (@finlexlabs/common-services)

Library Name: finlex-common-services

Package Name: @finlexlabs/common-services

Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `src/finlex-common-services/package.json`
Rename package name from `finlex-common-services` to `@finlexlabs/common-services`


## Build

 `npm run build:common-services`

It will build finlex-confirm-dialog using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

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


--------------------------------
Services in this package
--------------------------------

## Services
1. AuthCommonService
2. OfficeSharedService
3. OfficeMetadataService
4. HttpService
5. LocalStorageService
6. TextFormaterService
7. FinlexConfigService
8. FinlexMatchMediaService
9. FinlexSplashScreenService

## Guard
1. AuthGuard

## Interceptors
1. HttpErrorResponseInterceptor
2. TokenInterceptor

## Classes
1. CurrentUser
2. Settings
3. Styling

## enum
1. LOCAL_STORAGE_NAMES
2. AUTH_TOKEN_NAMES
3. AUTH_TOKEN_KEYS

## Scripts
1. env-metadata: a script that injects environment metadata to the environment files of the web apps.
npm package: @finlexlabs/connectivity-status
Description: Library Name: finlex-connectivity-status Package Name: @finlexlabs/connectivity-status Repo Name: fx-ng-components
Latest version: 0.0.1

# FinlexConnectivityStatus (@finlexlabs/connectivity-status)

Library Name: finlex-connectivity-status
Package Name: @finlexlabs/connectivity-status
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `src/finlex-connectivity-status/package.json`
Rename package name from `finlex-connectivity-status` to `@finlexlabs/connectivity-status`


## Build

 `npm run build:connectivity-status`

It will build finlex-connectivity-status using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `npm run build:connectivity-status`, go to the dist folder `cd dist/finlex-connectivity-status` and run `npm publish`.
npm package: @finlexlabs/dialog
Description: Library Name: finlex-confirm-dialog Package Name: @finlexlabs/dialog Repo Name: fx-ng-components
Latest version: 0.0.8

# FinlexConfirmDialog (@finlexlabs/dialog)

Library Name: finlex-confirm-dialog
Package Name: @finlexlabs/dialog
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-confirm-dialog/package.json`
Rename package name from `finlex-confirm-dialog` to `@finlexlabs/dialog`


## Build

 `npm run build:dialog`

It will build finlex-confirm-dialog using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `ng build:dialog`, go to the dist folder `cd dist/finlex-confirm-dialog` and run `npm publish`.
npm package: @finlexlabs/directives
Description: Library Name: finlex-directives
Latest version: 0.0.2

# FinlexDirectives (@finlexlabs/directives)

Library Name: finlex-directives

Package Name: @finlexlabs/directives

Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-directives/package.json`
Rename package name from `finlex-directives` to `@finlexlabs/directives`


## Build

 `npm run build:directives`

It will build finlex-directives using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

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


---
# FinlexTruncateWithLabelDirective

#### Background knowledge:

1. [Read here](https://angular.io/api/core/Directive) an intro to Angular Directive

2. [Read here](https://angular.io/guide/attribute-directives) an intro to Angular attribute directives
  

---

## (TL;DR) Simple example to use FinlexTruncateWithLabelDirective:

#### module.ts

```
import { FinlexDirectivesModule } from '@finlexlabs/directives';

@NgModule({
	imports: [
		FinlexDirectivesModule
	]
)

export class ProductsModule { }

```

#### view.ts

```
<h1 truncateWithLabel="10">This is product title<h1>
```

---

## FinlexTruncateWithLabelDirective class

1. This class is inheriting [MatTooltip](https://material.angular.io/components/tooltip/api) to show tooltip on hover.

2. Explanation of each type property value and other properties of FinlexTruncateWithLabelDirective will follow below.

```
<h1 truncateWithLabel="10">This is product title<h1>
```

### FinlexTruncateWithLabelDirective properties:

### Properties

* truncateWithLabel (type: number) -> The will be set when using this directive on any element.

* innerText (type: string) (scope: private) -> this will store the original text of the element. This property will be set on ngAfterViewInit lifecycle hook. 

> NOTE: all properties of MatTooltip Directive are also available and can be set on element. See example below.

  ```
<h1 truncateWithLabel="10" matTooltipClass="example-tooltip">This is product title<h1>
```

> The FinlexTruncateWithLabelDirective constructor object takes properties as required by MatTooltip. 

  

### Functions

* truncate: (params: none) -> used to replace original text with truncated text and also set `message` property of `MatTooltip`. 


---
# FinlexPerfectScrollbarDirective
npm package: @finlexlabs/forms
Description: Library Name: finlex-forms Package Name: @finlexlabs/forms Repo Name: fx-ng-components
Latest version: 0.0.48

# FinlexForms (@finlexlabs/forms)

Library Name: finlex-forms
Package Name: @finlexlabs/forms
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-forms/package.json`
Rename package name from `finlex-forms` to `@finlexlabs/forms`


## Build

 `npm run build:forms`

It will build finlex-forms using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

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

---
This package contains following Finlex modules:

* FinlexFormArray

* FinlexFormControl

    Read more about this component [here](https://bitbucket.org/finlex-development-team/fx-ng-components/src/master/src/finlex-forms/src/lib/finlex-form-control/readme.md).

* FinlexFormGroup

    Read more about this component [here](https://bitbucket.org/finlex-development-team/fx-ng-components/src/master/src/finlex-forms/src/lib/finlex-form-group/readme.md).


>NOTE: Until we have a better solution for theming, the `overridematerial-form-field.scss` is provided by @finlex/layout package even though its actually only related to @finlexlabs/forms. This should change in the future.
- The reason why its like this is because currently, we are overriding some css (e.g. material-tabs css) that is not part of any component inside `finlexlabs/forms` so it cannot be supplied independantly.
npm package: @finlexlabs/info-box
Description: Library Name: finlex-info-box Package Name: @finlexlabs/info-box Repo Name: fx-ng-components
Latest version: 0.0.6



# FinlexInfoBox (@finlexlabs/info-box)

Library Name: finlex-info-box
Package Name: @finlexlabs/info-box
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-info-box/package.json`
Rename package name from `@fx-ng-components/finlex-info-box` to `@finlexlabs/info-box`


## Build

 `npm run build:info-box`

It will build finlex-confirm-dialog using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `ng build:info-box`, go to the dist folder `cd dist/finlex-info-box` and run `npm publish`.
npm package: @finlexlabs/loader
Description: Library Name: finlex-loader Package Name: @finlexlabs/loader Repo Name: fx-ng-components
Latest version: 0.0.1

# FinlexLoader (@finlexlabs/loader)

Library Name: finlex-loader
Package Name: @finlexlabs/loader
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-loader/package.json`
Rename package name from `finlex-loader` to `@finlexlabs/loader`


## Build

 `npm run build:loader`

It will build finlex-loader using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `ng build:loader`, go to the dist folder `cd dist/finlex-loader` and run `npm publish`.
npm package: @finlexlabs/logger
Latest version: 0.0.1

# FinlexLogger (@finlexlabs/logger)


Library Name: finlex-logger

Package Name: @finlexlabs/logger

Repo Name: fx-ng-components

## Description:
There's a lot of risk in instantiating the logger outside of angular's DI that the logger updates it's dependencies and breaks your code.

The solution is to instantiate the logger using a class that supports Angular DI, and create a singleton that your non-angular files can use.

Import logger in any of the non-angular files you can just import the instance of NGXLogger.

 

## When to use this module:

Only when the angular’s dependency is not available (e.g. model, a class outside angular, etc)

## When not to use this module:

If the ngx-logger can be imported and instantiated using the normal Angular DI (e.g. components, services, pipes that have angular DI available).


--------------------------------

Steps to Build & Publish Library

--------------------------------


## Package Renaming


Go to `./src/finlex-logger/package.json`

Rename package name from `finlex-logger` to `@finlexlabs/logger`



## Build


 `npm run build:logger`


It will build finlex-logger using ng-packagr.

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



## Publishing


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


---
# FinlexLogger


#### app.component.ts
Instantiate the logger
```
import { NGXLogger } from 'ngx-logger';
import { initLogger, logger } from '@finlexlabs/logger';

constructor( logger: NGXLogger ) {
    initLogger(logger);
}
```

#### file.ts
Import `logger` into files where angular's DI is not available
```
import { logger } from '@finlexlabs/logger';


logger.debug("Debug message");
logger.error("error message");
logger.warn("warn message");
```
npm package: @finlexlabs/photo-upload
Description: Library Name: finlex-photo-upload Package Name: @finlexlabs/photo-upload Repo Name: fx-ng-components
Latest version: 0.0.1

# FinlexInfoBox (@finlexlabs/photo-upload)

Library Name: finlex-photo-upload
Package Name: @finlexlabs/photo-upload
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-photo-upload/package.json`
Rename package name from `@fx-ng-components/finlex-photo-upload` to `@finlexlabs/photo-upload`


## Build

 `npm run build:photo-upload`

It will build finlex-confirm-dialog using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `ng build:photo-upload`, go to the dist folder `cd dist/finlex-photo-upload` and run `npm publish`.
npm package: @finlexlabs/snackbar
Description: Library Name: finlex-snackbar Package Name: @finlexlabs/Snackbar Repo Name: fx-ng-components
Latest version: 0.0.2

# FinlexSnackbar (@finlexlabs/Snackbar)

Library Name: finlex-snackbar
Package Name: @finlexlabs/Snackbar
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `src/finlex-snackbar/package.json`
Rename package name from `finlex-snackbar` to `@finlexlabs/Snackbar`


## Build

 `npm run build:snackbar`

It will build finlex-snackbar using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

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


## Snackbar Component Usage

```
// /src/app/app.module.ts

import { SnackbarModule } from '@finlexlabs/snackbar';

@NgModule({
  declarations: [AppComponent],
  imports: [
    SnackbarModule, // needed for centralized error handling

    // other imports
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

```

To add a link to snackbar
```
import { SnackbarService } from '@finlexlabs/snackbar';

constructor(private snackBarService: SnackbarService) {}


this.snackBarService.success('Title', 'Description goes here...', {
            link: { label: 'Go to Google', url: 'http://www.google.com' }
        });
```
npm package: @finlexlabs/text-editor
Description: Library Name: finlex-text-editor Package Name: @finlexlabs/text-editor Repo Name: fx-ng-components
Latest version: 0.0.1

# FinlexTextEditor (@finlexlabs/text-editor)

Library Name: finlex-text-editor
Package Name: @finlexlabs/text-editor
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-text-editor/package.json`
Rename package name from `finlex-text-editor` to `@finlexlabs/text-editor`


## Build

 `npm run build:text-editor`

It will build finlex-text-editor using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `ng build:text-editor`, go to the dist folder `cd dist/finlex-text-editor` and run `npm publish`.
npm package: @finlexlabs/tiles
Latest version: 0.0.2

# 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
```typescript

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

@NgModule({
	imports: [
		FinlexTilesModule
	]
)

export class MainModule { }

```

#### view.ts
```typescript

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

```

#### view.html
```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
```typescript

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

@NgModule({
	imports: [
		FinlexTilesModule
	]
)

export class MainModule { }

```

#### view.html
```html

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

```