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 @uxpractice/ruc-lib

Install Individual Components

If users only need the dialog component, they can install it separately:

npm install @ruc-lib/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 "@ruc-lib/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 "@uxpractice/ruc-lib";
@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 '@ruc-lib/dialog'; OR import { RuclibDialogModule } from '@ uxpractice /ruc-lib/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'
}

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!