Alert

<zn-alert open icon="info" caption="This is the alert">
  This is the alert message. Keep it simple!
</zn-alert>

<zn-alert variant="primary" open>
  <sl-icon slot="icon" library="fa" name="fas-circle-info"></sl-icon>
  <div slot="header">We’ve simplified your login experience</div>
  You can now log in to both apps with one set of credentials.
</zn-alert>

<br />

<zn-alert variant="success" open>
  <sl-icon slot="icon" library="fa" name="fas-circle-check"></sl-icon>
  <div slot="header">Request approved</div>
  This request was approved on April 25, 2024.
</zn-alert>

<br />

<zn-alert variant="warning" open>
  <sl-icon slot="icon" library="fa" name="fas-triangle-exclamation"></sl-icon>
  <div slot="header">This view is currently hidden from shareholders</div>
  Go to <a class="ts-text-link" href="#">Company settings</a> to edit the visibility of this page.
</zn-alert>

<br />

<zn-alert variant="danger" open>
  <sl-icon slot="icon" library="fa" name="fas-circle-exclamation"></sl-icon>
  <div slot="header">Your payment is past due</div>
  To avoid late fees, pay your minimum amount due today.
</zn-alert>

<zn-alert variant="primary" open closable class="alert-closable">
  <sl-icon slot="icon" library="fa" name="fas-circle-info"></sl-icon>
  You can close this alert any time!
</zn-alert>

<script>
  const alert = document.querySelector('.alert-closable');
  alert.addEventListener('sl-after-hide', () => {
    setTimeout(() => (alert.open = true), 2000);
  });
</script>

<zn-alert variant="primary" open> Nothing fancy here, just a simple alert. </zn-alert>

<div class="alert-duration">
  <zn-button variant="primary">Show Alert</zn-button>

  <zn-alert variant="primary" duration="3000" closable>
    <sl-icon slot="icon" library="fa" name="fas-circle-info"></sl-icon>
    This alert will automatically hide itself after three seconds, unless you interact with it.
  </zn-alert>
</div>

<script>
  const container = document.querySelector('.alert-duration');
  const button = container.querySelector('zn-button');
  const alert = container.querySelector('zn-alert');

  button.addEventListener('click', () => alert.show());
</script>

<style>
  .alert-duration zn-alert {
    margin-top: var(--sl-spacing-medium);
  }
</style>

<div class="alert-toast">
  <zn-button variant="primary">Primary</zn-button>
  <zn-button variant="success">Success</zn-button>
  <zn-button variant="danger">Danger</zn-button>

<zn-alert variant="primary" duration="3000" closable>
  <sl-icon slot="icon" library="fa" name="fas-circle-info"></sl-icon>
  <div slot="header">We’ve simplified your login experience</div>
  You can now log in to both apps with one set of credentials.
</zn-alert>

<zn-alert variant="success" duration="3000" closable>
  <sl-icon slot="icon" library="fa" name="fas-circle-check"></sl-icon>
  <div slot="header">Request submitted</div>
  Your request to issue 1,000 shares to Grace Hopper has been submitted.
</zn-alert>

<zn-alert variant="danger" duration="3000" closable>
  <sl-icon slot="icon" library="fa" name="fas-circle-exclamation"></sl-icon>
  <div slot="header">Your settings couldn’t be updated</div>
  Please <a class="ts-text-link" href="#">contact support</a> for help with this issue.
</zn-alert>
</div>

<script>
  const container = document.querySelector('.alert-toast');

  ['primary', 'success', 'danger'].map(variant => {
    const button = container.querySelector(`zn-button[variant="${variant}"]`);
    const alert = container.querySelector(`zn-alert[variant="${variant}"]`);

    button.addEventListener('click', () => alert.toast());
  });
</script>

<div class="alert-toast-wrapper">
  <zn-button variant="primary">Create Toast</zn-button>
</div>

<script>
  const container = document.querySelector('.alert-toast-wrapper');
  const button = container.querySelector('zn-button');
  let count = 0;

  // Always escape HTML for text arguments!
  function escapeHtml(html) {
    const div = document.createElement('div');
    div.textContent = html;
    return div.innerHTML;
  }

  // Custom function to emit toast notifications
  function notify(message, variant = 'primary', icon = 'fas-circle-info', duration = 3000) {
    const alert = Object.assign(document.createElement('zn-alert'), {
      variant,
      closable: true,
      duration: duration,
      innerHTML: `
        <sl-icon name="${icon}" library="fa" slot="icon"></sl-icon>
        ${escapeHtml(message)}
      `
    });

    document.body.append(alert);
    return alert.toast();
  }

  button.addEventListener('click', () => {
    notify(`This is custom toast #${++count}`);
  });
</script>