diff --git a/src/00/z2ui5_cl_app_demo_00.clas.abap b/src/00/z2ui5_cl_app_demo_00.clas.abap
index 352bc94c..fc6d7e5f 100644
--- a/src/00/z2ui5_cl_app_demo_00.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_00.clas.abap
@@ -90,7 +90,8 @@ CLASS z2ui5_cl_app_demo_00 IMPLEMENTATION.
     grid->simple_form( title = 'HowTo - Extensions' layout = 'ResponsiveGridLayout' )->content( 'form'
          )->button( text = 'Views - Normal, Generic, XML' press = client->_event( 'z2ui5_cl_app_demo_23' )
          )->button( text = 'Import UI5-XML-View' press = client->_event( 'z2ui5_cl_app_demo_31' )
-         )->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_29' )
+         )->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_32    ' )
+         )->button( text = 'Custom Control' press = client->_event( 'z2ui5_cl_app_demo_37' )
     ).
 
        grid->simple_form( title = 'HowTo - Messages' layout = 'ResponsiveGridLayout' )->content( 'form'
diff --git a/src/00/z2ui5_cl_app_demo_18.clas.abap b/src/00/z2ui5_cl_app_demo_18.clas.abap
index 070c9987..ced566be 100644
--- a/src/00/z2ui5_cl_app_demo_18.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_18.clas.abap
@@ -164,7 +164,7 @@ CLASS z2ui5_cl_app_demo_18 IMPLEMENTATION.
 
   METHOD z2ui5_render_view_second.
 
-    result = z2ui5_cl_xml_view_helper=>factory(
+    result = z2ui5_cl_xml_view_helper=>factory( )->shell(
          )->page(
                  title          = 'abap2UI5 - Template'
                  navbuttonpress = client->_event( 'BACK' )
@@ -195,7 +195,7 @@ CLASS z2ui5_cl_app_demo_18 IMPLEMENTATION.
 
   METHOD z2ui5_render_popup_input.
 
-    result = z2ui5_cl_xml_view_helper=>factory( )->dialog(
+    result = z2ui5_cl_xml_view_helper=>factory_popup( )->dialog(
                       title = 'Title'
                       icon = 'sap-icon://edit'
                   )->content(
diff --git a/src/00/z2ui5_cl_app_demo_18.clas.xml b/src/00/z2ui5_cl_app_demo_18.clas.xml
index 75a1dd9d..64d0c18e 100644
--- a/src/00/z2ui5_cl_app_demo_18.clas.xml
+++ b/src/00/z2ui5_cl_app_demo_18.clas.xml
@@ -5,7 +5,7 @@
    <VSEOCLASS>
     <CLSNAME>Z2UI5_CL_APP_DEMO_18</CLSNAME>
     <LANGU>E</LANGU>
-    <DESCRIPT>template</DESCRIPT>
+    <DESCRIPT>demo - template</DESCRIPT>
     <STATE>1</STATE>
     <CLSCCINCL>X</CLSCCINCL>
     <FIXPT>X</FIXPT>
diff --git a/src/00/z2ui5_cl_app_demo_23.clas.abap b/src/00/z2ui5_cl_app_demo_23.clas.abap
index b23ab463..8d9059d2 100644
--- a/src/00/z2ui5_cl_app_demo_23.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_23.clas.abap
@@ -7,7 +7,7 @@ CLASS z2ui5_cl_app_demo_23 DEFINITION PUBLIC.
     DATA product  TYPE string.
     DATA quantity TYPE string.
 
-    data client type ref to z2ui5_if_client.
+    DATA client TYPE REF TO z2ui5_if_client.
     DATA:
       BEGIN OF app,
         check_initialized TYPE abap_bool,
@@ -28,14 +28,13 @@ ENDCLASS.
 
 
 
-CLASS Z2UI5_CL_APP_DEMO_23 IMPLEMENTATION.
+CLASS z2ui5_cl_app_demo_23 IMPLEMENTATION.
 
 
   METHOD z2ui5_if_app~controller.
 
     me->client = client.
     app-s_get  = client->get( ).
-    "  app-view_popup = ``.
 
     IF app-check_initialized = abap_false.
       app-check_initialized = abap_true.
@@ -82,21 +81,23 @@ CLASS Z2UI5_CL_APP_DEMO_23 IMPLEMENTATION.
 
   METHOD z2ui5_on_render_main.
 
+    DATA(lo_view) = z2ui5_cl_xml_view_helper=>factory( ).
+
     CASE app-view_main.
 
       WHEN 'XML'.
 
-        app-s_next-xml_main = `<mvc:View controllerName="zzdummy" displayBlock="true" height="100%" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.co` &&
-`re.mvc" xmlns:editor="sap.ui.codeeditor" xmlns:ui="sap.ui.table" xmlns="sap.m" xmlns:uxap="sap.uxap" xmlns:mchart="sap.suite.ui.microchart" xmlns:z2ui5="z2ui5" xmlns:webc="sap.ui.webc.main" xmlns:text="sap.ui.richtexteditor" > <Shell> <Page ` && |\n|
-&&
+        DATA(lv_xml) = `<mvc:View controllerName="zzdummy" displayBlock="true" height="100%" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.co` &&
+    `re.mvc" xmlns:editor="sap.ui.codeeditor" xmlns:ui="sap.ui.table" xmlns="sap.m" xmlns:uxap="sap.uxap" xmlns:mchart="sap.suite.ui.microchart" xmlns:z2ui5="z2ui5" xmlns:webc="sap.ui.webc.main" xmlns:text="sap.ui.richtexteditor" > <Shell> <Page ` && |\n|
+    &&
                               `  title="abap2UI5 - XML XML XML" ` && |\n|  &&
                               `  showNavButton="true" ` && |\n|  &&
-                              `  navButtonPress="onEvent( { &apos;EVENT&apos; : &apos;BACK&apos;, &apos;METHOD&apos; : &apos;UPDATE&apos; } )" ` && |\n|  &&
+                              `  navButtonPress="` &&  client->_event( 'BACK' ) && `" ` && |\n|  &&
                               ` > <headerContent ` && |\n|  &&
                               ` > <Link ` && |\n|  &&
                               `  text="Source_Code" ` && |\n|  &&
                               `  target="_blank" ` && |\n|  &&
-                              `  href="https://6654aaf7-905f-48ea-b013-3811c03fcba8.abap-web.us10.hana.ondemand.com/sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n|  &&
+                              `  href="<system>sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n|  &&
                               ` /></headerContent> <f:SimpleForm ` && |\n|  &&
                               `  title="Form Title" ` && |\n|  &&
                               ` > <f:content ` && |\n|  &&
@@ -117,10 +118,11 @@ CLASS Z2UI5_CL_APP_DEMO_23 IMPLEMENTATION.
                               `  text="XML" ` && |\n|  &&
                               ` /></f:content></f:SimpleForm></Page></Shell></mvc:View>`.
 
+        app-s_next-xml_main = lv_xml.
 
       WHEN 'NORMAL'.
 
-        app-s_next-xml_main = z2ui5_cl_xml_view_helper=>factory( )->shell(
+        lo_view->shell(
           )->page(
                   title          = 'abap2UI5 - NORMAL NORMAL NORMAL'
                   navbuttonpress = client->_event( 'BACK' )
@@ -144,22 +146,18 @@ CLASS Z2UI5_CL_APP_DEMO_23 IMPLEMENTATION.
                           press = client->_event( 'GENERIC' )
                          )->button(
                           text  = 'XML'
-                          press = client->_event( 'XML' )
-           )->get_root( )->xml_get( ).
+                          press = client->_event( 'XML' ) ).
 
+        app-s_next-xml_main = lo_view->get_root( )->xml_get( ).
 
       WHEN 'GENERIC'.
 
-        DATA(li_view) = z2ui5_cl_xml_view_helper=>factory( ).
-
-        li_view->_generic(
+        lo_view->_generic( 'Shell' )->_generic(
            name      = `Page`
            t_prop = VALUE #(
                ( n = `title`          v = 'abap2UI5 - GENERIC GENERIC GENERIC' )
                ( n = `showNavButton`  v = `true` )
-               ( n = `navButtonPress` v = client->_event( 'BACK' ) )
-           )
-           )->_generic( 'Shell'
+               ( n = `navButtonPress` v = client->_event( 'BACK' ) ) )
            )->_generic(
                 name = `SimpleForm`
                 ns   = `form`
@@ -193,11 +191,9 @@ CLASS Z2UI5_CL_APP_DEMO_23 IMPLEMENTATION.
                 name = `Button`
                 t_prop = VALUE #(
                     ( n = `text`  v = `XML` )
-                    ( n = `press` v = client->_event( 'XML' ) ) )
-                 ).
-
-        app-s_next-xml_main = li_view->get_root( )->xml_get( ).
+                    ( n = `press` v = client->_event( 'XML' ) ) ) ).
 
+        app-s_next-xml_main = lo_view->get_root( )->xml_get( ).
 
     ENDCASE.
 
diff --git a/src/00/z2ui5_cl_app_demo_28.clas.abap b/src/00/z2ui5_cl_app_demo_28.clas.abap
index b9e78eac..8f072655 100644
--- a/src/00/z2ui5_cl_app_demo_28.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_28.clas.abap
@@ -109,24 +109,9 @@ CLASS z2ui5_cl_app_demo_28 IMPLEMENTATION.
                  text = 'Source_Code' target = '_blank'
                  href = z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) )
          )->get_parent(
-         )->simple_form( title = 'Chart auto refresh (2 sec)' editable = abap_true
           ).
 
-    DATA(point) = lo_View->flex_box(
-           width      = '22rem'
-           height     = '13rem'
-           alignitems = 'Center'
-           class      = 'sapUiSmallMargin'
-        )->items( )->interact_line_chart(
-               selectionchanged = client->_event( 'LINE_CHANGED' )
-               precedingpoint   = '15'
-               succeddingpoint  = '89'
-           )->points( ).
-    LOOP AT t_tab REFERENCE INTO DATA(lr_line).
-      point->interact_line_chart_point( label = lr_line->title  value = CONV string( sy-tabix )  ).
-    ENDLOOP.
-
-    lo_view->get_parent( )->list(
+    lo_view->list(
          headertext = 'Data auto refresh (2 sec)'
          items      = client->_bind_one( t_tab )
          )->standard_list_item(
diff --git a/src/00/z2ui5_cl_app_demo_32.clas.abap b/src/00/z2ui5_cl_app_demo_32.clas.abap
index 17971f2e..3ccd78c7 100644
--- a/src/00/z2ui5_cl_app_demo_32.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_32.clas.abap
@@ -94,6 +94,29 @@ CLASS Z2UI5_CL_APP_DEMO_32 IMPLEMENTATION.
 
   METHOD z2ui5_on_render.
 
+*    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
+*                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
+*                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
+*                          `    ><m:Button ` && |\n|  &&
+*                          `  text="back" ` && |\n|  &&
+*                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
+*                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
+*                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
+*                          `<html><head><style>` && |\n|  &&
+*                          `body {background-color: powderblue;}` && |\n|  &&
+*                          `h1   {color: blue;}` && |\n|  &&
+*                          `p    {color: red;}` && |\n|  &&
+*                          `</style>` &&
+*                          `</head>` && |\n|  &&
+*                          `<body>` && |\n|  &&
+*                          `<h1>This is a heading with css</h1>` && |\n|  &&
+*                          `<p>This is a paragraph with css.</p>` && |\n|  &&
+*                          `<h1>My First JavaScript</h1>` && |\n|  &&
+*                          `<button type="button">send</button>` && |\n|  &&
+*                          `<Input id='input' value='frontend data' /> ` &&
+*                          `</body>` && |\n|  &&
+*                          `</html> ` && |\n|  &&
+*                            `</mvc:View>`.
 
     app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
                           `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
@@ -110,89 +133,15 @@ CLASS Z2UI5_CL_APP_DEMO_32 IMPLEMENTATION.
                           `</style>` &&
                           `</head>` && |\n|  &&
                           `<body>` && |\n|  &&
-                                                    `<script> debugger; if(!z2ui5.MyCC){   jQuery.sap.declare("z2ui5.MyCC");` && |\n|  &&
-                          |\n|  &&
-                          `    sap.ui.define( [` && |\n|  &&
-                          `        "sap/ui/core/Control",` && |\n|  &&
-                          `    ], function (Control) {` && |\n|  &&
-                          `        "use strict";` && |\n|  &&
-                          |\n|  &&
-                          `        return Control.extend("z2ui5.MyCC", {` && |\n|  &&
-                          |\n|  &&
-                          `            metadata: {` && |\n|  &&
-                          `                properties: {` && |\n|  &&
-                          `                    value: { type: "string" }` && |\n|  &&
-                          `                },` && |\n|  &&
-                          `                events: {` && |\n|  &&
-                          `                    "change": {` && |\n|  &&
-                          `                        allowPreventDefault: true,` && |\n|  &&
-                          `                        parameters: {}` && |\n|  &&
-                          `                    }` && |\n|  &&
-                          `                }` && |\n|  &&
-                          `            },` && |\n|  &&
-                          |\n|  &&
-                          `            renderer: function (oRm, oControl) {` && |\n|  &&
-                          |\n|  &&
-                          `                oControl.oInput = new sap.m.Input({` && |\n|  &&
-                          `                    value: oControl.getProperty("value")` && |\n|  &&
-                          `                });` && |\n|  &&
-                          |\n|  &&
-                          `                oControl.oButton = new sap.m.Button({` && |\n|  &&
-                          `                    text: 'button text',` && |\n|  &&
-                          `                    press: function (oEvent) {` && |\n|  &&
-                          `                        // this.oInput._sTypedInValue` && |\n|  &&
-                          `                        // this.oInput.getProperty( 'value' ) ` && |\n|  &&
-                          `                        this.setProperty("value", this.oInput._sTypedInValue );` && |\n|  &&
-                          `                        this.fireChange();` && |\n|  &&
-                          `                    }.bind(oControl)` && |\n|  &&
-                          `                });` && |\n|  &&
-                          `                oRm.renderControl(oControl.oInput);` && |\n|  &&
-                          `                oRm.renderControl(oControl.oButton);` && |\n|  &&
-                          `            }` && |\n|  &&
-                          `    });` && |\n|  &&
-                          `}); } </script>` && |\n|  &&
-                          |\n|  &&
                           `<h1>This is a heading with css</h1>` && |\n|  &&
                           `<p>This is a paragraph with css.</p>` && |\n|  &&
                           `<h1>My First JavaScript</h1>` && |\n|  &&
-                          `<button type="button" onclick="myFunction()">` && |\n|  &&
-                          `run javascript code sent from the backend.</button>` && |\n|  &&
-                           `<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n|  &&
-                          `<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n|  &&
-                          `       baseProfile="full"` && |\n|  &&
-                          `       width="500" height="500"` && |\n|  &&
-                          `       xmlns="http://www.w3.org/2000/svg">` && |\n|  &&
-                          `    <rect width="100%" height="100%" />` && |\n|  &&
-                          `    <circle id="circle" cx="100" cy="100" r="80" />` && |\n|  &&
-                          `  </svg>` && |\n|  &&
-                          `<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n|  &&
-                          `<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n|  &&
-                          `  if (canvas.getContext){` && |\n|  &&
-                          `let context = canvas.getContext('2d');` && |\n|  &&
-                          `context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.fillRect (10, 10, 80, 80);` && |\n|  &&
-                          `context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `context.fillRect (100, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.strokeRect (190, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `    context.strokeRect (280, 10, 80, 80);` && |\n|  &&
-                          `    context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `    context.fillRect (370, 10, 80, 80);` && |\n|  &&
-                          `    context.clearRect (380, 20, 60, 20);` && |\n|  &&
-                          `    context.fillRect (390, 25, 10, 10);` && |\n|  &&
-                          `    context.fillRect (420, 25, 10, 10);` && |\n|  &&
-                          `    context.clearRect (385, 60, 50, 10); }  ` && |\n|  &&
-                          ` function myFunction( ) { alert( 'button pressed' ) }` && |\n|  &&
-                          ` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n|  &&
-                                                                    `</script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"> </script>` &&
-*                                                    ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `"  value="` && client->_bind( mv_value ) && `"/>` && |\n|  &&
-
+                          `<button onclick="myFunction()" type="button">send</button>` && |\n|  &&
+                          `<Input id='input' value='frontend data' /> ` &&
+                          `<script> function myFunction( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, document.getElementById(sap.z2ui5.oView.createId( "input" )).value ) } </script>` && |\n|  &&
                           `</body>` && |\n|  &&
                           `</html> ` && |\n|  &&
                             `</mvc:View>`.
 
-
-
   ENDMETHOD.
 ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_32.clas.xml b/src/00/z2ui5_cl_app_demo_32.clas.xml
index 56c07ae7..5be0433a 100644
--- a/src/00/z2ui5_cl_app_demo_32.clas.xml
+++ b/src/00/z2ui5_cl_app_demo_32.clas.xml
@@ -5,7 +5,7 @@
    <VSEOCLASS>
     <CLSNAME>Z2UI5_CL_APP_DEMO_32</CLSNAME>
     <LANGU>E</LANGU>
-    <DESCRIPT>extension - html js 2</DESCRIPT>
+    <DESCRIPT>extension - html examples</DESCRIPT>
     <STATE>1</STATE>
     <CLSCCINCL>X</CLSCCINCL>
     <FIXPT>X</FIXPT>
diff --git a/src/00/z2ui5_cl_app_demo_36.clas.abap b/src/00/z2ui5_cl_app_demo_36.clas.abap
new file mode 100644
index 00000000..42d6fe1c
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_36.clas.abap
@@ -0,0 +1,197 @@
+CLASS z2ui5_cl_app_demo_36 DEFINITION PUBLIC.
+
+  PUBLIC SECTION.
+
+    INTERFACES z2ui5_if_app.
+
+    data mv_value type string.
+    DATA product  TYPE string.
+    DATA quantity TYPE i.
+
+    DATA input21 TYPE string.
+    DATA input22 TYPE string.
+    DATA input41 TYPE string.
+  PROTECTED SECTION.
+
+    data client TYPE REF TO z2ui5_if_client.
+    DATA:
+      BEGIN OF app,
+        check_initialized TYPE abap_bool,
+        view_main         TYPE string,
+        view_popup        TYPE string,
+        get             TYPE z2ui5_if_client=>ty_s_get,
+        next            TYPE z2ui5_if_client=>ty_s_next,
+      END OF app.
+
+    METHODS z2ui5_on_init.
+    METHODS z2ui5_on_event.
+    METHODS z2ui5_on_render.
+
+  PRIVATE SECTION.
+ENDCLASS.
+
+
+
+CLASS Z2UI5_CL_APP_DEMO_36 IMPLEMENTATION.
+
+
+  METHOD z2ui5_if_app~controller.
+
+    me->client = client.
+    app-get      = client->get( ).
+    app-view_popup = ``.
+
+    IF app-check_initialized = abap_false.
+      app-check_initialized = abap_true.
+      z2ui5_on_init( ).
+    ENDIF.
+
+    IF app-get-event IS NOT INITIAL.
+      z2ui5_on_event( ).
+    ENDIF.
+
+    z2ui5_on_render( ).
+
+    client->set_next( app-next ).
+    CLEAR app-get.
+    CLEAR app-next.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_event.
+
+    CASE app-get-event.
+
+      WHEN 'POST'.
+        client->popup_message_toast( app-get-event_data ).
+
+         WHEN 'MYCC'.
+        client->popup_message_toast( 'MYCC event ' && mv_value ).
+
+      WHEN 'BACK'.
+        client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
+
+    ENDCASE.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_init.
+
+    product  = 'tomato'.
+    quantity = '500'.
+    app-view_main = 'VIEW_MAIN'.
+    input41 = 'faasdfdfsaVIp'.
+
+    input21 = '40'.
+    input22 = '40'.
+
+    mv_value = 'test'.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_render.
+
+    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
+                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
+                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
+                          `    ><m:Button ` && |\n|  &&
+                          `  text="back" ` && |\n|  &&
+                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
+                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
+                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
+                          `<html><head><style>` && |\n|  &&
+                          `body {background-color: powderblue;}` && |\n|  &&
+                          `h1   {color: blue;}` && |\n|  &&
+                          `p    {color: red;}` && |\n|  &&
+                          `</style>` &&
+                          `</head>` && |\n|  &&
+                          `<body>` && |\n|  &&
+                                                    `<script> debugger; if(!z2ui5.MyCC){   jQuery.sap.declare("z2ui5.MyCC");` && |\n|  &&
+                          |\n|  &&
+                          `    sap.ui.define( [` && |\n|  &&
+                          `        "sap/ui/core/Control",` && |\n|  &&
+                          `    ], function (Control) {` && |\n|  &&
+                          `        "use strict";` && |\n|  &&
+                          |\n|  &&
+                          `        return Control.extend("z2ui5.MyCC", {` && |\n|  &&
+                          |\n|  &&
+                          `            metadata: {` && |\n|  &&
+                          `                properties: {` && |\n|  &&
+                          `                    value: { type: "string" }` && |\n|  &&
+                          `                },` && |\n|  &&
+                          `                events: {` && |\n|  &&
+                          `                    "change": {` && |\n|  &&
+                          `                        allowPreventDefault: true,` && |\n|  &&
+                          `                        parameters: {}` && |\n|  &&
+                          `                    }` && |\n|  &&
+                          `                }` && |\n|  &&
+                          `            },` && |\n|  &&
+                          |\n|  &&
+                          `            renderer: function (oRm, oControl) {` && |\n|  &&
+                          |\n|  &&
+                          `                oControl.oInput = new sap.m.Input({` && |\n|  &&
+                          `                    value: oControl.getProperty("value")` && |\n|  &&
+                          `                });` && |\n|  &&
+                          |\n|  &&
+                          `                oControl.oButton = new sap.m.Button({` && |\n|  &&
+                          `                    text: 'button text',` && |\n|  &&
+                          `                    press: function (oEvent) {` && |\n|  &&
+                          `                        // this.oInput._sTypedInValue` && |\n|  &&
+                          `                        // this.oInput.getProperty( 'value' ) ` && |\n|  &&
+                          `                        this.setProperty("value", this.oInput._sTypedInValue );` && |\n|  &&
+                          `                        this.fireChange();` && |\n|  &&
+                          `                    }.bind(oControl)` && |\n|  &&
+                          `                });` && |\n|  &&
+                          `                oRm.renderControl(oControl.oInput);` && |\n|  &&
+                          `                oRm.renderControl(oControl.oButton);` && |\n|  &&
+                          `            }` && |\n|  &&
+                          `    });` && |\n|  &&
+                          `}); } </script>` && |\n|  &&
+                          |\n|  &&
+                          `<h1>This is a heading with css</h1>` && |\n|  &&
+                          `<p>This is a paragraph with css.</p>` && |\n|  &&
+                          `<h1>My First JavaScript</h1>` && |\n|  &&
+                          `<button type="button" onclick="myFunction()">` && |\n|  &&
+                          `run javascript code sent from the backend.</button>` && |\n|  &&
+                           `<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n|  &&
+                          `<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n|  &&
+                          `       baseProfile="full"` && |\n|  &&
+                          `       width="500" height="500"` && |\n|  &&
+                          `       xmlns="http://www.w3.org/2000/svg">` && |\n|  &&
+                          `    <rect width="100%" height="100%" />` && |\n|  &&
+                          `    <circle id="circle" cx="100" cy="100" r="80" />` && |\n|  &&
+                          `  </svg>` && |\n|  &&
+                          `<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n|  &&
+                          `<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n|  &&
+                          `  if (canvas.getContext){` && |\n|  &&
+                          `let context = canvas.getContext('2d');` && |\n|  &&
+                          `context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `context.fillRect (10, 10, 80, 80);` && |\n|  &&
+                          `context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
+                          `context.fillRect (100, 10, 80, 80);` && |\n|  &&
+                          `context.strokeStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `context.strokeRect (190, 10, 80, 80);` && |\n|  &&
+                          `context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
+                          `    context.strokeRect (280, 10, 80, 80);` && |\n|  &&
+                          `    context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `    context.fillRect (370, 10, 80, 80);` && |\n|  &&
+                          `    context.clearRect (380, 20, 60, 20);` && |\n|  &&
+                          `    context.fillRect (390, 25, 10, 10);` && |\n|  &&
+                          `    context.fillRect (420, 25, 10, 10);` && |\n|  &&
+                          `    context.clearRect (385, 60, 50, 10); }  ` && |\n|  &&
+                          ` function myFunction( ) { alert( 'button pressed' ) }` && |\n|  &&
+                          ` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n|  &&
+                                                                    `</script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"> </script>` &&
+*                                                    ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `"  value="` && client->_bind( mv_value ) && `"/>` && |\n|  &&
+
+                          `</body>` && |\n|  &&
+                          `</html> ` && |\n|  &&
+                            `</mvc:View>`.
+
+
+
+  ENDMETHOD.
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_36.clas.locals_imp.abap b/src/00/z2ui5_cl_app_demo_36.clas.locals_imp.abap
new file mode 100644
index 00000000..03056145
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_36.clas.locals_imp.abap
@@ -0,0 +1,136 @@
+*"* use this source file for the definition and implementation of
+*"* local helper classes, interface definitions and type
+*"* declarations
+class lcl_repository DEFINITION.
+
+PUBLIC SECTION.
+
+    class-METHODS get_js_barcode_lib
+        returning
+        value(result) type string.
+
+
+endclass.
+
+CLASS lcl_repository IMPLEMENTATION.
+
+  METHOD get_js_barcode_lib.
+
+    result = `` && |\n|  &&
+             `!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable` &&
+`:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"obj` &&
+`ect"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){` &&
+`var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=7)}([function(t,e,n){"use strict";var r;function o(t,e,n){return e in t?` &&
+`Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}Object.defineProperty(e,"__esModule",{value:!0});var i=e.SET_A=0,a=e.SET_B=1,u=e.SET_C=2,s=(e.SHIFT=98,e.START_A=103),f=e.START_B=104,c=e.START_C=105;e.MODULO=1` &&
+`03,e.STOP=106,e.FNC1=207,e.SET_BY_CODE=(o(r={},s,i),o(r,f,a),o(r,c,u),r),e.SWAP={101:i,100:a,99:u},e.A_START_CHAR=String.fromCharCode(208),e.B_START_CHAR=String.fromCharCode(209),e.C_START_CHAR=String.fromCharCode(210),e.A_CHARS="[\0-_È-Ï]",e.B_CHA` &&
+`RS="[ -È-Ï]",e.C_CHARS="(Ï*[0-9]{2}Ï*)",e.BARS=[11011001100,11001101100,11001100110,10010011e3,10010001100,10001001100,10011001e3,10011000100,10001100100,11001001e3,11001000100,11000100100,10110011100,10011011100,10011001110,10111001100,1001110110` &&
+`0,10011100110,11001110010,11001011100,11001001110,11011100100,11001110100,11101101110,11101001100,11100101100,11100100110,11101100100,11100110100,11100110010,11011011e3,11011000110,11000110110,10100011e3,10001011e3,10001000110,10110001e3,10001101e3` &&
+`,10001100010,11010001e3,11000101e3,11000100010,10110111e3,10110001110,10001101110,10111011e3,10111000110,10001110110,11101110110,11010001110,11000101110,11011101e3,11011100010,11011101110,11101011e3,11101000110,11100010110,11101101e3,11101100010,11` &&
+`100011010,11101111010,11001000010,11110001010,1010011e4,10100001100,1001011e4,10010000110,10000101100,10000100110,1011001e4,10110000100,1001101e4,10011000010,10000110100,10000110010,11000010010,1100101e4,11110111010,11000010100,10001111010,10100111` &&
+`100,10010111100,10010011110,10111100100,10011110100,10011110010,11110100100,11110010100,11110010010,11011011110,11011110110,11110110110,10101111e3,10100011110,10001011110,10111101e3,10111100010,11110101e3,11110100010,10111011110,10111101110,1110101` &&
+`1110,11110101110,11010000100,1101001e4,11010011100,1100011101011]},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1` &&
+`,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(11),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){!function(t,e){` &&
+`if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var r=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof ` &&
+`e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t.substring(1),n));return r.bytes=t.split("").map((function(t){return t.charCodeAt(0)})),r}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression mu` &&
+`st either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid"` &&
+`,value:function(){return/^[\x00-\x7F\xC8-\xD3]+$/.test(this.data)}},{key:"encode",value:function(){var t=this.bytes,n=t.shift()-105,r=u.SET_BY_CODE[n];if(void 0===r)throw new RangeError("The encoding does not start with a start character.");!0===th` &&
+`is.shouldEncodeAsEan128()&&t.unshift(u.FNC1);var o=e.next(t,1,r);return{text:this.text===this.data?this.text.replace(/[^\x20-\x7E]/g,""):this.text,data:e.getBar(n)+o.result+e.getBar((o.checksum+n)%u.MODULO)+e.getBar(u.STOP)}}},{key:"shouldEncodeAsE` &&
+`an128",value:function(){var t=this.options.ean128||!1;return"string"==typeof t&&(t="true"===t.toLowerCase()),t}}],[{key:"getBar",value:function(t){return u.BARS[t]?u.BARS[t].toString():""}},{key:"correctIndex",value:function(t,e){if(e===u.SET_A){va` &&
+`r n=t.shift();return n<32?n+64:n-32}return e===u.SET_B?t.shift()-32:10*(t.shift()-48)+t.shift()-48}},{key:"next",value:function(t,n,r){if(!t.length)return{result:"",checksum:0};var o=void 0,i=void 0;if(t[0]>=200){i=t.shift()-105;var a=u.SWAP[i];voi` &&
+`d 0!==a?o=e.next(t,n+1,a):(r!==u.SET_A&&r!==u.SET_B||i!==u.SHIFT||(t[0]=r===u.SET_A?t[0]>95?t[0]-96:t[0]:t[0]<32?t[0]+96:t[0]),o=e.next(t,n+1,r))}else i=e.correctIndex(t,r),o=e.next(t,n+1,r);var s=i*n;return{result:e.getBar(i)+o.result,checksum:s+o` &&
+`.checksum}}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnPr` &&
+`operty.call(n,r)&&(t[r]=n[r])}return t};e.default=function(t,e){return r({},t,e)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=["width","height","textMargin","fontSize","margin","marginT` &&
+`op","marginBottom","marginLeft","marginRight"];for(var n in e)e.hasOwnProperty(n)&&(n=e[n],"string"==typeof t[n]&&(t[n]=parseInt(t[n],10)));"string"==typeof t.displayValue&&(t.displayValue="false"!=t.displayValue);return t}},function(t,e,n){"use st` &&
+`rict";Object.defineProperty(e,"__esModule",{value:!0});var r={width:2,height:100,format:"auto",displayValue:!0,fontOptions:"",font:"monospace",text:void 0,textAlign:"center",textPosition:"bottom",textMargin:2,fontSize:20,background:"#ffffff",lineCo` &&
+`lor:"#000000",margin:10,marginTop:void 0,marginBottom:void 0,marginLeft:void 0,marginRight:void 0,valid:function(){}};e.default=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getTotalWidthOfEncodings=e.calculateE` &&
+`ncodingAttributes=e.getBarcodePadding=e.getEncodingHeight=e.getMaximumHeightOfEncodings=void 0;var r,o=n(2),i=(r=o)&&r.__esModule?r:{default:r};function a(t,e){return e.height+(e.displayValue&&t.text.length>0?e.fontSize+e.textMargin:0)+e.marginTop+` &&
+`e.marginBottom}function u(t,e,n){if(n.displayValue&&e<t){if("center"==n.textAlign)return Math.floor((t-e)/2);if("left"==n.textAlign)return 0;if("right"==n.textAlign)return Math.floor(t-e)}return 0}function s(t,e,n){var r;if(n)r=n;else{if("undefined` &&
+`"==typeof document)return 0;r=document.createElement("canvas").getContext("2d")}r.font=e.fontOptions+" "+e.fontSize+"px "+e.font;var o=r.measureText(t);return o?o.width:0}e.getMaximumHeightOfEncodings=function(t){for(var e=0,n=0;n<t.length;n++)t[n]` &&
+`.height>e&&(e=t[n].height);return e},e.getEncodingHeight=a,e.getBarcodePadding=u,e.calculateEncodingAttributes=function(t,e,n){for(var r=0;r<t.length;r++){var o,f=t[r],c=(0,i.default)(e,f.options);o=c.displayValue?s(f.text,c,n):0;var l=f.data.lengt` &&
+`h*c.width;f.width=Math.ceil(Math.max(o,l)),f.height=a(f,c),f.barcodePadding=u(o,l,c)}},e.getTotalWidthOfEncodings=function(t){for(var e=0,n=0;n<t.length;n++)e+=t[n].width;return e}},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))` &&
+`throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function` &&
+`"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Obj` &&
+`ect.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=function(t){function e(t,n){r(this,e);var i=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return i.name="InvalidInputException",i.symbology=t` &&
+`,i.input=n,i.message='"'+i.input+'" is not a valid input for '+i.symbology,i}return i(e,Error),e}(),u=function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.name="InvalidElementException",t.mess` &&
+`age="Not supported type to render on",t}return i(e,Error),e}(),s=function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.name="NoElementException",t.message="No element to render on.",t}return i(` &&
+`e,Error),e}();e.InvalidInputException=a,e.InvalidElementException=u,e.NoElementException=s},function(t,e,n){"use strict";var r=d(n(8)),o=d(n(2)),i=d(n(16)),a=d(n(17)),u=d(n(18)),s=d(n(3)),f=d(n(24)),c=n(6),l=d(n(4));function d(t){return t&&t.__esMo` &&
+`dule?t:{default:t}}var p=function(){},h=function(t,e,n){var r=new p;if(void 0===t)throw Error("No element to render on was provided.");return r._renderProperties=(0,u.default)(t),r._encodings=[],r._options=l.default,r._errorHandler=new f.default(r)` &&
+`,void 0!==e&&((n=n||{}).format||(n.format=b()),r.options(n)[n.format](e,n).render()),r};for(var v in h.getModule=function(t){return r.default[t]},r.default)r.default.hasOwnProperty(v)&&g(r.default,v);function g(t,e){p.prototype[e]=p.prototype[e.toU` &&
+`pperCase()]=p.prototype[e.toLowerCase()]=function(n,r){var i=this;return i._errorHandler.wrapBarcodeCall((function(){r.text=void 0===r.text?void 0:""+r.text;var a=(0,o.default)(i._options,r);a=(0,s.default)(a);var u=t[e],f=y(n,u,a);return i._encodi` &&
+`ngs.push(f),i}))}}function y(t,e,n){var r=new e(t=""+t,n);if(!r.valid())throw new c.InvalidInputException(r.constructor.name,t);var a=r.encode();a=(0,i.default)(a);for(var u=0;u<a.length;u++)a[u].options=(0,o.default)(n,a[u].options);return a}funct` &&
+`ion b(){return r.default.CODE128?"CODE128":Object.keys(r.default)[0]}function _(t,e,n){e=(0,i.default)(e);for(var r=0;r<e.length;r++)e[r].options=(0,o.default)(n,e[r].options),(0,a.default)(e[r].options);(0,a.default)(n),new(0,t.renderer)(t.element` &&
+`,e,n).render(),t.afterRender&&t.afterRender()}p.prototype.options=function(t){return this._options=(0,o.default)(this._options,t),this},p.prototype.blank=function(t){var e=new Array(t+1).join("0");return this._encodings.push({data:e}),this},p.proto` &&
+`type.init=function(){var t;if(this._renderProperties)for(var e in Array.isArray(this._renderProperties)||(this._renderProperties=[this._renderProperties]),this._renderProperties){t=this._renderProperties[e];var n=(0,o.default)(this._options,t.optio` &&
+`ns);"auto"==n.format&&(n.format=b()),this._errorHandler.wrapBarcodeCall((function(){var e=y(n.value,r.default[n.format.toUpperCase()],n);_(t,e,n)}))}},p.prototype.render=function(){if(!this._renderProperties)throw new c.NoElementException;if(Array.` &&
+`isArray(this._renderProperties))for(var t=0;t<this._renderProperties.length;t++)_(this._renderProperties[t],this._encodings,this._options);else _(this._renderProperties,this._encodings,this._options);return this},p.prototype._defaults=l.default,"un` &&
+`defined"!=typeof window&&(window.JsBarcode=h),"undefined"!=typeof jQuery&&(jQuery.fn.JsBarcode=function(t,e){var n=[];return jQuery(this).each((function(){n.push(this)})),h(n,t,e)}),t.exports=h},function(t,e,n){"use strict";Object.defineProperty(e,` &&
+`"__esModule",{value:!0});var r=n(9);e.default={CODE128:r.CODE128,CODE128A:r.CODE128A,CODE128B:r.CODE128B,CODE128C:r.CODE128C}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CODE128C=e.CODE128B=e.CODE128A=e.CODE128=` &&
+`void 0;var r=u(n(10)),o=u(n(13)),i=u(n(14)),a=u(n(15));function u(t){return t&&t.__esModule?t:{default:t}}e.CODE128=r.default,e.CODE128A=o.default,e.CODE128B=i.default,e.CODE128C=a.default},function(t,e,n){"use strict";Object.defineProperty(e,"__es` &&
+`Module",{value:!0});var r=i(n(1)),o=i(n(12));function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=ty` &&
+`peof e?t:e}var u=function(t){function e(t,n){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),/^[\x00-\x7F\xC8-\xD3]+$/.test(t))var r=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,(0` &&
+`,o.default)(t),n));else r=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));return a(r)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.p` &&
+`rototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e}(r.default);e.default=u},function(t,e,n){"use strict";Object.define` &&
+`Property(e,"__esModule",{value:!0});e.default=function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.data=e,this.text=n.text||e,this.options=n}},function(t,e,n){"use strict";Object` &&
+`.defineProperty(e,"__esModule",{value:!0});var r=n(0),o=function(t){return t.match(new RegExp("^"+r.A_CHARS+"*"))[0].length},i=function(t){return t.match(new RegExp("^"+r.B_CHARS+"*"))[0].length},a=function(t){return t.match(new RegExp("^"+r.C_CHAR` &&
+`S+"*"))[0]};function u(t,e){var n=e?r.A_CHARS:r.B_CHARS,o=t.match(new RegExp("^("+n+"+?)(([0-9]{2}){2,})([^0-9]|$)"));if(o)return o[1]+String.fromCharCode(204)+s(t.substring(o[1].length));var i=t.match(new RegExp("^"+n+"+"))[0];return i.length===t.` &&
+`length?t:i+String.fromCharCode(e?205:206)+u(t.substring(i.length),!e)}function s(t){var e=a(t),n=e.length;if(n===t.length)return t;t=t.substring(n);var r=o(t)>=i(t);return e+String.fromCharCode(r?206:205)+u(t,r)}e.default=function(t){var e=void 0;i` &&
+`f(a(t).length>=2)e=r.C_START_CHAR+s(t);else{var n=o(t)>i(t);e=(n?r.A_START_CHAR:r.B_START_CHAR)+u(t,n)}return e.replace(/[\xCD\xCE]([^])[\xCD\xCE]/,(function(t,e){return String.fromCharCode(203)+e}))}},function(t,e,n){"use strict";Object.defineProp` &&
+`erty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n` &&
+`&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(1),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)t` &&
+`hrow new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.A_START_CHAR+t,n))}return function(t,e){if("functi` &&
+`on"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?O` &&
+`bject.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid",value:function(){return new RegExp("^"+u.A_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var` &&
+` r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),` &&
+`i=n(1),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn'` &&
+`t been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.B_START_CHAR+t,n))}return function(t,e){if("function"!=typeof e&&null!==e)throw new T` &&
+`ypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto` &&
+`__=e)}(e,t),o(e,[{key:"valid",value:function(){return new RegExp("^"+u.B_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for` &&
+`(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(1),a=(r=i)&&r.__esModule?r:{def` &&
+`ault:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't` &&
+` been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.C_START_CHAR+t,n))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must eit` &&
+`her be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid",value` &&
+`:function(){return new RegExp("^"+u.C_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=[];return function t(n){if(Array.isArray(n))f` &&
+`or(var r=0;r<n.length;r++)t(n[r]);else n.text=n.text||"",n.data=n.data||"",e.push(n)}(t),e}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t.marginTop=t.marginTop||t.margin,t.marginBottom` &&
+`=t.marginBottom||t.margin,t.marginRight=t.marginRight||t.margin,t.marginLeft=t.marginLeft||t.margin,t}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?` &&
+`function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=u(n(19)),i=u(n(20)),a=n(6);function u(t){return t&&t.__esModule?t:{default:t}}function s(t){if("string"=` &&
+`=typeof t)return function(t){var e=document.querySelectorAll(t);if(0===e.length)return;for(var n=[],r=0;r<e.length;r++)n.push(s(e[r]));return n}(t);if(Array.isArray(t)){for(var e=[],n=0;n<t.length;n++)e.push(s(t[n]));return e}if("undefined"!=typeof` &&
+` HTMLCanvasElement&&t instanceof HTMLImageElement)return u=t,{element:f=document.createElement("canvas"),options:(0,o.default)(u),renderer:i.default.CanvasRenderer,afterRender:function(){u.setAttribute("src",f.toDataURL())}};if(t&&t.nodeName&&"svg"` &&
+`===t.nodeName.toLowerCase()||"undefined"!=typeof SVGElement&&t instanceof SVGElement)return{element:t,options:(0,o.default)(t),renderer:i.default.SVGRenderer};if("undefined"!=typeof HTMLCanvasElement&&t instanceof HTMLCanvasElement)return{element:t` &&
+`,options:(0,o.default)(t),renderer:i.default.CanvasRenderer};if(t&&t.getContext)return{element:t,renderer:i.default.CanvasRenderer};if(t&&"object"===(void 0===t?"undefined":r(t))&&!t.nodeName)return{element:t,renderer:i.default.ObjectRenderer};thro` &&
+`w new a.InvalidElementException;var u,f}e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(n(3)),o=i(n(4));function i(t){return t&&t.__esModule?t:{default:t}}e.default=function(t){var e={};for(var n i` &&
+`n o.default)o.default.hasOwnProperty(n)&&(t.hasAttribute("jsbarcode-"+n.toLowerCase())&&(e[n]=t.getAttribute("jsbarcode-"+n.toLowerCase())),t.hasAttribute("data-"+n.toLowerCase())&&(e[n]=t.getAttribute("data-"+n.toLowerCase())));return e.value=t.ge` &&
+`tAttribute("jsbarcode-value")||t.getAttribute("data-value"),e=(0,r.default)(e)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a(n(21)),o=a(n(22)),i=a(n(23));function a(t){return t&&t.__esModule?t:{default:t}}e` &&
+`.default={CanvasRenderer:r.default,SVGRenderer:o.default,ObjectRenderer:i.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable` &&
+`=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(2),a=(r=i)&&r.__esModule?r:{default:r},u=n(5);var s=function(){function t(e,n,r` &&
+`){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.canvas=e,this.encodings=n,this.options=r}return o(t,[{key:"render",value:function(){if(!this.canvas.getContext)throw new Error("The browser` &&
+` does not support canvas.");this.prepareCanvas();for(var t=0;t<this.encodings.length;t++){var e=(0,a.default)(this.options,this.encodings[t].options);this.drawCanvasBarcode(e,this.encodings[t]),this.drawCanvasText(e,this.encodings[t]),this.moveCanv` &&
+`asDrawing(this.encodings[t])}this.restoreCanvas()}},{key:"prepareCanvas",value:function(){var t=this.canvas.getContext("2d");t.save(),(0,u.calculateEncodingAttributes)(this.encodings,this.options,t);var e=(0,u.getTotalWidthOfEncodings)(this.encodin` &&
+`gs),n=(0,u.getMaximumHeightOfEncodings)(this.encodings);this.canvas.width=e+this.options.marginLeft+this.options.marginRight,this.canvas.height=n,t.clearRect(0,0,this.canvas.width,this.canvas.height),this.options.background&&(t.fillStyle=this.optio` &&
+`ns.background,t.fillRect(0,0,this.canvas.width,this.canvas.height)),t.translate(this.options.marginLeft,0)}},{key:"drawCanvasBarcode",value:function(t,e){var n,r=this.canvas.getContext("2d"),o=e.data;n="top"==t.textPosition?t.marginTop+t.fontSize+t` &&
+`.textMargin:t.marginTop,r.fillStyle=t.lineColor;for(var i=0;i<o.length;i++){var a=i*t.width+e.barcodePadding;"1"===o[i]?r.fillRect(a,n,t.width,t.height):o[i]&&r.fillRect(a,n,t.width,t.height*o[i])}}},{key:"drawCanvasText",value:function(t,e){var n,` &&
+`r,o=this.canvas.getContext("2d"),i=t.fontOptions+" "+t.fontSize+"px "+t.font;t.displayValue&&(r="top"==t.textPosition?t.marginTop+t.fontSize-t.textMargin:t.height+t.textMargin+t.marginTop+t.fontSize,o.font=i,"left"==t.textAlign||e.barcodePadding>0?` &&
+`(n=0,o.textAlign="left"):"right"==t.textAlign?(n=e.width-1,o.textAlign="right"):(n=e.width/2,o.textAlign="center"),o.fillText(e.text,n,r))}},{key:"moveCanvasDrawing",value:function(t){this.canvas.getContext("2d").translate(t.width,0)}},{key:"restor` &&
+`eCanvas",value:function(){this.canvas.getContext("2d").restore()}}]),t}();e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumera` &&
+`ble=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(2),a=(r=i)&&r.__esModule?r:{default:r},u=n(5);var s="http://www.w3.org/2000/` &&
+`svg",f=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.svg=e,this.encodings=n,this.options=r,this.document=r.xmlDocument||document}return o(t,[{key:"render",val` &&
+`ue:function(){var t=this.options.marginLeft;this.prepareSVG();for(var e=0;e<this.encodings.length;e++){var n=this.encodings[e],r=(0,a.default)(this.options,n.options),o=this.createGroup(t,r.marginTop,this.svg);this.setGroupOptions(o,r),this.drawSvg` &&
+`Barcode(o,r,n),this.drawSVGText(o,r,n),t+=n.width}}},{key:"prepareSVG",value:function(){for(;this.svg.firstChild;)this.svg.removeChild(this.svg.firstChild);(0,u.calculateEncodingAttributes)(this.encodings,this.options);var t=(0,u.getTotalWidthOfEnc` &&
+`odings)(this.encodings),e=(0,u.getMaximumHeightOfEncodings)(this.encodings),n=t+this.options.marginLeft+this.options.marginRight;this.setSvgAttributes(n,e),this.options.background&&this.drawRect(0,0,n,e,this.svg).setAttribute("style","fill:"+this.o` &&
+`ptions.background+";")}},{key:"drawSvgBarcode",value:function(t,e,n){var r,o=n.data;r="top"==e.textPosition?e.fontSize+e.textMargin:0;for(var i=0,a=0,u=0;u<o.length;u++)a=u*e.width+n.barcodePadding,"1"===o[u]?i++:i>0&&(this.drawRect(a-e.width*i,r,e` &&
+`.width*i,e.height,t),i=0);i>0&&this.drawRect(a-e.width*(i-1),r,e.width*i,e.height,t)}},{key:"drawSVGText",value:function(t,e,n){var r,o,i=this.document.createElementNS(s,"text");e.displayValue&&(i.setAttribute("style","font:"+e.fontOptions+" "+e.fo` &&
+`ntSize+"px "+e.font),o="top"==e.textPosition?e.fontSize-e.textMargin:e.height+e.textMargin+e.fontSize,"left"==e.textAlign||n.barcodePadding>0?(r=0,i.setAttribute("text-anchor","start")):"right"==e.textAlign?(r=n.width-1,i.setAttribute("text-anchor"` &&
+`,"end")):(r=n.width/2,i.setAttribute("text-anchor","middle")),i.setAttribute("x",r),i.setAttribute("y",o),i.appendChild(this.document.createTextNode(n.text)),t.appendChild(i))}},{key:"setSvgAttributes",value:function(t,e){var n=this.svg;n.setAttrib` &&
+`ute("width",t+"px"),n.setAttribute("height",e+"px"),n.setAttribute("x","0px"),n.setAttribute("y","0px"),n.setAttribute("viewBox","0 0 "+t+" "+e),n.setAttribute("xmlns",s),n.setAttribute("version","1.1"),n.setAttribute("style","transform: translate(` &&
+`0,0)")}},{key:"createGroup",value:function(t,e,n){var r=this.document.createElementNS(s,"g");return r.setAttribute("transform","translate("+t+", "+e+")"),n.appendChild(r),r}},{key:"setGroupOptions",value:function(t,e){t.setAttribute("style","fill:"` &&
+`+e.lineColor+";")}},{key:"drawRect",value:function(t,e,n,r,o){var i=this.document.createElementNS(s,"rect");return i.setAttribute("x",t),i.setAttribute("y",e),i.setAttribute("width",n),i.setAttribute("height",r),o.appendChild(i),i}}]),t}();e.defaul` &&
+`t=f},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.definePro` &&
+`perty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();var o=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.object=e,this.encoding` &&
+`s=n,this.options=r}return r(t,[{key:"render",value:function(){this.object.encodings=this.encodings}}]),t}();e.default=o},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.` &&
+`length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();var o=function(){function t(e){!function(t,e){if` &&
+`(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.api=e}return r(t,[{key:"handleCatch",value:function(t){if("InvalidInputException"!==t.name)throw t;if(this.api._options.valid===this.api._defaults.valid)throw` &&
+` t.message;this.api._options.valid(!1),this.api.render=function(){}}},{key:"wrapBarcodeCall",value:function(t){try{var e=t.apply(void 0,arguments);return this.api._options.valid(!0),e}catch(t){return this.handleCatch(t),this.api}}}]),t}();e.default` &&
+`=o}]);`.
+
+  ENDMETHOD.
+
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_36.clas.xml b/src/00/z2ui5_cl_app_demo_36.clas.xml
new file mode 100644
index 00000000..a6053370
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_36.clas.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_APP_DEMO_36</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>extension - html js 2</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>
diff --git a/src/00/z2ui5_cl_app_demo_37.clas.abap b/src/00/z2ui5_cl_app_demo_37.clas.abap
new file mode 100644
index 00000000..e10f39b8
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_37.clas.abap
@@ -0,0 +1,197 @@
+CLASS z2ui5_cl_app_demo_37 DEFINITION PUBLIC.
+
+  PUBLIC SECTION.
+
+    INTERFACES z2ui5_if_app.
+
+    data mv_value type string.
+    DATA product  TYPE string.
+    DATA quantity TYPE i.
+
+    DATA input21 TYPE string.
+    DATA input22 TYPE string.
+    DATA input41 TYPE string.
+  PROTECTED SECTION.
+
+    data client TYPE REF TO z2ui5_if_client.
+    DATA:
+      BEGIN OF app,
+        check_initialized TYPE abap_bool,
+        view_main         TYPE string,
+        view_popup        TYPE string,
+        get             TYPE z2ui5_if_client=>ty_s_get,
+        next            TYPE z2ui5_if_client=>ty_s_next,
+      END OF app.
+
+    METHODS z2ui5_on_init.
+    METHODS z2ui5_on_event.
+    METHODS z2ui5_on_render.
+
+  PRIVATE SECTION.
+ENDCLASS.
+
+
+
+CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
+
+
+  METHOD z2ui5_if_app~controller.
+
+    me->client = client.
+    app-get      = client->get( ).
+    app-view_popup = ``.
+
+    IF app-check_initialized = abap_false.
+      app-check_initialized = abap_true.
+      z2ui5_on_init( ).
+    ENDIF.
+
+    IF app-get-event IS NOT INITIAL.
+      z2ui5_on_event( ).
+    ENDIF.
+
+    z2ui5_on_render( ).
+
+    client->set_next( app-next ).
+    CLEAR app-get.
+    CLEAR app-next.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_event.
+
+    CASE app-get-event.
+
+      WHEN 'POST'.
+        client->popup_message_toast( app-get-event_data ).
+
+         WHEN 'MYCC'.
+        client->popup_message_toast( 'MYCC event ' && mv_value ).
+
+      WHEN 'BACK'.
+        client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
+
+    ENDCASE.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_init.
+
+    product  = 'tomato'.
+    quantity = '500'.
+    app-view_main = 'VIEW_MAIN'.
+    input41 = 'faasdfdfsaVIp'.
+
+    input21 = '40'.
+    input22 = '40'.
+
+    mv_value = 'test'.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_render.
+
+    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
+                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
+                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
+                          `    ><m:Button ` && |\n|  &&
+                          `  text="back" ` && |\n|  &&
+                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
+                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
+                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
+                          `<html><head><style>` && |\n|  &&
+                          `body {background-color: powderblue;}` && |\n|  &&
+                          `h1   {color: blue;}` && |\n|  &&
+                          `p    {color: red;}` && |\n|  &&
+                          `</style>` &&
+                          `</head>` && |\n|  &&
+                          `<body>` && |\n|  &&
+                                                    `<script> debugger; if(!z2ui5.MyCC){   jQuery.sap.declare("z2ui5.MyCC");` && |\n|  &&
+                          |\n|  &&
+                          `    sap.ui.define( [` && |\n|  &&
+                          `        "sap/ui/core/Control",` && |\n|  &&
+                          `    ], function (Control) {` && |\n|  &&
+                          `        "use strict";` && |\n|  &&
+                          |\n|  &&
+                          `        return Control.extend("z2ui5.MyCC", {` && |\n|  &&
+                          |\n|  &&
+                          `            metadata: {` && |\n|  &&
+                          `                properties: {` && |\n|  &&
+                          `                    value: { type: "string" }` && |\n|  &&
+                          `                },` && |\n|  &&
+                          `                events: {` && |\n|  &&
+                          `                    "change": {` && |\n|  &&
+                          `                        allowPreventDefault: true,` && |\n|  &&
+                          `                        parameters: {}` && |\n|  &&
+                          `                    }` && |\n|  &&
+                          `                }` && |\n|  &&
+                          `            },` && |\n|  &&
+                          |\n|  &&
+                          `            renderer: function (oRm, oControl) {` && |\n|  &&
+                          |\n|  &&
+                          `                oControl.oInput = new sap.m.Input({` && |\n|  &&
+                          `                    value: oControl.getProperty("value")` && |\n|  &&
+                          `                });` && |\n|  &&
+                          |\n|  &&
+                          `                oControl.oButton = new sap.m.Button({` && |\n|  &&
+                          `                    text: 'button text',` && |\n|  &&
+                          `                    press: function (oEvent) {` && |\n|  &&
+                          `                        // this.oInput._sTypedInValue` && |\n|  &&
+                          `                        // this.oInput.getProperty( 'value' ) ` && |\n|  &&
+                          `                        this.setProperty("value", this.oInput._sTypedInValue );` && |\n|  &&
+                          `                        this.fireChange();` && |\n|  &&
+                          `                    }.bind(oControl)` && |\n|  &&
+                          `                });` && |\n|  &&
+                          `                oRm.renderControl(oControl.oInput);` && |\n|  &&
+                          `                oRm.renderControl(oControl.oButton);` && |\n|  &&
+                          `            }` && |\n|  &&
+                          `    });` && |\n|  &&
+                          `}); } </script>` && |\n|  &&
+                          |\n|  &&
+                          `<h1>This is a heading with css</h1>` && |\n|  &&
+                          `<p>This is a paragraph with css.</p>` && |\n|  &&
+                          `<h1>My First JavaScript</h1>` && |\n|  &&
+                          `<button type="button" onclick="myFunction()">` && |\n|  &&
+                          `run javascript code sent from the backend.</button>` && |\n|  &&
+                           `<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n|  &&
+                          `<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n|  &&
+                          `       baseProfile="full"` && |\n|  &&
+                          `       width="500" height="500"` && |\n|  &&
+                          `       xmlns="http://www.w3.org/2000/svg">` && |\n|  &&
+                          `    <rect width="100%" height="100%" />` && |\n|  &&
+                          `    <circle id="circle" cx="100" cy="100" r="80" />` && |\n|  &&
+                          `  </svg>` && |\n|  &&
+                          `<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n|  &&
+                          `<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n|  &&
+                          `  if (canvas.getContext){` && |\n|  &&
+                          `let context = canvas.getContext('2d');` && |\n|  &&
+                          `context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `context.fillRect (10, 10, 80, 80);` && |\n|  &&
+                          `context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
+                          `context.fillRect (100, 10, 80, 80);` && |\n|  &&
+                          `context.strokeStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `context.strokeRect (190, 10, 80, 80);` && |\n|  &&
+                          `context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
+                          `    context.strokeRect (280, 10, 80, 80);` && |\n|  &&
+                          `    context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
+                          `    context.fillRect (370, 10, 80, 80);` && |\n|  &&
+                          `    context.clearRect (380, 20, 60, 20);` && |\n|  &&
+                          `    context.fillRect (390, 25, 10, 10);` && |\n|  &&
+                          `    context.fillRect (420, 25, 10, 10);` && |\n|  &&
+                          `    context.clearRect (385, 60, 50, 10); }  ` && |\n|  &&
+                          ` function myFunction( ) { alert( 'button pressed' ) }` && |\n|  &&
+                          ` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n|  &&
+                                                                    `</script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"> </script>` &&
+*                                                    ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `"  value="` && client->_bind( mv_value ) && `"/>` && |\n|  &&
+
+                          `</body>` && |\n|  &&
+                          `</html> ` && |\n|  &&
+                            `</mvc:View>`.
+
+
+
+  ENDMETHOD.
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_37.clas.locals_imp.abap b/src/00/z2ui5_cl_app_demo_37.clas.locals_imp.abap
new file mode 100644
index 00000000..03056145
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_37.clas.locals_imp.abap
@@ -0,0 +1,136 @@
+*"* use this source file for the definition and implementation of
+*"* local helper classes, interface definitions and type
+*"* declarations
+class lcl_repository DEFINITION.
+
+PUBLIC SECTION.
+
+    class-METHODS get_js_barcode_lib
+        returning
+        value(result) type string.
+
+
+endclass.
+
+CLASS lcl_repository IMPLEMENTATION.
+
+  METHOD get_js_barcode_lib.
+
+    result = `` && |\n|  &&
+             `!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable` &&
+`:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"obj` &&
+`ect"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){` &&
+`var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=7)}([function(t,e,n){"use strict";var r;function o(t,e,n){return e in t?` &&
+`Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}Object.defineProperty(e,"__esModule",{value:!0});var i=e.SET_A=0,a=e.SET_B=1,u=e.SET_C=2,s=(e.SHIFT=98,e.START_A=103),f=e.START_B=104,c=e.START_C=105;e.MODULO=1` &&
+`03,e.STOP=106,e.FNC1=207,e.SET_BY_CODE=(o(r={},s,i),o(r,f,a),o(r,c,u),r),e.SWAP={101:i,100:a,99:u},e.A_START_CHAR=String.fromCharCode(208),e.B_START_CHAR=String.fromCharCode(209),e.C_START_CHAR=String.fromCharCode(210),e.A_CHARS="[\0-_È-Ï]",e.B_CHA` &&
+`RS="[ -È-Ï]",e.C_CHARS="(Ï*[0-9]{2}Ï*)",e.BARS=[11011001100,11001101100,11001100110,10010011e3,10010001100,10001001100,10011001e3,10011000100,10001100100,11001001e3,11001000100,11000100100,10110011100,10011011100,10011001110,10111001100,1001110110` &&
+`0,10011100110,11001110010,11001011100,11001001110,11011100100,11001110100,11101101110,11101001100,11100101100,11100100110,11101100100,11100110100,11100110010,11011011e3,11011000110,11000110110,10100011e3,10001011e3,10001000110,10110001e3,10001101e3` &&
+`,10001100010,11010001e3,11000101e3,11000100010,10110111e3,10110001110,10001101110,10111011e3,10111000110,10001110110,11101110110,11010001110,11000101110,11011101e3,11011100010,11011101110,11101011e3,11101000110,11100010110,11101101e3,11101100010,11` &&
+`100011010,11101111010,11001000010,11110001010,1010011e4,10100001100,1001011e4,10010000110,10000101100,10000100110,1011001e4,10110000100,1001101e4,10011000010,10000110100,10000110010,11000010010,1100101e4,11110111010,11000010100,10001111010,10100111` &&
+`100,10010111100,10010011110,10111100100,10011110100,10011110010,11110100100,11110010100,11110010010,11011011110,11011110110,11110110110,10101111e3,10100011110,10001011110,10111101e3,10111100010,11110101e3,11110100010,10111011110,10111101110,1110101` &&
+`1110,11110101110,11010000100,1101001e4,11010011100,1100011101011]},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1` &&
+`,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(11),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){!function(t,e){` &&
+`if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var r=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof ` &&
+`e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t.substring(1),n));return r.bytes=t.split("").map((function(t){return t.charCodeAt(0)})),r}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression mu` &&
+`st either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid"` &&
+`,value:function(){return/^[\x00-\x7F\xC8-\xD3]+$/.test(this.data)}},{key:"encode",value:function(){var t=this.bytes,n=t.shift()-105,r=u.SET_BY_CODE[n];if(void 0===r)throw new RangeError("The encoding does not start with a start character.");!0===th` &&
+`is.shouldEncodeAsEan128()&&t.unshift(u.FNC1);var o=e.next(t,1,r);return{text:this.text===this.data?this.text.replace(/[^\x20-\x7E]/g,""):this.text,data:e.getBar(n)+o.result+e.getBar((o.checksum+n)%u.MODULO)+e.getBar(u.STOP)}}},{key:"shouldEncodeAsE` &&
+`an128",value:function(){var t=this.options.ean128||!1;return"string"==typeof t&&(t="true"===t.toLowerCase()),t}}],[{key:"getBar",value:function(t){return u.BARS[t]?u.BARS[t].toString():""}},{key:"correctIndex",value:function(t,e){if(e===u.SET_A){va` &&
+`r n=t.shift();return n<32?n+64:n-32}return e===u.SET_B?t.shift()-32:10*(t.shift()-48)+t.shift()-48}},{key:"next",value:function(t,n,r){if(!t.length)return{result:"",checksum:0};var o=void 0,i=void 0;if(t[0]>=200){i=t.shift()-105;var a=u.SWAP[i];voi` &&
+`d 0!==a?o=e.next(t,n+1,a):(r!==u.SET_A&&r!==u.SET_B||i!==u.SHIFT||(t[0]=r===u.SET_A?t[0]>95?t[0]-96:t[0]:t[0]<32?t[0]+96:t[0]),o=e.next(t,n+1,r))}else i=e.correctIndex(t,r),o=e.next(t,n+1,r);var s=i*n;return{result:e.getBar(i)+o.result,checksum:s+o` &&
+`.checksum}}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnPr` &&
+`operty.call(n,r)&&(t[r]=n[r])}return t};e.default=function(t,e){return r({},t,e)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=["width","height","textMargin","fontSize","margin","marginT` &&
+`op","marginBottom","marginLeft","marginRight"];for(var n in e)e.hasOwnProperty(n)&&(n=e[n],"string"==typeof t[n]&&(t[n]=parseInt(t[n],10)));"string"==typeof t.displayValue&&(t.displayValue="false"!=t.displayValue);return t}},function(t,e,n){"use st` &&
+`rict";Object.defineProperty(e,"__esModule",{value:!0});var r={width:2,height:100,format:"auto",displayValue:!0,fontOptions:"",font:"monospace",text:void 0,textAlign:"center",textPosition:"bottom",textMargin:2,fontSize:20,background:"#ffffff",lineCo` &&
+`lor:"#000000",margin:10,marginTop:void 0,marginBottom:void 0,marginLeft:void 0,marginRight:void 0,valid:function(){}};e.default=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getTotalWidthOfEncodings=e.calculateE` &&
+`ncodingAttributes=e.getBarcodePadding=e.getEncodingHeight=e.getMaximumHeightOfEncodings=void 0;var r,o=n(2),i=(r=o)&&r.__esModule?r:{default:r};function a(t,e){return e.height+(e.displayValue&&t.text.length>0?e.fontSize+e.textMargin:0)+e.marginTop+` &&
+`e.marginBottom}function u(t,e,n){if(n.displayValue&&e<t){if("center"==n.textAlign)return Math.floor((t-e)/2);if("left"==n.textAlign)return 0;if("right"==n.textAlign)return Math.floor(t-e)}return 0}function s(t,e,n){var r;if(n)r=n;else{if("undefined` &&
+`"==typeof document)return 0;r=document.createElement("canvas").getContext("2d")}r.font=e.fontOptions+" "+e.fontSize+"px "+e.font;var o=r.measureText(t);return o?o.width:0}e.getMaximumHeightOfEncodings=function(t){for(var e=0,n=0;n<t.length;n++)t[n]` &&
+`.height>e&&(e=t[n].height);return e},e.getEncodingHeight=a,e.getBarcodePadding=u,e.calculateEncodingAttributes=function(t,e,n){for(var r=0;r<t.length;r++){var o,f=t[r],c=(0,i.default)(e,f.options);o=c.displayValue?s(f.text,c,n):0;var l=f.data.lengt` &&
+`h*c.width;f.width=Math.ceil(Math.max(o,l)),f.height=a(f,c),f.barcodePadding=u(o,l,c)}},e.getTotalWidthOfEncodings=function(t){for(var e=0,n=0;n<t.length;n++)e+=t[n].width;return e}},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))` &&
+`throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function` &&
+`"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Obj` &&
+`ect.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=function(t){function e(t,n){r(this,e);var i=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return i.name="InvalidInputException",i.symbology=t` &&
+`,i.input=n,i.message='"'+i.input+'" is not a valid input for '+i.symbology,i}return i(e,Error),e}(),u=function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.name="InvalidElementException",t.mess` &&
+`age="Not supported type to render on",t}return i(e,Error),e}(),s=function(t){function e(){r(this,e);var t=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.name="NoElementException",t.message="No element to render on.",t}return i(` &&
+`e,Error),e}();e.InvalidInputException=a,e.InvalidElementException=u,e.NoElementException=s},function(t,e,n){"use strict";var r=d(n(8)),o=d(n(2)),i=d(n(16)),a=d(n(17)),u=d(n(18)),s=d(n(3)),f=d(n(24)),c=n(6),l=d(n(4));function d(t){return t&&t.__esMo` &&
+`dule?t:{default:t}}var p=function(){},h=function(t,e,n){var r=new p;if(void 0===t)throw Error("No element to render on was provided.");return r._renderProperties=(0,u.default)(t),r._encodings=[],r._options=l.default,r._errorHandler=new f.default(r)` &&
+`,void 0!==e&&((n=n||{}).format||(n.format=b()),r.options(n)[n.format](e,n).render()),r};for(var v in h.getModule=function(t){return r.default[t]},r.default)r.default.hasOwnProperty(v)&&g(r.default,v);function g(t,e){p.prototype[e]=p.prototype[e.toU` &&
+`pperCase()]=p.prototype[e.toLowerCase()]=function(n,r){var i=this;return i._errorHandler.wrapBarcodeCall((function(){r.text=void 0===r.text?void 0:""+r.text;var a=(0,o.default)(i._options,r);a=(0,s.default)(a);var u=t[e],f=y(n,u,a);return i._encodi` &&
+`ngs.push(f),i}))}}function y(t,e,n){var r=new e(t=""+t,n);if(!r.valid())throw new c.InvalidInputException(r.constructor.name,t);var a=r.encode();a=(0,i.default)(a);for(var u=0;u<a.length;u++)a[u].options=(0,o.default)(n,a[u].options);return a}funct` &&
+`ion b(){return r.default.CODE128?"CODE128":Object.keys(r.default)[0]}function _(t,e,n){e=(0,i.default)(e);for(var r=0;r<e.length;r++)e[r].options=(0,o.default)(n,e[r].options),(0,a.default)(e[r].options);(0,a.default)(n),new(0,t.renderer)(t.element` &&
+`,e,n).render(),t.afterRender&&t.afterRender()}p.prototype.options=function(t){return this._options=(0,o.default)(this._options,t),this},p.prototype.blank=function(t){var e=new Array(t+1).join("0");return this._encodings.push({data:e}),this},p.proto` &&
+`type.init=function(){var t;if(this._renderProperties)for(var e in Array.isArray(this._renderProperties)||(this._renderProperties=[this._renderProperties]),this._renderProperties){t=this._renderProperties[e];var n=(0,o.default)(this._options,t.optio` &&
+`ns);"auto"==n.format&&(n.format=b()),this._errorHandler.wrapBarcodeCall((function(){var e=y(n.value,r.default[n.format.toUpperCase()],n);_(t,e,n)}))}},p.prototype.render=function(){if(!this._renderProperties)throw new c.NoElementException;if(Array.` &&
+`isArray(this._renderProperties))for(var t=0;t<this._renderProperties.length;t++)_(this._renderProperties[t],this._encodings,this._options);else _(this._renderProperties,this._encodings,this._options);return this},p.prototype._defaults=l.default,"un` &&
+`defined"!=typeof window&&(window.JsBarcode=h),"undefined"!=typeof jQuery&&(jQuery.fn.JsBarcode=function(t,e){var n=[];return jQuery(this).each((function(){n.push(this)})),h(n,t,e)}),t.exports=h},function(t,e,n){"use strict";Object.defineProperty(e,` &&
+`"__esModule",{value:!0});var r=n(9);e.default={CODE128:r.CODE128,CODE128A:r.CODE128A,CODE128B:r.CODE128B,CODE128C:r.CODE128C}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CODE128C=e.CODE128B=e.CODE128A=e.CODE128=` &&
+`void 0;var r=u(n(10)),o=u(n(13)),i=u(n(14)),a=u(n(15));function u(t){return t&&t.__esModule?t:{default:t}}e.CODE128=r.default,e.CODE128A=o.default,e.CODE128B=i.default,e.CODE128C=a.default},function(t,e,n){"use strict";Object.defineProperty(e,"__es` &&
+`Module",{value:!0});var r=i(n(1)),o=i(n(12));function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=ty` &&
+`peof e?t:e}var u=function(t){function e(t,n){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),/^[\x00-\x7F\xC8-\xD3]+$/.test(t))var r=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,(0` &&
+`,o.default)(t),n));else r=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));return a(r)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.p` &&
+`rototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e}(r.default);e.default=u},function(t,e,n){"use strict";Object.define` &&
+`Property(e,"__esModule",{value:!0});e.default=function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.data=e,this.text=n.text||e,this.options=n}},function(t,e,n){"use strict";Object` &&
+`.defineProperty(e,"__esModule",{value:!0});var r=n(0),o=function(t){return t.match(new RegExp("^"+r.A_CHARS+"*"))[0].length},i=function(t){return t.match(new RegExp("^"+r.B_CHARS+"*"))[0].length},a=function(t){return t.match(new RegExp("^"+r.C_CHAR` &&
+`S+"*"))[0]};function u(t,e){var n=e?r.A_CHARS:r.B_CHARS,o=t.match(new RegExp("^("+n+"+?)(([0-9]{2}){2,})([^0-9]|$)"));if(o)return o[1]+String.fromCharCode(204)+s(t.substring(o[1].length));var i=t.match(new RegExp("^"+n+"+"))[0];return i.length===t.` &&
+`length?t:i+String.fromCharCode(e?205:206)+u(t.substring(i.length),!e)}function s(t){var e=a(t),n=e.length;if(n===t.length)return t;t=t.substring(n);var r=o(t)>=i(t);return e+String.fromCharCode(r?206:205)+u(t,r)}e.default=function(t){var e=void 0;i` &&
+`f(a(t).length>=2)e=r.C_START_CHAR+s(t);else{var n=o(t)>i(t);e=(n?r.A_START_CHAR:r.B_START_CHAR)+u(t,n)}return e.replace(/[\xCD\xCE]([^])[\xCD\xCE]/,(function(t,e){return String.fromCharCode(203)+e}))}},function(t,e,n){"use strict";Object.defineProp` &&
+`erty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n` &&
+`&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(1),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)t` &&
+`hrow new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.A_START_CHAR+t,n))}return function(t,e){if("functi` &&
+`on"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?O` &&
+`bject.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid",value:function(){return new RegExp("^"+u.A_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var` &&
+` r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),` &&
+`i=n(1),a=(r=i)&&r.__esModule?r:{default:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn'` &&
+`t been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.B_START_CHAR+t,n))}return function(t,e){if("function"!=typeof e&&null!==e)throw new T` &&
+`ypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto` &&
+`__=e)}(e,t),o(e,[{key:"valid",value:function(){return new RegExp("^"+u.B_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for` &&
+`(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(1),a=(r=i)&&r.__esModule?r:{def` &&
+`ault:r},u=n(0);var s=function(t){function e(t,n){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't` &&
+` been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u.C_START_CHAR+t,n))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must eit` &&
+`her be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{key:"valid",value` &&
+`:function(){return new RegExp("^"+u.C_CHARS+"+$").test(this.data)}}]),e}(a.default);e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=[];return function t(n){if(Array.isArray(n))f` &&
+`or(var r=0;r<n.length;r++)t(n[r]);else n.text=n.text||"",n.data=n.data||"",e.push(n)}(t),e}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t.marginTop=t.marginTop||t.margin,t.marginBottom` &&
+`=t.marginBottom||t.margin,t.marginRight=t.marginRight||t.margin,t.marginLeft=t.marginLeft||t.margin,t}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?` &&
+`function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=u(n(19)),i=u(n(20)),a=n(6);function u(t){return t&&t.__esModule?t:{default:t}}function s(t){if("string"=` &&
+`=typeof t)return function(t){var e=document.querySelectorAll(t);if(0===e.length)return;for(var n=[],r=0;r<e.length;r++)n.push(s(e[r]));return n}(t);if(Array.isArray(t)){for(var e=[],n=0;n<t.length;n++)e.push(s(t[n]));return e}if("undefined"!=typeof` &&
+` HTMLCanvasElement&&t instanceof HTMLImageElement)return u=t,{element:f=document.createElement("canvas"),options:(0,o.default)(u),renderer:i.default.CanvasRenderer,afterRender:function(){u.setAttribute("src",f.toDataURL())}};if(t&&t.nodeName&&"svg"` &&
+`===t.nodeName.toLowerCase()||"undefined"!=typeof SVGElement&&t instanceof SVGElement)return{element:t,options:(0,o.default)(t),renderer:i.default.SVGRenderer};if("undefined"!=typeof HTMLCanvasElement&&t instanceof HTMLCanvasElement)return{element:t` &&
+`,options:(0,o.default)(t),renderer:i.default.CanvasRenderer};if(t&&t.getContext)return{element:t,renderer:i.default.CanvasRenderer};if(t&&"object"===(void 0===t?"undefined":r(t))&&!t.nodeName)return{element:t,renderer:i.default.ObjectRenderer};thro` &&
+`w new a.InvalidElementException;var u,f}e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(n(3)),o=i(n(4));function i(t){return t&&t.__esModule?t:{default:t}}e.default=function(t){var e={};for(var n i` &&
+`n o.default)o.default.hasOwnProperty(n)&&(t.hasAttribute("jsbarcode-"+n.toLowerCase())&&(e[n]=t.getAttribute("jsbarcode-"+n.toLowerCase())),t.hasAttribute("data-"+n.toLowerCase())&&(e[n]=t.getAttribute("data-"+n.toLowerCase())));return e.value=t.ge` &&
+`tAttribute("jsbarcode-value")||t.getAttribute("data-value"),e=(0,r.default)(e)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a(n(21)),o=a(n(22)),i=a(n(23));function a(t){return t&&t.__esModule?t:{default:t}}e` &&
+`.default={CanvasRenderer:r.default,SVGRenderer:o.default,ObjectRenderer:i.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable` &&
+`=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(2),a=(r=i)&&r.__esModule?r:{default:r},u=n(5);var s=function(){function t(e,n,r` &&
+`){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.canvas=e,this.encodings=n,this.options=r}return o(t,[{key:"render",value:function(){if(!this.canvas.getContext)throw new Error("The browser` &&
+` does not support canvas.");this.prepareCanvas();for(var t=0;t<this.encodings.length;t++){var e=(0,a.default)(this.options,this.encodings[t].options);this.drawCanvasBarcode(e,this.encodings[t]),this.drawCanvasText(e,this.encodings[t]),this.moveCanv` &&
+`asDrawing(this.encodings[t])}this.restoreCanvas()}},{key:"prepareCanvas",value:function(){var t=this.canvas.getContext("2d");t.save(),(0,u.calculateEncodingAttributes)(this.encodings,this.options,t);var e=(0,u.getTotalWidthOfEncodings)(this.encodin` &&
+`gs),n=(0,u.getMaximumHeightOfEncodings)(this.encodings);this.canvas.width=e+this.options.marginLeft+this.options.marginRight,this.canvas.height=n,t.clearRect(0,0,this.canvas.width,this.canvas.height),this.options.background&&(t.fillStyle=this.optio` &&
+`ns.background,t.fillRect(0,0,this.canvas.width,this.canvas.height)),t.translate(this.options.marginLeft,0)}},{key:"drawCanvasBarcode",value:function(t,e){var n,r=this.canvas.getContext("2d"),o=e.data;n="top"==t.textPosition?t.marginTop+t.fontSize+t` &&
+`.textMargin:t.marginTop,r.fillStyle=t.lineColor;for(var i=0;i<o.length;i++){var a=i*t.width+e.barcodePadding;"1"===o[i]?r.fillRect(a,n,t.width,t.height):o[i]&&r.fillRect(a,n,t.width,t.height*o[i])}}},{key:"drawCanvasText",value:function(t,e){var n,` &&
+`r,o=this.canvas.getContext("2d"),i=t.fontOptions+" "+t.fontSize+"px "+t.font;t.displayValue&&(r="top"==t.textPosition?t.marginTop+t.fontSize-t.textMargin:t.height+t.textMargin+t.marginTop+t.fontSize,o.font=i,"left"==t.textAlign||e.barcodePadding>0?` &&
+`(n=0,o.textAlign="left"):"right"==t.textAlign?(n=e.width-1,o.textAlign="right"):(n=e.width/2,o.textAlign="center"),o.fillText(e.text,n,r))}},{key:"moveCanvasDrawing",value:function(t){this.canvas.getContext("2d").translate(t.width,0)}},{key:"restor` &&
+`eCanvas",value:function(){this.canvas.getContext("2d").restore()}}]),t}();e.default=s},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumera` &&
+`ble=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(2),a=(r=i)&&r.__esModule?r:{default:r},u=n(5);var s="http://www.w3.org/2000/` &&
+`svg",f=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.svg=e,this.encodings=n,this.options=r,this.document=r.xmlDocument||document}return o(t,[{key:"render",val` &&
+`ue:function(){var t=this.options.marginLeft;this.prepareSVG();for(var e=0;e<this.encodings.length;e++){var n=this.encodings[e],r=(0,a.default)(this.options,n.options),o=this.createGroup(t,r.marginTop,this.svg);this.setGroupOptions(o,r),this.drawSvg` &&
+`Barcode(o,r,n),this.drawSVGText(o,r,n),t+=n.width}}},{key:"prepareSVG",value:function(){for(;this.svg.firstChild;)this.svg.removeChild(this.svg.firstChild);(0,u.calculateEncodingAttributes)(this.encodings,this.options);var t=(0,u.getTotalWidthOfEnc` &&
+`odings)(this.encodings),e=(0,u.getMaximumHeightOfEncodings)(this.encodings),n=t+this.options.marginLeft+this.options.marginRight;this.setSvgAttributes(n,e),this.options.background&&this.drawRect(0,0,n,e,this.svg).setAttribute("style","fill:"+this.o` &&
+`ptions.background+";")}},{key:"drawSvgBarcode",value:function(t,e,n){var r,o=n.data;r="top"==e.textPosition?e.fontSize+e.textMargin:0;for(var i=0,a=0,u=0;u<o.length;u++)a=u*e.width+n.barcodePadding,"1"===o[u]?i++:i>0&&(this.drawRect(a-e.width*i,r,e` &&
+`.width*i,e.height,t),i=0);i>0&&this.drawRect(a-e.width*(i-1),r,e.width*i,e.height,t)}},{key:"drawSVGText",value:function(t,e,n){var r,o,i=this.document.createElementNS(s,"text");e.displayValue&&(i.setAttribute("style","font:"+e.fontOptions+" "+e.fo` &&
+`ntSize+"px "+e.font),o="top"==e.textPosition?e.fontSize-e.textMargin:e.height+e.textMargin+e.fontSize,"left"==e.textAlign||n.barcodePadding>0?(r=0,i.setAttribute("text-anchor","start")):"right"==e.textAlign?(r=n.width-1,i.setAttribute("text-anchor"` &&
+`,"end")):(r=n.width/2,i.setAttribute("text-anchor","middle")),i.setAttribute("x",r),i.setAttribute("y",o),i.appendChild(this.document.createTextNode(n.text)),t.appendChild(i))}},{key:"setSvgAttributes",value:function(t,e){var n=this.svg;n.setAttrib` &&
+`ute("width",t+"px"),n.setAttribute("height",e+"px"),n.setAttribute("x","0px"),n.setAttribute("y","0px"),n.setAttribute("viewBox","0 0 "+t+" "+e),n.setAttribute("xmlns",s),n.setAttribute("version","1.1"),n.setAttribute("style","transform: translate(` &&
+`0,0)")}},{key:"createGroup",value:function(t,e,n){var r=this.document.createElementNS(s,"g");return r.setAttribute("transform","translate("+t+", "+e+")"),n.appendChild(r),r}},{key:"setGroupOptions",value:function(t,e){t.setAttribute("style","fill:"` &&
+`+e.lineColor+";")}},{key:"drawRect",value:function(t,e,n,r,o){var i=this.document.createElementNS(s,"rect");return i.setAttribute("x",t),i.setAttribute("y",e),i.setAttribute("width",n),i.setAttribute("height",r),o.appendChild(i),i}}]),t}();e.defaul` &&
+`t=f},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.definePro` &&
+`perty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();var o=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.object=e,this.encoding` &&
+`s=n,this.options=r}return r(t,[{key:"render",value:function(){this.object.encodings=this.encodings}}]),t}();e.default=o},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.` &&
+`length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();var o=function(){function t(e){!function(t,e){if` &&
+`(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.api=e}return r(t,[{key:"handleCatch",value:function(t){if("InvalidInputException"!==t.name)throw t;if(this.api._options.valid===this.api._defaults.valid)throw` &&
+` t.message;this.api._options.valid(!1),this.api.render=function(){}}},{key:"wrapBarcodeCall",value:function(t){try{var e=t.apply(void 0,arguments);return this.api._options.valid(!0),e}catch(t){return this.handleCatch(t),this.api}}}]),t}();e.default` &&
+`=o}]);`.
+
+  ENDMETHOD.
+
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_37.clas.xml b/src/00/z2ui5_cl_app_demo_37.clas.xml
new file mode 100644
index 00000000..f72ed163
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_37.clas.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_APP_DEMO_37</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>extension - custom control</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>
diff --git a/src/z2ui5_cl_http_handler.clas.abap b/src/z2ui5_cl_http_handler.clas.abap
index 9689b0a1..91c609a0 100644
--- a/src/z2ui5_cl_http_handler.clas.abap
+++ b/src/z2ui5_cl_http_handler.clas.abap
@@ -74,7 +74,6 @@ CLASS z2ui5_cl_http_handler IMPLEMENTATION.
       lt_config = VALUE #(
         (  name = `data-sap-ui-theme`         value = `sap_horizon` )
         (  name = `src`                       value = `https://sdk.openui5.org/resources/sap-ui-core.js` )
-        (  name = `data-sap-ui-theme`         value = `sap_horizon` )
         (  name = `data-sap-ui-libs`          value = `sap.m` )
         (  name = `data-sap-ui-bindingSyntax` value = `complex` )
         (  name = `data-sap-ui-frameOptions`  value = `trusted` )