# Alert Component

A standalone alert component for displaying inline notifications with different variants and optional features.

**Selector:** `ccl-alert`

## Quick Start

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

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

3. **Use in template:**
```html
<ccl-alert 
  variant="success" 
  message="Operation completed successfully!"
  [dismissible]="true"
  (closed)="onAlertClosed()">
</ccl-alert>
```

## Inputs

- `variant: 'info' | 'success' | 'warning' | 'error'` – Alert type (default: 'info')
- `message: string` – Alert message text
- `title?: string` – Optional alert title
- `dismissible: boolean` – Show close button (default: false)
- `showIcon: boolean` – Show/hide icon (default: true)
- `icon?: string` – Custom icon (overrides default)

## Outputs

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

## Variants

### Info Alert
```html
<ccl-alert 
  variant="info" 
  message="This is an informational alert."
  [dismissible]="true">
</ccl-alert>
```

### Success Alert
```html
<ccl-alert 
  variant="success" 
  title="Success!" 
  message="Your changes have been saved successfully."
  [dismissible]="true">
</ccl-alert>
```

### Warning Alert
```html
<ccl-alert 
  variant="warning" 
  title="Warning" 
  message="Please review your input before proceeding."
  [dismissible]="true">
</ccl-alert>
```

### Error Alert
```html
<ccl-alert 
  variant="error" 
  title="Error" 
  message="Something went wrong. Please try again."
  [dismissible]="true">
</ccl-alert>
```

## With Custom Icon
```html
<ccl-alert 
  variant="info" 
  message="Custom notification"
  icon="🔔"
  [dismissible]="true">
</ccl-alert>
```

## Without Icon
```html
<ccl-alert 
  variant="success" 
  message="No icon alert"
  [showIcon]="false"
  [dismissible]="true">
</ccl-alert>
```

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [AlertComponent],
  template: `
    <div class="alert-container">
      <!-- Success Alert -->
      <ccl-alert 
        variant="success" 
        title="Success!" 
        message="Your profile has been updated successfully."
        [dismissible]="true"
        (closed)="onAlertClosed('success')">
      </ccl-alert>

      <!-- Error Alert -->
      <ccl-alert 
        variant="error" 
        title="Error" 
        message="Failed to save changes. Please try again."
        [dismissible]="true"
        (closed)="onAlertClosed('error')">
      </ccl-alert>

      <!-- Custom Icon Alert -->
      <ccl-alert 
        variant="info" 
        message="New feature available!"
        icon="🎉"
        [dismissible]="true"
        (closed)="onAlertClosed('info')">
      </ccl-alert>
    </div>
  `
})
export class ExampleComponent {
  onAlertClosed(type: string) {
    console.log(`${type} alert was closed`);
  }
}
```

## Styling

The alert component uses design tokens for consistent styling:

- **Background**: Uses `color-mix()` with 10% opacity of the variant color
- **Border**: Matches the variant color
- **Text**: Uses the variant color
- **Icons**: Automatic default icons (✓, ⚠, ✕, ℹ) or custom icons

## Accessibility

- **ARIA Role**: Uses `role="alertdialog"` for screen readers
- **Close Button**: Includes `aria-label="Close"` for accessibility
- **Keyboard Navigation**: Close button is focusable and clickable
- **Color Contrast**: Meets WCAG guidelines for text contrast

## Theming

Alerts automatically use your theme's color tokens:

```css
/* Custom theme overrides */
:root, :host {
  --color-info: #3b82f6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}
```