Common Lib

Constains elements based on PrimeNG library.

Controls

Standalone UI controls, based on PrimeNG 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 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>