InfinityVAULT Alert Web Component

Alert

Typical tag name: sk-alert

Exported class: SKAlert

Inheritance: SKAlert <-- SKStyleBase <-- (imm-dom stack)

Generalized alert component for showing different markup on messages. Designed to use in place (with redraws). Can be instantiated with data to show immediately.

Arguments for showX methods:

Property	Usage
`header`	Bolded alert header.
`message`	Alert text.
`icon`	Override default icon for variant.
`noIcon`	Don't show an icon.
`withWarning`	Adds an extra warning inside the alert with `{ header: '', message: '' }`.

Required Assets

imm-dom
sk.css

External Requirements

(None.)

WC Dependencies

(None.)

API

Attributes

Attribute	Default	Enumerators	Usage
(None.)

Properties

Property	Type	Default	Usage
`alert`	Array	`null`	Set data to show message on instantiation. First item is an Object with the same arguments to `showX` methods. Second item is the ShoelaceCSS variant string.

Events

Event	Detail	Usage
(None.)

Methods

Method	Arguments	Usage
`showSuccess`	`AlertArgs`	Shows a success styled variant. See above for arguments.
`showInfo`	`AlertArgs`	Shows an info styled variant. See above for arguments.
`showWarning`	`AlertArgs`	Shows a warning styled variant. See above for arguments.
`showDanger`	`AlertArgs`	Shows a danger styled variant. See above for arguments.
`showError`	`AlertArgs`	Alias to `showDanger`.
`showFailure`	`AlertArgs`	Alias to `showDanger`.
`clear`	(None.)	Clears alert back to null state.

Slots

Slot	Usage
(None.)

CSS Parts

Part	Usage
(None.)

Example

<link rel="stylesheet" type="text/css" href="/css/sk-root.css">
<script type=module src='/cdn/@encipher-sk/ivcore/esm/sk-alert.js'></script>

<div class='example'>
  <ivc-i18n></ivc-i18n>
  <ivc-zs reload-ws></ivc-zs>
  <button id='example-trigger-error'>Show Error</button>
  <br>
  <button id='example-trigger-success-with-warning'>Show Success with Warning</button>
  <sk-alert id=alert></sk-alert>
  <script>
  const $alert = document.querySelector( '#alert' );
  const $trigger_a = document.querySelector( '#example-trigger-error' );
  const $trigger_b = document.querySelector( '#example-trigger-success-with-warning' );
  $trigger_a.addEventListener( 'click', e => {
    $alert.showError({ header: 'Oh noes!', message: 'This is some kind of error.' });
  });
  $trigger_b.addEventListener( 'click', e => {
    $alert.showSuccess({ header: 'Operation Successful', message: 'Things went fairly well.', withWarning: { header: 'Except...', message: 'Some other things happened, too.' } });
  });
  </script>
</div>