TimeComponent.razor

@using BlazorStyled
@using DataJuggler.Blazor.Components
@using DataJuggler.Blazor.Components.Enumerations
@using DataJuggler.Blazor.Components.Delegates

<Styled @bind-Classname="@TimeComponentStyle">
    display: @Display;
    position: @Position;
    top: @TopStyle;
    left: @LeftStyle;
    width: @WidthStyle;
    height: @HeightStyle;
    font-size: @FontSizeStyle;
    outline: none;
    border-radius: 0px;    
</Styled>
<Styled @bind-Classname="@HoursTextBoxStyle">
    border-left: 1px;
    border-top: 1px;
    border-bottom: 1px;
    border-right: 1px;
    text-align: right;
</Styled>
<Styled @bind-Classname="@ColonTextBoxStyle">
    border-left: 0px;
    border-top: 1px;
    border-bottom: 1px;
    border-right: 0px;
</Styled>
<Styled @bind-Classname="@MinutesTextBoxStyle">
    border-left: 1px;
    border-top: 1px;
    border-bottom: 1px;
    border-right: 1px;
</Styled>

<table class="@TimeComponentStyle textdonotwrap timewrapper">
    <tr>
        <td width="@Column1Width">
            <Label Name="LabelComponent" Parent="this" Caption="@Caption" Left="@LabelLeft" 
                FontSize="@LabelFontSize" FontName="@LabelFontName" ZIndex="60"
                Top=@LabelTop Width="80" TextColor="@LabelColor.Name"></Label>
        </td>        
        <td width="@HoursTextBoxWidth">
            <TextBoxComponent Name="HoursTextBox" Column1Width="0" ShowCaption="false"
                TextBoxClassName="@HoursTextBoxStyle" SendAllTextToParent="true"
                Column2Width="@HoursTextBoxWidthPlus4" Width="@HoursTextBoxWidth"
                OnTextChangedCallback="ValidateHours" HandleChangeOption="HandleChangeEnum.OnChange"
                TextBoxWidth="@HoursTextBoxWidth" Left="@HoursTextBoxLeft" FontSize="@FontSize"
                FontName="@FontName"
                Display="inline-block" ZIndex="20" Parent="this" TabIndex="1">
            </TextBoxComponent>
        </td>
        <td width="4">
            <TextBoxComponent Name="ColonTextBox" Column1Width="0" Parent="this" 
                Left="@MinutesTextBoxLeftPlus3" Column2Width="4"
                FontSize="@FontSize" LabelFontName="@LabelFontName" LabelFontSize ="@LabelFontSize"
                Width="4" TextBoxClassName="@ColonTextBoxStyle" Enabled="false" Text=":"
                TextBoxWidth="@MinutesTextBoxWidth" Display="inline-block" FontName="@FontName"
                ShowCaption="false" ZIndex="40" TabIndex="2">
            </TextBoxComponent>
        </td>
        <td width="@MinutesTextBoxWidth">
            <TextBoxComponent Name="MinutesTextBox" Column1Width="0" Parent="this" 
                Left="@HoursTextBoxLeft" Column2Width="@MinutesTextBoxWidth" FontSize="@FontSize"
                Width="@MinutesTextBoxWidth" TextBoxClassName="@MinutesTextBoxStyle"
                TextBoxWidth="@MinutesTextBoxWidth" Display="inline-block" Caption=""
                TextBoxFontSize="@FontSize" TextBoxFontName="@FontName"
                OnTextChangedCallback="ValidateMinutes" HandleChangeOption="HandleChangeEnum.OnChange"
                ShowCaption="false" ZIndex="40" TabIndex="2" SendAllTextToParent="true">
            </TextBoxComponent>
        </td>        
        @if (ShowAMPMLabel)
        {
            <td width="20">
                <Label Name="LabelAMPMComponent" Parent="this" Left="@AMPMLabelLeft" Caption="" 
                    FontSize="@LabelFontSize" TextColor="@LabelColor.Name" FontName="@FontName"
                    ClassName="textalignright" EnableDoubleClick="true" NotifyParentOnDoubleClick="true"
                    Top=@LabelTop Width="40" Text="AM" ZIndex="60"></Label>
            </td>
        }
    </tr>    
</table>