CheckedListBox.razor

@using BlazorStyled

<Styled @bind-Classname=@CheckedlistboxStyle>
    background-color: @ListBackgroundColor.Name;
    display: @DisplayStyle;    
    flex-direction: column;
    gap: @ListItemMarginBottomStyle;
    font-size: @FontSizeStyle;
    height: @HeightStyle;
    min-height: @HeightStyle;
    max-height: @HeightStyle;
    margin-top: 0;
    margin-bottom: 0;
    padding: 1px;
    position: @Position;
    left: @LeftStyle;
    Top: @TopStyle;
    width: @WidthStyle;
    min-width: @WidthStyle;
    max-width: @WidthStyle;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    z-index: @ZIndex;
</Styled>
<Styled @bind-Classname=@ListitemStyle>
    background-color: @ListItemBackgroundColor.Name;
    color: @ListItemTextColorName;
    font-family: Calibri;
    font-size: @FontSizeStyle;
    height: @ListItemHeightStyle;
    left: @ListItemLeftStyle;
    margin-bottom: 0;
    max-height: @ListItemHeightStyle;
    padding-bottom: 0;
    padding-top: 0;
    position: @listItemPosition;
    text-align: left;
    top: @ListItemTopStyle;
    width: @ListItemWidthStyle;
    min-width: @ListItemWidthStyle;
    max-width: @ListItemWidthStyle;
    z-index: @ZIndex;
    object-fit: fill;
    clear: both;
</Styled>

<div class="@CheckedlistboxStyle" tabindex="0" @onblur="HandleOnBlur" @ref="ContainerElement">
    <table class="@ClassName" width="@Width" height="@Height">
        @if (HasItems)
        {  
            @foreach (Item item in Items)
            {
                <tr>
                    <td width="@ListItemWidth" height="@ListItemHeight">
                        <div class="@ListitemStyle">
                            <CheckBoxComponent Parent="this" Name="@item.Id.ToString()" Unit="@Unit"                                
                                Column1Width="@LabelWidth" Column2Width="@Width" CheckBoxValue="@item.ItemChecked"
                                HeightUnit="@HeightUnit" CheckBoxXPosition="@CheckBoxXPosition"
                                Height="@CheckBoxHeight" Width="@CheckBoxWidth"
                                CheckBoxYPosition="@CheckBoxYPosition" ClassName="@ListItemClassName"
                                CheckBoxTextXPosition="@CheckBoxTextXPosition" CheckBoxTextYPosition="@CheckBoxTextYPosition"
                                Text="@item.Text" ExternalId="@item.Id" BackgroundColor="@ListItemBackgroundColor.Name">
                            </CheckBoxComponent>
                        </div>
                    </td>
                </tr>
            }
        }
    </table>
</div>