PanelExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="Panel" class="PanelDocumentation_Panel">
        <ng-template let-model>
            <div class="Panel">
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="30">Configuration</wm-label>
                <wm-label #label2 id="label2" [model]="model.label2" class="label2" tabindex="31">Appearance</wm-label>
                <wm-button #button1 id="button1" [model]="model.button1" class="button1" tabindex="35" (Click)="button1_Click()"></wm-button>
                <wm-button #button2 id="button2" [model]="model.button2" class="button2" tabindex="36" (Click)="button2_Click()"></wm-button>
                <wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="37" (Click)="button3_Click()"></wm-button>
                <wm-button #button4 id="button4" [model]="model.button4" class="button4" tabindex="38" (Click)="button4_Click()"></wm-button>
                <wm-panel #panel1 id="panel1" [model]="model.panel1" class="panel1" tabindex="45">
<wm-label #label6 id="label6" [model]="model.label6" class="label6" tabindex="1">WebMap Documentation</wm-label>
<wm-picturebox #pictureBox1 id="pictureBox1" [model]="model.pictureBox1" class="pictureBox1" tabindex="2">
</wm-picturebox>
<wm-button #button5 id="button5" [model]="model.button5" class="button5" tabindex="3" (Click)="button5_Click()"></wm-button>
</wm-panel>
                <wm-label #label5 id="label5" [model]="model.label5" class="label5" tabindex="46">Panels</wm-label>
                <wm-panel #panel2 id="panel2" [model]="model.panel2" class="panel2" tabindex="46">
<wm-button #button6 id="button6" [model]="model.button6" class="button6" tabindex="4" (Click)="button6_Click()"></wm-button>
<wm-button #button7 id="button7" [model]="model.button7" class="button7" tabindex="5" (Click)="button7_Click()"></wm-button>
<wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="6">#00</wm-label>
<wm-label #label9 id="label9" [model]="model.label9" class="label9" tabindex="6">#00</wm-label>
<wm-label #label10 id="label10" [model]="model.label10" class="label10" tabindex="6">#00</wm-label>
</wm-panel>
                <wm-panel #panel3 id="panel3" [model]="model.panel3" class="panel3" tabindex="47">
<wm-button #button8 id="button8" [model]="model.button8" class="button8" tabindex="6" (Click)="button8_Click()"></wm-button>
<wm-button #button9 id="button9" [model]="model.button9" class="button9" tabindex="7" (Click)="button9_Click()"></wm-button>
<wm-label #label4 id="label4" [model]="model.label4" class="label4" tabindex="8">WinForms App</wm-label>
<wm-picturebox #pictureBox2 id="pictureBox2" [model]="model.pictureBox2" class="pictureBox2" tabindex="9">
</wm-picturebox>
</wm-panel>
                <wm-panel #panel4 id="panel4" [model]="model.panel4" class="panel4" tabindex="48">
<wm-button #button10 id="button10" [model]="model.button10" class="button10" tabindex="7" (Click)="button10_Click()"></wm-button>
<wm-label #label7 id="label7" [model]="model.label7" class="label7" tabindex="10">WebMAP App</wm-label>
<wm-picturebox #pictureBox3 id="pictureBox3" [model]="model.pictureBox3" class="pictureBox3" tabindex="11">
</wm-picturebox>
</wm-panel>

                <wm-panel #panel5 id="panel5" [model]="model.panel5" class="panel5" tabindex="49"></wm-panel>
                <wm-label #label8 id="label8" [model]="model.label8" class="label8" tabindex="54">Add Dinamic Components</wm-label>
                <wm-button #button11 id="button11" [model]="model.button11" class="button11" tabindex="50" (Click)="button11_Click()"></wm-button>
                <wm-button #button12 id="button12" [model]="model.button12" class="button12" tabindex="51" (Click)="button12_Click()"></wm-button>
                <wm-button #button13 id="button13" [model]="model.button13" class="button13" tabindex="52" (Click)="button13_Click()"></wm-button>
                <wm-button #button14 id="button14" [model]="model.button14" class="button14" tabindex="53" (Click)="button14_Click()"></wm-button>
            </div>
        </ng-template>
    </wm-window>
</div>

PanelExample.css

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

.PanelDocumentation_Panel {
    left: -1px;
    top: -1px;
}
.PanelDocumentation_Panel .Panel {
    width: 800px;
    height: 500px;
    overflow: hidden;
}
.PanelDocumentation_Panel .label1 {
    width: auto;
    font-size: 14.25pt;
    left: 534px;
    top: 63px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label2 {
    width: auto;
    font-size: 12pt;
    left: 546px;
    top: 127px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label3 {
    width: auto;
    left: 12px;
    top: 17px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    
}
.PanelDocumentation_Panel .label4 {
    width: auto;
    left: 12px;
    top: 17px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label5 {
    width: auto;
    font-size: 12pt;
    left: 185px;
    top: 9px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label6 {
    width: auto;
    left: 17px;
    top: 20px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label7 {
    width: auto;
    left: 12px;
    top: 17px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label8 {
    width: auto;
    font-size: 12pt;
    left: 503px;
    top: 290px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.PanelDocumentation_Panel .label9 {
    width: auto;
    left: 12px;
    top: 60px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    
}
.PanelDocumentation_Panel .label10 {
    width: auto;
    left: 12px;
    top: 90px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    
}
.PanelDocumentation_Panel .button1 {
    left: 517px;
    top: 167px;
    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);
}
.PanelDocumentation_Panel .button2 {
    left: 598px;
    top: 167px;
    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);
}
.PanelDocumentation_Panel .button3 {
    left: 517px;
    top: 196px;
    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);
}
.PanelDocumentation_Panel .button4 {
    left: 598px;
    top: 196px;
    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);
}
.PanelDocumentation_Panel .button5 {
    left: 228px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button6 {
    left: 228px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button7 {
    left: -1px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button8 {
    left: 228px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button9 {
    left: -1px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button10 {
    left: -1px;
    top: 177px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .button11 {
    left: 556px;
    top: 330px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    background-color: #cc392f;
    color: white;
}
.PanelDocumentation_Panel .button12 {
    left: 556px;
    top: 360px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    background-color: #3039bf;
    color: white;
}
.PanelDocumentation_Panel .button13 {
    left: 556px;
    top: 390px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    background-color: #259c2d;
    color: white;
}
.PanelDocumentation_Panel .button14 {
    left: 556px;
    top: 430px;
    width: 75px;
    height: 23px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.PanelDocumentation_Panel .pictureBox1 {
    left: 17px;
    top: 54px;
    width: 265px;
    height: 47px;
    position: absolute;
}
.PanelDocumentation_Panel .pictureBox2 {
    left: 19px;
    top: 45px;
    width: 281px;
    height: 126px;
    position: absolute;
}
.PanelDocumentation_Panel .pictureBox3 {
    left: 17px;
    top: 45px;
    width: 281px;
    height: 126px;
    position: absolute;
}
.PanelDocumentation_Panel .panel1 {
    background-color: rgba(240, 240, 240, 1);
    left: 61px;
    top: 48px;
    width: 303px;
    height: 200px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
}
.PanelDocumentation_Panel .panel2 {
    background-color: rgba(240, 240, 240, 1);
    left: 61px;
    top: 48px;
    width: 303px;
    height: 200px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
}
.PanelDocumentation_Panel .panel3 {
    background-color: rgba(240, 240, 240, 1);
    left: 61px;
    top: 48px;
    width: 303px;
    height: 200px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
}
.PanelDocumentation_Panel .panel4 {
    background-color: rgba(240, 240, 240, 1);
    left: 61px;
    top: 48px;
    width: 303px;
    height: 200px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
}
.PanelDocumentation_Panel .panel5 {
    background-color: rgba(240, 240, 240, 1);
    left: 61px;
    top: 275px;
    width: 303px;
    height: 200px;
    position: absolute;
    border: 1px solid var(--primary-color-demos);
}