# Toast Component

A standalone toast component for displaying overlay notifications with auto-dismiss, animations, and positioning options.

**Selector:** `ccl-toast`

## Quick Start

1. **Import the component:**
```typescript
import { ToastComponent } from '@Crystal-Code-Labs/ccl-ui-components';
```

2. **Add to your component:**
```typescript
@Component({
  imports: [ToastComponent],
  // ... rest of component
})
```

3. **Use in template:**
```html
<ccl-toast 
  variant="success" 
  message="Operation completed!"
  [duration]="3000"
  [showProgress]="true"
  (closed)="onToastClosed()">
</ccl-toast>
```

## Inputs

- `variant: 'info' | 'success' | 'warning' | 'error'` – Toast type (default: 'info')
- `message: string` – Toast message text
- `title?: string` – Optional toast title
- `duration: number` – Auto-dismiss duration in ms (0 = no auto-dismiss, default: 3000)
- `dismissible: boolean` – Show close button (default: true)
- `position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` – Toast position (default: 'bottom-right')
- `animation: 'slide' | 'fade' | 'none'` – Animation type (default: 'slide')
- `showProgress: boolean` – Show progress bar (default: true)
- `pauseOnHover: boolean` – Pause timer on hover (default: true)

## Outputs

- `closed: EventEmitter<void>` – Emitted when toast is dismissed

## Basic Examples

### Simple Toast
```html
<ccl-toast 
  variant="success" 
  message="Data saved successfully!">
</ccl-toast>
```

### Toast with Title
```html
<ccl-toast 
  variant="info" 
  title="New Message" 
  message="You have received a new message from John."
  [duration]="5000">
</ccl-toast>
```

### Persistent Toast
```html
<ccl-toast 
  variant="error" 
  message="Connection failed. Please check your internet."
  [duration]="0"
  [dismissible]="true">
</ccl-toast>
```

## Positioning

### Top Right (Default)
```html
<ccl-toast 
  variant="info" 
  message="Top right toast"
  position="top-right">
</ccl-toast>
```

### Bottom Left
```html
<ccl-toast 
  variant="warning" 
  message="Bottom left toast"
  position="bottom-left">
</ccl-toast>
```

## Animations

### Slide Animation (Default)
```html
<ccl-toast 
  variant="success" 
  message="Slides in from the edge"
  animation="slide">
</ccl-toast>
```

### Fade Animation
```html
<ccl-toast 
  variant="info" 
  message="Fades in and out"
  animation="fade">
</ccl-toast>
```

### No Animation
```html
<ccl-toast 
  variant="error" 
  message="No animation"
  animation="none">
</ccl-toast>
```

## Progress Bar

### With Progress Bar
```html
<ccl-toast 
  variant="success" 
  message="Shows countdown progress"
  [duration]="5000"
  [showProgress]="true">
</ccl-toast>
```

### Without Progress Bar
```html
<ccl-toast 
  variant="info" 
  message="No progress bar"
  [showProgress]="false">
</ccl-toast>
```

## Pause on Hover

### Pause Enabled (Default)
```html
<ccl-toast 
  variant="warning" 
  message="Timer pauses when you hover"
  [pauseOnHover]="true">
</ccl-toast>
```

### No Pause
```html
<ccl-toast 
  variant="error" 
  message="Timer continues even on hover"
  [pauseOnHover]="false">
</ccl-toast>
```

## Complete Example
```typescript
import { Component } from '@angular/core';
import { ToastComponent } from '@Crystal-Code-Labs/ccl-ui-components';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ToastComponent],
  template: `
    <div class="toast-container">
      <!-- Success Toast -->
      <ccl-toast 
        variant="success" 
        title="Success!" 
        message="Your changes have been saved."
        [duration]="3000"
        position="top-right"
        animation="slide"
        [showProgress]="true"
        [pauseOnHover]="true"
        (closed)="onToastClosed('success')">
      </ccl-toast>

      <!-- Error Toast -->
      <ccl-toast 
        variant="error" 
        title="Error" 
        message="Something went wrong. Please try again."
        [duration]="0"
        position="bottom-right"
        animation="fade"
        [dismissible]="true"
        (closed)="onToastClosed('error')">
      </ccl-toast>

      <!-- Custom Duration Toast -->
      <ccl-toast 
        variant="info" 
        message="This will disappear in 10 seconds"
        [duration]="10000"
        [showProgress]="true"
        (closed)="onToastClosed('info')">
      </ccl-toast>
    </div>
  `
})
export class ExampleComponent {
  onToastClosed(type: string) {
    console.log(`${type} toast was closed`);
  }
}
```

## Toast Service Example

For programmatic toast management, create a service:

```typescript
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export interface ToastConfig {
  variant: 'info' | 'success' | 'warning' | 'error';
  message: string;
  title?: string;
  duration?: number;
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  animation?: 'slide' | 'fade' | 'none';
}

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  private toasts$ = new BehaviorSubject<ToastConfig[]>([]);

  show(config: ToastConfig) {
    const currentToasts = this.toasts$.value;
    this.toasts$.next([...currentToasts, config]);
  }

  success(message: string, title?: string) {
    this.show({ variant: 'success', message, title });
  }

  error(message: string, title?: string) {
    this.show({ variant: 'error', message, title });
  }

  warning(message: string, title?: string) {
    this.show({ variant: 'warning', message, title });
  }

  info(message: string, title?: string) {
    this.show({ variant: 'info', message, title });
  }

  getToasts() {
    return this.toasts$.asObservable();
  }
}
```

## Styling

The toast component uses design tokens and supports theming:

- **Background**: Solid variant color
- **Text**: White text for contrast
- **Shadow**: Uses `--shadow-md` token
- **Border Radius**: Uses `--radius-md` token
- **Spacing**: Uses spacing tokens for margins and padding

## Accessibility

- **ARIA Role**: Uses `role="status"` for screen readers
- **Close Button**: Includes `aria-label="Close"` for accessibility
- **Keyboard Navigation**: Close button is focusable and clickable
- **Color Contrast**: High contrast white text on colored backgrounds
- **Focus Management**: Proper focus handling for dismissible toasts

## Theming

Toasts automatically use your theme's color tokens:

```css
/* Custom theme overrides */
:root, :host {
  --color-primary-default: #3b82f6;
  --color-success-default: #10b981;
  --color-warning-default: #f59e0b;
  --color-error-default: #ef4444;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --z-index-toast: 1000;
}
```

## Best Practices

1. **Use appropriate variants** for different message types
2. **Set reasonable durations** (3-5 seconds for most messages)
3. **Use titles** for important notifications
4. **Consider positioning** based on your app's layout
5. **Test animations** to ensure they work well with your design
6. **Use pause on hover** for important messages users might want to read
7. **Provide manual dismiss** for error messages or important notifications