WindowExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="FormDoc" class="FormDocumentation_FormDoc" #FormDoc>
        <ng-template let-model>
            <div class="FormDoc">
                <wm-button #button2 id="button2" [model]="model.button2" class="button2" tabindex="6" (Click)="button2_Click()"></wm-button>
                <wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="7" (Click)="button3_Click()"></wm-button>
                <wm-button #button4 id="button4" [model]="model.button4" class="button4" tabindex="8" (Click)="button4_Click()"></wm-button>
                <wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="10">Title Bar</wm-label>
                <wm-textbox #textBox3 id="textBox3" [model]="model.textBox3" class="textBox3" tabindex="12"></wm-textbox>
                <wm-button #button6 id="button6" [model]="model.button6" class="button6" tabindex="13" (Click)="button6_Click()" ></wm-button>
                <wm-label #label5 id="label5" [model]="model.label5" class="label5" tabindex="14">Title</wm-label>
                <wm-label #label7 id="label7" [model]="model.label7" class="label7" tabindex="18">Bring To Top</wm-label>
                <wm-button #button8 id="button8" [model]="model.button8" class="button8" tabindex="20"></wm-button>
                <wm-button #button9 id="button9" [model]="model.button9" class="button9" tabindex="21"></wm-button>
            </div>
        </ng-template>
    </wm-window>
</div>

WindowExample.css

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

.FormDocumentation_FormDoc {
    left: -1px;
    top: -1px;
}
.FormDocumentation_FormDoc .FormDoc {
    width: 755px;
    height: 210px;
    overflow: hidden;
}
.FormDocumentation_FormDoc .button2 {
    left: 12px;
    top: 59px;
    width: 136px;
    height: 24px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.FormDocumentation_FormDoc .button3 {
    left: 154px;
    top: 59px;
    width: 136px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.FormDocumentation_FormDoc .button4 {
    left: 12px;
    top: 89px;
    width: 136px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.FormDocumentation_FormDoc .button6 {
    left: 154px;
    top: 137px;
    width: 135px;
    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);
}
.FormDocumentation_FormDoc .button8 {
    left: 443px;
    top: 63px;
    width: 178px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.FormDocumentation_FormDoc .button9 {
    left: 443px;
    top: 92px;
    width: 178px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}

.FormDocumentation_FormDoc .label3 {
    width: auto;
    font-size: 14pt;
    left: 112px;
    top: 23px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.FormDocumentation_FormDoc .label5 {
    width: auto;
    left: 63px;
    top: 166px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.FormDocumentation_FormDoc .label7 {
    width: auto;
    font-size: 14pt;
    left: 476px;
    top: 23px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.FormDocumentation_FormDoc .textBox3 {
    left: 12px;
    top: 137px;
    width: 135px;
    height: 23px;
    position: absolute;
    border-color: black;
}

WindowModalExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="FormModal" class="FormDocumentation_FormModal">
        <ng-template let-model>
            <div class="FormModal">
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="3">Text</wm-label>
            </div>
        </ng-template>
    </wm-window>
</div>

WindowModalExample.css

.FormDocumentation_FormModal {
    left: -1px;
    top: -1px;
}
.FormDocumentation_FormModal .FormModal {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.FormDocumentation_FormModal .label1 {
    width: auto;
    left: 87px;
    top: 60px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}

WindowNormalExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="FormNormal" class="FormDocumentation_FormNormal">
        <ng-template let-model>
            <div class="FormNormal">
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="3">Text</wm-label>
            </div>
        </ng-template>
    </wm-window>
</div>

WindowNormalExample.css

.FormDocumentation_FormNormal {
    left: -1px;
    top: -1px;
}
.FormDocumentation_FormNormal .FormNormal {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.FormDocumentation_FormNormal .label1 {
    width: auto;
    left: 87px;
    top: 60px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}