rename font awesome + implement driver js (#607)

* rename font awesome + implement driver js

hi @oblomov-dev

1. renamed font awsome to font awesome
2. implemented driver js library (awsome feature! - check demo 119 - press TOUR )
3. added NEST_NAV_CONTAINER_TO & NEST2_NAV_CONTAINER_TO & DRIVE to event_frontend to the CASE in http_handler class.

* Update src/z2ui5_cl_fw_driver_js.clas.abap

Co-authored-by: abaplint[bot] <24845621+abaplint[bot]@users.noreply.github.com>

* Update src/z2ui5_cl_fw_driver_js.clas.abap

Co-authored-by: abaplint[bot] <24845621+abaplint[bot]@users.noreply.github.com>

* Delete src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap

* Delete src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml

* abaplint fixes

---------

Co-authored-by: abaplint[bot] <24845621+abaplint[bot]@users.noreply.github.com>
Co-authored-by: oblomov <102328295+oblomov-dev@users.noreply.github.com>

.abapgit.xml

@@ -14,6 +14,8 @@
     <item>/.gitlab-ci.yml</item>
     <item>/abaplint.json</item>
     <item>/azure-pipelines.yml</item>
+    <item>/src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap</item>
+    <item>/src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml</item>
    </IGNORE>
   </DATA>
  </asx:values>

src/01/z2ui5_cl_fw_cc_factory.clas.abap

@@ -17,17 +17,22 @@ CLASS z2ui5_cl_fw_cc_factory DEFINITION
       RETURNING
         VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_demo_output.
 
-    METHODS load_font_awsome
+    METHODS load_font_awesome
       RETURNING
-        VALUE(result) TYPE REF TO z2ui5_cl_fw_font_awsome_icons.
+        VALUE(result) TYPE REF TO z2ui5_cl_fw_font_awesome_icons.
 
     METHODS constructor
       IMPORTING
         i_view TYPE REF TO z2ui5_cl_xml_view.
+
     METHODS bwip_js
       RETURNING
         VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_bwipjs.
 
+    METHODS driver_js
+      RETURNING
+        VALUE(result) TYPE REF TO z2ui5_cl_fw_driver_js.
+
   PROTECTED SECTION.
     DATA mo_view TYPE REF TO z2ui5_cl_xml_view.
 
@@ -53,6 +58,13 @@ CLASS Z2UI5_CL_FW_CC_FACTORY IMPLEMENTATION.
   ENDMETHOD.
 
 
+  METHOD driver_js.
+
+    result = NEW #( mo_view ).
+
+  ENDMETHOD.
+
+
   METHOD gui_demo_output.
 
     result = NEW #( mo_view ).
@@ -60,7 +72,7 @@ CLASS Z2UI5_CL_FW_CC_FACTORY IMPLEMENTATION.
   ENDMETHOD.
 
 
-  METHOD load_font_awsome.
+  METHOD load_font_awesome.
 
     result = NEW #( mo_view ).
 

src/01/z2ui5_cl_fw_font_awesome_icons.clas.abap

@@ -1,4 +1,4 @@
-class Z2UI5_CL_FW_FONT_AWSOME_ICONS definition
+class Z2UI5_CL_FW_FONT_AWESOME_ICONS definition
   public
   final
   create public .
@@ -27,24 +27,24 @@ ENDCLASS.
 
 
 
-CLASS Z2UI5_CL_FW_FONT_AWSOME_ICONS IMPLEMENTATION.
+CLASS Z2UI5_CL_FW_FONT_AWESOME_ICONS IMPLEMENTATION.
 
 
-  METHOD constructor.
+  METHOD CONSTRUCTOR.
 
     me->mo_view = view.
 
   ENDMETHOD.
 
 
-  METHOD load_animation_js.
+  METHOD LOAD_ANIMATION_JS.
 
     result = mo_view->_cc_plain_xml( `<html:script src="` && faw_js_url && `" ></html:script>` ).
 
   ENDMETHOD.
 
 
-  METHOD load_icons.
+  METHOD LOAD_ICONS.
 
     DATA(js) = `debugger;` && |\n| &&
 *               `const metadataURI = "` && metadata_uri && `";` && |\n| &&

src/01/z2ui5_cl_fw_font_awesome_icons.clas.xml

@@ -3,7 +3,7 @@
  <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
   <asx:values>
    <VSEOCLASS>
-    <CLSNAME>Z2UI5_CL_FW_FONT_AWSOME_ICONS</CLSNAME>
+    <CLSNAME>Z2UI5_CL_FW_FONT_AWESOME_ICONS</CLSNAME>
     <LANGU>E</LANGU>
     <DESCRIPT>font awsome icons load</DESCRIPT>
     <STATE>1</STATE>

src/z2ui5_cl_fw_driver_js.clas.abap

@@ -0,0 +1,311 @@
+CLASS z2ui5_cl_fw_driver_js DEFINITION
+  PUBLIC
+  FINAL
+  CREATE PUBLIC .
+
+  PUBLIC SECTION.
+
+    TYPES:
+      BEGIN OF ty_config_steps_popover,
+        title          TYPE string,
+        description    TYPE string,
+        side           TYPE string,
+        align          TYPE string,
+        showbuttons    TYPE string,
+        disablebuttons TYPE string,
+        nextbtntext    TYPE string,
+        prevbtntext    TYPE string,
+        donebtntext    TYPE string,
+        showprogress   TYPE abap_bool,
+        progresstext   TYPE string,
+        popoverclass   TYPE string,
+      END OF ty_config_steps_popover .
+    TYPES:
+      BEGIN OF ty_config_steps,
+        element TYPE string,
+        popover TYPE ty_config_steps_popover,
+      END OF ty_config_steps .
+    TYPES:
+      BEGIN OF ty_config,
+        steps                    TYPE ty_config_steps,
+        animate                  TYPE abap_bool,
+        overlaycolor             TYPE string,
+        smoothscroll             TYPE abap_bool,
+        allowclose               TYPE abap_bool,
+        overlayopacity           TYPE i,
+        stagepadding             TYPE i,
+        stageradius              TYPE i,
+        allowkeyboardcontrol     TYPE abap_bool,
+        disableactiveinteraction TYPE abap_bool,
+        popoverclass             TYPE string,
+        popoveroffset            TYPE i,
+        showbuttons              TYPE string,
+        disablebuttons           TYPE string,
+        showprogress             TYPE abap_bool,
+        progresstext             TYPE string,
+        nextbtntext              TYPE string,
+        prevbtntext              TYPE string,
+        donebtntext              TYPE string,
+      END OF ty_config .
+
+
+    DATA mo_view TYPE REF TO z2ui5_cl_xml_view .
+
+    METHODS constructor
+      IMPORTING
+        !view TYPE REF TO z2ui5_cl_xml_view .
+
+    METHODS load_lib
+      IMPORTING
+        !js_url       TYPE clike OPTIONAL
+        !css_url      TYPE clike OPTIONAL
+        !local_css    TYPE abap_bool OPTIONAL
+        !local_js     TYPE abap_bool OPTIONAL
+      RETURNING
+        VALUE(result) TYPE REF TO z2ui5_cl_xml_view .
+
+    METHODS set_drive_config
+      IMPORTING
+        !config       TYPE ty_config
+      RETURNING
+        VALUE(result) TYPE REF TO z2ui5_cl_xml_view ##NEEDED.
+
+    CLASS-METHODS get_css_local
+      RETURNING
+        VALUE(result) TYPE string .
+
+    CLASS-METHODS get_js_local
+      RETURNING
+        VALUE(result) TYPE string .
+
+  PROTECTED SECTION.
+  PRIVATE SECTION.
+
+ENDCLASS.
+
+
+
+CLASS Z2UI5_CL_FW_DRIVER_JS IMPLEMENTATION.
+
+
+  METHOD constructor.
+
+    me->mo_view = view.
+
+  ENDMETHOD.
+
+
+  METHOD get_css_local.
+    result = `` && |\n|  &&
+`.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}` &&
+`@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}` &&
+`.driver-fade .driver-popover{animation:animate-fade-in .2s}` &&
+`.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}` &&
+`.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}` &&
+`.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}` &&
+`.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}` &&
+`.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}` &&
+`.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}` &&
+`.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;` &&
+`    cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}` &&
+`.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}` &&
+`.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,` &&
+`.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}` &&
+`.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}` &&
+`.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}` &&
+`.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}` &&
+`.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}` &&
+`.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}` &&
+`.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}` &&
+`.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}` &&
+`.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}` &&
+`.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}` &&
+`.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}` &&
+`.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}`.
+  ENDMETHOD.
+
+
+  METHOD get_js_local.
+    result = `debugger;` && |\n|  &&
+`this.driver=this.driver||{};this.driver.js=function(D){"use strict";let F={};function z(e={}){F={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,disableActiveInteraction:!1,showProgress:!1,stagePadding:10,stageRadius:5,` &&
+`popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function a(e){return e?F[e]:F}function W(e,o,t,i){return(e/=i/2)<1?t/2*e*e+o:-t/2*(--e*(e-2)-1)+o}` &&
+`function q(` &&
+`e){const o='a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not(` &&
+`[disabled])';return e.flatMap(t=>{const i=t.matches(o),p=Array.from(t.querySelectorAll(o));return[...i?[t]:[],...p]}).filter(t=>getComputedStyle(t).pointerEvents!=="none"&&ae(t))}function V(e){if(!e||se(e))return;` &&
+`const o=a(` &&
+`"smoothScroll");e.scrollIntoView({behavior:!o||re(e)?"auto":"smooth",inline:"center",block:"center"})}function re(e){if(!e||!e.parentElement)return;const o=e.parentElement;return ` &&
+`o.scrollHeight>o.clientHeight}function se(e){const o=e.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&o.right<=(` &&
+`window.innerWidth||document.documentElement.clientWidth)}function ae(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}let N={};function b(e,o){N[e]=o}function l(e){return e?N[e]:N}function K(){N={}}let E={};function O(e,o)` &&
+`{E[e]=o}function _(e){var o;(o=E[e])==null||o.call(E)}function ce(){E={}}function le(e,o,t,i){let p=l("__activeStagePosition");const n=p||t.getBoundingClientRect(),f=i.getBoundingClientRect(),w=W(e,n.x,f.x-n.x,o),r=W(e,n.y,f.y-n.y,o),v=W(e,` &&
+`n.width,f.width-n.width,o),s=W(e,n.height,f.height-n.height,o);p={x:w,y:r,width:v,height:s},Y(p),b("__activeStagePosition",p)}function X(e){if(!e)return;const o=e.getBoundingClientRect(),t={x:o.x,y:o.y,width:o.width,height:o.height};b(` &&
+`"__activeStagePosition",t),Y(t)}function de(){const e=l("__activeStagePosition"),o=l("__overlaySvg");if(!e)return;if(!o){console.warn("No stage svg found.");return}const t=window.innerWidth,` &&
+'i=window.innerHeight;o.setAttribute("viewBox",`0 0 ${t} ${i}`)}function pe(e){const o=ue(e);document.body.appendChild(o),G(o,t=>{t.target.tagName==="path"&&_("overlayClick")}),b("__overlaySvg",o)' &&
+`}function Y(e){const o=l("__overlaySvg");if(!o){pe(e);return}const t=o.firstElementChild;if((t==null?void 0:t.tagName)!=="path")throw new Error("no path element found in stage svg");t.setAttribute("d",j(e))` &&
+`}function ue(e){const o=window.innerWidth,t=window.innerHeight,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("driver-overlay","driver-overlay-animated"),i.setAttribute(` &&
+'"viewBox",`0 0 ${o} ${t}`),i.setAttribute("xmlSpace","preserve"),i.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),i.setAttribute("version","1.1"),i.setAttribute(' &&
+`"preserveAspectRatio","xMinYMin slice"),i.style.fillRule="evenodd",i.style.clipRule="evenodd",i.style.strokeLinejoin="round",i.style.strokeMiterlimit="2",i.style.zIndex="10000",` &&
+`i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%";const p=document.createElementNS("http://www.w3.org/2000/svg","path");return ` &&
+'p.setAttribute("d",j(e)),p.style.fill=a("overlayColor")||"rgb(0,0,0)",p.style.opacity=`${a("overlayOpacity")}`,p.style.pointerEvents="auto",p.style.cursor="auto",i.appendChild(p),i}' &&
+`function j(e)` &&
+'{const o=window.innerWidth,t=window.innerHeight,i=a("stagePadding")||0,p=a("stageRadius")||0,n=e.width+i*2,f=e.height+i*2,w=Math.min(p,n/2,f/2),r=Math.floor(Math.max(w,0)),v=e.x-i+r,s=e.y-i,c=n-r*2,d=f-r*2;return`M${o},0L0,0L0,' &&
+'${t}L${o},${t}L${o},0ZM${v},${s} h${c} a${r},${r} 0 0 1 ${r},${r} v${d} a${r},${r} 0 0 1 -${r},${r} h-${c} a${r},${r} 0 0 1 -${r},-${r} v-${d} a${r},${r} 0 0 1 ${r},-${r} z`}function ve(){const e=l("__overlaySvg");e&&e.remove()' &&
+`}function fe(){const e=document.getElementById("driver-dummy-element");if(e)return e;let o=document.createElement("div");return o.id="driver-dummy-element",o.style.width="0",o.style.height="0",` &&
+`o.style.pointerEvents="none",o.style.opacity="0",o.style.position="fixed",o.style.top="50%",o.style.left="50%",document.body.appendChild(o),o}function Q(e){const{element:o}=e;let t=typeof ` &&
+`o=="string"?document.querySelector(o):o;t||(t=fe()),ge(t,e)}function he(){const e=l("__activeElement"),o=l("__activeStep");e&&(X(e),de(),oe(e,o))}function ge(e,o){const i=Date.now(),p=l("__activeStep"),` &&
+`n=l(` &&
+`"__activeElement")||e,f=!n||n===e,w=e.id==="driver-dummy-element",r=n.id==="driver-dummy-element",v=a("animate"),s=o.onHighlightStarted||a("onHighlightStarted"),c=(o==null?void 0:o.onHighlighted)||a(` &&
+`"onHighlighted"),d=(p==null?void 0:p.onDeselected)||a("onDeselected"),m=a(),g=l();!f&&d&&d(r?void 0:n,p,{config:m,state:g}),s&&s(w?void 0:e,o,{config:m,state:g});const u=!f&&v;let h=!1;xe(),b(` &&
+`"previousStep",p),b("previousElement",n),b("activeStep",o),b("activeElement",e);const P=()=>{if(l("__transitionCallback")!==P)return;const x=Date.now()-i,` &&
+`y=400-x<=400/2;o.popover&&y&&!h&&u&&(J(e,o),h=!0),a("animate")&&x<400?le(x,400,n,e):(X(e),c&&c(w?void 0:e,o,{config:a(),state:l()}),b("__transitionCallback",void 0),b(` &&
+`"__previousStep",p),b("__previousElement",n),b("__activeStep",o),b("__activeElement",e)),window.requestAnimationFrame(P)};b("__transitionCallback",P),window.requestAnimationFrame(P),V(e),` &&
+`!u&&o.popover&&J(e,o),n.classList.remove("driver-active-element","driver-no-interaction"),n.removeAttribute("aria-haspopup"),n.removeAttribute("aria-expanded"),n.removeAttribute(` &&
+`"aria-controls"),a("disableActiveInteraction")&&e.classList.add("driver-no-interaction"),e.classList.add("driver-active-element"),e.setAttribute("aria-haspopup","dialog"),` &&
+`e.setAttribute(` &&
+`"aria-expanded","true"),e.setAttribute("aria-controls","driver-popover-content")}function we(){var e;(e=document.getElementById("driver-dummy-element"))==null||e.remove(),document.querySelectorAll(` &&
+`".driver-active-element").forEach(o=>{o.classList.remove("driver-active-element","driver-no-interaction"),o.removeAttribute("aria-haspopup"),o.removeAttribute("aria-expanded"),o.removeAttribute(` &&
+`"aria-controls")})}function A(){const e=l("__resizeTimeout");e&&window.cancelAnimationFrame(e),b("__resizeTimeout",window.requestAnimationFrame(he))}function me(e){var r;if(!l("isInitialized")||!(` &&
+`e.key==="Tab"||e.keyCode===9))return;const i=l("__activeElement"),p=(r=l("popover"))==null?void 0:r.wrapper,n=q([...p?[p]:[],...i?[i]:[]]),f=n[0],w=n[n.length-1];if(e.preventDefault(),e.shiftKey){const v=n[n.indexOf(` &&
+`document.activeElement)-1]||w;v==null||v.focus()}else{const v=n[n.indexOf(document.activeElement)+1]||f;v==null||v.focus()}}function Z(e){var t;((t=a("allowKeyboardControl"))==null||t)&&(e.key==="Escape"?_(` &&
+`"escapePress"):e.key==="ArrowRight"?_("arrowRightPress"):e.key==="ArrowLeft"&&_("arrowLeftPress"))}function G(e,o,t){const i=(n,f)=>{const w=n.target;e.contains(w)&&((!t||t(w))` &&
+`&&(n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()),f==null||f(n))};document.addEventListener("pointerdown",i,!0),document.addEventListener("mousedown",i,!0),document.addEventListener("` &&
+`pointerup",` &&
+`i,!0),document.addEventListener("mouseup",i,!0),document.addEventListener("click",n=>{i(n,o)},!0)}function ye(){window.addEventListener("keyup",Z,!1),window.addEventListener("keydown",me,!1),` &&
+`window.addEventListener("resize",A),window.addEventListener("scroll",A)}function be(){window.removeEventListener("keyup",Z),window.removeEventListener("resize",A),window.removeEventListener("scroll",` &&
+`A)` &&
+`}function xe(){const e=l("popover");e&&(e.wrapper.style.display="none")}function J(e,o){var C,y;let t=l("popover");t&&document.body.removeChild(t.wrapper),t=Pe(),document.body.appendChild(t.wrapper)` &&
+`;const{title:i,description:p,showButtons:n,disableButtons:f,showProgress:w,nextBtnText:r=a("nextBtnText")||"Next →",prevBtnText:v=a("prevBtnText")||"← Previous",progressText:s=a(` &&
+`"progressText")||"{current} of {total}"}=o.popover||{};t.nextButton.innerHTML=r,t.previousButton.innerHTML=v,t.progress.innerHTML=s,i?(t.title.innerHTML=i,t.title.style.display="block")` &&
+`:t.title.style.display="none",p?(t.description.innerHTML=p,t.description.style.display="block"):t.description.style.display="none";const c=n||a("showButtons"),` &&
+`d=w||a("showProgress")||!1,m=(c==null?void ` &&
+`0:c.includes("next"))||(c==null?void 0:c.includes("previous"))||d;t.closeButton.style.display=c.includes("close")?"block":"none",m?(t.footer.style.display="flex",` &&
+`t.progress.style.display=d?"block":"none",t.nextButton.style.display=c.includes("next")?"block":"none"` &&
+`,t.previousButton.style.display=c.includes("previous")?"block":"none")` &&
+`:t.footer.style.display="none";const g=f||a("disableButtons")||[];g!=null&&g.includes("next")&&(t.nextButton.disabled=!0,t.nextButton.classList.add("driver-popover-btn-disabled")),` &&
+`g!=null&&g.includes("previous")&&(t.previousButton.disabled=!0,t.previousButton.classList.add("driver-popover-btn-disabled")),g!=null&&g.includes("close")&&(t.closeButton.disabled=!0,` &&
+`t.closeButton.classList.add("driver-popover-btn-disabled"));const u=t.wrapper;u.style.display="block",u.style.left="",u.style.top="",u.style.bottom="",u.style.right="",` &&
+`u.id="driver-popover-content",u.setAttribute("role","dialog"),u.setAttribute("aria-labelledby","driver-popover-title"),u.setAttribute("aria-describedby"` &&
+`,"driver-popover-description")` &&
+';const h=t.arrow;h.className="driver-popover-arrow";const P=((C=o.popover)==null?void 0:C.popoverClass)||a("popoverClass")||"";u.className=`driver-popover ${P}`.trim(),G(t.wrapper,k=>{var M,R,I;const T=k.target,H=((' &&
+`M=o.popover)==null?void 0:M.onNextClick)||a("onNextClick"),$=((R=o.popover)==null?void 0:R.onPrevClick)||a("onPrevClick"),B=((I=o.popover)==null?void 0:I.onCloseClick)||a("onCloseClick");if(T.classList.contains(` &&
+`"driver-popover-next-btn"))return H?H(e,o,{config:a(),state:l()}):_("nextClick");if(T.classList.contains("driver-popover-prev-btn"))return $?$(e,o,{config:a(),state:l()}):_("prevClick");if(T.classList.contains(` &&
+`"driver-popover-close-btn"))return B?B(e,o,{config:a(),state:l()}):_("closeClick")},k=>!(t!=null&&t.description.contains(k))&&!(t!=null&&t.title.contains(k))&&typeof ` &&
+`k.className=="string"&&k.className.includes("driver-popover")),b("popover",t);const S=((y=o.popover)==null?void 0:y.onPopoverRender)||a("onPopoverRender");S&&` &&
+`S(t,{config:a(),state:l()}),oe(e,o),V(u)` &&
+`;const L=e.classList.contains("driver-dummy-element"),x=q([u,...L?[]:[e]]);x.length>0&&x[0].focus()}function U(){const e=l("popover");if(!(e!=null&&e.wrapper))return;const o=e.wrapper.getBoundingClientRect(),` &&
+`t=a(` &&
+`"stagePadding")||0,i=a("popoverOffset")||0;return{width:o.width+t+i,height:o.height+t+i,realWidth:o.width,realHeight:o.height}}function ee(e,o){const{elementDimensions:t,popoverDimensions:i,popoverPadding:p,` &&
+`popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.top-p,window.innerHeight-i.realHeight-n.width),n.width):e==="end"?Math.max(Math.min(t.top-(i==null?void 0:i.realHeight)+t.height+p,window.innerHeight-(i==null?void`
+&&
+`0:i.realHeight)-n.width),n.width):e==="center"?Math.max(Math.min(t.top+t.height/2-(i==null?void 0:i.realHeight)/2,window.innerHeight-(i==null?void 0:i.realHeight)-n.width),n.width):0}function te(e,o){const{elementDimensions:t,` &&
+`popoverDimensions:i,popoverPadding:p,popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.left-p,window.innerWidth-i.realWidth-n.width),n.width):e==="end"` &&
+`?Math.max(Math.min(t.left-(i==null?void 0:i.realWidth)+t.width+p,` &&
+`window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):e==="center"?Math.max(Math.min(t.left+t.width/2-(i==null?void 0:i.realWidth)/2,window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):0}function oe(e,o){const t=l(` &&
+`"popover");if(!t)return;const{align:i="start",side:p="left"}=(o==null?void 0:o.popover)||{},n=i,f=e.id==="driver-dummy-element"?"over":p,w=a("stagePadding")||0,r=U(),` &&
+`v=t.arrow.getBoundingClientRect(),s=e.getBoundingClientRect(),c=s.top-r.height;let d=c>=0;const m=window.innerHeight-(s.bottom+r.height);let g=m>=0;const u=s.left-r.width;let h=u>=0;const P=window.innerWidth-(s.right+r.width);let ` &&
+`S=P>=0;const L=!d&&!g&&!h&&!S;let x=f;if(f==="top"&&d?S=h=g=!1:f==="bottom"&&g?S=h=d=!1:f==="left"&&h?S=d=g=!1:f==="right"&&S&&(h=d=g=!1),` &&
+'f==="over"){const C=window.innerWidth/2-r.realWidth/2,y=window.innerHeight/2-r.realHeight/2;t.wrapper.style.left=`${C}px`,t.wrapper.style.right="auto",t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto"}else if(L)' &&
+'{const C=window.innerWidth/2-(r==null?void 0:r.realWidth)/2,y=10;t.wrapper.style.left=`${C}px`,t.wrapper.style.right="auto",t.wrapper.style.bottom=`${y}px`,t.wrapper.style.top="auto"' &&
+`}else if(h){const C=Math.min(u,window.innerWidth-(` &&
+'r==null?void 0:r.realWidth)-v.width),y=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${C}px`,t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto",' &&
+`t.wrapper.style.right="auto",x="left"}else if(S){const C=Math.min(P,window.innerWidth-(r==null?void 0:r.realWidth)-v.width),y=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v})` &&
+';t.wrapper.style.right=`${C}px`,t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto",t.wrapper.style.left="auto",x="right"}else if(d){const C=Math.min(c,window.innerHeight-r.realHeight-v.width);let y=te(n,' &&
+'{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.top=`${C}px`,t.wrapper.style.left=`${y}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",x="top"' &&
+`}else if(g)` &&
+'{const C=Math.min(m,window.innerHeight-(r==null?void 0:r.realHeight)-v.width);let y=te(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${y}px`,t.wrapper.style.bottom=`${C}px`,' &&
+`t.wrapper.style.top="auto",t.wrapper.style.right="auto",x="bottom"}L?t.arrow.classList.add("driver-popover-arrow-none"):Ce(n,x,e)}function Ce(e,o,t){const i=l("popover");if(!i)return;const ` &&
+`p=t.getBoundingClientRect(),n=U(),f=i.arrow,w=n.width,r=window.innerWidth,v=p.width,s=p.left,c=n.height,d=window.innerHeight,m=p.top,g=p.height;f.className="driver-popover-arrow";let u=o,h=e;o==="top"?(s+v<=0?(u="` &&
+`right",` &&
+`h="end"):s+v-w<=0&&(u="top",h="start"),s>=r?(u="left",h="end"):s+w>=r&&(u="top",h="end")):o==="bottom"?(s+v<=0?(u="right",` &&
+`h="start"):s+v-w<=0&&(u="bottom",h="start"),s>=r?(u="left",h="start"):s+w>=r&&(u="bottom",h="end")):o==="left"?(m+g<=0?(u="bottom",` &&
+`h="end"):m+g-c<=0&&(u="left",h="start"),m>=d?(u="top",h="end"):m+c>=d&&(u="left",h="end")):o==="right"&&(m+g<=0?(u="bottom",` &&
+'h="start"):m+g-c<=0&&(u="right",h="start"),m>=d?(u="top",h="start"):m+c>=d&&(u="right",h="end")),u?(f.classList.add(`driver-popover-arrow-side-${u}`),' &&
+'f.classList.add(`driver-popover-arrow-align-${h}`)):f.classList.add("driver-popover-arrow-none")}function Pe(){const e=document.createElement("div");e.classList.add("driver-popover");const o=document.createElement(' &&
+`"div");o.classList.add("driver-popover-arrow");const t=document.createElement("header");t.id="driver-popover-title",t.classList.add("driver-popover-title"),t.style.display="none",` &&
+`t.innerText="Popover Title";const i=document.createElement("div");i.id="driver-popover-description",i.classList.add("driver-popover-description"),i.style.display="none",i.innerText="Popover ` &&
+`description is here";const p=document.createElement("button");p.type="button",p.classList.add("driver-popover-close-btn"),p.setAttribute("aria-label","Close"),` &&
+`p.innerHTML="×";const n=document.createElement("footer");n.classList.add("driver-popover-footer");const f=document.createElement("span");f.classList.add("driver-popover-progress-text"),` &&
+`f.innerText="";const w=document.createElement("span");w.classList.add("driver-popover-navigation-btns");const r=document.createElement("button");r.type="button",r.classList.add(` &&
+`"driver-popover-prev-btn"),r.innerHTML="← Previous";const v=document.createElement("button");return v.type="button",v.classList.add("driver-popover-next-btn"),v.innerHTML="Next ` &&
+`→",w.appendChild(r),w.appendChild(v),n.appendChild(f),n.appendChild(w),e.appendChild(p),e.appendChild(o),e.appendChild(t),e.appendChild(i),e.appendChild(n),{wrapper:e,arrow:o,title:t,description:i,footer:n,previousButton:r,nextButton:v,` &&
+`closeButton:p,footerButtons:w,progress:f}}function Se(){var o;const e=l("popover");e&&((o=e.wrapper.parentElement)==null||o.removeChild(e.wrapper))}const Le="";function ke(e={}){z(e);function o(){a("allowClose")` &&
+`&&v()}function t(){const s=l("activeIndex"),c=a("steps")||[];if(typeof s=="undefined")return;const d=s+1;c[d]?r(d):v()}function i(){const s=l("activeIndex"),c=a("steps")||[];if(typeof ` &&
+`s=="undefined")return;const d=s-1;c[d]?r(d):v()}function p(s){(a("steps")||[])[s]?r(s):v()}function n(){var h;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("__activeStep"),m=l(` &&
+`"__activeElement");if(typeof c=="undefined"||typeof d=="undefined"||typeof l("activeIndex")=="undefined")return;const u=((h=d.popover)==null?void 0:h.onPrevClick)||a("onPrevClick");` &&
+`if(u)return ` &&
+`u(m,d,{config:a(),state:l()});i()}function f(){var u;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("__activeStep"),m=l("__activeElement");if(typeof c=="undefined"||typeof ` &&
+`d=="undefined")return;const g=((u=d.popover)==null?void 0:u.onNextClick)||a("onNextClick");if(g)return g(m,d,{config:a(),state:l()});t()}function w(){l("isInitialized")||(b("isInitialized",!0),` &&
+`document.body.classList.add("driver-active",a("animate")?"driver-fade":"driver-simple"),ye(),O("overlayClick",o),O("escapePress",o),O("arrowLeftPress",n),` &&
+`O("arrowRightPress",` &&
+`f))}function r(s=0){var H,$,B,M,R,I,ie,ne;const c=a("steps");if(!c){console.error("No steps to drive through"),v();return}if(!c[s]){v();return}b("__activeOnDestroyed",document.activeElement),b("activeIndex",s)` &&
+`;const d=c[s],m=c[s+1],g=c[s-1],u=((H=d.popover)==null?void 0:H.doneBtnText)||a("doneBtnText")||"Done",h=a("allowClose"),P=typeof(($=d.popover)==null?void 0:$.showProgress)!="undefined"` &&
+`?(B=d.popover)==null?void ` &&
+'0:B.showProgress:a("showProgress"),L=(((M=d.popover)==null?void 0:M.progressText)||a("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${s+1}`).replace("' &&
+'{{total}}",`${c.length}`),x=((' &&
+`R=d.popover)==null?void 0:R.showButtons)||a("showButtons"),C=["next","previous",...h?["close"]:[]].filter(_e=>!(x!=null&&x.length)||x.includes(_e)),y=((I=d.popover)==null?void 0:I.onNextClick)||a(` &&
+`"onNextClick"),k=((ie=d.popover)==null?void 0:ie.onPrevClick)||a("onPrevClick"),T=((ne=d.popover)==null?void 0:ne.onCloseClick)||a("onCloseClick");Q({...d,popover:{showButtons:C,nextBtnText:m?void 0:u,` &&
+`disableButtons:[...g?[]:["previous"]],showProgress:P,progressText:L,onNextClick:y||(()=>{m?r(s+1):v()}),onPrevClick:k||(()=>{r(s-1)}),onCloseClick:T||(()=>{v()}),...(d==null?void 0:d.popover)||{}}})}function v(s=!0){const c=l(` &&
+`"__activeElement"),d=l("__activeStep"),m=l("__activeOnDestroyed"),g=a("onDestroyStarted");if(s&&g){const P=!c||(c==null?void 0:c.id)==="driver-dummy-element";g(P?void 0:c,d,` &&
+`{config:a(),state:l()})` &&
+`;return}const u=(d==null?void 0:d.onDeselected)||a("onDeselected"),h=a("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),be(),Se(),we(),ve(),ce(),K(),` &&
+`c&&d){const P=c.id==="driver-dummy-element";u&&u(P?void 0:c,d,{config:a(),state:l()}),h&&h(P?void 0:c,d,{config:a(),state:l()})}m&&m.focus()}return{isActive:()=>l("isInitialized")||!1,refresh:A,` &&
+`drive:(s=0)=>{w(),r(s)},setConfig:z,setSteps:s=>{K(),z({...a(),steps:s})},getConfig:a,getState:l,getActiveIndex:()=>l("activeIndex"),isFirstStep:()=>l("activeIndex")===0,isLastStep:()=>{` &&
+`const s=a("steps")||[],` &&
+`c=l("activeIndex");return c!==void 0&&c===s.length-1},getActiveStep:()=>l("activeStep"),getActiveElement:()=>l("activeElement"),getPreviousElement:()=>l("previousElement"),` &&
+`getPreviousStep:()=>l(` &&
+`"previousStep"),moveNext:t,movePrevious:i,moveTo:p,hasNextStep:()=>{const s=a("steps")||[],c=l("activeIndex");return c!==void 0&&s[c+1]},hasPreviousStep:()=>{const s=a("steps")||[],c=l(` &&
+`"activeIndex");return c!==void 0&&s[c-1]},highlight:s=>{w(),Q({...s,popover:s.popover?{showButtons:[],showProgress:!1,progressText:"",...s.popover}:void 0})},destroy:()=>{v(!1)}}}return ` &&
+`D.driver=ke,Object.defineProperty(` &&
+`D,Symbol.toStringTag,{value:"Module"}),D}({});`.
+
+  ENDMETHOD.
+
+
+  METHOD load_lib.
+
+    DATA(js) = ``.
+    DATA(css) = ``.
+
+    IF css_url IS INITIAL.
+      IF local_css = abap_true.
+        css = css && `<html:style>` && get_css_local( ) && `</html:style>` && |\n|.
+      ENDIF.
+    ELSE.
+      css = css && `<html:style>` && css_url && `</html:style>` && |\n|.
+    ENDIF.
+
+    IF js_url IS INITIAL.
+      IF local_js = abap_true.
+        js = js && `<html:script>` && get_js_local( ) && `</html:script>` && |\n|.
+      ENDIF.
+    ELSE.
+      js = js && `<html:script src="` && js_url && `" ></html:script>` && |\n|.
+    ENDIF.
+
+    DATA(final) = js && |\n| && css ##NEEDED.
+
+    result = mo_view->_cc_plain_xml( js )->get_parent( )->_cc_plain_xml( css ).
+
+  ENDMETHOD.
+
+
+  METHOD set_drive_config.
+
+
+    DATA(drive_js) = `debugger; const driver = window.driver.js.driver;`.
+
+    drive_js = drive_js &&
+               `const driverObj = driver({` && |\n| &&
+*               `  showProgress: ` && z2ui5_cl_fw_utility=>boolean_abap_2_json( config-showprogress ) && `,` && |\n| &&
+               `  showProgress: true,` && |\n| &&
+               `  steps: [` && |\n| &&
+               `    { element: '#__xmlview5--choper725', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},` && |\n| &&
+               `    { element: '#__xmlview5--choper725-1', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},` && |\n| &&
+               `    { element: '#__xmlview5--choper725-2', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},` && |\n| &&
+               `  ]` && |\n| &&
+               `});`.
+
+    result = mo_view->_cc_plain_xml( `<html:script>` && drive_js && `</html:script>` ).
+*    result = drive_js.
+
+  ENDMETHOD.
+ENDCLASS.

src/z2ui5_cl_fw_driver_js.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_FW_DRIVER_JS</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>driverjs - product tours, highlights, contextual help &amp; more</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/z2ui5_cl_fw_http_handler.clas.abap

@@ -265,6 +265,21 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
                            `                        var navConTo = sap.z2ui5.oView.byId(args[2]);` && |\n| &&
                            `                        navCon.to(navConTo);` && |\n| &&
                            `                        break;` && |\n| &&
+                           `                    case 'NEST_NAV_CONTAINER_TO':` && |\n| &&
+                           `                        var navCon = sap.z2ui5.oViewNest.byId(args[1]);` && |\n| &&
+                           `                        var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| &&
+                           `                        navCon.to(navConTo);` && |\n| &&
+                           `                        break;` && |\n| &&
+                           `                    case 'NEST2_NAV_CONTAINER_TO':` && |\n| &&
+                           `                        var navCon = sap.z2ui5.oViewNest2.byId(args[1]);` && |\n| &&
+                           `                        var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| &&
+                           `                        navCon.to(navConTo);` && |\n| &&
+                           `                        break;` && |\n| &&
+                           `                    case 'DRIVE':` && |\n| &&
+                           `                        if( driverObj !== undefined ) {` && |\n| &&
+                           `                          driverObj.drive();` && |\n| &&
+                           `                        };` && |\n| &&
+                           `                        break;` && |\n| &&
                            `                }` && |\n| &&
                            `            },` && |\n| &&
                            |\n| &&