@jm-7c3/common-lib 21.1.0 → 22.1.0

package/README.md

@@ -1,12 +1,12 @@
 # Common Lib
 
-Constains elements based on PrimeNG library.
+Constains elements based on Angular Material and PrimeNG libraries.
 
 Now the major version matches the Angular version used in the project.
 
 ## Controls
 
-Standalone UI controls, based on [PrimeNG](https://primeng.org) components.
+Standalone UI controls, based on [Angular Material](https://material.angular.dev/) and [PrimeNG](https://primeng.org) components.
 
 ### Button
 
@@ -156,7 +156,9 @@ Shows the provided form in a dialog.
 
 #### Import the component
 
+```
 import {FormDialogComponent} from '@jm-7c3/common-lib';
+```
 
 #### Add the component
 
@@ -234,6 +236,79 @@ import {IconButtonComponent} from '@jm-7c3/common-lib';
 | 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.
+});
+```
+
 ### Progress Bar Dialog
 
 Displays a dialog with a progress bar animation.
@@ -353,7 +428,7 @@ Input to select a single file.
 #### Import
 
 ```
-import {FileInputComponent} from '@jm-7c3/sp-integration';
+import {FileInputComponent} from '@jm-7c3/common-lib';
 ```
 
 #### Implementation
@@ -384,7 +459,7 @@ Inputs to select a single file.
 #### Import
 
 ```
-import {FileInputsComponent} from '@jm-7c3/sp-integration';
+import {FileInputsComponent} from '@jm-7c3/common-lib';
 ```
 
 #### Implementation
@@ -416,7 +491,7 @@ A wrapper component for form controls.
 #### Import
 
 ```
-import {FormFieldComponent} from '@jm-7c3/sp-integration';
+import {FormFieldComponent} from '@jm-7c3/common-lib';
 ```
 
 #### Implementation
@@ -430,3 +505,66 @@ import {FormFieldComponent} from '@jm-7c3/sp-integration';
   <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. |