@jm-7c3/common-lib 22.0.0 → 22.2.0

package/README.md

@@ -1,12 +1,14 @@
 # Common Lib
 
-Constains elements based on PrimeNG library.
+Constains elements based on [Angular Material](https://material.angular.dev/), [PrimeNG](https://primeng.org) and [Tailwind CSS](https://tailwindcss.com/) 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, based on [PrimeNG](https://primeng.org) components.
+Standalone UI controls.
 
 ### Button
 
@@ -156,7 +158,9 @@ Shows the provided form in a dialog.
 
 #### Import the component
 
+```
 import {FormDialogComponent} from '@jm-7c3/common-lib';
+```
 
 #### Add the component
 
@@ -234,6 +238,104 @@ 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.
+});
+```
+
+### 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.
@@ -330,7 +432,7 @@ private readonly toastsService = inject(ToastsService);
 
 ## Forms
 
-Standalone UI form input controls, based on [PrimeNG](https://primeng.org) components, to be used in Reactive Forms.
+Standalone UI form input controls.
 
 ### Base Form
 
@@ -353,7 +455,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 +486,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 +518,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 +532,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. |