Dynamic Dialog

This Angular Module simplifies the Materail Dialog allowing you to use standard dialogus for alerts, confirm and choice dialogs. You may also inject any content like a form using the same service. No other modules are needed for import.

The resposend from the dialog is a Observable making it easy to implement in complex applications

These dialogs may be used as an inline compoenent or a modal - both respond the same

Installation

npm install dynamic-dialog

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    DynamicDialogModule
  ],

Inputs

The following Inputs are available as a Component (These inputs are not available on Modal types)

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | display | BOOLEAN | FASLE | displays dialog on screen | | dialogData | ANY[] | [] | data for options inluding data to be passed for custom dialogs |

Outputs

The following Outpus are available as a Component (These inputs are not available on Modal types)

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | dialogClosed | EVENT | ANY | returns data specified for the event selected |

Data Structure

dialogData is the data and the options that define the modal - the dialogData is an input for Compoenet type usage

Here is the Model for the data strture that is passed onto the Dialog whether Component types or Modal type

dialogData: any = {
  title: 'Sample Message Title',
  content: 'In this guide let us learn <b>how to make use</b> of @input in Angular.',
  icon: 'warning', 
  iconColor: 'red',
  closeOption: true,
  buttons: {
    action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
    dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
    option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
  }
}

| Property | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | title | STRING | NULL | Title of Dialog - if NULL then no title appears | | content | STRING (HTML) | NULL | Content of Dialog - if NULL then no content appears | | icon | STRING | NULL | Material Icon left of title - if NULL then no icon appears | | iconColor | STRING | NULL | Material Icon color - if NULL then color is black | | closeOption | BOOLEAN | FALSE | Top right X for dismiss | | buttons | Object | - | Button that appear on dialog, described below |

Buttons Object describes the Label, Type and data that will be returned if the option is selected. The data property describes the data that the button will return is selected.

There are 3 types of buttons that may be defined and they depend on the dialog type.

• Action - this is the positive action
• Dismiss - this is the dismiss action
• Option - this is the nutral or the negative action

Action and Option buttons may carry a types to define the look, such as a warning

Buttons for Dialog Types

Plain Dialog - will have no bottons ro actions Message Dialog - will only have an action Confirm Dialog - will only have an action and dismiss Choice Dialog - will have an action, dismiss and option Selection Dialog - this is a dropdown selection and will have an action and dismiss Uploader Dialog - this is a file upload and will have an action and dismiss

| Property | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | name | STRING | NULL | Label of button | | type | ButtonTypes (ENUM) | PLAIN | style and color or button | | data | ANY | NULL | data for selected button to return |

There are default labels assigned to the Dialog types for the button but they are overidden if provided in the button data property name

Button Types

| Property | Description | | ----- | ----------- | | NONE | No raduis on button | | PLAIN | radius on button - white | | PRIMARY | radius on button - primary color| | ACCENT | Label of button - accent color| | WARNING | red button - warn color|

Use

To use the following standard dialog types

Plain Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-plain
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-plain>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events) In the floowing example, the X option is removed and the dismiss will occur when user clicks outside of the dialog. In the dialogData buttons have been remmoved since the component type does not require any actions to be displayed.

onMessage() {

  const newData = this.dialogService.openDialog(PlainDialogComponent, this.dialogData, false)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Message Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-message
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-message>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onMessage() {

  const newData = this.dialogService.openDialog(MessageDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Confirm Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-confirm
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-confirm>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Choice Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-choice
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-choice>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Selection Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

Please note: dialogData has been updated to include details for the selection menu data - more to come! Here is a sample to give you an idea.

Construct an array of menu objects - the menu object would contain the properties for name, service and disabled

The disabled property will enable or disable any menu items The other properties are not used for any controls other then defining what you would like to see and what you would like to return on change event.

const services: { service: string, name: string, disabled: boolean}[] = [
  { name: 'Add all Defaults', service: 'ALL', disabled: false},
  { name: 'Open Id token authentication', service: 'OIDC', disabled: false},
  { name: 'Ping Federation authorization token', service: 'PINGFED', disabled: false},
  { name: 'Supplier Hub vendor authorization token service',service: 'SUPPLIER_HUB', disabled: false},
  { name: 'Vantage authentication token service',service: 'VANTAGE', disabled: false},
  { name: 'Voltage encryption service',service: 'VOLTAGE', disabled: false},
  { name: 'Voltage encryption Lib',service: 'VOLTAGE_KEY', disabled: false},
  { name: 'Custom Entry',service: 'CUSTOM', disabled: false},
]

Then use the data in your selection you pass

dialogSelectionData: any = {
    title: 'Selection Message',
    content: 'Please select the options that apply below',
    icon: 'warning', iconColor: 'red',
    closeOption: true,
    selection: {
      data: services,
      autocomplete: false,
      key: 'name',
      returnKey: 'service',
      displayInput: 'name',
      label: 'Services',
      placeholder: 'OIDC',
      acceptInput: false,
    },
    buttons: {
      action: { name: 'Select', type: ButtonTypes.PRIMARY, data: true },
      dismiss: { name: 'Cancel', type: ButtonTypes.PLAIN, data: false },
    }
  }

<div>

  <wav-dialog-selection
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-selection>

  <button mat-raised-button (click)="onDisplaySelection()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onSelectionChoice() {

  const newData = this.dialogService.openDialog(SelectionDialogComponent, dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Uploader Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-uploader
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-uploader>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(UploaderDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

The object returned is the file and base64 data belonging to the selected file

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Custom Dialog

You can also inject your own cusom components into the dynamic dialog service.

Create the component, with a form for example and prepare the data structure

dialogData: any = {
  title: 'Sample Message Title',
  content: 'In this guide let us learn <b>how to make use</b> of @input in Angular.',
  icon: 'warning', 
  iconColor: 'red',
  closeOption: true,
  buttons: {
    action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
    dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
    option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
  }
}

For your form, if you want to use the same title, content and close button at top and also the buttons to be used on the bottom of your form, use the components that come with the dynamic-dialog

<!-- DYNAMIC DIALOG -->
<wave-dialog-title
  [title]="'Sample Dialogu Title'"
  [icon]="'info'"
  [iconColor]="'grey'"
  [closeOption]="true"
  (closeDialog)="onDismiss()"
></wave-dialog-title>

<!-- CUSTOM -->
<div [formGroup]="form" fxLayoutGap="8px">
  <mat-form-field appearance="fill" fxFlex>
    <mat-label>First Name</mat-label>
    <input matInput placeholder="John" formControlName="first">
  </mat-form-field>

  <mat-form-field appearance="fill" fxFlex>
    <mat-label>Last Name</mat-label>
    <input matInput placeholder="Smith" formControlName="last">
  </mat-form-field>
</div>

<!-- DYNAMIC DIALOG -->
<wave-dialog-buttons
  [dialogButtons]="buttons"
  [ignoreOption]="false"
  [disableAction]="!form.valid"
  (dialogClosed)="onClose($event)"
></wave-dialog-buttons>

The compoenents ave-dialog-title and wave-dialog-buttons have various inputs for controlling the look and feel that you can use. The wave-dialog-buttons component requires a data object for the buttons to be passed into the dialogButtons input. The (closeDialog) event caputures the close and the (dialogClosed) event captures the close button events and returns the data assigned to the buttons structure.

{
  action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
  dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
  option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
}

Then inject the service into you component that will promt the dialog

constructor(
  private dialogService: DynamicDialogService
) {}

Inject the component through the service

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

and the resulting data when the dialog closes will be returned in the Observable that you created for the dialog. Subscribe to it and get the results.