@agung_dhewe/webapps 1.1.2 → 1.2.1

package/modules/generator/tpl-field-numberbox.html

@@ -0,0 +1,218 @@
+<!-- NUMBERBOX  -->
+<div name="design-data-field" class="design-data-field" data-template="numberbox">
+	<div name="component-type" data-detil data-fieldtitle>
+		<div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
+			<div name="icon-pk" class="design-data-field-icon-pk"></div>
+			<div name="icon" class="design-data-field-icon">
+				<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<g stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
+					<path transform="scale(.87733 1.1398)" d="m42.141 16.959-4.9275-0.88311q0.61434-2.355 2.355-3.6092 1.7534-1.2543 4.9531-1.2543 3.6732 0 5.3115 1.3695t1.6382 3.4428q0 1.2159-0.66553 2.2014-0.66553 0.9855-2.0094 1.7278 1.0879 0.26877 1.6638 0.62714 0.9343 0.57594 1.4463 1.523 0.52475 0.9343 0.52475 2.2398 0 1.6382-0.85751 3.1485-0.85751 1.4974-2.4701 2.3166-1.6126 0.80632-4.2364 0.80632-2.5597 0-4.0444-0.60154-1.4718-0.60154-2.4317-1.7534-0.9471-1.1647-1.459-2.9181l5.2091-0.69113q0.30717 1.5742 0.9471 2.1886 0.65273 0.60154 1.651 0.60154 1.0495 0 1.7406-0.76792 0.70393-0.76792 0.70393-2.0478 0-1.3055-0.67833-2.0222-0.66553-0.71673-1.8174-0.71673-0.61434 0-1.6894 0.30717l0.26877-3.7244q0.43516 0.06399 0.67833 0.06399 1.0239 0 1.7022-0.65273 0.69113-0.65273 0.69113-1.5486 0-0.85751-0.51195-1.3695-0.51195-0.51195-1.4079-0.51195-0.9215 0-1.4974 0.56314-0.57594 0.55034-0.78072 1.9454z"/>
+					<path transform="scale(.87733 1.1398)" d="m34.859 30.296h-15.64q0.26877-2.3166 1.6254-4.3516 1.3695-2.0478 5.1195-4.8251 2.291-1.7022 2.9309-2.5853t0.63993-1.6766q0-0.85751-0.63993-1.459-0.62714-0.61434-1.587-0.61434-0.9983 0-1.6382 0.62714-0.62714 0.62714-0.84471 2.2142l-5.2219-0.42236q0.30717-2.2014 1.1263-3.43 0.81912-1.2415 2.3038-1.8942 1.4974-0.66553 4.134-0.66553 2.7517 0 4.2748 0.62714 1.5358 0.62714 2.4062 1.9326 0.88311 1.2927 0.88311 2.9053 0 1.715-1.0111 3.2765-0.9983 1.5614-3.6476 3.43-1.5742 1.0879-2.1118 1.523-0.52474 0.43516-1.2415 1.1391h8.14z"/>
+					<path transform="scale(.87733 1.1398)" d="m13.933 11.213v19.083h-5.2731v-12.504q-1.2799 0.9727-2.4829 1.5742-1.1903 0.60154-2.9949 1.1519v-4.2748q2.6621-0.85751 4.134-2.0606t2.3038-2.9693z"/>
+					</g>
+				</svg>
+			</div>
+			<div name="title">
+				Numberbox
+			</div>
+			<div class="field-remove-button">
+			</div>
+		</div>
+	</div>
+
+
+	<div data-detil data-fieldform>
+	<!--     1                    2                        3              4                  5                6  -->
+		<label>Field name</label><div>
+		<input type="text" name="fieldname"></div>  
+		
+		<label>Type</label>
+		<div>
+			<select name="datatype" onchange="window.Application.numberboxDatatypeChange(this)">
+				<option value="int" selected>integer</option>
+				<option value="smallint">small integer</option>
+				<option value="bigint">big integer</option>
+				<option value="decimal">decimal</option>
+			</select>
+		</div>  
+		
+		<label>Length</label>
+		<div>
+			<input type="number" name="datalength" value="9">
+			<input type="number" name="dataprecission" value="0">
+		</div>
+
+
+		<label>Default Value</label>
+		<div>
+			<input name="defaultvalue" type="number" value="0">
+		</div>
+		<div></div>
+		<label >
+			<input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);">
+			Allow Null
+		</label>
+		<div></div>
+		<div></div>
+
+
+
+		<label>Description</label>
+		<div style="grid-column: span 5;">
+			<input type="text" name="description">
+		</div>
+
+
+		<div>
+			<input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
+		</div>
+		<div style="grid-column: span 5; display: flex; align-items: center;">
+			<label>
+				<input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
+				Show in GridView
+			</label>
+			<label style="margin-left: 40px">
+				<input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
+				Show in Form
+			</label>
+			<label style="margin-left: 20px">
+				<input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
+				Disabled
+			</label>
+		</div>
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+
+
+		<label>Object Name</label>
+		<input type="text" name="objectname">
+		<div style="grid-column: span 4;"></div>
+
+		<label>D.Position</label>
+		<div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
+			<label style="transform: translateY(-1px); margin-left: 20px">Row</label>
+			<input type="text" name="input-dposrow" style="width: 30px" value="auto">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposrowspan" style="width: 30px">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Col</label>
+			<input type="text" name="input-dposcol" style="width: 30px" value="1">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposcolspan" style="width: 30px" value="2">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Style</label>
+			<input type="text" name="input-dposstyle" style="width: 100%">				
+		</div>
+
+		<label>Label Text</label>
+		<input type="text" name="labeltext">
+		
+		<label>Placeholder</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="placeholder">
+		</div> 
+
+		<label>Information</label>
+		<div style="grid-column: span 5;">
+			<input name="information" type="text" >
+		</div>
+
+
+		<label>Container CSS</label>
+		<input type="text" name="input-containercss">
+		
+		<label>InLine Style</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="input-inlinestyle">
+		</div> 
+
+		
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Grid</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
+			<input name="gridformatter" type="text" value="decimal(v, 0)">
+			
+			<label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
+			<input name="gridcss" type="text">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
+			<input name="gridinlinestyle" type="text" value="text-align:right">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
+			<div style="display: flex">
+				<input type="text" name="index" value="0" style="width: 50px">  
+				<label style="margin-left: 20px">
+					<input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
+					Sorting
+				</label>
+			</div>
+
+		</div>	
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Validation</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
+			<input type="text" name="msg_invalid_default" placeholder="invalid message">
+
+			<label>
+				<input name="isbatasmin" type="checkbox" value="1" style="transform: translateY(2px);">
+				Min Value
+			</label>
+			<input type="number" name="minimum">
+			<input type="text" name="msg_invalid_minimum" placeholder="invalid message">
+
+			<label name="max">
+				<input name="isbatasmax" type="checkbox" value="1" style="transform: translateY(2px);">
+				Maximum
+			</label>
+			<input type="number" name="maximum">
+			<input type="text" name="msg_invalid_maximum" placeholder="invalid message">
+
+			<label style="grid-column: span 2;">
+				<input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Custom Validator
+			</label>
+			<input name="validator" type="text" >
+
+		</div>
+
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label name="validation" style="transform: translateY(10px);">Handle Event</label>
+		<div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
+
+			<label>
+				<input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Changed
+			</label>
+
+			<label>
+				<input name="ishandleinput" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Input
+			</label>
+
+			<label>
+				<input name="ishandlekeydown" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Keydown
+			</label>				
+		</div>	
+		
+		
+	</div>
+	<div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
+		<div name="icon-pk" class="design-data-field-icon-pk"></div>
+		<div name="icon" class="design-data-field-icon">
+		</div>
+		<div name="title">
+			<input type="text" name="fieldname-summary" placeholder="number field name">
+		</div>
+		<div class="field-remove-button">
+		</div>
+	</div>
+</div>

package/modules/generator/tpl-field-textbox.html

@@ -0,0 +1,255 @@
+<!-- TEXTBOX -->
+<div name="design-data-field" class="design-data-field" data-template="textbox">
+	<div name="component-type" data-detil data-fieldtitle>
+		<div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
+			<div name="icon-pk" class="design-data-field-icon-pk"></div>
+			<div name="icon" class="design-data-field-icon">
+				<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48">
+					<path d="M3 8h42v32H3z" style="fill:#fff;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"/>
+					<g style="stroke-width:1.20933">
+						<path d="M25.87 12.666V39.14h3.043l.207-.886q1.194.647 2.423 1.023 1.228.39 2.87.39 1.764 0 3.233-.664 1.47-.681 2.698-2.025 1.159-1.292 1.833-3.198.692-1.904.693-4.286 0-4.713-1.99-7.3-1.971-2.586-5.396-2.586-1.92 0-3.458.715a13.4 13.4 0 0 0-2.906 1.803v-9.459zm8.82 9.986q2.542 0 3.683 1.77 1.14 1.752 1.14 5.155 0 3.726-1.538 5.478-1.521 1.735-4.219 1.735-1.263 0-2.266-.237-.986-.24-2.37-.852V24.814a11.8 11.8 0 0 1 2.698-1.548q1.453-.613 2.871-.614M14.414 19.701a22.6 22.6 0 0 0-3.672.306q-1.863.307-2.848.562v3.252h.178q1.738-.63 3.368-.954 1.63-.34 2.957-.34 1.093 0 2.097.136 1.002.137 1.717.528.753.408 1.148 1.123.413.715.413 1.804v.494a93 93 0 0 0-5.5.408q-2.563.273-4.39 1.04-1.81.765-2.795 2.11-.967 1.328-.967 3.489Q6.12 36.298 8 38q1.882 1.702 4.587 1.701 1.47 0 2.561-.271a10 10 0 0 0 1.935-.649 8.8 8.8 0 0 0 1.47-.815q.77-.528 1.219-.818v2.026h3.348V26.27q.001-1.838-.59-3.08a5.1 5.1 0 0 0-1.72-2.026q-1.145-.8-2.722-1.123-1.56-.34-3.674-.34m5.358 9.498v5.293a15 15 0 0 1-2.725 1.583q-1.47.647-3.242.648-2.132 0-3.172-.817-1.038-.835-1.039-2.469 0-1.446.897-2.263.896-.834 2.348-1.226 1.218-.324 3.295-.493a144 144 0 0 1 3.638-.256" style="font-size:33.7393px;font-family:Sans;-inkscape-font-specification:&quot;Sans, Normal&quot;;stroke-width:2.41864;stroke-linecap:round;stroke-linejoin:round" transform="matrix(.90413 0 0 .75628 1.466 4.42)"/>
+					</g>
+				</svg>
+			</div>
+			<div name="title">
+				Textbox
+			</div>
+			<div class="field-remove-button">
+			</div>
+		</div>
+	</div>
+	
+	<div data-detil data-fieldform>
+	<!--     1                    2                        3              4                  5                6  -->
+		<label>Field name</label><div>
+		<input type="text" name="fieldname"></div>  
+		
+		<label>Type</label>
+		<div>
+			<select name="datatype">
+				<option value="text" selected>text</option>
+				<option value="varchar">varchar</option>
+				<option value="char">char</option>
+				<option value="int">integer</option>
+				<option value="smallint">small integer</option>
+				<option value="bigint">big integer</option>
+				<option value="timestamp">timestamp</option>
+			</select>
+		</div>  
+		
+		<label>Length</label>
+		<div>
+			<input type="number" name="datalength" value="30">
+			<input type="hidden" name="dataprecission" value="0">
+		</div>
+
+
+
+		<label>Default Value</label>
+		<div>
+			<input name="defaultvalue" type="text" >
+		</div>
+		<div></div>
+		<label >
+			<input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);" checked>
+			Allow Null
+		</label>
+		<div></div>
+		<div></div>
+
+		<label>Description</label>
+		<div style="grid-column: span 5;">
+			<input name="description" type="text" >
+		</div>
+
+
+		<div>
+			<input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
+		</div>
+		<div style="grid-column: span 5; display: flex; align-items: center;">
+			<label>
+				<input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
+				Show in GridView
+			</label>
+			<label style="margin-left: 40px">
+				<input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
+				Show in Form
+			</label>
+			<label style="margin-left: 20px">
+				<input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
+				Disabled
+			</label>
+		</div>
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+
+
+
+		<label>Object Name</label>
+		<input type="text" name="objectname">  
+		<div style="grid-column: span 2;">
+			<label style="margin-left: 10px;">
+				<input name="multiline" type="checkbox" value="1" style="transform: translateY(2px);">
+				Multiline
+			</label>
+		</div>
+		<div style="display: block; height: 1rem; grid-column: span 2;"></div>
+
+
+		<label>D.Position</label>
+		<div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
+			<label style="transform: translateY(-1px); margin-left: 20px">Row</label>
+			<input type="text" name="input-dposrow" style="width: 30px" value="auto">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposrowspan" style="width: 30px">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Col</label>
+			<input type="text" name="input-dposcol" style="width: 30px" value="1">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposcolspan" style="width: 30px" value="2">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Style</label>
+			<input type="text" name="input-dposstyle" style="width: 100%">
+		</div>
+
+
+
+		<label>Label Text</label>
+		<input type="text" name="labeltext">
+		
+		<label>Placeholder</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="placeholder">
+		</div> 
+
+
+		<label>Char Case</label>
+		<div>
+			<select name="charcasing">
+				<option value="normal" selected>Normal</option>
+				<option value="lowercase">lowercase</option>
+				<option value="uppercase">UPPERCASE</option>
+			</select>
+		</div> 
+		<div style="grid-column: span 4;"></div>
+
+
+
+		<label>Information</label>
+		<div style="grid-column: span 5;">
+			<input name="information" type="text" >
+		</div>		
+
+
+		<label>Container CSS</label><div>
+		<input type="text" name="input-containercss"></div> 
+		
+		<label>InLine Style</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="input-inlinestyle">
+		</div> 
+
+
+
+
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Grid</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
+			<input name="gridformatter" type="text">		
+		
+			<label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
+			<input name="gridcss" type="text">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
+			<input name="gridinlinestyle" type="text">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
+			<div style="display: flex">
+				<input type="text" name="index" value="0" style="width: 50px"> 
+				<label style="margin-left: 20px">
+					<input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
+					Sorting
+				</label>
+			</div>
+
+		</div>	
+
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Validation</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
+			<input type="text" name="msg_invalid_default" placeholder="invalid message">
+
+			<label>
+				<input name="isrequired" type="checkbox" value="1" style="transform: translateY(2px);">
+				Required
+			</label>
+			<div></div>
+			<input name="msg_invalid_required" type="text" placeholder="invalid message">
+
+			<label>
+				<input name="isbatasmin" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Min Length
+			</label>
+			<input type="number" name="minimum">
+			<input type="text" name="msg_invalid_minimum" placeholder="invalid message">
+
+			<label>
+				<input name="isbatasmax" type="checkbox" value="1" checked disabled style="transform: translateY(2px);" >
+				Max Length
+			</label>
+			<input type="number" name="maximum" disabled>
+			<input type="text" name="msg_invalid_maximum" placeholder="invalid message">
+
+			<label style="grid-column: span 2;">
+				<input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Custom Validator
+			</label>
+			<input name="validator" type="text" >
+		
+		</div>
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Reference</label>
+		<input type="text" name="ref_table" placeholder="table">
+		<label>PK</label>
+		<div style="grid-column: span 3; display: flex; gap: 10px" >
+			<div><input type="text" name="ref_id" placeholder="fieldname"></div>
+		</div>
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label name="validation" style="transform: translateY(10px);">Handle Event</label>
+		<div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
+
+			<label>
+				<input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Changed
+			</label>
+
+			<label>
+				<input name="ishandleinput" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Input
+			</label>
+
+			<label>
+				<input name="ishandlekeydown" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Keydown
+			</label>				
+		</div>	
+	</div>
+	<div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
+		<div name="icon-pk" class="design-data-field-icon-pk"></div>
+		<div name="icon" class="design-data-field-icon"></div>
+		<div name="title">
+			<input type="text" name="fieldname-summary" placeholder="text field name">
+		</div>
+		<div class="field-remove-button">
+		</div>
+	</div>
+</div>

package/modules/generator/tpl-field-timepicker.html

@@ -0,0 +1,192 @@
+<!-- TIMEPICKER -->
+<div name="design-data-field" class="design-data-field" data-template="timepicker">
+	<div name="component-type" data-detil data-fieldtitle>
+		<div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
+			<div name="icon-pk" class="design-data-field-icon-pk"></div>
+			<div name="icon" class="design-data-field-icon">
+				<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
+				<circle cx="24" cy="24" r="14" stroke-width="5"/>
+				<path d="m19 21 5 3 8-7" stroke-width="4"/>
+				</g>
+				</svg>
+			</div>
+			<div name="title">
+				Timepicker
+			</div>
+			<div class="field-remove-button">
+			</div>
+		</div>
+	</div>
+	
+	<div data-detil data-fieldform>
+	<!--     1                    2                        3              4                  5                6  -->
+		<label>Field name</label><div>
+		<input type="text" name="fieldname"></div>  
+		
+		<label>Type</label>
+		<div>
+			<select name="datatype">
+				<option value="time" selected>time</option>
+			</select>
+		</div>  
+		
+		<label>Length</label>
+		<div>
+			<input type="number" name="datalength" value="6" disabled>
+			<input type="hidden" name="dataprecission" value="0">
+		</div>
+
+
+
+		<label>Default Value</label>
+		<div>
+			<input name="defaultvalue" type="text" value="00:00">
+		</div>
+		<div></div>
+		<label >
+			<input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);" checked>
+			Allow Null
+		</label>
+		<div></div>
+		<div></div>
+
+
+		<label>Description</label>
+		<div style="grid-column: span 5;">
+			<input name="description" type="text" >
+		</div>
+
+		
+		<div>
+			<input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
+		</div>
+		<div style="grid-column: span 5; display: flex; align-items: center;">
+			<label>
+				<input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
+				Show in GridView
+			</label>
+			<label style="margin-left: 40px">
+				<input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
+				Show in Form
+			</label>
+			<label style="margin-left: 20px">
+				<input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
+				Disabled
+			</label>
+		</div>			
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+
+
+		<label>Object Name</label>
+		<input type="text" name="objectname">
+		<div style="grid-column: span 4;"></div>	
+
+		<label>D.Position</label>
+		<div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
+			<label style="transform: translateY(-1px); margin-left: 20px">Row</label>
+			<input type="text" name="input-dposrow" style="width: 30px" value="auto">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposrowspan" style="width: 30px">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Col</label>
+			<input type="text" name="input-dposcol" style="width: 30px" value="1">
+
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposcolspan" style="width: 30px" value="2">
+
+			<label style="transform: translateY(-1px); margin-left: 50px">Style</label>
+			<input type="text" name="input-dposstyle" style="width: 100%">				
+		</div>
+
+
+		<label>Label Text</label>
+		<input type="text" name="labeltext">
+		
+		<label>Placeholder</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="placeholder">
+		</div> 
+
+		<label>Information</label>
+		<div >
+			<input name="information" type="text" >
+		</div>
+
+
+		<label>Container CSS</label>
+		<input type="text" name="input-containercss">
+		
+		<label>InLine Style</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="input-inlinestyle">
+		</div> 
+		
+		
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Grid</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
+			<input name="gridformatter" type="text">
+			
+			<label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
+			<input name="gridcss" type="text">
+						
+			<label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
+			<input name="gridinlinestyle" type="text">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
+			<div style="display: flex">
+				<input type="text" name="index" value="0" style="width: 50px"> 
+				<label style="margin-left: 20px">
+					<input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
+					Sorting
+				</label>
+			</div>
+
+		</div>			
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Validation</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
+			<input type="text" name="msg_invalid_default" placeholder="invalid message">
+
+			<label>
+				<input name="isrequired" type="checkbox" value="1" style="transform: translateY(2px);">
+				Required
+			</label>
+			<div></div>
+			<input name="msg_invalid_required" type="text" placeholder="invalid message">
+
+			<label style="grid-column: span 2;">
+				<input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Custom Validator
+			</label>
+			<input name="validator" type="text" >
+
+		</div>
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label name="validation" style="transform: translateY(10px);">Handle Event</label>
+		<div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
+			<label>
+				<input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
+				Changed
+			</label>
+		</div>	
+	</div>
+	<div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
+		<div name="icon-pk" class="design-data-field-icon-pk"></div>
+		<div name="icon" class="design-data-field-icon"></div>
+		<div name="title">
+			<input type="text" name="fieldname-summary" placeholder="time field name">
+		</div>
+		<div class="field-remove-button">
+		</div>
+	</div>
+</div>