@jm-7c3/common-lib 1.7.3 → 1.7.4

package/README.md

@@ -35,10 +35,177 @@ import {ButtonComponent} from '@jm-7c3/common-lib';
 
 ### 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.
@@ -69,25 +236,31 @@ import {IconButtonComponent} from '@jm-7c3/common-lib';
 
 Displays a dialog with a progress bar animation.
 
-#### Implementation
+#### 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 {OnInit} from '@angular/core';
 import {ProgressBarDialogService} from '@jm-7c3/common-lib';
+```
 
-@Component({
-  template: '<cl-progress-bar-dialog />'
-})
-export class AppComponent implements OnInit {
-  private readonly progressBarDialogService = inject(ProgressBarDialogService);
+#### Inject the service
 
-  ngOnInit(): void {
-    this.progressBarDialogService.open();
-  }
-}
+```
+private readonly progressBarDialogService = inject(ProgressBarDialogService);
 ```
 
-#### Service Methods
+#### Methods
 
 | Method | Description |
 | - | - |
@@ -119,6 +292,40 @@ import {ReadonlyValueComponent} from '@jm-7c3/common-lib';
 
 ### 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.
@@ -139,6 +346,85 @@ 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>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jm-7c3/common-lib",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "peerDependencies": {
     "@angular/common": "^19.1.0",
     "@angular/core": "^19.1.0",