<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Icon</name><description>Insert an icon</description><help>Create a customizable icon.</help><api_version>1.0</api_version><size height='50' width='50' /><blog en='542' /></metadata><view><content></content><properties><icon_selector default='{"id":78,"name":"home","service":"Google-material-icons","removable":false}' default_action='true' help='Choose the icon to display.' icon='folder' name='icon' /><link_selector default='null' help='Add a link to an external site, a document or a page, or remove the current link.' icon='t_link' name='link' /></properties><design_properties><colors class='colorsButton' colspan='0|1' default='[&apos;load_defaults&apos;]' display='Icon|Background' elts='2' name='normal_colors' title='Icon colors' /><checkbox default='false' help='By checking this option, you can enable color change on mouse over. You can enable color change for both the icon color and the background color, by using the color picker.' name='hover_colors_activate' value='Change colors on hover' /><colors class='colorsButton background_colors_i' colspan='0|1' default='[&apos;load_defaults&apos;]' display='Icon|Background' elts='2' name='hover_colors' title='Hover colors' /><slider class='sliderButton' default='0' maximum='10' minimum='0' name='padding' title='Spacing' /><slider class='sliderButton' default='0' maximum='100' minimum='0' name='radius' title='Border radius' /><link default_action='true' display='Reset values' help='Cancel your customizations and reload the default style and colors from your original template.' icon='rotate-ccw3' name='reset' trigger='_load_default_values' /></design_properties></view><script>UI_List.UI_Icon={initialize:function(a){this.cpt=a;
a.setOptions([&quot;locked&quot;]);
a.colorPickers=[];
a.sliders=[]
},onDisplay:function(a){if(this.component.data.normal_colors[0]==&quot;load_defaults&quot;){this._load_default_values()
}this._drawIcon()
},onSelect:function(a){if(blockSelector.selected_cpts.length==1){this.cpt.init_sliders();
this.cpt.init_colorPickers(a)
}this._showProp()
},onPropertyChanged:function(a){if(this.component.data.normal_colors[0]==&quot;load_defaults&quot;){this._load_default_values()
}if(a.include(&quot;hover_colors_activate&quot;)){this._showProp()
}if(a.include(&quot;link&quot;)){this._updateLink()
}if(a.include(&quot;padding&quot;)){this._setSize()
}else{this._drawIcon()
}},onShow:function(){},onResize:function(){this.cpt.setAspectRatio(1);
this._setSize()
},onMoveStop:function(){},onDeselect:function(){this._showProp()
},_drawIcon:function(){var b=this.cpt.data;
this.cpt.node.find(&quot;.componentBody&quot;).empty().append($(&quot;&lt;span class=&apos;ui_i_wrapper&apos;&gt;&lt;/span&gt;&quot;).setIcon(b.icon));
this.icon_node=this.cpt.node.find(&quot;.ui_i_wrapper&quot;);
var a={default_data:{color:b.normal_colors[0],&quot;background-color&quot;:b.normal_colors[1],&quot;border-radius&quot;:(b.radius/2)+&quot;%&quot;}};
this.icon_node.off(&quot;hover&quot;);
this.icon_node.css(a.default_data);
if(this.cpt.data.hover_colors_activate){a.hover_normal={color:b.normal_colors[0],&quot;background-color&quot;:b.normal_colors[1]},a.hover_hover={color:b.hover_colors[0],&quot;background-color&quot;:b.hover_colors[1]};
this.icon_node.hover(function(){$(this).css(a.hover_hover)
},function(){$(this).css(a.hover_normal)
})
}this._setSize();
this._updateLink()
},_load_default_values:function(){var a=this,b;
b=ThemeConfig.UI_Icon;
b.radius=0;
b.padding=0;
b.hover_colors_activate=false;
this.component.setData(b);
this.cpt.setXYZWH({h:50,w:50});
this._drawIcon();
this.onSelect(true)
},_showProp:function(){var a=$(this.cpt.propertyNode).add(this.cpt.propertyDesignNode);
if(this.cpt.data.hover_colors_activate){$(&quot;.background_colors_i&quot;,a).show()
}else{$(&quot;.background_colors_i&quot;,a).hide()
}},_setSize:function(){if(this.icon_node){var a=this.cpt.W();
this.icon_node.css({width:a,height:a}).find(&quot;i&quot;).css(&quot;font-size&quot;,parseInt(a*(0.8-(this.cpt.data.padding/20)))+&quot;px&quot;)
}},_updateLink:function(){var a=this;
if(this.cpt.data.link){this.link=$(&quot;&lt;a&gt;&lt;/a&gt;&quot;).append(this.icon_node);
this.cpt.node.find(&quot;.componentBody&quot;).empty().append(this.link);
this.link.attr({target:&quot;&quot;,onClick:&quot;&quot;,title:&quot;&quot;}).removeAttr(&quot;href&quot;).unbind();
this.link.attr(this.component.data.link);
this.link.addClass(&quot;ui_i_link&quot;);
if(v.mode==&quot;editor&quot;){editorController.disableLinks(this.cpt.node);
this.link.on(&quot;click&quot;,function(b){if(b.shiftKey){editorController.followLink(this)
}else{statusController.message(&quot;To &lt;b&gt;test a link&lt;/b&gt;, press the &lt;b&gt;MAJ key&lt;/b&gt; while clicking.&quot;)
}return false
})
}}}};</script><style>.ui_i_wrapper{display:table;height:100%;width:100%}
.ui_i_wrapper i{display:table-cell;text-align:center;vertical-align:middle;cursor:default}
.ui_i_link{text-decoration:none}
.ui_i_link .ui_i_wrapper i{cursor:pointer}</style></uidget>