@page "/dropdown"
@page "/docs/guides/components/dropdown.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DropDown</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a dropdown select component with two-way data binding, customizable text/value properties, item templates, disabled item states, clearable selections, editable mode for custom input, and open/close event handling.
</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>AllowFiltering</code> property to enable editable mode, allowing users to type and filter dropdown items.
</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#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." }
    };
}
