npm package: @jm-7c3/common-lib
Description: Constains elements based on PrimeNG library.
Latest version: 20.1.0

# Common Lib

Constains elements based on PrimeNG library.

Now the major version matches the Angular version used in the project.

## Controls

Standalone UI controls, based on [PrimeNG](https://primeng.org) components.

### Button

Button with configurable styles.

#### Import

```
import {ButtonComponent} from '@jm-7c3/common-lib';
```

#### Implementation

```
<cl-button />
```

#### Inputs

| Input | Type | Default | Required | Description |
| - | - | - | - | - |
| color | 'danger', 'main', 'primary', 'secondary' | 'primary' | false | Style of the button |
| disabled | boolean | false | false | Disables de button when value is true |
| icon | string | | false | Icon to be displayed |
| label | string | | false | Label to be displayed |
| loading | boolean | false | false | Shows a loading animation when value is true |
| type | 'button', 'submit' | 'button' | false | Type of the button |

### Confirmation

Shows a confirmation dialog.

#### Import the component

import {ConfirmationDialogComponent} from '@jm-7c3/common-lib';

#### Add the component

Add the component to the root component's template.

```
<cl-confirmation />
```

#### Import the service

```
import {ConfirmationService} from '@jm-7c3/common-lib';
```

#### Inject the service

```
private readonly confirmationService = inject(ConfirmationService);
```

#### Methods

| Method | Description |
| - | - |
| confirm | Opens the confirmation dialog. An unique string key is required as a idenfier. |
| onAccept | Returns an observable that emits values when the Accept button (for the specified string key) is clicked. |
| onCancel | Returns an observable that emits values when the Cancel button (for the specified string key) is clicked. |

#### Example

Open the confirmation dialog.

```
const config: ConfirmationData = {
  ...
  key: 'confirmation-dialog'
  ...
};

this.confirmationService.confirm(config);
```

Subscribe to react when Accept button is cliked.

```
this.confirmationService.onAccept('confirmation-dialog').subscribe(() => {
  // Custom code here.
});
```

### Content Dialog

Shows the provided content in a dialog.

#### Import the component

import {ContentDialogComponent} from '@jm-7c3/common-lib';

#### Add the component

Add the component to the root component's template.

```
<cl-content-dialog />
```

#### Import the service

```
import {ContentDialogService} from '@jm-7c3/common-lib';
```

#### Inject the service

```
private readonly contentDialogService = inject(ContentDialogService);
```

#### Methods

| Method | Description |
| - | - |
| onCancel | Returns an observable that emits values when the Cancel button (for the specified string key) is clicked. |
| open | Opens the dialog. An unique string key is required as a idenfier. |

#### Example

Open the content dialog.

```
const config: ContentDialogData = {
  ...
  key: 'content-dialog'
  ...
};

this.contentDialogService.open(config);
```

Subscribe to react when Cancel button is cliked.

```
this.contentDialogService.onCancel('content-dialog').subscribe(() => {
  // Custom code here.
});
```

### Form Dialog

Shows the provided form in a dialog.

#### Import the component

import {FormDialogComponent} from '@jm-7c3/common-lib';

#### Add the component

Add the component to the root component's template.

```
<cl-form-dialog />
```

#### Import the service

```
import {FormDialogService} from '@jm-7c3/common-lib';
```

#### Inject the service

```
private readonly formDialogService = inject(FormDialogService);
```

#### Methods

| Method | Description |
| - | - |
| onCancel | Returns an observable that emits values when the Cancel button (for the specified string key) is clicked. |
| onSubmit | Returns an observable that emits the form's value when the Submit button (for the specified string key) is clicked. |
| open | Opens the dialog. An unique string key is required as a idenfier. |

#### Example

Open the form dialog.

```
const config: FormDialogData = {
  ...
  key: 'form-dialog'
  ...
};

this.formDialogService.open(config);
```

Subscribe to react when Submit button is cliked.

```
this.formDialogService.onSubmit('content-dialog').subscribe(formValue => {
  // Custom code here.
});
```

### Icon Button

Button to display only the icon with configurable styles.

#### Import

```
import {IconButtonComponent} from '@jm-7c3/common-lib';
```

#### Implementation

```
<cl-icon-button />
```

#### Inputs

| Input | Type | Default | Required | Description |
| - | - | - | - | - |
| disabled | boolean | false | false | Disables de button when value is true |
| icon | string | | false | Icon to be displayed |
| loading | boolean | false | false | Shows a loading animation when value is true |
| severity | '', 'danger', 'help', 'info', 'secondary', 'success', 'warning' | '' | false | Style of the button |
| type | 'button', 'submit' | 'button' | false | Type of the button |

### Progress Bar Dialog

Displays a dialog with a progress bar animation.

#### Import the component

import {ProgressBarDialogComponent} from '@jm-7c3/common-lib';

#### Add the component

Add the component to the root component's template.

```
<cl-progress-bar-dialog />
```

#### Import the service

```
import {ProgressBarDialogService} from '@jm-7c3/common-lib';
```

#### Inject the service

```
private readonly progressBarDialogService = inject(ProgressBarDialogService);
```

#### Methods

| Method | Description |
| - | - |
| close | Closes the dialog |
| open | Displays the dialog |

### Readonly Value

Displays the provided label and value.

#### Import

```
import {ReadonlyValueComponent} from '@jm-7c3/common-lib';
```

#### Implementation

```
<cl-readonly-value />
```

#### Inputs

| Input | Type | Default | Required | Description |
| - | - | - | - | - |
| label | string | | false | Label to be displayed |
| value | any | | false | Value to be displayed |

### Toasts

Shows toast notification.

#### Import the component

import {ToastsComponent} from '@jm-7c3/common-lib';

#### Add the component

Add the component to the root component's template.

```
<cl-toats />
```

#### Import the service

```
import {ToastsService} from '@jm-7c3/common-lib';
```

#### Inject the service

```
private readonly toastsService = inject(ToastsService);
```

#### Methods

| Method | Description |
| - | - |
| toastError | Displays a toast notifications styled for errors. |
| toastSuccess | Displays a toast notifications styled for success. |
| toastWarning | Displays a toast notifications styled for warning. |

## Forms

Standalone UI form input controls, based on [PrimeNG](https://primeng.org) components, to be used in Reactive Forms.

### Base Form

Contains base value accessor functionality for other components to extend from.

#### Implementation

```
import { BaseFormComponent } from '@jm-7c3/common-lib';

class Step1FormComponent extends BaseFormComponent {
  ...
}
```

### File Input

Input to select a single file.

#### Import

```
import {FileInputComponent} from '@jm-7c3/sp-integration';
```

#### Implementation

```
<cl-file-input />
```

#### Inputs

| Input | Type | Default | Required | Description |
| - | - | - | - | - |
| directory | string | '' | false | Path to the directory where the files is stored. |
| icon | string | 'pi pi-plus' | false | Prime icon being used. |
| label | boolean | 'Browse' | false | Label for the input control. |
| readonly | string | | false | Disables the input control. |

#### Outputs

| onDownload | Type | Description |
| - | - | - |
| onDownload | FileInput[] | Returns the file to be downloaded. |

### File Inputs

Inputs to select a single file.

#### Import

```
import {FileInputsComponent} from '@jm-7c3/sp-integration';
```

#### Implementation

```
<cl-file-inputs />
```

#### Inputs

| Input | Type | Default | Required | Description |
| - | - | - | - | - |
| directory | string | '' | false | Path to the directory where the files is stored. |
| icon | string | 'pi pi-plus' | false | Prime icon being used. |
| label | boolean | 'Browse' | false | Label for the input control. |
| max | number | 5 | false | Maximum number of file controls allowed. |
| readonly | string | | false | Disables the input control. |

#### Outputs

| onDownload | Type | Description |
| - | - | - |
| onDownload | FileInput[] | Returns the file to be downloaded. |

### Form Field

A wrapper component for form controls.

#### Import

```
import {FormFieldComponent} from '@jm-7c3/sp-integration';
```

#### Implementation

```
<cl-form-field>
  <ff-label>Name</ff-label>
  <input formControlName="Name" pInput type="text" />
  <ff-error>
    This field is required
  <ff-error>
</cl-form-field>
```