<?xml version="1.0" encoding="utf-8"?>
<element type="sql-query">
   <title>SQL Query</title>
   <icon></icon>
   <creationDate>April 2020</creationDate>
   <author>JS</author>
   <copyright>Copyright (C) 2020 Joomdev, Inc. All rights reserved.</copyright>
   <license>GNU General Public License version 2 or later; see LICENSE.txt</license>
   <version>1.0</version>
   <form>
      <fields>
         <fieldset name="general" label="JDB_GENERAL_TITLE">
            <field type="group" name="basic" label="JDB_BASIC_TITLE"></field>
            <!--  Element Options -->
            <field
               name="sqlQuery"
               type="text"
               label="SQL_QUERY_LBL"
               default=""
               group="basic"
            >
            </field>

             <field name="sqlQueryTypography" type="typography" label="SQL_QUERY_TYPOGRAPHY" group="basic" default="" responsive="true">
            </field>

            <field type="color" name="sqlQueryFontColor" label="SQL_QUERY_COLOR" default="" group="basic">
            </field>

         </fieldset>
      </fields>
   </form>
</element>

(function () {

   var JDBuilderElementSqlQuery = function (element) {
	   
	  var sqlQueryContent = element.params.get("sqlQuery", "");
	  
	  if (sqlQueryContent == '') {
         return;
      }
	  
	  var sqlQueryStyle = JDBRenderer.ElementStyle('> .sqlQuery');
      element.addChildrenStyle([sqlQueryStyle]);
	  
	  
	  // content typography
	  var typography = element.params.get("sqlQueryTypography", null);
	  if (typography !== null) {
		 JDBRenderer.DEVICES.forEach(function (_deviceObj) {
			if (_deviceObj.key in typography) {
			   sqlQueryStyle.addStyle(JDBRenderer.Helper.typographyValue(typography[_deviceObj.key]), _deviceObj.type);
			}
		 });
	  }
	  
	  sqlQueryStyle.addCss('color', element.params.get("sqlQueryFontColor", ''));
	  
	  var sqlQueryHTML = [];
	  
	  // Content
      sqlQueryHTML.push('<div class="sqlQuery">' + sqlQueryContent + '</div>');  

      return sqlQueryHTML.join('');
   }
   
	
   window.JDBuilderElementSqlQuery = JDBuilderElementSqlQuery;

})();

<?php
/**
 * @package    JD Builder
 * @author     JS
 * @copyright  April 2020
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
extract($displayData);


// Params
$sqlQuery = $element->params->get("sqlQuery", "");

if (empty($sqlQuery)) {
   return;
}

$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query= $sqlQuery;
$db->setQuery($query);
$result = $db->loadResult();

// Display

echo '<div class="sqlQuery">' .$result. '</div>';


$contentStyle = new JDPageBuilder\Element\ElementStyle('> .sqlQuery');
$contentStyle->addCss("color", $element->params->get("sqlQueryFontColor", ""));

$element->addChildStyle($contentStyle);

$typography = $element->params->get('sqlQueryTypography', null);

if (!empty($typography)) {
   foreach (JDPageBuilder\Helper::$devices as $deviceKey => $device) {
      if (isset($typography->{$deviceKey}) && !empty($typography->{$deviceKey})) {
         $contentStyle->addStyle(JDPageBuilder\Helper::typographyValue($typography->{$deviceKey}), $device);
      }
   }
}
?>

; Basic
SQL_QUERY_LBL="SQL Query"
SQL_QUERY_TYPOGRAPHY="Typography"
SQL_QUERY_COLOR="Color"