DataJuggler.Blazor.Components/TextBoxComponent.razor at master · DataJuggler/DataJuggler.Blazor.Components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@namespace DataJuggler.Blazor.Components
@using DataJuggler.Blazor.Components.Enumerations
@using BlazorStyled

<Styled @bind-Classname=@Column1Style>
    display: inline-block;
    height: 100%;
    width: @Column1WidthStyle;
    position: @Position;
</Styled>
<Styled @bind-Classname=@Column2Style>
    position: @Position;
    top: @TextBoxTopStyle;
    left: @TextBoxLeftStyle;
    display: inline-block;
    width: @TextBoxWidthStyle;
    height: 100%;
    margin-left: @MarginLeftStyle;
</Styled>
<Styled @bind-Classname=@Column3Style>
    display: inline-block;
    width: @ImageWidthStyle;
    height: 100%;
    background-color: @ImageBackColor;
    width: @Column3WidthStyle;
</Styled>
<Styled @bind-Classname=@TextBoxStyle>
    background-color: @TextBoxBackColor;
    height: @HeightStyle;
    font-size: @TextBoxFontSizeStyle;
    font-family: @TextBoxFontName;
    width: @TextBoxWidthStyle;
    overflow: hidden;
    z-index: @ZIndex;
    color: @TextBoxTextColor;
    border-width: @BorderWidthStyle;
    border-color: @BorderColor;
</Styled>
<Styled @bind-Classname=@ImageStyle>
    background-image: url('@ImageUrl');
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 100% 100%;
    transform: scale(@ImageScale);
    transform-origin: left;
    width: @ImageWidthStyle;
    height: 100%;
</Styled>
<Styled @bind-Classname=@LabelStyle>
    background-color: @LabelBackgroundColor;
    color: @LabelColor.Name;
    font-size: @LabelFontSizeStyle;
    font-family: @LabelFontName;
    text-align: @LabelTextAlign;
    top: @LabelTopStyle;
    left: @LabelLeftStyle;
</Styled>
<Styled @bind-Classname=@TextBoxControlStyle>
    display: @DisplayStyle;
    width: @WidthStyle;
    position: @Position;
    left: @LeftStyle;
    top: @TopStyle;
    height: @HeightStyle;
    background-color: @BackgroundColor;
    z-index: @ZIndex;
    visibility: @Visibility;
</Styled>
<Styled @bind-Classname=@BottomMarginStyle>
    width: @WidthStyle;
    height: @MarginBottomStyle;
</Styled>

<div class="@TextBoxControlStyle @ClassName @TextWrapping">
    @if (ShowCaption)
    {
        <div class="@Column1Style @LabelStyle">
            <Label Name="LabelControl" Width="@LabelWidth" Height="@LabelHeight"
                TextAlign="@LabelTextAlign"
                Text="@Caption" TextColor="@LabelColor" ClassName="@LabelClassName"></Label>
        </div>
    }
    <div class="@Column2Style">
        @if (Multiline)
        {
            <div>
                @if (Enabled)
                {
                    <textarea class="@TextBoxStyle @TextBoxClassName" type=@InputType @bind="@Text"
                        @bind:event="oninput" @onkeydown="Enter" onfocus="this.select()" tabindex="@TabIndex" />
                }
                else
                {
                    <textarea class="@TextBoxStyle @TextBoxClassName" disabled type=@InputType @bind="@Text" />
                }
            </div>
        }
        else
        {
            <span>
                @if (Enabled)
                {
                    if (HandleChangeOption == HandleChangeEnum.OnKeyDown)
                    {
                        <input class="@TextBoxStyle @TextBoxClassName" autocomplete="@AutoCompleteStyle"
                                type=@InputType @bind="@Text" pattern="@Pattern" @onblur="HandleBlur"
                                @bind:event="oninput" onfocus="this.select()" tabindex="@TabIndex"
                                onClick="this.select();" @onkeydown="Enter" @ref="InnerControl" />
                    }
                    else
                    {
                        <input class="@TextBoxStyle @TextBoxClassName" autocomplete="@AutoCompleteStyle"
                                type=@InputType @bind="@Text" pattern="@Pattern" @onblur="HandleBlur"
                                onfocus="this.select();" tabindex="@TabIndex"
                                onClick="this.select();" @ref="InnerControl" />
                    }
                }
                else
                {
                    <input class="@TextBoxStyle @TextBoxClassName" autocomplete="off" disabled type=@InputType @bind="@Text" @bind:event="oninput" @ref="InnerControl" />
                }
            </span>
        }
    </div>
    @if (ShowImage)
    {
        <div class="@Column3Style">
            <div class="@ImageClassName">
                <div class="@ImageStyle"></div>
            </div>
        </div>
    }
</div>
<div class="@BottomMarginStyle"></div>