Common Lib

Constains elements based on Angular Material, PrimeNG and Tailwind CSS libraries.

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

PrimeNG based components and functionality will be removed in future versions.

Controls

Standalone UI controls.

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 |

Mat Confirmation

Shows a confirmation dialog using Angular Material components.

Import the service

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

Inject the service

private readonly matConfirmationService = inject(MatConfirmationService);

Methods

| Method | Description | | - | - | | confirm | Opens the confirmation dialog. Returns an observable with a boolean value. |

Example

Open the confirmation dialog and subscribe to the result.

const config: MatConfirmationData = {
  message: 'Message to be displayed in the dialog.',
  title: 'Dialog Title'
};

this.matConfirmationService.confirm(config).subscribe(result => {
  // Custom code here.
});

Mat Form Dialog

Shows the provided form in a dialog using Angular Material components.

Import the service

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

Inject the service

private readonly matFormDialogService = inject(MatFormDialogService);

Methods

| Method | Description | | - | - | | open | Opens the Angular Material dialog component displaying the form. It returns an observable with the form's value.|

Example

Open the form dialog and subscribe to the result.

const config: MatFormDialogData = {
  component: FormComponent
};

this.matFormDialogService.open(config).subscribe(formValue => {
  // Custom code here.
});

Panel

Display a panel with header, content and footer sections.

Import the component

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

Examples

Display the panel with custom content. For the title you can use the title input or un ng-template with #titleContent.

<cl-panel title="Panel Title">
  <ng-template #contentTemplate>
    // Custom content here.
  </ng-template>
  <ng-template #footerTemplate>
    // Custom footer content here.
  </ng-template
</cl-panel>

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.

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/common-lib';

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/common-lib';

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/common-lib';

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>

Mat File Input

Input to select a single file using Angular Material components.

Import

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

Implementation

<cl-mat-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. |

Mat File Inputs

Inputs to select a single file using Angular Material components.

Import

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

Implementation

<cl-mat-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. |