<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Box</name><description>Insert graphical gadgets or widgets</description><help><![CDATA[
			Create different shapes (rectangle, circle, star, tooltip) with customizable color, gradient and shadow.&lt;br&gt; Rectangles can be used as blocks&apos; backgrounds and containers (allowing to move the blocks inside them easily).
		]]></help><api_version>1.0</api_version><size height='130' width='130' /><blog en='627' /></metadata><view><content></content><properties /><design_properties><trigger_view class='example_box_trigger' help='Open a panel which lets you see and use different examples (loading their configuration).' icon='palette' method='init_examples' text='Examples' trigger='menu_examples' url='/cpt/box_examples' /><listType class='list_types' name='select_shape' title='Shape' type='box' /><colors background='' class='colorsShape' colspan='1' default='[&apos;theme_color&apos;]' display='' elts='1' name='shape_colors' title='Colors' /><gradient class='boxGradient' default='[&apos;vertical&apos;,&apos;50%!theme_color&apos;]' name='gradient_colors' title='Gradient' /><checkbox class='fullWidth' default='false' help='Shape width will be adjusted to fit the visitor&apos;s browser.' name='full_width' value='Full width' /><checkbox class='checkBorder' default='false' name='border_activate' value='Borders' /><border default='({&apos;all&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, true], &apos;bt&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;br&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;bb&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;bl&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false]})' name='border' with_bg='true' /><checkbox class='checkShadow' default='false' name='shadow' value='Shadow' /><slider class='radiusBox' default='0' maximum='30' minimum='0' name='border_radius' title='Border radius' /><colors background='' class='colorsShadow' colspan='1' default='[&apos;rgba(0,0,0,1)&apos;]' display='' elts='1' name='shadow_colors' title='Shadow colors' /><slider class='sliderBox sliderVertical' default='0' maximum='10' minimum='-10' name='vertical_shadow' title='Vertical offset' /><slider class='sliderBox sliderHorizontal' default='0' maximum='10' minimum='-10' name='horizontal_shadow' title='Horizontal offset' /><slider class='sliderBox sliderDistance' default='5' maximum='45' minimum='0' name='distance_shadow' title='Blur radius' /><select class='arrow_position' default='&apos;l&apos;' display='Left|Right|Bottom|Top' help='Set the position of arrow' name='arrow_position' title='Arrow position' values='l|r|b|t' /></design_properties></view><script>UI_List.UI_Box={initialize:function(a){this.cpt=a;
a.setOptions([&quot;locked&quot;,&quot;container&quot;,&quot;fixed&quot;,&quot;footer&quot;,&quot;sticky&quot;]);
this.examples=[{gradient:[[&quot;0%&quot;,&quot;rgba(252,157,69,1)&quot;],[&quot;50%&quot;,&quot;rgba(255,167,61,1)&quot;],[&quot;51%&quot;,&quot;rgba(255,124,0,1)&quot;],[&quot;100%&quot;,&quot;rgba(255,127,4,1)&quot;]],gradientO:&quot;vertical&quot;,color:&quot;rgba(246,230,180,1)&quot;,shape:0,shadow:false,hshadow:10,vshadow:-10,dshadow:10,shadowcolor:&quot;rgba(0,0,0,1)&quot;},{gradient:[[&quot;0%&quot;,&quot;rgba(246,230,180,1)&quot;],[&quot;33%&quot;,&quot;rgba(246,230,180,1)&quot;],[&quot;66%&quot;,&quot;rgba(237,144,23,1)&quot;],[&quot;100%&quot;,&quot;rgba(237,144,23,1)&quot;]],gradientO:&quot;vertical&quot;,color:&quot;rgba(246,230,180,1)&quot;,shape:0,shadow:true,hshadow:10,vshadow:-10,dshadow:10,shadowcolor:&quot;rgba(0,0,0,1)&quot;},{gradient:[[&quot;52%&quot;,&quot;#FC2323&quot;]],color:&quot;#FC2323&quot;,gradientO:&quot;vertical&quot;,shape:2,shadow:false,hshadow:0,vshadow:0,dshadow:0,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#a9e4f7&quot;],[&quot;33%&quot;,&quot;#92ddf4&quot;],[&quot;66%&quot;,&quot;#48caf2&quot;],[&quot;100%&quot;,&quot;#0fb4e7&quot;]],color:&quot;#a9e4f7&quot;,gradientO:&quot;horizontal&quot;,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#aebcbf&quot;],[&quot;50%&quot;,&quot;#6e7774&quot;],[&quot;51%&quot;,&quot;#0a0e0a&quot;],[&quot;100%&quot;,&quot;#0a0809&quot;]],color:&quot;#aebcbf&quot;,gradientO:&quot;diagonal&quot;,angle:45,shape:1,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;52%&quot;,&quot;#FC6805&quot;]],color:&quot;#FC6805&quot;,gradientO:&quot;vertical&quot;,shape:3,shadow:false,hshadow:0,vshadow:0,dshadow:0,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#b4ddb4&quot;],[&quot;33%&quot;,&quot;#52b152&quot;],[&quot;70%&quot;,&quot;#008a00&quot;],[&quot;100%&quot;,&quot;#002400&quot;]],color:&quot;#b4ddb4&quot;,gradientO:&quot;vertical&quot;,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#00000&quot;},{gradient:[[&quot;0%&quot;,&quot;#f0b7a1&quot;],[&quot;52%&quot;,&quot;#752201&quot;],[&quot;55%&quot;,&quot;#752201&quot;],[&quot;100%&quot;,&quot;#bf6e4e&quot;]],color:&quot;#f0b7a1&quot;,gradientO:&quot;vertical&quot;,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;52%&quot;,&quot;#cccccc&quot;]],color:&quot;#cccccc&quot;,gradientO:&quot;vertical&quot;,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#3B3B3B&quot;],[&quot;33%&quot;,&quot;#3B3B3B&quot;],[&quot;66%&quot;,&quot;#3B3B3B&quot;],[&quot;100%&quot;,&quot;#3B3B3B&quot;]],color:&quot;#3B3B3B&quot;,gradientO:&quot;vertical&quot;,shape:4,shadow:false,hshadow:0,vshadow:0,dshadow:0,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#c42929&quot;],[&quot;21%&quot;,&quot;#f73b02&quot;],[&quot;65%&quot;,&quot;#d37502&quot;],[&quot;100%&quot;,&quot;#f4d318&quot;]],color:&quot;#c42929&quot;,gradientO:&quot;diagonal&quot;,angle:45,shape:1,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#959595&quot;],[&quot;33%&quot;,&quot;#4e4e4e&quot;],[&quot;66%&quot;,&quot;#959595&quot;],[&quot;100%&quot;,&quot;#4e4e4e&quot;]],color:&quot;#959595&quot;,gradientO:&quot;diagonal&quot;,angle:315,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#ffaf4b&quot;],[&quot;33%&quot;,&quot;#ffaf4b&quot;],[&quot;66%&quot;,&quot;#ff920a&quot;],[&quot;100%&quot;,&quot;#ff920a&quot;]],color:&quot;#ffaf4b&quot;,gradientO:&quot;vertical&quot;,shape:1,shadow:true,hshadow:0,vshadow:0,dshadow:5,shadowcolor:&quot;#aaaaaa&quot;},{gradient:[[&quot;50%&quot;,&quot;#FFC012&quot;]],color:&quot;#FFC012&quot;,gradientO:&quot;vertical&quot;,shape:2,shadow:false,hshadow:0,vshadow:0,dshadow:0,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#75bdd1&quot;],[&quot;33%&quot;,&quot;#75bdd1&quot;],[&quot;66%&quot;,&quot;#49a5bf&quot;],[&quot;100%&quot;,&quot;#49a5bf&quot;]],color:&quot;#75bdd1&quot;,gradientO:&quot;vertical&quot;,shape:0,shadow:true,hshadow:0,vshadow:0,dshadow:3,shadowcolor:&quot;#aaaaaa&quot;},{gradient:[[&quot;0%&quot;,&quot;#f85032&quot;],[&quot;50%&quot;,&quot;#f16f5c&quot;],[&quot;51%&quot;,&quot;#f6290c&quot;],[&quot;100%&quot;,&quot;#e73827&quot;]],color:&quot;#f85032&quot;,gradientO:&quot;diagonal&quot;,angle:45,shape:0,shadow:true,hshadow:2,vshadow:2,dshadow:0,shadowcolor:&quot;#e73827&quot;},{gradient:[[&quot;0%&quot;,&quot;#FFC012&quot;],[&quot;33%&quot;,&quot;#FFC012&quot;],[&quot;66%&quot;,&quot;#FFC012&quot;],[&quot;100%&quot;,&quot;#FFC012&quot;]],color:&quot;#FFC012&quot;,gradientO:&quot;vertical&quot;,shape:3,shadow:false,hshadow:0,vshadow:0,dshadow:0,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;50%&quot;,&quot;#2091ED&quot;]],color:&quot;#2091ED&quot;,gradientO:&quot;vertical&quot;,shape:1,shadow:true,hshadow:0,vshadow:0,dshadow:5,shadowcolor:&quot;#cccccc&quot;},{gradient:[[&quot;0%&quot;,&quot;#8ABBE6&quot;],[&quot;33%&quot;,&quot;#217CCB&quot;],[&quot;66%&quot;,&quot;#376AA3&quot;],[&quot;100%&quot;,&quot;#3D6694&quot;]],color:&quot;#8ABBE6&quot;,gradientO:&quot;horizontal&quot;,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#000000&quot;},{gradient:[[&quot;0%&quot;,&quot;#747A54&quot;],[&quot;35%&quot;,&quot;#747A54&quot;],[&quot;50%&quot;,&quot;#747A54&quot;],[&quot;100%&quot;,&quot;#747A54&quot;]],color:&quot;#747A54&quot;,gradientO:&quot;diagonal&quot;,angle:45,shape:4,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#E135A5&quot;],[&quot;33%&quot;,&quot;#F62B96&quot;],[&quot;66%&quot;,&quot;#FC55AD&quot;],[&quot;100%&quot;,&quot;#E866AE&quot;]],color:&quot;#E135A5&quot;,gradientO:&quot;vertical&quot;,shape:1,shadow:true,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#4B0100&quot;],[&quot;35%&quot;,&quot;#870505&quot;],[&quot;50%&quot;,&quot;#A10707&quot;],[&quot;100%&quot;,&quot;#CC0A08&quot;]],color:&quot;#4B0100&quot;,gradientO:&quot;diagonal&quot;,angle:315,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#7A1737&quot;],[&quot;35%&quot;,&quot;#7A1737&quot;],[&quot;50%&quot;,&quot;#7A1737&quot;],[&quot;100%&quot;,&quot;#7A1737&quot;]],color:&quot;#7A1737&quot;,gradientO:&quot;diagonal&quot;,shape:4,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#C8AFD7&quot;],[&quot;33%&quot;,&quot;#C8AFD7&quot;],[&quot;50%&quot;,&quot;#664B74&quot;],[&quot;100%&quot;,&quot;#664B74&quot;]],color:&quot;#C8AFD7&quot;,gradientO:&quot;diagonal&quot;,angle:315,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#F3C796&quot;],[&quot;33%&quot;,&quot;#F7D2A8&quot;],[&quot;50%&quot;,&quot;#FAD7B7&quot;],[&quot;100%&quot;,&quot;#FAEBD8&quot;]],color:&quot;#F3C796&quot;,gradientO:&quot;horizontal&quot;,angle:300,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#888888&quot;},{gradient:[[&quot;0%&quot;,&quot;#593B1F&quot;],[&quot;33%&quot;,&quot;#502E15&quot;],[&quot;50%&quot;,&quot;#723C16&quot;],[&quot;100%&quot;,&quot;#783E18&quot;]],color:&quot;#593B1F&quot;,gradientO:&quot;vertical&quot;,shape:1,shadow:true,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#444444&quot;},{gradient:[[&quot;0%&quot;,&quot;#CB2651&quot;],[&quot;33%&quot;,&quot;#E2486E&quot;],[&quot;50%&quot;,&quot;#FFB9B1&quot;],[&quot;100%&quot;,&quot;#F4D6CB&quot;]],color:&quot;#CB2651&quot;,gradientO:&quot;diagonal&quot;,angle:315,shape:0,shadow:false,hshadow:2,vshadow:2,dshadow:2,shadowcolor:&quot;#444444&quot;}]
},onDisplay:function(a){this.cpt.migrateOldGradientProperty();
this.showProp();
this.selectShapeDisplay();
this.initShape();
this._setFullWidth()
},onPropertyChanged:function(a){if(a.include(&quot;full_width&quot;)){this._setFullWidth()
}this.showProp();
this.selectShapeDisplay();
this.initShape();
this._setFullWidth()
},onResizeStop:function(){},onSelect:function(){if(blockSelector.selected_cpts.length==1){this.cpt.init_colorPickers()
}this.showProp();
this.selectShapeDisplay();
this._setFullWidth();
this.initShape()
},initShape:function(){var a={shape:this.cpt.data.select_shape,gradientO:this.cpt.data.gradient_colors[0],gradient:this.cpt.data.gradient_colors[1],angle:this.cpt.data.gradient_colors[2],color:this.cpt.data.shape_colors[0],shadow:this.cpt.data.shadow,hshadow:this.cpt.data.horizontal_shadow,vshadow:this.cpt.data.vertical_shadow,dshadow:this.cpt.data.distance_shadow,shadowcolor:this.cpt.data.shadow_colors[0],border_radius:this.cpt.data.border_radius,triangle_orientation:this.cpt.data.triangle_orientation,arrow_position:this.cpt.data.arrow_position?this.cpt.data.arrow_position:&quot;l&quot;};
this.createShape(this.cpt.componentBody,a)
},showProp:function(){var a=$(this.cpt.propertyNode).add(this.cpt.propertyDesignNode);
$(&quot;.sliderBox, .colorsShadow&quot;,a).toggle(this.cpt.data.shadow&amp;&amp;this.cpt.data.select_shape&lt;2);
$(&quot;.checkBorder, .border_prop&quot;,a).toggle(this.cpt.data.select_shape&lt;2);
$(&quot;.border_prop&quot;,a).toggle(this.cpt.data.border_activate&amp;&amp;this.cpt.data.select_shape&lt;2)
},selectShapeDisplay:function(){var a=$(this.cpt.propertyNode).add(this.cpt.propertyDesignNode);
var b=[&quot;locked&quot;];
$(&quot;.colorsShape, .roundSliderPropertyDiv, .checkShadow, .fullWidth, .wholeGradientProperty.k-widget, .selectGradientO.k-widget, .radiusBox, .gradientProperty, .extendFullWidth, li.triangle_orientation, .boxGradient, li.arrow_position&quot;,a).hide();
$(&quot;.selectGradientO.k-widget&quot;,a).removeClass(&quot;with-slider&quot;);
switch(this.cpt.data.select_shape){case 0:b.push(&quot;container&quot;);
$(&quot;.fullWidth, .radiusBox, .checkShadow, .wholeGradientProperty.k-widget, .selectGradientO.k-widget, .boxGradient&quot;,a).show();
$(&quot;.gradientProperty&quot;,a).css(&quot;display&quot;,&quot;table&quot;);
break;
case 1:b.push(&quot;container&quot;);
$(&quot;.checkShadow, .wholeGradientProperty.k-widget, .selectGradientO.k-widget, .boxGradient&quot;,a).show();
$(&quot;.gradientProperty&quot;,a).css(&quot;display&quot;,&quot;table&quot;);
break;
case 2:$(&quot;.colorsShape&quot;,a).show();
break;
case 3:$(&quot;.colorsShape&quot;,a).show();
break;
case 4:b.push(&quot;container&quot;);
$(&quot;.colorsShape, li.arrow_position&quot;,a).show();
break;
case 5:$(&quot;.colorsShape, li.triangle_orientation&quot;,a).show();
break
}this.showProp();
if(this.cpt.data.gradient_colors[0]==&quot;diagonal&quot;){$(&quot;.roundSliderPropertyDiv&quot;,a).show();
$(&quot;.selectGradientO.k-widget&quot;,a).addClass(&quot;with-slider&quot;)
}},createShape:function(f,d){if(!f.hasClass(&quot;gadget_example&quot;)){var e=$(&quot;&lt;div class=&apos;uid_prev_gadget prev_gradient&apos;&gt;&lt;/div&gt;&quot;).css(&quot;height&quot;,&quot;100%&quot;)
}else{var e=$(&quot;&lt;div class=&apos;uid_prev_gadget prev_gradient example_gadget&apos;&gt;&lt;/div&gt;&quot;).css(&quot;height&quot;,&quot;100%&quot;)
}switch(d.shape){case 1:e.css(&quot;border-radius&quot;,&quot;50%&quot;);
e.setBackgroundGradient(d.gradient,d.gradientO,d.angle);
this.setShadow(e,d.shadow,d.hshadow,d.vshadow,d.dshadow,d.shadowcolor);
break;
case 0:e.css(&quot;border-radius&quot;,d.border_radius+&quot;px&quot;);
default:e.css({height:&quot;100%&quot;,width:&quot;100%&quot;,margin:0});
e.setBackgroundGradient(d.gradient,d.gradientO,d.angle);
this.setShadow(e,d.shadow,d.hshadow,d.vshadow,d.dshadow,d.shadowcolor);
break;
case 2:e.removeClass(&quot;prev_gradient&quot;).addClass(&quot;prev_5_star&quot;).empty().css(&quot;background&quot;,&quot;transparent&quot;);
for(var c=0;
c&lt;3;
c++){$(&quot;&lt;div&gt;&quot;).addClass(&quot;b&quot;+(c+1)).appendTo(e)
}break;
case 3:e.removeClass(&quot;prev_gradient&quot;).addClass(&quot;prev_12_star&quot;).empty().css(&quot;background&quot;,&quot;transparent&quot;);
for(var c=0;
c&lt;3;
c++){var a=$(&quot;&lt;div&gt;&quot;).addClass(&quot;b&quot;+(c+1)).css(&quot;background-color&quot;,d.color).appendTo(e);
if(c){$.each([&quot;&quot;,&quot;-webkit-&quot;],function(g,b){a.css(b+&quot;transform&quot;,&quot;rotate(&quot;+(30*c)+&quot;deg)&quot;)
})
}}break;
case 4:if(!d.arrow_position){d.arrow_position=&quot;l&quot;
}e.removeClass(&quot;prev_gradient&quot;).removeClassMatch(/uibox_pt_/).addClass(&quot;prev_tooltip uibox_pt_&quot;+d.arrow_position).empty().css(&quot;background&quot;,&quot;transparent&quot;);
$(&quot;&lt;div&gt;&quot;).addClass(&quot;b1&quot;).appendTo(e).css(&quot;background-color&quot;,d.color);
$(&quot;&lt;div&gt;&quot;).addClass(&quot;b2&quot;).appendTo(e).css({l:&quot;border-right-color&quot;,r:&quot;border-left-color&quot;,t:&quot;border-bottom-color&quot;,b:&quot;border-top-color&quot;}[d.arrow_position],d.color);
break;
case 5:break
}this.setBorder(e);
f.html(e);
this.gadgetSetSize(d.shape,d.color,f)
},gadgetSetSize:function(a,b,e){e=e||$(this.cpt.node);
var d=Math.min(e.height(),e.width());
if(e.hasClass(&quot;gadget_example&quot;)){d=90
}switch(a){case 2:e.find(&quot;.prev_5_star&quot;).css({height:d+&quot;px&quot;,width:d+&quot;px&quot;});
var c={s30:Math.round((d*15)/100),s70:Math.round((d*35)/100),s80:Math.round((d*40)/100),s100:Math.round((d*50)/100)};
e.find(&quot;.b1, .b2&quot;).css({&quot;border-bottom&quot;:c.s70+&quot;px solid &quot;+b,&quot;border-left&quot;:c.s100+&quot;px outset transparent&quot;,&quot;border-right&quot;:c.s100+&quot;px outset transparent&quot;});
e.find(&quot;.b3&quot;).css({&quot;border-bottom&quot;:c.s80+&quot;px solid &quot;+b,&quot;border-left&quot;:c.s30+&quot;px outset transparent&quot;,&quot;border-right&quot;:c.s30+&quot;px outset transparent&quot;});
break;
case 3:e.find(&quot;.prev_12_star&quot;).css({height:d+&quot;px&quot;,width:d+&quot;px&quot;});
break;
case 4:break;
case 5:e.find(&quot;.uid_prev_gadget&quot;).css({&quot;border-top&quot;:e.height()+&quot;px solid &quot;+b,&quot;border-left&quot;:(e.width()/2)+&quot;px outset transparent&quot;,&quot;border-right&quot;:(e.width()/2)+&quot;px outset transparent&quot;,height:0,width:0});
break
}},onResize:function(a){this.gadgetSetSize(this.cpt.data.select_shape,this.cpt.data.shape_colors[0]);
this._setFullWidth()
},onMoveStop:function(){this._setFullWidth()
},_setFullWidth:function(){var a=this;
if(this.cpt.data.select_shape==undefined){this.cpt.data.select_shape=0
}this.cpt.setFullWidth(this.cpt.data.select_shape==0&amp;&amp;this.cpt.data.full_width,false,false)
},setShadow:function(e,g,f,b,d,a){if(g){e.css(&quot;box-shadow&quot;,f+&quot;px &quot;+b+&quot;px &quot;+d+&quot;px &quot;+a);
if(!e.hasClass(&quot;example_gadget&quot;)){var c={height:&quot;auto&quot;,top:(d-b)+&quot;px&quot;,bottom:(d+b)+&quot;px&quot;,position:&quot;absolute&quot;};
if(!this.cpt.data.full_width){c.width=&quot;auto&quot;;
c.left=(d-f)+&quot;px&quot;;
c.right=(d+f)+&quot;px&quot;
}e.css(c)
}}},setAngle:function(){},setBorder:function(b){if(this.cpt.data.select_shape&lt;2&amp;&amp;this.cpt.data.border_activate){if(this.cpt.data.border.all[3]){var c=this.cpt.data.border.all;
b.css(&quot;border&quot;,c[0]+&quot;px &quot;+c[1]+&quot; &quot;+c[2])
}else{var a={bt:&quot;border-top&quot;,bb:&quot;border-bottom&quot;,bl:&quot;border-left&quot;,br:&quot;border-right&quot;};
$.each(this.cpt.data.border,function(e,d){if(d[3]){b.css(a[e],d[0]+&quot;px &quot;+d[1]+&quot; &quot;+d[2])
}})
}b.css(&quot;box-sizing&quot;,&quot;border-box&quot;)
}},onDeselect:function(){},init_examples:function(){var b=this;
var a=this.examples;
var d;
var c=$(&quot;&lt;ul id=&apos;ulexamples&apos;&gt;&lt;/ul&gt;&quot;).empty();
if(c.find(&quot;li&quot;).length==0){$.each(a,function(f,e){var g=$(&quot;&lt;li class=&apos;container_gadget_example&apos;&gt;&lt;/li&gt;&quot;);
d=$(&quot;&lt;div class=&apos;gadget_example&apos;&gt;&lt;/div&gt;&quot;);
g.append(d);
c.append(g);
b.createShape(d,e);
d.click(function(){var h=b.cpt.propertyDesignNode;
b.cpt.data.select_shape=e.shape;
h.find(&quot;.list_types&quot;).find(&quot;li&quot;).filter(function(j,k){return $(k).data(&quot;id&quot;)==e.shape
}).click();
b.cpt.data.gradient_colors[1]=e.gradient;
var i=h.find(&quot;.gradientProperty&quot;).data(&quot;ClassyGradient&quot;);
i.setupPoints(e.gradient);
i.update();
b.cpt.data.gradient_colors[0]=e.gradientO;
h.find(&quot;.selectGradientO&quot;).find(&quot;select:first&quot;).data(&quot;kendoDropDownList&quot;).value(e.gradientO);
b.cpt.data.shape_colors[0]=e.color;
h.find(&quot;.colorsShape&quot;).find(&quot;input:first&quot;).chromoselector(&quot;setColor&quot;,e.color).trigger(&quot;blur&quot;);
b.cpt.data.shadow=e.shadow;
h.find(&quot;.checkShadow&quot;).find(&quot;input&quot;).prop(&quot;checked&quot;,e.shadow);
b.cpt.data.full_width=false;
h.find(&quot;.fullWidth&quot;).find(&quot;input&quot;).prop(&quot;checked&quot;,false);
b.cpt.data.horizontal_shadow=e.hshadow;
h.find(&quot;.sliderHorizontal&quot;).find(&quot;input:first&quot;).simpleSlider(&quot;setValue&quot;,e.hshadow);
b.cpt.data.vertical_shadow=e.vshadow;
h.find(&quot;.sliderVertical&quot;).find(&quot;input:first&quot;).simpleSlider(&quot;setValue&quot;,e.vshadow);
b.cpt.data.distance_shadow=e.dshadow;
h.find(&quot;.sliderDistance&quot;).find(&quot;input:first&quot;).simpleSlider(&quot;setValue&quot;,e.dshadow);
b.cpt.data.shadow_colors[0]=e.shadowcolor;
h.find(&quot;.colorsShadow&quot;).find(&quot;input:first&quot;).chromoselector(&quot;setColor&quot;,e.shadowcolor).trigger(&quot;blur&quot;);
b.cpt.data.gradient_colors[2]=e.angle;
h.find(&quot;.roundSliderProperty&quot;).roundSlider(&quot;setValue&quot;,-1234);
h.find(&quot;.roundSliderProperty&quot;).roundSlider(&quot;setValue&quot;,e.angle);
if(e.gradientO==&quot;diagonal&quot;){h.find(&quot;.selectGradientO.k-widget&quot;).addClass(&quot;with-slider&quot;)
}else{h.find(&quot;.selectGradientO.k-widget&quot;).removeClass(&quot;with-slider&quot;)
}b.onSelect();
$(&quot;#design_blocks_wrapper&quot;).desactivate()
})
})
}if($(&quot;#ulexamples&quot;).length==0){$(&quot;#list_examples&quot;).prepend(c)
}},onDeviceChanged:function(){if(this.cpt.data.select_shape==5){this.cpt.node.find(&quot;.uid_prev_gadget&quot;).css(&quot;margin&quot;,&quot;0 auto&quot;)
}}};</script><style>.prev_5_star{width:100%;height:100%;position:relative;margin:0 auto}
.prev_5_star .b1{top:30%;position:relative;transform:rotate(35deg);-moz-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);-webkit-transform:rotate(35deg)}
.prev_5_star .b2{left:-3%;position:absolute;top:30%;transform:rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);-webkit-transform:rotate(-35deg)}
.prev_5_star .b3{left:33%;position:absolute;top:1%}
.prev_12_star{position:relative;margin:0 auto}
.prev_12_star&gt;div{bottom:20%;left:20%;position:absolute;right:20%;top:20%}
.prev_tooltip{position:relative}
.prev_tooltip .b1{bottom:15px;left:15px;position:absolute;right:15px;top:15px;border-radius:10px}
.prev_tooltip .b2{position:absolute}
.uibox_pt_l .b2{top:calc(50% - 10px);border-bottom:10px solid transparent;border-right:10px solid;border-top:10px solid transparent;left:6px}
.uibox_pt_r .b2{top:calc(50% - 10px);border-bottom:10px solid transparent;border-left:10px solid;border-top:10px solid transparent;right:6px}
.uibox_pt_t .b2{left:calc(50% - 10px);border-left:10px solid transparent;border-bottom:10px solid;border-right:10px solid transparent;top:6px}
.uibox_pt_b .b2{left:calc(50% - 10px);border-left:10px solid transparent;border-top:10px solid;border-right:10px solid transparent;bottom:6px}
#body #mobile_wrapper .UI_Box.componentBody{height:100%}</style></uidget>