npm package: @ructest/dialog
Description: This library provides a flexible and customizable dialog component for your Angular applications. Users can integrate the dialog component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details
Latest version: 0.0.8

# ruclib-dialog

This library provides a flexible and customizable dialog component for your Angular applications. Users can integrate the dialog component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details

## RUC Library Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.
Install RUC Library.

To install the entire RUC library:

`npm install @ruxptestlib/ructest` 

## Install Individual Components
If users only need the dialog component, they can install it separately:

`npm install @ructest/dialog`

## Usage

To use the dialog component in your project, follow the integration guidelines provided in the documentation. Customize the dialog as per your requirements by adjusting the configuration options mentioned below.

Using Dialog Service

1.	Import `ViewContainerRef` from `@angular/core`.
2.	Import `DialogService` from `"@ructest/dialog"`.
3.	Inject `DialogService` and `ViewContainerRef` into your component constructor.
4.	Call open method of `DialogService` with `ViewContainerRef` and dialog data.
5.	Subscribe to `afterClosed` to get the result after dialog closure.

Example:



```
import { Component } from "@angular/core";
import { DialogService } from "@ruxptestlib/ructest";
@Component({
    selector: "app-my-component",
    templateUrl: "./my-component.component.html"
})
export class MyComponent {
   constructor(
        public dialogService: DialogService,
        private viewContainerRef: ViewContainerRef
    ) {}
    openDialog(data: any): void {
        this.dialogService.open(this.viewContainerRef, data)
            ?.afterClosed()
            .subscribe((res: any) => {
                console.log(res);
            });
    }
}
```


## Using Selector

1.	Import `DialogModule` into `app.module.ts` file. 
`( import { RuclibDialogModule } from '@ructest/dialog'; OR import { RuclibDialogModule } from '@ ruxptestlib /ructest/dialog'; )`
2.	Use the dialog selector in your HTML file.
3.	Handle input and output bindings accordingly.

```
<uxp-ruclib-dialog 
    (rucEvent)="passEvent($event)" 
    [buttonText]="ButtonLabelDialog"
    [rucInputData]="inputObjectDataDialog" 
    [customTheme]="customTheme">
</uxp-ruclib-dialog>
```


## Input and Output

Inputs:
•	buttonText: Text for the action buttons.
•	rucInputData: Data to be passed to the dialog.
•	customTheme: Custom styling/theme for the dialog.

Outputs:
•	rucEvent: Event emitted from the dialog.


## rucInputData configurations options- 

```
DialogDefaultConfig {
    /**
     * Mandatory
     * Values :- alert,prompt,confirm
     */
    type: string;
    title?: string = 'RUC Dialog';
    content?: string = 'This is RUC Dialog Content.';
    buttons?: DialogBoxButton[] = [{ name: 'Yes', color: '', behaviour: 'Submit', btnType:      'stroked' }];
    id = 1;
    displayCloseButton?: boolean = true;
    movableDialog?: boolean = true;
    hasBackdrop?: boolean = false;
    closeOnClickAndEscape?: boolean = true;
    fullScreenDialog?: boolean = false;
    direction?: any = 'center';
    header?: boolean = true;
    width?: string;
    height?: any;
    maxHeight?:string; // for prompt
    maxWidth?: string = '350px';  // for prompt
    autoFocus?: boolean = true;  // for prompt,custom
    autoComplete?: boolean;
    autoCompleteList? :any;
    theme?: string = ''; // for prompt
    defaultPromptValue?: string = 'Enter Name';
    contentAlignment?: string;
    customComponentName?: any;  
    contentAlignDirection?: string = 'left';
    buttonsPosition?: 'left' | 'right' = 'left';
    showButtonsVertically?: boolean = false;
    backdropClass?: string = 'backdropClass';
    btnType?: string;
    customTheme?: string;
  }
```


## Default value be like –

```
{
      title: 'RUC Dialog',
      content: 'This is RUC Dialog Content.',
      buttons: [{ name: 'Yes', color: '', behaviour: 'Submit', btnType: 'stroked' }],
      id: 1,
      type: 'confirm',
      displayCloseButton: true,
      movableDialog: true,
      hasBackdrop: false,
      closeOnClickAndEscape: true,
      fullScreenDialog: false,
      direction: 'center',
      header: true,
      width: '350px',
      height: '',
      maxHeight: '',
      maxWidth: '',
      autoFocus: true,
      theme: '',
      defaultPromptValue: 'Enter Name',
      contentAlignDirection: 'left', // ToDO
      buttonsPosition: 'left',
      showButtonsVertically: false,
      backdropClass: 'backdropClass',
      customTheme: 'custom-theme'
}
```


## License

This library is licensed under the UXP License. See the LICENSE file for details.

## Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

## Acknowledgements

Thank you for choosing the Dialog Component Library. If you have any feedback or suggestions, please let us know!