@page "/dropdown"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Radzen Blazor DropDown lets users pick a value from a list - a select / combobox with data binding, filtering, multiple selection, grouping, templates, and virtualization for large lists.
</RadzenText>

<RadzenText Anchor="dropdown#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DropDown</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownBindValue">
    <DropDownBindValue />
</RadzenExample>

<RadzenText Anchor="dropdown#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDown using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownChangeEvent">
    <DropDownChangeEvent />
</RadzenExample>

<RadzenText Anchor="dropdown#text-and-value-properties" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define Text and Value properties
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>TextProperty</code> and <code>ValueProperty</code> properties to specify which fields to display and use as values.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownTextValueProperties">
    <DropDownTextValueProperties />
</RadzenExample>

<RadzenText Anchor="dropdown#template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDown with templates
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Template</code>,<code>HeaderTemplate</code> and <code>FooterTemplate</code> properties to customize the dropdown list.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownTemplate">
    <DropDownTemplate />
</RadzenExample>

<RadzenText Anchor="dropdown#disable-item" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disable specific item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>IsDisabled</code> parameter of <code>RadzenDropDownItem</code> to disable specific items in the dropdown.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownDisabledItem">
    <DropDownDisabledItem />
</RadzenExample>

<RadzenText Anchor="dropdown#clear-selected-item" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Clear selected item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>AllowClear</code> property to enable a clear button that allows users to deselect the current selection.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownClear">
    <DropDownClear/>
</RadzenExample>

<RadzenText Anchor="dropdown#editable-dropdown" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Editable DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>ValueTemplate</code> with an embedded input bound to the same value to let users edit the selected item in place. Set <code>ShowValueTemplateOnEmpty</code> to <code>true</code> to render the template (and its editor) even when no item is selected, so the user can type an initial value without first picking from the list. The pattern requires the DropDown <code>Value</code> to be the displayed text itself (e.g. a primitive type) and is not designed for use with <code>TextProperty</code>/<code>ValueProperty</code>.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownEdit">
    <DropDownEdit/>
</RadzenExample>
<RadzenText Anchor="dropdown#open-and-close-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Open and close events
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Handle the <code>Open</code> and <code>Close</code> events to respond when the dropdown popup is opened or closed.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownOpenCloseEvent">
    <DropDownOpenCloseEvent />
</RadzenExample>

<RadzenText Anchor="dropdown#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDown Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>InputSize</code> property to set the DropDown size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownSizes">
    <DropDownSizes />
</RadzenExample>

<RadzenText Anchor="dropdown#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 or key combinations provide a way for users to navigate and interact with Radzen Blazor DropDown component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a DropDown." },
        new KeyboardShortcut { Key = "Alt + DownArrow", Action = "Open DropDown popup." },
        new KeyboardShortcut { Key = "DownArrow on closed popup", Action = "Select next DropDown item." },
        new KeyboardShortcut { Key = "UpArrow on closed popup", Action = "Select previous DropDown item." },
        new KeyboardShortcut { Key = "DownArrow in an opened popup", Action = "Focus next DropDown item." },
        new KeyboardShortcut { Key = "UpArrow in an opened popup", Action = "Focus previous DropDown item." },
        new KeyboardShortcut { Key = "Enter in an opened popup", Action = "Select the focused DropDown item and close the popup." },
        new KeyboardShortcut { Key = "Esc or Alt + DownArrow in an opened popup", Action = "Close the DropDown popup." },
        new KeyboardShortcut { Key = "Alphanumeric", Action = "Focus next DropDown item starting with typed key." }
    };
}
