ComboBox.razor

@using DataJuggler.UltimateHelper
@using DataJuggler.Blazor.Components.Enumerations
@using BlazorStyled
@using System.Drawing

<Styled @bind-Classname=@ContainerStyle>
    text-align: left;
    height: @ControlHeightStyle;
    min-height: @ControlHeightStyle;
    max-height: @ControlHeightStyle;
    width: @ControlWidthStyle;
    min-width: @ControlWidthStyle;
    max-width: @ControlHeightStyle;
    position: @Position;
    top: @TopStyle;
    left: @LeftStyle;
    display: @Display;
    justify-content: left;
    gap: 0px;    
    z-index: @ZIndex;    
</Styled>
<Styled @bind-Classname=@ListItemContainer>    
    font-family: @FontName
    font-size: @FontSizeStyle;
    text-align: left;
    background-color: @ListBackgroundColorName;
    width: @ListItemWidthStyle;
    min-width: @ListItemWidthStyle;
    max-width: @ListItemWidthStyle;
    height: @ListContainerHeightStyle;
    min-height: @ListContainerHeightStyle;
    max-height: @ListContainerHeightStyle;
    position: @ListItemPosition;
    color: @ListItemTextColorName;
    left: @ListItemLeftStyle;
    top: @ListItemTopStyle;    
    border-width: 1px;
    border-color: gray;
    border-style: solid;
    overflow: visible;
</Styled>
<Styled @bind-Classname=@ListItemStyle>
    position: @Position;
    width: @ListItemWidthStyle;
    min-width: @ListItemWidthStyle;
    height: @ListItemHeightStyle;    
    cursor: pointer;
</Styled>
<Styled @bind-Classname=@ButtonStyle>
    display: inline;
    text-align: left;
    background-size: 100% 100%;    
    height: 25.6px;
    position: @ButtonPosition;
    left: @ButtonLeftStyle;
    top: @ButtonTopStyle;
    cursor: pointer;
    z-index: @ZIndex;
</Styled>
<Styled @bind-Classname=@CheckedListBoxStyle>   
    position: @CheckedListPosition;
    height: @CheckedListheightStyle;
    min-height: @CheckedListheightStyle;
    max-height: @CheckedListheightStyle;
    width: @CheckedListWidthStyle;
    max-width: @CheckedListWidthStyle;
    min-width: @CheckedListWidthStyle;    
    left: @CheckedListLeftStyle;
    top: @CheckedListTopStyle;    
    overflow: visible;
</Styled>
<Styled @bind-Classname=@ListContainerStyle>
    display: @ListDisplay;
    position: @ListContainerPosition;
    left: @ListContainerLeftStyle;
    top: @ListContainerTopStyle;
    z-index: @ZIndexPlus10;
    width: @ListItemWidthStyle;
    min-width: @ListItemWidthStyle;
    max-width: @ListItemWidthStyle;
    height: @ListContainerHeightStyle;
    min-height: @ListContainerHeightStyle;
    max-height: @ListContainerHeightStyle;
</Styled>

<div class="@ContainerStyle @ClassName textdonotwrap" tabindex="0" @onblur="HandleOnBlur">
    <table>
        <tr class="textdonotwrap">
            <td width="@TextBoxWidth">
                <TextBoxComponent Name="DisplayTextBox" Caption="@LabelText" Parent="this" 
                ClassName="displayinline" Column1Width="@Column1Width" 
                LabelLeft="@LabelLeft" LabelTop="@labelTop" NotifyParentOnBlur="@NotifyParentOnBlur"
                Column2Width="@Column2Width" TextBoxWidth="@TextBoxWidth" Height="@TextBoxHeight"
                LabelFontName="@LabelFontName" LabelFontSize ="@LabelFontSize" Left="@TextBoxLeft"
                LabelColor="@LabelColor.Name" OnTextChangedCallback="OnTextChanged"
                TextBoxFontSize="@TextBoxFontSize" TextBoxFontName="@TextBoxFontName"
                SendAllTextToParent=true Text="@SelectedText" Enabled="@TextBoxEnabled"
                Width="@Width" LabelClassName="@LabelClassName" ZIndex="@ZIndexPlus20">
                </TextBoxComponent>
            </td>
            @if (ShowButton)
            {
                <td width="@Column2Width">
                    <ImageButton ClassName="@ButtonStyle" ButtonNumber="1" HeightUnit="px" 
                        Height="@ButtonHeight" Unit="px" Width="@ButtonWidth" Name="CalendarButton" 
                        Position="@ButtonPosition" ZIndex="@ZIndexPlus30" Left="@ButtonLeft" Top=@ButtonTop 
                        ImageUrl="@ButtonUrl" Parent="this" ClickHandler="@ButtonClicked">
                    </ImageButton>
                </td>
            }
        </tr>        
    </table>
    <div class="@ListContainerStyle">
        @if (CheckListMode)
        {
            <div class="@CheckedListBoxStyle">
                <CheckedListBox Parent="this" HeightUnit="@CheckedListHeightUnit" Height="@CheckedListheight" 
                    Position="@CheckedListPosition" Unit="@CheckedListUnit" Width=@CheckedListWidth 
                    ListItemWidth=@ListItemWidth  ListItemHeight="@ListItemHeight" ListItemLeft=@CheckedListItemLeft 
                    ListItemTop="@CheckedListItemTop" ListItemBackgroundColor=@ListItemBackgroundColor                    
                    CheckBoxTextXPosition="@CheckBoxTextXPosition" CheckBoxTextYPosition="@CheckBoxTextYPosition"
                    Top="0" ZIndex="@ZIndexPlus10" ListItemMarginBottom="@ListItemMarginBottom"
                    NotifyParentOnBlur="true" SetFocusOnFirstRender="true"
                    CheckBoxHeight="@CheckBoxHeight" CheckBoxwidth="@CheckBoxWidth"
                    CheckBoxXPosition=@CheckBoxXPosition  CheckBoxYPosition="@CheckBoxYPosition" 
                    Left=@CheckedListLeft  ListItemClassName="@ListItemClassName"  ClassName="@CheckedListClassName">
                </CheckedListBox>
            </div>                
        }
        else
        {      
            <div class="@ListItemContainer @DropdownClassName">
                <select class="form-control" name="ListBox" size="@VisibleCount"
                        id="ComboBoxListBox" @onchange="SelectionChanged">
                    @foreach (Item item in Items)
                    {
                        <option class="@ListItemStyle nopadding" >@item.Text</option>
                    }
                </select>
            </div>               
        }
    </div>
</div>