## Modal

A standalone modal component with overlay, focus management, keyboard navigation, and accessibility features.

Selector: `ccl-modal`

### Quick Start

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

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

3. **Use in template:**
```html
<button (click)="showModal = true">Open Modal</button>

<ccl-modal 
  [isOpen]="showModal" 
  title="My Modal"
  (closed)="showModal = false"
>
  <p>Modal content goes here</p>
</ccl-modal>
```

### Inputs
- `isOpen: boolean` – controls modal visibility
- `title: string` – optional modal title (renders in header)
- `size: 'sm' | 'md' | 'lg'` – modal width (default: 'md')
  - `sm`: 300px max-width
  - `md`: 500px max-width  
  - `lg`: 800px max-width

### Outputs
- `closed: EventEmitter<void>` – emitted when modal closes (overlay click, close button, ESC key)

### Basic example with button click
```typescript
// Component TypeScript
import { Component } from '@angular/core';
import { ModalComponent } from '@Crystal-Code-Labs/ccl-ui-components';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ModalComponent],
  template: `
    <button (click)="openModal()">Open Modal</button>
    
    <ccl-modal 
      [isOpen]="showModal" 
      title="Confirm Action"
      (closed)="closeModal()"
    >
      <p>Are you sure you want to proceed?</p>
      
      <div modal-footer>
        <button (click)="confirm()">Confirm</button>
        <button (click)="closeModal()">Cancel</button>
      </div>
    </ccl-modal>
  `
})
export class ExampleComponent {
  showModal = false;

  openModal() {
    this.showModal = true;
  }

  closeModal() {
    this.showModal = false;
  }

  confirm() {
    // Handle confirmation logic
    console.log('Confirmed!');
    this.closeModal();
  }
}
```

### Simple example
```html
<ccl-modal 
  [isOpen]="showModal" 
  title="Simple Modal"
  (closed)="showModal = false"
>
  <p>This is a simple modal content.</p>
</ccl-modal>
```

### Multiple modals example
```typescript
// Component with multiple modals
export class MultiModalComponent {
  showInfoModal = false;
  showConfirmModal = false;
  showFormModal = false;

  openInfoModal() {
    this.showInfoModal = true;
  }

  openConfirmModal() {
    this.showConfirmModal = true;
  }

  openFormModal() {
    this.showFormModal = true;
  }

  closeAllModals() {
    this.showInfoModal = false;
    this.showConfirmModal = false;
    this.showFormModal = false;
  }
}
```

```html
<!-- Template -->
<button (click)="openInfoModal()">Info Modal</button>
<button (click)="openConfirmModal()">Confirm Modal</button>
<button (click)="openFormModal()">Form Modal</button>

<!-- Info Modal -->
<ccl-modal 
  [isOpen]="showInfoModal" 
  title="Information"
  (closed)="showInfoModal = false"
>
  <p>This is an informational modal with some details.</p>
</ccl-modal>

<!-- Confirmation Modal -->
<ccl-modal 
  [isOpen]="showConfirmModal" 
  title="Confirm Action"
  (closed)="showConfirmModal = false"
>
  <p>Are you sure you want to delete this item?</p>
  <div modal-footer>
    <button (click)="deleteItem()">Delete</button>
    <button (click)="showConfirmModal = false">Cancel</button>
  </div>
</ccl-modal>

<!-- Form Modal -->
<ccl-modal 
  [isOpen]="showFormModal" 
  title="Edit Item"
  (closed)="showFormModal = false"
>
  <form>
    <input type="text" placeholder="Item name" />
    <textarea placeholder="Description"></textarea>
  </form>
  <div modal-footer>
    <button type="submit">Save</button>
    <button type="button" (click)="showFormModal = false">Cancel</button>
  </div>
</ccl-modal>
```

### Size Variants
```html
<!-- Small Modal (300px) -->
<ccl-modal [isOpen]="showSmallModal" size="sm" title="Small Modal" (closed)="showSmallModal = false">
  <p>This is a small modal perfect for confirmations or simple messages.</p>
</ccl-modal>

<!-- Medium Modal (500px) - Default -->
<ccl-modal [isOpen]="showMediumModal" size="md" title="Medium Modal" (closed)="showMediumModal = false">
  <p>This is a medium modal, great for most content and forms.</p>
</ccl-modal>

<!-- Large Modal (800px) -->
<ccl-modal [isOpen]="showLargeModal" size="lg" title="Large Modal" (closed)="showLargeModal = false">
  <p>This is a large modal perfect for complex forms, detailed content, or data tables.</p>
  <div style="margin: 1rem 0;">
    <h4>Features:</h4>
    <ul>
      <li>More space for content</li>
      <li>Better for complex layouts</li>
      <li>Ideal for forms and data display</li>
    </ul>
  </div>
</ccl-modal>
```

### Without title
```html
<ccl-modal [isOpen]="true">
  <p>Modal without header</p>
</ccl-modal>
```

### Footer content
Use `modal-footer` attribute to project content into the footer:
```html
<ccl-modal [isOpen]="true" title="Settings">
  <form>
    <!-- form content -->
  </form>
  
  <div modal-footer>
    <button type="submit">Save</button>
    <button type="button" (click)="closeModal()">Cancel</button>
  </div>
</ccl-modal>
```

### Accessibility Features
- **Focus management**: Traps focus within modal, restores focus on close
- **Keyboard navigation**: ESC key closes modal
- **ARIA attributes**: `role="dialog"`, `aria-modal="true"`, `aria-labelledby`
- **Keyboard events**: All click events have corresponding keyup handlers

### Closing the modal
The modal closes when:
- Overlay is clicked
- Close button (×) is clicked  
- ESC key is pressed
- `closed` event is emitted

### Theming
Uses CSS variables for styling:
```css
:root, :host {
  --color-overlay: rgba(0, 0, 0, 0.6);     /* overlay background */
  --color-background: #fff;                /* modal background */
  --color-border: #eee;                    /* header/footer borders */
  --radius-md: 8px;                        /* modal border radius */
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.2); /* modal shadow */
  --spacing-md: 1rem;                      /* padding */
  --z-index-modal: 1000;                  /* z-index */
}
```

### Size variants
- **sm**: 300px width
- **md**: 500px width  
- **lg**: 800px width