TextBoxExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="TextBox" class="TextBoxDocumentation_Form1">
        <ng-template let-model>
            <div class="TextBox">
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="17">TextBox</wm-label>
                <wm-button #button1 id="button1" [model]="model.button1" class="button1" tabindex="18"></wm-button>
                <wm-button #button2 id="button2" [model]="model.button2" class="button2" tabindex="19"></wm-button>
                <wm-button #button4 id="button4" [model]="model.button4" class="button4" tabindex="20"></wm-button>
                <wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="21"></wm-button>
                <wm-label #label2 id="label2" [model]="model.label2" class="label2" tabindex="22">Configuration</wm-label>
                <wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="23">Max Length</wm-label>
                <wm-button #button5 id="button5" [model]="model.button5" class="button5" tabindex="24"  (Click)="button5_Click(model.textBox2.Text)"></wm-button>
                <wm-label #label4 id="label4" [model]="model.label4" class="label4" tabindex="25">Appearance</wm-label>
                <wm-button #button7 id="button7" [model]="model.button7" class="button7" tabindex="26"></wm-button>
                <wm-button #button6 id="button6" [model]="model.button6" class="button6" tabindex="27"></wm-button>
                <wm-button #button9 id="button9" [model]="model.button9" class="button9" tabindex="28"></wm-button>
                <wm-button #button8 id="button8" [model]="model.button8" class="button8" tabindex="29"></wm-button>
                <wm-button #button9 id="button10" [model]="model.button10" class="button10" tabindex="30"></wm-button>
                <wm-button #button11 id="button11" [model]="model.button11" class="button11" tabindex="31"></wm-button>
                <wm-textbox #textBox1 id="textBox1" [model]="model.textBox1" class="textBox1" tabindex="32" 
                    (TextChanged)="textbox1_TextChanged()" 
                    (KeyPress)="textbox1_KeyPress()" 
                    (LostFocus)="textbox1_LostFocus()"
                ></wm-textbox>
                <wm-textbox #textBox2 id="textBox2" [model]="model.textBox2" class="textBox2" tabindex="33"></wm-textbox>
                <wm-textbox #textBox3 id="textBox3" [model]="model.textBox3" class="textBox3" tabindex="34"></wm-textbox>
            </div>
        </ng-template>
    </wm-window>
</div>

TextBoxExample.css

@import "../../../../assets/style/live-demos.css";

.TextBoxDocumentation_Form1 {
    left: -1px;
    top: -1px;
}
.TextBoxDocumentation_Form1 .TextBox {
    width: 800px;
    height: 296px;
    overflow: hidden;
}
.TextBoxDocumentation_Form1 .label1 {
    width: auto;
    font-size: 14.25pt;
    left: 50px;
    top: 97px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TextBoxDocumentation_Form1 .button1 {
    left: 401px;
    top: 96px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button2 {
    left: 401px;
    top: 125px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button4 {
    left: 482px;
    top: 96px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button3 {
    left: 482px;
    top: 125px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .label2 {
    width: auto;
    font-size: 14.25pt;
    left: 505px;
    top: 12px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TextBoxDocumentation_Form1 .label3 {
    width: auto;
    font-size: 12pt;
    left: 651px;
    top: 56px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TextBoxDocumentation_Form1 .button5 {
    left: 651px;
    top: 125px;
    width: 100px;
    height: 47px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .label4 {
    width: auto;
    font-size: 12pt;
    left: 430px;
    top: 56px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TextBoxDocumentation_Form1 .button7 {
    left: 401px;
    top: 183px;
    width: 75px;
    height: 39px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button6 {
    left: 482px;
    top: 183px;
    width: 75px;
    height: 39px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button9 {
    left: 401px;
    top: 154px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}
.TextBoxDocumentation_Form1 .button8 {
    left: 482px;
    top: 154px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}

.TextBoxDocumentation_Form1 .button10 {
    left: 401px;
    top: 225px;
    width: 75px;
    height: 39px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}

.TextBoxDocumentation_Form1 .button11 {
    left: 482px;
    top: 225px;
    width: 75px;
    height: 39px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid var(--primary-color-demos);
}

.TextBoxDocumentation_Form1 .textBox1 {
    left: 50px;
    top: 125px;
    width: 242px;
    height: 23px;
    position: absolute;
    border-color: black;
    max-width: 270px;
    max-height: 70px;
}
.TextBoxDocumentation_Form1 .textBox2 {
    left: 651px;
    top: 96px;
    width: 100px;
    height: 23px;
    position: absolute;
    border-color: black;
}
.TextBoxDocumentation_Form1 .textBox3 {
    left: 625px;
    top: 180px;
    max-width: 158px;
    max-height: 92px;
    height: 92px;
    min-width: 158px;
    min-height: 25px;
    position: absolute;
    border-color: black;
}