qcobjects-sdk 2.4.25 → 2.4.28

package/VERSION

@@ -1 +1 @@
-2.4.25
+2.4.28

package/js/org.qcobjects.components.grid.js

@@ -27,43 +27,40 @@
   Package("org.qcobjects.components.grid", [
     
     class GridItemComponent extends Component {
-
-      constructor (){
-        super(...arguments);
-        this.name = "grid-item";
-        this.shadowed= true;
-        this.tplsource= "inline";
-        this.template= `
+      name = "grid-item";
+      shadowed= true;
+      tplsource= "inline";
+      template= `
 <img src="{{image}}" />
 <p>{{description}}</p>
 `;
-        this.cached= false;
+      cached= false;
+
+      constructor (){
+        super(...arguments);
       }
     },
 
     class GridComponent extends Component {
+      name= "grid";
+      cached= false;
+      view= null;
+      shadowed= true;
+      rows= 3;
+      cols= 3;
+      templateURI= "";
+      data= {};
+      tplsource= "inline";
+      template= "<p>Loading...</p>";
+
       constructor (){
         super(...arguments);
-        this.name= "grid";
-        this.cached= false;
-        this.view= null;
-        this.shadowed= true;
-        this.rows= 3;
-        this.cols= 3;
-        this.templateURI= "";
-        this.data= {};
-        this.tplsource= "inline";
-        this.template= "<p>Loading...</p>";
+        this.body.setAttribute("controllerClass", "DataGridController");
+        var subcomponentClass = (this.body.getAttribute("subcomponentClass") !== null) ? (this.body.getAttribute("subcomponentClass")) : ("GridItemComponent");
+        this.body.setAttribute("subcomponentClass", subcomponentClass);
   
       }
 
-      _new_(o) {
-        super._new_(o);
-        o.body.setAttribute("controllerClass", "DataGridController");
-        var subcomponentClass = (o.body.getAttribute("subcomponentClass") !== null) ? (o.body.getAttribute("subcomponentClass")) : ("GridItemComponent");
-        o.body.setAttribute("subcomponentClass", subcomponentClass);
-      }
-
 
     }
   ]);

package/js/org.qcobjects.components.js

@@ -26,10 +26,10 @@
 (function () {
   Package("org.qcobjects.base.components", [
     class FormField extends Component {
+      cached = false;
+      reload = true;
       constructor() {
         super(...arguments);
-        this.cached = false;
-        this.reload = true;
 
       }
 
@@ -95,15 +95,16 @@
   Package("org.qcobjects.form.components", [
 
     class ShadowedComponent extends Component {
+      container = null;
+      body = null;
+      shadowed = true;
+      cached = false;
+      controller = null;
+      view = null;
+      data = {};
+
       constructor() {
         super(...arguments);
-        this.container = null;
-        this.body = null;
-        this.shadowed = true;
-        this.cached = false;
-        this.controller = null;
-        this.view = null;
-        this.data = {};
         this.body = _DOMCreateElement("div");
       }
 
@@ -147,28 +148,29 @@
     },
 
     class ModalEnclosureComponent extends Component {
-      constructor() {
-        super(...arguments);
-        this.name = "modal";
-        this.tplsource = "inline";
-        this.cached = false;
-        this.basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath"));
-        this.data = {};
-        this.template = `
+      tplsource = "inline";
+      cached = false;
+      basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath"));
+      template = `
 <!-- The Modal -->
 <style>
-  @import url('https://sdk.qcobjects.dev/css/modal.css');
+@import url('https://sdk.qcobjects.dev/css/modal.css');
 </style>
 <div id="modalInstance_{{modalId}}" class="modal">
 
 <!-- Modal content -->
 <div class="modal-content">
-  <span class="close">&times;</span>
-  {{content}}
+<span class="close">&times;</span>
+{{content}}
 </div>
 
 </div>
 `;
+
+      data = {};
+      constructor() {
+        super(...arguments);
+        this.name = "modal";
         this.body = _DOMCreateElement("div");
       }
 
@@ -261,12 +263,13 @@
     },
 
     class SwaggerUIComponent extends Component {
+      cached = false;
+      basePath = CONFIG.get("remoteSDKPath");
+      tplextension = "tpl.html";
+
       constructor() {
         super(...arguments);
         this.name = "swagger-ui";
-        this.cached = false;
-        this.basePath = CONFIG.get("remoteSDKPath");
-        this.tplextension = "tpl.html";
 
       }
 

package/js/org.qcobjects.components.list.js

@@ -27,27 +27,29 @@
 Package("org.qcobjects.components.list",[
 
   class ListItemComponent extends Component {
+    name="list-item";
+    shadowed= false;
+    tplsource= "inline";
+    template="<a href=\"{{value}}\">{{label}}</a>";
+    cached= false;
+
     constructor (){
       super(...arguments);
-      this.name="list-item";
-      this.shadowed= false;
-      this.tplsource= "inline";
-      this.template="<a href=\"{{value}}\">{{label}}</a>";
-      this.cached= false;
-  
     }
 
   },
 
   class ListComponent extends Component {
+    name="list";
+    shadowed= true;
+    tplsource= "inline";
+    template= "<p>Loading...</p>";
+
     constructor () {
       super(...arguments);
-      this.name="list";
-      this.shadowed= true;
-      this.tplsource= "inline";
-      this.template= "<p>Loading...</p>";
       this.body.setAttribute("controllerClass","ListController");
       this.body.setAttribute("subcomponentClass","ListItemComponent");
+  
     }
 
   },

package/js/org.qcobjects.components.slider.js

@@ -27,34 +27,31 @@
 Package("org.qcobjects.components.slider",[
 
   class SlideListComponent extends Component {
+    tplsource="inline";
+    template="<p>Loading...</p>";
 
     constructor (){
       super(...arguments);
       this.name="slidelist";
-      this.tplsource="inline";
-      this.template="<p>Loading...</p>";
-  
-    }
-
-    _new_ (o){
-      super._new_(o);
-      o.body.setAttribute("controllerClass","DataGridController");
-      var subcomponentClass = (o.body.getAttribute("subcomponentClass") !== null)?(o.body.getAttribute("subcomponentClass")):("GridItemComponent");
-      o.body.setAttribute("subcomponentClass",subcomponentClass);
+      this.body.setAttribute("controllerClass","DataGridController");
+      var subcomponentClass = (this.body.getAttribute("subcomponentClass") !== null)?(this.body.getAttribute("subcomponentClass")):("GridItemComponent");
+      this.body.setAttribute("subcomponentClass",subcomponentClass);
     }
 
 
   },
 
   class SlideItemComponent extends Component {
+    effectClass = "Fade";
+    name = "slider_item";
 
-    constructor () {
+    constructor ({data}) {
       super(...arguments);
-      this.name="slider_item";
+      this.data.slideNumber = data.__dataIndex+1;
       this.template= `
       <div class="qcoSlides" style="display:none">
         <div class="qco-slider__numbertext">{{slideNumber}} / {{__dataLength}}</div>
-        <img src="{{image}}" alt="{{name}}"/>
+        <img src="{{image}}" alt="{{title}}"/>
         <div class="qco-slider__text">
           <p>{{label}} <a href="{{link}}">{{category}}</a></p>
         </div>
@@ -64,19 +61,13 @@ Package("org.qcobjects.components.slider",[
   
     }
 
-    _new_ (o){
-      super._new_(o);
-      this.data.slideNumber = o.data.__dataIndex + 1;
-    }
-
-
   },
 
   class SliderComponent extends Component {
+    name = "slider";
 
     constructor () {
       super(...arguments);
-      this.name="slider";
       this.template= `
       <style>
       /* Slideshow container */
@@ -200,14 +191,10 @@ Package("org.qcobjects.components.slider",[
       `;
       this.tplsource= "inline";
       this.shadowed= true;
-  
-    }
-
-    _new_(){
-      super._new_();
       this.data.SERVICE_CLASS = this.body.getAttribute("serviceClass");
       this.data.sliderHandler = "slider_"+this.__instanceID.toString();
       this.body.setAttribute("controllerClass","SliderController");
+
     }
 
   }

package/js/org.qcobjects.components.splashscreen.js

@@ -27,11 +27,12 @@ logger.debugEnabled = true;
 "use strict";
 Package("org.qcobjects.components.base", [
   class SplashScreenComponent extends Component {
+    cached = false;
+    shadowed= true;
+
     constructor () {
       super(...arguments);
       this.name= "splashscreen";
-      this.cached= false;
-      this.shadowed= true;
       var o = this;
       
       var isBrowser = typeof window !== "undefined" && typeof window.self !== "undefined" && window === window.self;
@@ -113,17 +114,11 @@ Package("org.qcobjects.components.base", [
 ]);
 
 Package("org.qcobjects.components.splashscreen",[
-
-
   class VideoSplashScreenComponent extends SplashScreenComponent {
-    constructor () {
-      super(...arguments);
-
-      this.name= "videosplashscreen";
-      this.cached= false;
-      this.shadowed= true;
-      this.tplsource= "inline";
-      this.template= `
+      cached= false;
+      shadowed= true;
+      tplsource= "inline";
+      template= `
       <style>
       :host * {
         box-sizing: border-box;
@@ -287,18 +282,17 @@ Package("org.qcobjects.components.splashscreen",[
       </div>
   
       `;
-    }
-  },
 
-  class CubeSplashScreenComponent extends SplashScreenComponent {
 
     constructor () {
       super(...arguments);
-      this.name= "cubesplashscreen";
-      this.cached= false;
-      this.shadowed= true;
-      this.tplsource= "inline";
-      this.template= `
+
+      this.name= "videosplashscreen";
+    }
+  },
+
+  class CubeSplashScreenComponent extends SplashScreenComponent {
+      template= `
       <style>
       @keyframes spin {
         0% {
@@ -611,6 +605,14 @@ Package("org.qcobjects.components.splashscreen",[
       </div>
   
       `;
+
+
+    constructor () {
+      super(...arguments);
+      this.name= "cubesplashscreen";
+      this.cached= false;
+      this.shadowed= true;
+      this.tplsource= "inline";
   
     }    
 

package/js/org.qcobjects.controllers.form.js

@@ -42,17 +42,17 @@ Package("org.qcobjects.controllers.form",[
   },
 
   class FormController extends Controller {
+    dependencies=[];
+    component=null;
+    serviceClass="";
+    formSettings={
+      backRouting:"#",
+      loadingRouting:"#loading",
+      nextRouting:"#signupsuccessful"
+    };
 
     constructor (){
       super(...arguments);
-      this.dependencies=[];
-      this.component=null;
-      this.serviceClass="";
-      this.formSettings={
-        backRouting:"#",
-        loadingRouting:"#loading",
-        nextRouting:"#signupsuccessful"
-      };
   
     }
 

package/js/org.qcobjects.controllers.grid.js

@@ -27,21 +27,17 @@
 Package("org.qcobjects.controllers.grid",[
 
   class GridComponent extends Controller {
+    dependencies=[];
+    component=null;
 
     constructor (){
       super(...arguments);
-      this.dependencies=[];
-      this.component=null;
-  
-    }
-
-    _new_ (o){
-      super.__new__(o);
       var controller=this;
       controller.rows=controller.component.body.getAttribute("rows");
       controller.rows=(controller.rows !== null)?(controller.rows):(controller.component.rows);
       controller.cols=controller.component.body.getAttribute("cols");
       controller.cols=(controller.cols !== null)?(controller.cols):(controller.component.cols);
+  
     }
 
     cssGrid (){
@@ -79,23 +75,20 @@ Package("org.qcobjects.controllers.grid",[
   },
 
   class DataGridController extends Controller {
-    constructor (){
-      super(...arguments);
-      this.dependencies=[];
-      this.component=null;
-  
-    }
+    dependencies=[];
+    component=null;
 
-    _new_ (o){
-      super.__new__(o);
+    constructor ({component}){
+      super(...arguments);
       var controller=this;
-      var component = controller.component;
+      controller.component = component;
       controller._componentRoot = (component.shadowed)?(component.shadowRoot):(component.body);
       controller.rows=controller.component.body.getAttribute("rows");
       controller.rows=(controller.rows !== null)?(controller.rows):(controller.component.rows);
       controller.cols=controller.component.body.getAttribute("cols");
       controller.cols=(controller.cols !== null)?(controller.cols):(controller.component.cols);
       logger.debug("DataGridController INIT");
+  
     }
 
     getPageIndex (page, totalPage, totalElements) {
@@ -156,6 +149,7 @@ Package("org.qcobjects.controllers.grid",[
                     __offset: offset
                   });
                   var subcomponent = New(ClassFactory(subcomponentClass),{
+                    name:"item",
                     data:record,
                     templateURI:ComponentURI({
                       "COMPONENTS_BASE_PATH":CONFIG.get("componentsBasePath"),

package/js/org.qcobjects.controllers.list.js

@@ -27,16 +27,16 @@
   Package("org.qcobjects.controllers.list", [
 
     class ListController extends Controller {
-      constructor() {
-        super(...arguments);
-        this.dependencies = [];
-        this.component = null;
-
-      }
+      dependencies = [];
+      component = null;
+      valueField = undefined;
+      labelField = undefined;
 
-      _new_(o) {
-        super.__new__(o);
+      constructor({component}) {
+        super(...arguments);
+        this.component = component;
         var controller = this;
+        controller.component = component;
         controller._componentRoot = (controller.component.shadowed) ? (controller.component.shadowRoot) : (controller.component.body);
 
         controller.labelField = controller.component.body.getAttribute("label-field");
@@ -45,6 +45,7 @@
         controller.rows = (controller.rows !== null) ? (controller.rows) : (controller.component.rows);
         controller.cols = 1;
         logger.debug("ListController INIT");
+
       }
 
       getPageIndex(page, totalPage, totalElements) {
@@ -61,6 +62,9 @@
         var layout = controller.component.body.getAttribute("layout");
         var basePath = CONFIG.get("listBasePath", CONFIG.get("remoteSDKPath"));
         var cssLayout = "";
+        controller.labelField = controller.component.body.getAttribute("label-field");
+        controller.valueField = controller.component.body.getAttribute("value-field");
+
         if (layout === "horizontal") {
           cssLayout = `@import url("${basePath}css/components/horizontal-list.css");`;
         } else {
@@ -103,6 +107,7 @@
                   record.label = record[controller.labelField];
                   record.value = record[controller.valueField];
                   var subcomponent = New(ClassFactory(subcomponentClass), {
+                    name:"list-item",
                     data: {
                       label: record[controller.labelField],
                       value: record[controller.valueField],

package/js/org.qcobjects.controllers.slider.js

@@ -27,28 +27,25 @@
   Package("org.qcobjects.controllers.slider", [
 
     class SliderController extends Controller {
-
-      constructor() {
+      dependencies = [];
+      component = null;
+      slideIndex = 0;
+      duration = 7100;
+      interval = null;
+      sliderHandlerName = null;
+
+      constructor({component}) {
         super(...arguments);
-        this.dependencies = [];
-        this.component = null;
-        this.slideIndex = 0;
-        this.duration = 7100;
-        this.interval = null;
-        this.sliderHandlerName = null;
-
-      }
-
-      _new_(o) {
-        super.__new__(o);
         var controller = this;
-        var component = controller.component;
+        controller.component = component;
         controller._componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
         //TODO: Implement
         controller.sliderHandlerName = "slider_" + controller.component.__instanceID.toString();
         global.set(controller.sliderHandlerName, this);
+
       }
 
+
       stop() {
         if (this.interval != null) {
           clearInterval(this.interval);
@@ -87,29 +84,27 @@
         if (n < 0) {
           controller.slideIndex = 0;
         }
-        slides.map((slide) => {
-          Fade.apply(slide, 1, 0);
+        slides.filter((slide, index)=> {return index!== controller.slideIndex;}).map((slide) => {
+          (New(ClassFactory("Fade"))).apply(slide, 1, 0);
         });
-        dots.map((dot) => {
+        dots.filter((dot, index)=> {return index!== controller.slideIndex;}).map((dot) => {
           dot.classList.remove("active");
         });
         try {
           dots[controller.slideIndex].classList.add("active");
         } catch (e) {
-          logger.debug("Something went wrong when trying to activate a slide");
-          logger.debug(e.message);
+          logger.debug(`Something went wrong when trying to activate a slide: ${controller.slideIndex} - ${e.message}`);
         }
         setTimeout(function () {
-          slides.map((slide) => {
+          slides.filter((slide, index)=> {return index!== controller.slideIndex;}).map((slide) => {
             slide.style.display = "none";
           });
           try {
             slides[controller.slideIndex].style.display = "block";
-            Fade.apply(slides[controller.slideIndex], 0, 1);
+            (New(ClassFactory("Fade"))).apply(slides[controller.slideIndex], 0, 1);
 
           } catch (e) {
-            logger.debug("Something went wrong when trying to show a slide");
-            logger.debug(e.message);
+            logger.debug(`Something went wrong when trying to show a slide: ${controller.slideIndex} - ${e.message}`);
           }
         }, 700);
       }
@@ -129,7 +124,7 @@
       done() {
         var controller = this;
         var slides = controller._componentRoot.subelements(".qcoSlides");
-        slides.map((slide) => {
+        slides.filter((slide, index)=> {return index!== controller.slideIndex;}).map((slide) => {
           slide.style.display = "none";
         });
         setTimeout(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qcobjects-sdk",
-  "version": "2.4.25",
+  "version": "2.4.28",
   "description": "QCObjects SDK is a set of Controllers, Views and Components that are elementary and useful to assist developers to build applications under MVC patterns using QCObjects, Cross Browser Javascript Framework for MVC Patterns",
   "main": "QCObjects-SDK.js",
   "scripts": {
@@ -30,7 +30,7 @@
   ],
   "devDependencies": {
     "eslint": "^8.4.0",
-    "qcobjects": "^2.4.23-beta"
+    "qcobjects": "^2.4.38"
   },
   "author": "Jean Machuca <correojean@gmail.com>",
   "license": "LGPL-3.0",
@@ -42,6 +42,6 @@
     "jasmine": "^3.6.3"
   },
   "peerDependencies": {
-    "qcobjects": "^2.4.32-beta"
+    "qcobjects": "^2.4.38"
   }
 }

package/demo-tests/test-component-grid.html

@@ -1,63 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
-  <title>QCObjects Demo</title>
-  <script type="text/javascript"
-    src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
-</head>
-
-<body>
-
-
-  <my-grid cols=4 componentClass="org.qcobjects.components.grid.GridComponent" serviceClass="MyTestService">
-  </my-grid>
-
-  <script>
-    logger.debugEnabled = true;
-
-    class MyTestService extends Service {
-
-      /**
-       * Creates the instance for MyTestService
-       */
-      constructor() {
-        super();
-        this.name = 'myservice';
-        this.external = true;
-        this.cached = false;
-        this.method = 'GET';
-        this.headers = { 'Content-Type': 'application/json' };
-        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
-        this.withCredentials = false;
-
-      }
-
-      done({ request, service }) {
-        logger.debug(request);
-        service.template = JSON.stringify({
-          result: JSON.parse(service.template).reverse().map(function (project) {
-            return {
-              id: project.id,
-              description: project.description,
-              title: project.name,
-              url: project.html_url,
-              image: `https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`
-            };
-          })
-        });
-      }
-
-
-    }
-
-    RegisterWidgets ("my-grid")
-  </script>
-</body>
-
-</html>

package/demo-tests/test-component-list.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
-  <title>QCObjects Demo</title>
-  <script type="text/javascript"
-    src="https://raw.githubusercontent.com/QuickCorp/QCObjects/v2.4-beta/QCObjects.js"></script>
-</head>
-
-<body>
-
-  <my-list componentClass="ListComponent" serviceClass="MyTestService" label-field="name" value-field="html_url">
-
-  </my-list>
-
-  <script>
-    logger.debugEnabled = true;
-
-
-    class MyTestService extends Service {
-
-      /**
-       * Creates the instance for MyTestService
-       */
-      constructor() {
-        super();
-
-        this.name = 'myservice';
-        this.external = true;
-        this.cached = false;
-        this.method = 'GET';
-        this.headers = { 'Content-Type': 'application/json' };
-        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
-        this.withCredentials = false;
-
-      }
-
-      done (standardResponse){
-        console.log(standardResponse);
-      }
-    }
-
-    RegisterWidgets("my-list");
-
-  </script>
-</body>
-
-</html>

package/demo-tests/test-component-notifications.html

@@ -1,49 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
-  <title>QCObjects Demo</title>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
-</head>
-
-<body>
-
-
-  <custom-notification template-source="inline" componentClass="CustomNotificationComponent"></custom-notification>
-
-  <script>
-
-    class CustomNotificationComponent extends Component {
-
-      /**
-       * Creates the instance for CustomNotificationComponent
-       */
-      constructor () {
-        this.message= "Page was loaded successfully!";
-
-      }
-
-      /**
-       * What is inside this function is executed after the component loading is done
-       * 
-       * @param {*} standardResponse it brings all information of the component
-       */
-      done(standardResponse) {
-        super.done(standardResponse);
-
-        /* in this case we will call a notification after the component is loaded*/
-        NotificationComponent.success(this.message);
-      }
-
-    }
-
-    RegisterWidgets ("custom-notification")
-  </script>
-</body>
-
-</html>

package/demo-tests/test-component-slider.html

@@ -1,68 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; img-src * 'self' data:; child-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' 'unsafe-inline' 'unsafe-eval';media-src *">
-  <title>QCObjects Demo</title>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.4.20/QCObjects.js"></script>
-</head>
-
-<body>
-
-
-  <my-slider componentClass="org.qcobjects.components.slider.SliderComponent" serviceClass="MyTestService"></my-slider>
-
-  <script>
-    logger.debugEnabled = true;
-
-    class MyTestService extends Service {
-
-      /**
-       * Creates the instance for MyTestService
-       */
-      constructor() {
-        this.name = 'myservice';
-        this.external = true;
-        this.cached = false;
-        this.method = 'GET';
-        this.headers = { 'Content-Type': 'application/json' };
-        this.url = 'https://api.github.com/orgs/QuickCorp/repos';
-        this.withCredentials = false;
-      }
-
-      /**
-       * What is inside this function is executed after the component loading is done
-       * 
-       * @param {*} standardResponse it brings all information of the component
-       */
-       done({ request, service }) {
-        logger.debug(request);
-
-        /* in this case we will parse response and use only the fields we need */
-        service.template = JSON.stringify({
-          result: JSON.parse(service.template).reverse().map(function (project) {
-            return {
-              id: project.id,
-              description: project.description,
-              title: project.name,
-              link: project.html_url,
-              image: `https://via.placeholder.com/150/FFFF00/000000?text=${encodeURI(project.name)}`,
-              label: "Go to repo",
-              category: project.name
-            };
-          })
-        });
-      }
-
-
-    }
-
-    RegisterWidgets("my-slider")
-  </script>
-</body>
-
-</html>