@exmg/exm-dialogs

<exm-dialogs>

Exmg Dialogs

Form Dialog

Form dialogs will handle styling, validation and make form submit easier. Also a loading indicator will be shown during the submit handling.

Example of implementation in html

<exm-dialog-form title="Create account" button-copy="Save" @submit="${this.createAccount}">
  <paper-input name="name" label="Name" required></paper-input>
  <paper-input name="password" label="Password" required></paper-input>
</exm-dialog-form>

Example of how submit could be handled

createAccount(e) {
  const {detail, target} = e;
  const {name, password} = detail;

  try {
    // Throw error to simulate error
    if(password.length < 6) {
      throw Error('User password to simple')
    }

    // Do server call

    // notify dialog successfull
    target.done();
  } catch (error) {
    target.handleError(error);
  }
}

Info Dialog

Info dialogs will handle styling, and content. Will throw a done event once the user clicked the button.

Example of implementation in html

<exm-dialog-info button-copy="Continue" @done="${this.done}">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
    condimentum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
    condimentum.
  </p>
</exm-dialog-info>

Example of implementation in html without close button option

<exm-dialog-info button-copy="Continue" hide-close-button @done="${this.done}">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
    condimentum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
    condimentum.
  </p>
</exm-dialog-info>

Example of how done could be handled

done(e) {
  const {target} = e;
  // Closes the dialog ...
  target.close();
}

Confirmation Dialogs

Easy way to display a pre styled confirmation dialog.

Example

<exm-dialog-confirm
  title="Confirmation"
  message="Are you sure you want to delete this item?"
  button-copy="Delete account"
  @submit="${this.deleteItem}"
>
</exm-dialog-confirm>

deleteItem(e) {
  const {target} = e;
  try {
    // Do server call

    // notify dialog successfull
    target.done();
  } catch (error) {
    target.error(error);
  }
}

API

<exm-dialog-form />

Property	Usage
title: string	Displayed title of the Dialog
button-copy: string	Displayed text of the submit button
hide-close-button: boolean	If set to true the dialog will not show a close icon
error-message: string	Error text to display when the form is in error state
@submit	Event thrown when hitting the submit button, will serialize the form and return values in detail of the event
@cancel	Event thrown when hitting the cancel button

<exm-dialog-confirm />

Property	Usage
title: string	Displayed title of the Dialog
message: string	Displayed message of the Dialog
button-copy: string	Displayed text of the submit button
hide-close-button: boolean	If set to true the dialog will not show a close icon
error-message: string	Error text to display when the form is in error state
@submit	Event thrown when hitting the submit button, will serialize the form and return values in detail of the event
@cancel	Event thrown when hitting the cancel button

<exm-dialog-confirm />

This element exposes a slot to wrap up any content you put in.

Property	Usage
button-copy: string	Displayed text of the submit button
hide-close-button: boolean	If set to true the dialog will not show a close icon
button-secondary: boolean	If set to true the button will be with secondary theme
@done	Event thrown when hitting the main button

Additional references

• Additional Documentation

• Demo