# Accordion Component

A flexible and customizable accordion component for collapsible content sections.

## Features

- **Collapsible Sections**: Expandable and collapsible content panels
- **Two Modes**: 
  - **Multiple Mode**: Multiple panels can be open simultaneously
  - **Exclusive Mode**: Only one panel can be open at a time
- **Dynamic Content**: Support for any Svelte component as panel content
- **Custom Headers**: Optional custom header components
- **Responsive Design**: Compact mode for smaller screens
- **Accessible**: Built with accessibility best practices

## Basic Usage

```svelte
<script>
import Accordion, { type AccordionItem } from '@ticatec/uniface-element/Accordion';
import MyComponent from './MyComponent.svelte';

const accordionItems: AccordionItem[] = [
  {
    title: 'Section 1',
    component: MyComponent,
    params: { data: 'example' }
  },
  {
    title: 'Section 2', 
    component: MyComponent,
    params: { data: 'another example' }
  }
];
</script>

<Accordion accordions={accordionItems} />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `accordions` | `AccordionItem[]` | `[]` | Array of accordion items to display |
| `exclusive` | `boolean` | `false` | Whether only one panel can be open at a time |
| `activeItem` | `AccordionItem` | `null` | Currently active item (used in exclusive mode) |
| `compact` | `boolean` | `false` | Enable compact styling for smaller screens |
| `style` | `string` | `''` | Custom CSS styles |
| `class` | `string` | `''` | Additional CSS classes |

## AccordionItem Interface

```typescript
interface AccordionItem {
  title: string;        // Display title for the accordion header
  component: any;       // Svelte component to render in the panel
  params?: any;         // Props to pass to the component
}
```

## Examples

### Multiple Open Panels (Default)

```svelte
<Accordion accordions={items} />
```

### Exclusive Mode (Only One Open)

```svelte
<Accordion 
  accordions={items} 
  exclusive={true}
  bind:activeItem={currentActive}
/>
```

### Compact Mode

```svelte
<Accordion 
  accordions={items} 
  compact={true}
/>
```

### Custom Styling

```svelte
<Accordion 
  accordions={items}
  style="border: 1px solid #ccc; border-radius: 8px;"
  class="my-custom-accordion"
/>
```

## Behavior

### Multiple Mode
- Users can expand/collapse any number of panels
- Clicking a panel header toggles its open/closed state
- No automatic closing of other panels

### Exclusive Mode
- Only one panel can be open at a time
- Opening a new panel automatically closes the previously open panel
- First panel opens automatically on mount if no `activeItem` is specified
- Shows folder icon for the currently open panel

## Styling

The component uses the following CSS classes:

- `.uniface-accordion-panel` - Main container
- `.accordion` - Individual accordion item
- `.header` - Accordion header (clickable)
- `.content` - Accordion content area
- `.compact` - Applied when compact mode is enabled

## Accessibility

- Headers are clickable for keyboard navigation
- Proper ARIA attributes for screen readers
- Visual indicators for open/closed states
- Focus management for keyboard users

## Icon Usage

The component uses Google Material Icons:
- `icon_google_keyboard_arrow_down` - Collapsed state (multiple mode)
- `icon_google_keyboard_arrow_up` - Expanded state (multiple mode)  
- `icon_google_folder_open` - Active state (exclusive mode)

## Advanced Usage

### Custom Header Component

You can provide a custom header component by setting the `header` prop on AccordionItemView:

```svelte
<AccordionItemView 
  title={item.title}
  isOpen={isOpen}
  header={CustomHeaderComponent}
  onClick={handleClick}
>
  <!-- content -->
</AccordionItemView>
```

### Dynamic Content

Accordion items can contain any Svelte component with dynamic parameters:

```javascript
const dynamicItems = [
  {
    title: 'User Profile',
    component: UserProfile,
    params: { userId: 123, editable: true }
  },
  {
    title: 'Settings',
    component: SettingsPanel,
    params: { theme: 'dark', language: 'en' }
  }
];
```