@page "/chip"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Chip
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor Chip is a compact element for tags, statuses, and filters, with optional remove and selection.
</RadzenText>

<RadzenText Anchor="chip#chip-style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Chip Style
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>ChipStyle</code> property to set a predefined chip style, e.g. <code>ChipStyle="BadgeStyle.Primary"</code>.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipStyle">
    <ChipStyle />
</RadzenExample>

<RadzenText Anchor="chip#variant" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Variant
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Variant</code> property to control the chip design variant, e.g. <code>Variant="Variant.Outlined"</code>.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipVariant">
    <ChipVariant />
</RadzenExample>

<RadzenText Anchor="chip#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to set the chip size, e.g. <code>Size="ChipSize.Small"</code>.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipSizes">
    <ChipSizes />
</RadzenExample>

<RadzenText Anchor="chip#icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Icon</code> property to display a material icon before the chip text.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipIcons">
    <ChipIcons />
</RadzenExample>

<RadzenText Anchor="chip#selected" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Selected
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Selected</code> property to highlight a chip as selected.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipSelected">
    <ChipSelected />
</RadzenExample>

<RadzenText Anchor="chip#disabled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Disabled</code> property to prevent user interaction with the chip.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipDisabled">
    <ChipDisabled />
</RadzenExample>

<RadzenText Anchor="chip#events" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Events
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Handle <code>Click</code> and <code>Close</code> events to respond to user interactions.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipEvents">
    <ChipEvents />
</RadzenExample>

<RadzenText Anchor="chip#add-remove" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Add / Remove
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Combine removable chips with an input to build add/remove patterns like email recipient lists.
</RadzenText>
<RadzenExample ComponentName="Chip" Example="ChipAddRemove">
    <ChipAddRemove />
</RadzenExample>

<RadzenText Anchor="chip#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys provide a way for users to navigate and interact with Radzen Blazor Chip component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Move focus to the chip." },
        new KeyboardShortcut { Key = "Space / Enter", Action = "Click the focused chip." },
        new KeyboardShortcut { Key = "Delete / Backspace", Action = "Remove the focused chip when close is enabled." }
    };
}
