Overview

This is a component created by extending SweetAlert that displays a dialog for the intended use.

Reference

Class Methods
Name Description
public static confirm() Show the confirm dialog.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  icon: 'question',
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  showCancelButton: true,
  buttonsStyling: false,
  customClass: {
    htmlContainer: 'overflow-hidden',
    confirmButton: `btn btn-primary fw-bolder`,
    cancelButton: 'btn btn-light fw-bolder',
  }
}
Return:
  • Promise<boolean> True if the confirmation button is clicked, false otherwise.
public static success() Show the success dialog.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  icon: 'success',
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  showCancelButton: false,
  buttonsStyling: false,
  customClass: {
    confirmButton: `btn btn-primary fw-bolder`,
    cancelButton: 'btn btn-light fw-bolder',
  }
}
Return:
  • Promise<boolean> True if the confirmation button is clicked, false otherwise.
public static error() Show the error dialog.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  icon: 'error',
  confirmButtonText: 'OK',
  buttonsStyling: false,
  customClass: {
    confirmButton: `btn btn-danger fw-bolder`,
  }
}
Return:
  • Promise<void> Wait for the dialog to close.
public static warning() Show the warning dialog.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  icon: 'warning',
  confirmButtonText: 'OK',
  buttonsStyling: false,
  customClass: {
    confirmButton: `btn btn-warning fw-bolder`,
  }
}
Return:
  • Promise<void> Wait for the dialog to close.
public static info() Show the info dialog.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  icon: 'info',
  confirmButtonText: 'OK',
  buttonsStyling: false,
  customClass: {
    confirmButton: `btn btn-primary fw-bolder`,
  }
}
Return:
  • Promise<void> Wait for the dialog to close.
public static unknownError() Show unknown error.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  title: 'An unexpected error has occurred.',
  icon: 'error',
  confirmButtonText: 'OK',
  buttonsStyling: false,
  customClass: {
    confirmButton: `btn btn-danger fw-bolder`,
  }
}
Return:
  • Promise<void> Wait for the dialog to close.
public static loading() Show loading.
Parameters:
  • message: string
    The modal's text.
  • options?: sweetalert2.SweetAlertOptions|undefined
    Sweet Alert options. The following options apply by default. 
                              {
  html: message,
  allowEscapeKey: false,
  allowOutsideClick: false,
  didOpen: () => {
    window.Swal.showLoading()
  }
}
Return:
  • Promise<void> Wait for the dialog to close.
public static close() Closes all currently open dialogs.

All States

Here is an example of each dialog.
              <button data-on-confirm type="button" class="btn btn-primary m-1">Toggle Confirm</button>
<button data-on-success type="button" class="btn btn-success m-1">Toggle Success</button>
<button data-on-success-with-cancel-button type="button" class="btn btn-success m-1">Toggle Success with cancel button</button>
<button data-on-error type="button" class="btn btn-danger m-1">Toggle Error</button>
<button data-on-unknown-error type="button" class="btn btn-danger m-1">Toggle Unknown error</button>
<button data-on-warning type="button" class="btn btn-warning m-1">Toggle Warning</button>
<button data-on-info type="button" class="btn btn-info m-1">Toggle Info</button>
<button data-on-loading type="button" class="btn btn-secondary m-1">Toggle Loading</button>
            
              import {components} from 'metronic-extension';

// Toggle Confirm.
$('[data-on-confirm]').on('click', async() => {
  const isConfirmed = await components.Dialog.confirm("Here's an example of confirm dialog.", {confirmButtonText: 'Yes', cancelButtonText: 'No'});
  alert(`Response is ${isConfirmed}`);
});

// Toggle Success.
$('[data-on-success]').on('click', () => {
  components.Dialog.success("Here's an example of success dialog.");
});

// Toggle Success with cancel button.
$('[data-on-success-with-cancel-button]').on('click', async () => {
  const isConfirmed = await components.Dialog.success("Here's an example of success dialog.", {showCancelButton: true});
  alert(`Response is ${isConfirmed}`);
});

// Toggle Error.
$('[data-on-error]').on('click', () => {
  components.Dialog.error("Here's an example of error dialog.");
});

// Toggle Unknown error.
$('[data-on-unknown-error]').on('click', () => {
  components.Dialog.unknownError();
});

// Toggle Warning.
$('[data-on-warning]').on('click', () => {
  components.Dialog.warning("Here's an example of warning dialog.");
});

// Toggle Info.
$('[data-on-info]').on('click', () => {
  components.Dialog.info("Here's an example of info dialog.");
});

// Toggle Loading.
$('[data-on-loading]').on('click', () => {
  components.Dialog.loading("Here's an example of loading dialog.");
  setTimeout(() => components.Dialog.close(), 2000);
});