# PivotKeysComponent  

The `PivotKeysComponent` is a Blazor component designed to manage and display a list of selectable keys. It provides a drag-and-drop interface for reordering items and allows users to toggle the selection state of each key.  

## Features  
- **Drag-and-Drop Support**: Enables reordering of items in the list.  
- **Two-Way Binding**: Supports two-way binding for the selected keys.  
- **Dynamic Key Management**: Automatically synchronizes the displayed items with the provided key list.  
- **Selection Toggle**: Allows users to toggle the selection state of individual keys.  

## Parameters  

| Parameter      | Type                          | Default Value | Description                                                                 |
|----------------|-------------------------------|---------------|-----------------------------------------------------------------------------|
| `AllKeys`      | `IReadOnlyCollection<string>` | `null!`       | The complete list of available keys.                                       |
| `Value`        | `string[]`                   | `[]`          | The currently selected keys.                                               |
| `ValueChanged` | `EventCallback<string[]>`     | `null`        | Callback invoked when the selected keys are updated.                       |
| `Class`        | `string`                     | `""`          | CSS class to apply to the root container of the component.                 |
| `LabelClass`   | `string`                     | `""`          | CSS class to apply to the labels of the items.                             |

## Properties  

| Property       | Type                          | Description                                                                 |
|----------------|-------------------------------|-----------------------------------------------------------------------------|
| `Items`        | `List<ItemWithSelection>`     | The list of items displayed in the component, including their selection state. |

## Behavior  

- **Dynamic Item Synchronization**: The component synchronizes its internal list of items (`Items`) with the `AllKeys` and `Value` parameters.  
- **Selection State Management**: The `IsSelected` property of each item is bound to a checkbox, allowing users to toggle the selection state.  
- **Change Notification**: Changes to the selection state or item order trigger the `ValueChanged` callback.  
- **Drag-and-Drop**: Items can be reordered using drag-and-drop functionality provided by the `DragDropList` component.  

## Methods  

| Method           | Description                                                                 |
|------------------|-----------------------------------------------------------------------------|
| `OnChanged`      | Handles changes to the selection state of an item and updates the `Value`. |
| `SyncToItems`    | Synchronizes the internal list of items with the `Value` and `AllKeys`.    |
| `SyncToValue`    | Generates the `Value` array based on the selected items.                   |
| `Same`           | Compares two lists or arrays for equality.                                |

## Usage  

### Example: Basic Usage