# certara-toast-manager

A toast notification manager component that handles the creation, positioning, stacking, and auto-dismissal of toast notifications. Use a single `<certara-toast-manager>` instance per application to manage all toast notifications.

## Usage

### Basic Setup

Place a single toast manager in your application (typically in your root layout):

```html
<certara-toast-manager id="notifications"></certara-toast-manager>
```

### Showing Toasts

```javascript
const notifications = document.getElementById('notifications');

// Simple toast
notifications.show('success', { message: 'Saved successfully!' });

// Toast with headline
notifications.show('info', {
  prefix: 'Processing',
  message: 'Your data is being processed...',
});

// Toast with CTA link
notifications.show('info', {
  message: 'Check out the new features.',
  anchorText: 'Learn more',
  anchorHref: 'https://example.com',
});

// Toast with custom CTA HTML
notifications.show('warning', {
  message: 'Your session will expire soon.',
  cta: '<certara-button size="sm">Extend Session</certara-button>',
});

// Toast with custom delay (milliseconds)
notifications.show('info', {
  message: 'This will auto-dismiss in 5 seconds.',
  delay: 5000,
});

// Toast that doesn't auto-dismiss
notifications.show('danger', {
  message: 'Critical error occurred.',
  delay: 0,
});
```

### Allowing Multiple Toasts

By default, showing a new toast closes any existing toast. To allow multiple toasts to stack:

```javascript
// Third argument enables multiple toasts
notifications.show('info', { message: 'First' }, true);
notifications.show('success', { message: 'Second' }, true);
```

### Programmatic Control

```javascript
// Get a handle to close a specific toast later
const handle = await notifications.show('info', { message: 'Loading...' });
// ... later ...
handle.close();

// Close all toasts
await notifications.closeAll();

// Get current toast count
const count = await notifications.getToastCount();
```

### Position Variants

```html
<!-- Default: top-center -->
<certara-toast-manager position="top-center"></certara-toast-manager>

<!-- Other positions -->
<certara-toast-manager position="top-right"></certara-toast-manager>
<certara-toast-manager position="top-left"></certara-toast-manager>
<certara-toast-manager position="bottom-center"></certara-toast-manager>
<certara-toast-manager position="bottom-right"></certara-toast-manager>
<certara-toast-manager position="bottom-left"></certara-toast-manager>
```

### Limiting Toast Count

```html
<!-- Only show up to 3 toasts at a time -->
<certara-toast-manager max-toasts="3"></certara-toast-manager>
```

## Migration from Pinnacle.Notifications

If migrating from the legacy `Pinnacle.Notifications` service:

```javascript
// Before (legacy)
Pinnacle.Notifications.show('success', { message: 'Done!' });

// After (with certara-toast-manager)
document.querySelector('certara-toast-manager').show('success', { message: 'Done!' });
```

The API is intentionally similar for easy migration. Key differences:
- Element-based instead of global namespace
- Returns Promise with handle instead of object directly
- Supports `maxToasts` prop for limiting visible toasts


<!-- Auto Generated Below -->


## Overview

A toast notification manager that displays toasts at a fixed position on the screen.
Handles creation, positioning, stacking, and auto-dismissal of toast notifications.

## Properties

| Property    | Attribute    | Description                                              | Type                                                                                              | Default        |
| ----------- | ------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------- |
| `gap`       | `gap`        | Gap between stacked toasts in pixels                     | `number`                                                                                          | `8`            |
| `maxToasts` | `max-toasts` | Maximum number of toasts to show at once (0 = unlimited) | `number`                                                                                          | `0`            |
| `position`  | `position`   | Position of the toast container on the screen            | `"bottom-center" \| "bottom-left" \| "bottom-right" \| "top-center" \| "top-left" \| "top-right"` | `'top-center'` |


## Methods

### `closeAll() => Promise<void>`

Close all currently visible toasts

#### Returns

Type: `Promise<void>`



### `getToastCount() => Promise<number>`

Get the current number of visible toasts

#### Returns

Type: `Promise<number>`



### `show(type: VariantType, options: ToastOptions, allowMultiple?: boolean) => Promise<ToastHandle>`

Show a toast notification

#### Parameters

| Name            | Type                                           | Description                                                        |
| --------------- | ---------------------------------------------- | ------------------------------------------------------------------ |
| `type`          | `"info" \| "success" \| "warning" \| "danger"` | - The variant type (info, success, warning, danger)                |
| `options`       | `ToastOptions`                                 | - Toast configuration options                                      |
| `allowMultiple` | `boolean`                                      | - Whether to allow multiple toasts simultaneously (default: false) |

#### Returns

Type: `Promise<ToastHandle>`

Promise with handle containing close() method


## Slots

| Slot | Description                                                                  |
| ---- | ---------------------------------------------------------------------------- |
|      | Not used directly; toasts are created programmatically via the show() method |


## Dependencies

### Depends on

- [certara-toast](../toast)

### Graph
```mermaid
graph TD;
  certara-toast-manager --> certara-toast
  certara-toast --> certara-alert
  certara-alert --> certara-close-button
  style certara-toast-manager fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------