[Vue] migrate remaining directives in CorePluginsAdmin (#18433)

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* several save button fixes + make replace approximation in createAngularJsAdapter better

* apply after manual click triggering in savebutton

* update screenshots

* post loadPage event after url changes so URL changes are propagated properly to widgets, take columns param into account when re-rendering a page

* Update ReportingMenu.vue

merge conflicts

* built vue files

* revert invalid UI file changes

* fix two regressions in period selector comparison launching/detection (#18497)

* forward compareSegments in when applying period selector change + check if comparing periods in period selector

* built vue files

* fix piwik-widget selector in dataTable.js

* remove space

* extra scope apply after hash change so angularjs notices, change css class to use kebab case, check for field using css class as well in Widget.vue

* rebuild vue

* built vue files

* try to fix random failure

* fix order of JS in karma tests

* remove empty props

* use promise chaining

* remove form.directive.js and fix typings for test

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>
Co-authored-by: Peter Zhang <peter@innocraft.com>
Co-authored-by: peterhashair <peterhashair@users.noreply.github.com>
Co-authored-by: sgiehl <stefan@matomo.org>

4 files changed, 71 insertions, 23 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index 8f03444ae4..97ab4d61c0 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -1714,7 +1714,9 @@ var AjaxHelper_AjaxHelper = /*#__PURE__*/function () {
 
       if (this.abortController) {
         this.abortController.signal.addEventListener('abort', function () {
-          return _this2.requestHandle.abort();
+          if (_this2.requestHandle) {
+            _this2.requestHandle.abort();
+          }
         });
       }
 
@@ -2760,13 +2762,15 @@ function createAngularJsAdapter(options) {
       noScope = options.noScope,
       _options$restrict = options.restrict,
       restrict = _options$restrict === void 0 ? 'A' : _options$restrict,
-      priority = options.priority;
+      priority = options.priority,
+      replace = options.replace;
   var currentTranscludeCounter = transcludeCounter;
 
   if (transclude) {
     transcludeCounter += 1;
   }
 
+  var vueToAngular = {};
   var angularJsScope = {};
   Object.entries(scope).forEach(function (_ref) {
     var _ref2 = createAngularJsAdapter_slicedToArray(_ref, 2),
@@ -2780,6 +2784,8 @@ function createAngularJsAdapter(options) {
     if (info.angularJsBind) {
       angularJsScope[scopeVarName] = info.angularJsBind;
     }
+
+    vueToAngular[info.vue] = scopeVarName;
   });
 
   function angularJsAdapter() {
@@ -2806,11 +2812,10 @@ function createAngularJsAdapter(options) {
             });
             Object.entries(scope).forEach(function (_ref3) {
               var _ref4 = createAngularJsAdapter_slicedToArray(_ref3, 2),
-                  key = _ref4[0],
                   info = _ref4[1];
 
-              if (info.angularJsBind === '&') {
-                var eventName = toKebabCase(key);
+              if (info.angularJsBind === '&' || info.angularJsBind === '&?') {
+                var eventName = toKebabCase(info.vue);
 
                 if (!events[eventName]) {
                   // pass through scope & w/o a custom event handler
@@ -2865,7 +2870,7 @@ function createAngularJsAdapter(options) {
               },
               methods: {
                 onEventHandler: function onEventHandler(name, $event) {
-                  var scopePropertyName = toAngularJsCamelCase(name);
+                  var scopePropertyName = toAngularJsCamelCase(vueToAngular[name] || name);
 
                   if (ngScope[scopePropertyName]) {
                     ngScope[scopePropertyName]($event);
@@ -2889,7 +2894,7 @@ function createAngularJsAdapter(options) {
                   scopeVarName = _ref8[0],
                   info = _ref8[1];
 
-              if (!info.angularJsBind || info.angularJsBind === '&') {
+              if (!info.angularJsBind || info.angularJsBind === '&' || info.angularJsBind === '&?') {
                 return;
               }
 
@@ -2914,6 +2919,21 @@ function createAngularJsAdapter(options) {
 
             if (postCreate) {
               postCreate.apply(void 0, [vm, ngScope, ngElement, ngAttrs, ngController].concat(injectedServices));
+            } // specifying replace: true on the directive does nothing w/ vue inside, so
+            // handle it here.
+
+
+            if (replace) {
+              // transfer attributes from angularjs element that are not in scope to
+              // mount point element
+              Array.from(ngElement[0].attributes).forEach(function (attr) {
+                if (scope[attr.nodeName]) {
+                  return;
+                }
+
+                mountPoint.firstElementChild.setAttribute(attr.nodeName, attr.nodeValue);
+              });
+              ngElement.replaceWith(window.$(mountPoint).children());
             }
 
             ngElement.on('$destroy', function () {
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
index b0c4ac27ff..cd968051b9 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
@@ -99,7 +99,7 @@ function Ve(){return S}function Te(e,t){t.$oldEmit=t.$emit,t.$emit=function(e){f
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */function ze(e,t){if("abort"!==t)if("undefined"!==typeof Piwik_Popover){var n=$("#loadingError");Piwik_Popover.isOpen()&&e&&500===e.status?e&&500===e.status&&$(document.body).html(piwikHelper.escape(e.responseText)):n.show()}else console.log("Request failed: ".concat(e.responseText))}je.updatePeriodParamsFromUrl=De.updatePeriodParamsFromUrl.bind(De),Ee.$inject=[],angular.module("piwikApp.service").service("piwikUrl",Ee),window.angular.module("piwikApp.service").service("piwik",Ve),Te.$inject=["piwik","$rootScope"],window.angular.module("piwikApp.service").run(Te),window.globalAjaxQueue=[],window.globalAjaxQueue.active=0,window.globalAjaxQueue.clean=function(){for(var e=this.length;e>=0;e-=1)this[e]&&4!==this[e].readyState||this.splice(e,1)},window.globalAjaxQueue.push=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return this.active+=n.length,this.clean(),(e=Array.prototype.push).call.apply(e,[this].concat(n))},window.globalAjaxQueue.abort=function(){this.forEach((function(e){return e&&e.abort&&e.abort()})),this.splice(0,this.length),this.active=0};var Ye=function(e){$e(n,e);var t=Re(n);function n(){return Le(this,n),t.apply(this,arguments)}return n}(_e(Error)),Qe=function(){function e(){Le(this,e),Me(this,"format","json"),Me(this,"timeout",null),Me(this,"callback",null),Me(this,"useRegularCallbackInCaseOfError",!1),Me(this,"errorCallback",void 0),Me(this,"withToken",!1),Me(this,"completeCallback",void 0),Me(this,"getParams",{}),Me(this,"getUrl","?"),Me(this,"postParams",{}),Me(this,"loadingElement",null),Me(this,"errorElement","#ajaxError"),Me(this,"headers",void 0),Me(this,"requestHandle",null),Me(this,"abortController",null),Me(this,"defaultParams",["idSite","period","date","segment"]),this.errorCallback=ze}return xe(e,[{key:"addParams",value:function(e,t){var n=this,r="string"===typeof e?window.broadcast.getValuesFromUrl(e):e,i=["compareSegments","comparePeriods","compareDates"];Object.keys(r).forEach((function(e){var o=r[e];(-1===i.indexOf(e)||o)&&("get"===t.toLowerCase()?n.getParams[e]=o:"post"===t.toLowerCase()&&(n.postParams[e]=o))}))}},{key:"withTokenInUrl",value:function(){this.withToken=!0}},{key:"setUrl",value:function(e){this.addParams(broadcast.getValuesFromUrl(e),"GET")}},{key:"setBulkRequests",value:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=t.map((function(e){return"string"===typeof e?e:$.param(e)}));this.addParams({module:"API",method:"API.getBulkRequest",urls:r,format:"json"},"post")}},{key:"setTimeout",value:function(e){this.timeout=e}},{key:"setCallback",value:function(e){this.callback=e}},{key:"useCallbackInCaseOfError",value:function(){this.useRegularCallbackInCaseOfError=!0}},{key:"redirectOnSuccess",value:function(e){this.setCallback((function(){piwikHelper.redirect(e)}))}},{key:"setErrorCallback",value:function(e){this.errorCallback=e}},{key:"setCompleteCallback",value:function(e){this.completeCallback=e}},{key:"setFormat",value:function(e){this.format=e}},{key:"setLoadingElement",value:function(e){this.loadingElement=e||"#ajaxLoadingDiv"}},{key:"setErrorElement",value:function(e){e&&(this.errorElement=e)}},{key:"useGETDefaultParameter",value:function(e){if(e&&this.defaultParams)for(var t=0;t<this.defaultParams.length;t+=1)if(this.defaultParams[t]===e)return!0;return!1}},{key:"removeDefaultParameter",value:function(e){if(e&&this.defaultParams)for(var t=0;t<this.defaultParams.length;t+=1)this.defaultParams[t]===e&&this.defaultParams.splice(t,1)}},{key:"send",value:function(){var e=this;$(this.errorElement).length&&$(this.errorElement).hide(),this.loadingElement&&$(this.loadingElement).fadeIn(),this.requestHandle=this.buildAjaxCall(),window.globalAjaxQueue.push(this.requestHandle);var t=null;try{t=S.helper.getAngularDependency("$timeout")}catch(r){}this.abortController&&this.abortController.signal.addEventListener("abort",(function(){return e.requestHandle.abort()}));var n=new Promise((function(n,r){e.requestHandle.then((function(e){n(e)})).fail((function(t){"abort"!==t.statusText&&(console.log("Warning: the ".concat($.param(e.getParams)," request failed!")),r(t))})).done((function(){t&&t()}))}));return n}},{key:"abort",value:function(){this.requestHandle&&"function"===typeof this.requestHandle.abort&&(this.requestHandle.abort(),this.requestHandle=null)}},{key:"buildAjaxCall",value:function(){var e=this,t=this,n=this.mixinDefaultGetParams(this.getParams),r=this.getUrl;"?"!==r[r.length-1]&&(r+="&"),n.segment&&(r="".concat(r,"segment=").concat(n.segment,"&"),delete n.segment),n.date&&(r="".concat(r,"date=").concat(decodeURIComponent(n.date.toString()),"&"),delete n.date),r+=$.param(n);var i={type:"POST",async:!0,url:r,dataType:this.format||"json",complete:this.completeCallback,headers:this.headers?this.headers:void 0,error:function(){if(window.globalAjaxQueue.active-=1,t.errorCallback){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.errorCallback.apply(this,n)}},success:function(t,n,r){if(e.loadingElement&&$(e.loadingElement).hide(),t&&"error"===t.result&&!e.useRegularCallbackInCaseOfError){var i=null,o="toast";$(e.errorElement).length&&t.message&&($(e.errorElement).show(),i=e.errorElement,o=null);var a=!document.querySelector("#login_form");if(t.message&&a){var c=window["require"]("piwik/UI"),l=new c.Notification;l.show(t.message,{placeat:i,context:"error",type:o,id:"ajaxHelper"}),l.scrollToNotification()}}else e.callback&&e.callback(t,n,r);window.globalAjaxQueue.active-=1,S.ajaxRequestFinished&&S.ajaxRequestFinished()},data:this.mixinDefaultPostParams(this.postParams),timeout:null!==this.timeout?this.timeout:void 0};return $.ajax(i)}},{key:"isRequestToApiMethod",value:function(){return this.getParams&&"API"===this.getParams.module&&this.getParams.method||this.postParams&&"API"===this.postParams.module&&this.postParams.method}},{key:"isWidgetizedRequest",value:function(){return"Widgetize"===broadcast.getValueFromUrl("module")}},{key:"getDefaultPostParams",value:function(){return this.withToken||this.isRequestToApiMethod()||S.shouldPropagateTokenAuth?{token_auth:S.token_auth,force_api_session:broadcast.isWidgetizeRequestWithoutSession()?0:1}:{}}},{key:"mixinDefaultPostParams",value:function(e){var t=this.getDefaultPostParams(),n=Be(Be({},t),e);return n}},{key:"mixinDefaultGetParams",value:function(e){var t=this,n=Pe.getSearchParam("segment"),r={idSite:S.idSite?S.idSite.toString():broadcast.getValueFromUrl("idSite"),period:S.period||broadcast.getValueFromUrl("period"),segment:n},i=e;return i.token_auth&&(i.token_auth=null,delete i.token_auth),Object.keys(r).forEach((function(e){t.useGETDefaultParameter(e)&&!i[e]&&!t.postParams[e]&&r[e]&&(i[e]=r[e])})),!this.useGETDefaultParameter("date")||i.date||this.postParams.date||(i.date=S.currentDateString),i}}],[{key:"fetch",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=new e;return n.withTokenInUrl&&r.withTokenInUrl(),r.setFormat(n.format||"json"),r.addParams(Be({module:"API",format:n.format||"json"},t),"get"),n.postParams&&r.addParams(n.postParams,"post"),n.headers&&(r.headers=n.headers),"undefined"===typeof n.createErrorNotification||n.createErrorNotification||r.useCallbackInCaseOfError(),n.abortController&&(r.abortController=n.abortController),r.send().then((function(e){if("error"===e.result)throw new Ye(e.message);return e}))}},{key:"post",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return this.fetch(e,Be(Be({},n),{},{postParams:t}))}}]),e}();function Ke(){return globalAjaxQueue}window.ajaxHelper=Qe,angular.module("piwikApp.service").service("globalAjaxQueue",Ke);
+ */function ze(e,t){if("abort"!==t)if("undefined"!==typeof Piwik_Popover){var n=$("#loadingError");Piwik_Popover.isOpen()&&e&&500===e.status?e&&500===e.status&&$(document.body).html(piwikHelper.escape(e.responseText)):n.show()}else console.log("Request failed: ".concat(e.responseText))}je.updatePeriodParamsFromUrl=De.updatePeriodParamsFromUrl.bind(De),Ee.$inject=[],angular.module("piwikApp.service").service("piwikUrl",Ee),window.angular.module("piwikApp.service").service("piwik",Ve),Te.$inject=["piwik","$rootScope"],window.angular.module("piwikApp.service").run(Te),window.globalAjaxQueue=[],window.globalAjaxQueue.active=0,window.globalAjaxQueue.clean=function(){for(var e=this.length;e>=0;e-=1)this[e]&&4!==this[e].readyState||this.splice(e,1)},window.globalAjaxQueue.push=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return this.active+=n.length,this.clean(),(e=Array.prototype.push).call.apply(e,[this].concat(n))},window.globalAjaxQueue.abort=function(){this.forEach((function(e){return e&&e.abort&&e.abort()})),this.splice(0,this.length),this.active=0};var Ye=function(e){$e(n,e);var t=Re(n);function n(){return Le(this,n),t.apply(this,arguments)}return n}(_e(Error)),Qe=function(){function e(){Le(this,e),Me(this,"format","json"),Me(this,"timeout",null),Me(this,"callback",null),Me(this,"useRegularCallbackInCaseOfError",!1),Me(this,"errorCallback",void 0),Me(this,"withToken",!1),Me(this,"completeCallback",void 0),Me(this,"getParams",{}),Me(this,"getUrl","?"),Me(this,"postParams",{}),Me(this,"loadingElement",null),Me(this,"errorElement","#ajaxError"),Me(this,"headers",void 0),Me(this,"requestHandle",null),Me(this,"abortController",null),Me(this,"defaultParams",["idSite","period","date","segment"]),this.errorCallback=ze}return xe(e,[{key:"addParams",value:function(e,t){var n=this,r="string"===typeof e?window.broadcast.getValuesFromUrl(e):e,i=["compareSegments","comparePeriods","compareDates"];Object.keys(r).forEach((function(e){var o=r[e];(-1===i.indexOf(e)||o)&&("get"===t.toLowerCase()?n.getParams[e]=o:"post"===t.toLowerCase()&&(n.postParams[e]=o))}))}},{key:"withTokenInUrl",value:function(){this.withToken=!0}},{key:"setUrl",value:function(e){this.addParams(broadcast.getValuesFromUrl(e),"GET")}},{key:"setBulkRequests",value:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=t.map((function(e){return"string"===typeof e?e:$.param(e)}));this.addParams({module:"API",method:"API.getBulkRequest",urls:r,format:"json"},"post")}},{key:"setTimeout",value:function(e){this.timeout=e}},{key:"setCallback",value:function(e){this.callback=e}},{key:"useCallbackInCaseOfError",value:function(){this.useRegularCallbackInCaseOfError=!0}},{key:"redirectOnSuccess",value:function(e){this.setCallback((function(){piwikHelper.redirect(e)}))}},{key:"setErrorCallback",value:function(e){this.errorCallback=e}},{key:"setCompleteCallback",value:function(e){this.completeCallback=e}},{key:"setFormat",value:function(e){this.format=e}},{key:"setLoadingElement",value:function(e){this.loadingElement=e||"#ajaxLoadingDiv"}},{key:"setErrorElement",value:function(e){e&&(this.errorElement=e)}},{key:"useGETDefaultParameter",value:function(e){if(e&&this.defaultParams)for(var t=0;t<this.defaultParams.length;t+=1)if(this.defaultParams[t]===e)return!0;return!1}},{key:"removeDefaultParameter",value:function(e){if(e&&this.defaultParams)for(var t=0;t<this.defaultParams.length;t+=1)this.defaultParams[t]===e&&this.defaultParams.splice(t,1)}},{key:"send",value:function(){var e=this;$(this.errorElement).length&&$(this.errorElement).hide(),this.loadingElement&&$(this.loadingElement).fadeIn(),this.requestHandle=this.buildAjaxCall(),window.globalAjaxQueue.push(this.requestHandle);var t=null;try{t=S.helper.getAngularDependency("$timeout")}catch(r){}this.abortController&&this.abortController.signal.addEventListener("abort",(function(){e.requestHandle&&e.requestHandle.abort()}));var n=new Promise((function(n,r){e.requestHandle.then((function(e){n(e)})).fail((function(t){"abort"!==t.statusText&&(console.log("Warning: the ".concat($.param(e.getParams)," request failed!")),r(t))})).done((function(){t&&t()}))}));return n}},{key:"abort",value:function(){this.requestHandle&&"function"===typeof this.requestHandle.abort&&(this.requestHandle.abort(),this.requestHandle=null)}},{key:"buildAjaxCall",value:function(){var e=this,t=this,n=this.mixinDefaultGetParams(this.getParams),r=this.getUrl;"?"!==r[r.length-1]&&(r+="&"),n.segment&&(r="".concat(r,"segment=").concat(n.segment,"&"),delete n.segment),n.date&&(r="".concat(r,"date=").concat(decodeURIComponent(n.date.toString()),"&"),delete n.date),r+=$.param(n);var i={type:"POST",async:!0,url:r,dataType:this.format||"json",complete:this.completeCallback,headers:this.headers?this.headers:void 0,error:function(){if(window.globalAjaxQueue.active-=1,t.errorCallback){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.errorCallback.apply(this,n)}},success:function(t,n,r){if(e.loadingElement&&$(e.loadingElement).hide(),t&&"error"===t.result&&!e.useRegularCallbackInCaseOfError){var i=null,o="toast";$(e.errorElement).length&&t.message&&($(e.errorElement).show(),i=e.errorElement,o=null);var a=!document.querySelector("#login_form");if(t.message&&a){var c=window["require"]("piwik/UI"),l=new c.Notification;l.show(t.message,{placeat:i,context:"error",type:o,id:"ajaxHelper"}),l.scrollToNotification()}}else e.callback&&e.callback(t,n,r);window.globalAjaxQueue.active-=1,S.ajaxRequestFinished&&S.ajaxRequestFinished()},data:this.mixinDefaultPostParams(this.postParams),timeout:null!==this.timeout?this.timeout:void 0};return $.ajax(i)}},{key:"isRequestToApiMethod",value:function(){return this.getParams&&"API"===this.getParams.module&&this.getParams.method||this.postParams&&"API"===this.postParams.module&&this.postParams.method}},{key:"isWidgetizedRequest",value:function(){return"Widgetize"===broadcast.getValueFromUrl("module")}},{key:"getDefaultPostParams",value:function(){return this.withToken||this.isRequestToApiMethod()||S.shouldPropagateTokenAuth?{token_auth:S.token_auth,force_api_session:broadcast.isWidgetizeRequestWithoutSession()?0:1}:{}}},{key:"mixinDefaultPostParams",value:function(e){var t=this.getDefaultPostParams(),n=Be(Be({},t),e);return n}},{key:"mixinDefaultGetParams",value:function(e){var t=this,n=Pe.getSearchParam("segment"),r={idSite:S.idSite?S.idSite.toString():broadcast.getValueFromUrl("idSite"),period:S.period||broadcast.getValueFromUrl("period"),segment:n},i=e;return i.token_auth&&(i.token_auth=null,delete i.token_auth),Object.keys(r).forEach((function(e){t.useGETDefaultParameter(e)&&!i[e]&&!t.postParams[e]&&r[e]&&(i[e]=r[e])})),!this.useGETDefaultParameter("date")||i.date||this.postParams.date||(i.date=S.currentDateString),i}}],[{key:"fetch",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=new e;return n.withTokenInUrl&&r.withTokenInUrl(),r.setFormat(n.format||"json"),r.addParams(Be({module:"API",format:n.format||"json"},t),"get"),n.postParams&&r.addParams(n.postParams,"post"),n.headers&&(r.headers=n.headers),"undefined"===typeof n.createErrorNotification||n.createErrorNotification||r.useCallbackInCaseOfError(),n.abortController&&(r.abortController=n.abortController),r.send().then((function(e){if("error"===e.result)throw new Ye(e.message);return e}))}},{key:"post",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return this.fetch(e,Be(Be({},n),{},{postParams:t}))}}]),e}();function Ke(){return globalAjaxQueue}window.ajaxHelper=Qe,angular.module("piwikApp.service").service("globalAjaxQueue",Ke);
 /*!
  * Matomo - free/libre analytics platform
  *
@@ -192,7 +192,7 @@ function Vt(e){return{restrict:"A",priority:10,link:function(t,n,r){var i={insta
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */var Ft=0;function _t(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/[A-Z]/g,(function(e){return"-".concat(e.toLowerCase())}))}function Ut(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))}function Wt(e){return"object"===Ht(e)&&null!==e&&Object.getPrototypeOf(e)===Object.prototype?Object.fromEntries(Object.entries(e).filter((function(e){return!/^\$/.test(e[0])}))):e}function qt(e){var t=e.component,n=e.require,r=e.scope,i=void 0===r?{}:r,a=e.events,c=void 0===a?{}:a,l=e.$inject,s=e.directiveName,u=e.transclude,d=e.mountPointFactory,p=e.postCreate,f=e.noScope,m=e.restrict,h=void 0===m?"A":m,g=e.priority,b=Ft;u&&(Ft+=1);var v={};function y(){for(var e=arguments.length,r=new Array(e),a=0;a<e;a++)r[a]=arguments[a];var l={restrict:h,require:n,priority:g,scope:f?void 0:v,compile:function(){return{post:function(e,n,a,l){var s=u?n.find("[ng-transclude][counter=".concat(b,"]")):null,f="<root-component";Object.entries(c).forEach((function(e){var t=At(e,1),n=t[0];f+=" @".concat(_t(n),"=\"onEventHandler('").concat(n,"', $event)\"")})),Object.entries(i).forEach((function(e){var t=At(e,2),n=t[0],r=t[1];if("&"===r.angularJsBind){var i=_t(n);c[i]||(f+=" @".concat(i,"=\"onEventHandler('").concat(i,"', $event)\""))}else f+=" :".concat(_t(r.vue),'="').concat(r.vue,'"')})),f+=">",u&&(f+='<div ref="transcludeTarget"/>'),f+="</root-component>";var m=Object(o["createApp"])({template:f,data:function(){var t=this,o={};return Object.entries(i).forEach((function(i){var c=At(i,2),s=c[0],u=c[1],d=Wt(e[s]);"undefined"===typeof d&&"undefined"!==typeof u.default&&(d=u.default instanceof Function?u.default.apply(u,[e,n,a].concat(r)):u.default),u.transform&&(d=u.transform.apply(u,[d,t,e,n,a,l].concat(r))),o[u.vue]=d})),o},setup:function(){if(u){var e=Object(o["ref"])(null);return{transcludeTarget:e}}},methods:{onEventHandler:function(t,i){var o=Ut(t);e[o]&&e[o](i),c[t]&&c[t].apply(c,[i,this,e,n,a,l].concat(r))}}});m.config.globalProperties.$sanitize=window.vueSanitize,m.config.globalProperties.translate=C,m.component("root-component",t);var h=d?d.apply(void 0,[e,n,a].concat(r)):n[0],g=m.mount(h);Object.entries(i).forEach((function(t){var i=At(t,2),o=i[0],c=i[1];c.angularJsBind&&"&"!==c.angularJsBind&&e.$watch(o,(function(t){var i=Wt(t);"undefined"!==typeof c.default&&"undefined"===typeof t&&(i=c.default instanceof Function?c.default.apply(c,[e,n,a].concat(r)):c.default),c.transform&&(i=c.transform.apply(c,[i,g,e,n,a,l].concat(r))),g[c.vue]=i}))})),u&&$(g.transcludeTarget).append(s),p&&p.apply(void 0,[g,e,n,a,l].concat(r)),n.on("$destroy",(function(){m.unmount()}))}}}};return u&&(l.transclude=!0,l.template='<div ng-transclude counter="'.concat(b,'"/>')),l}return Object.entries(i).forEach((function(e){var t=At(e,2),n=t[0],r=t[1];r.vue||(r.vue=n),r.angularJsBind&&(v[n]=r.angularJsBind)})),y.$inject=l||[],angular.module("piwikApp").directive(s,y),y}function Jt(e){if("undefined"!==typeof e)return"true"===e||!!e&&e>0&&"0"!==e}function Gt(e){if("undefined"!==typeof e)return null===e?null:parseInt(e,10)}function zt(e){return"undefined"===typeof e?e:JSON.parse(JSON.stringify(e))}function Yt(e){var t=zt(e);return S.helper.getAngularDependency("$rootScope").$applyAsync(),t}
+ */var Ft=0;function _t(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/[A-Z]/g,(function(e){return"-".concat(e.toLowerCase())}))}function Ut(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))}function Wt(e){return"object"===Ht(e)&&null!==e&&Object.getPrototypeOf(e)===Object.prototype?Object.fromEntries(Object.entries(e).filter((function(e){return!/^\$/.test(e[0])}))):e}function qt(e){var t=e.component,n=e.require,r=e.scope,i=void 0===r?{}:r,a=e.events,c=void 0===a?{}:a,l=e.$inject,s=e.directiveName,u=e.transclude,d=e.mountPointFactory,p=e.postCreate,f=e.noScope,m=e.restrict,h=void 0===m?"A":m,g=e.priority,b=e.replace,v=Ft;u&&(Ft+=1);var y={},O={};function w(){for(var e=arguments.length,r=new Array(e),a=0;a<e;a++)r[a]=arguments[a];var l={restrict:h,require:n,priority:g,scope:f?void 0:O,compile:function(){return{post:function(e,n,a,l){var s=u?n.find("[ng-transclude][counter=".concat(v,"]")):null,f="<root-component";Object.entries(c).forEach((function(e){var t=At(e,1),n=t[0];f+=" @".concat(_t(n),"=\"onEventHandler('").concat(n,"', $event)\"")})),Object.entries(i).forEach((function(e){var t=At(e,2),n=t[1];if("&"===n.angularJsBind||"&?"===n.angularJsBind){var r=_t(n.vue);c[r]||(f+=" @".concat(r,"=\"onEventHandler('").concat(r,"', $event)\""))}else f+=" :".concat(_t(n.vue),'="').concat(n.vue,'"')})),f+=">",u&&(f+='<div ref="transcludeTarget"/>'),f+="</root-component>";var m=Object(o["createApp"])({template:f,data:function(){var t=this,o={};return Object.entries(i).forEach((function(i){var c=At(i,2),s=c[0],u=c[1],d=Wt(e[s]);"undefined"===typeof d&&"undefined"!==typeof u.default&&(d=u.default instanceof Function?u.default.apply(u,[e,n,a].concat(r)):u.default),u.transform&&(d=u.transform.apply(u,[d,t,e,n,a,l].concat(r))),o[u.vue]=d})),o},setup:function(){if(u){var e=Object(o["ref"])(null);return{transcludeTarget:e}}},methods:{onEventHandler:function(t,i){var o=Ut(y[t]||t);e[o]&&e[o](i),c[t]&&c[t].apply(c,[i,this,e,n,a,l].concat(r))}}});m.config.globalProperties.$sanitize=window.vueSanitize,m.config.globalProperties.translate=C,m.component("root-component",t);var h=d?d.apply(void 0,[e,n,a].concat(r)):n[0],g=m.mount(h);Object.entries(i).forEach((function(t){var i=At(t,2),o=i[0],c=i[1];c.angularJsBind&&"&"!==c.angularJsBind&&"&?"!==c.angularJsBind&&e.$watch(o,(function(t){var i=Wt(t);"undefined"!==typeof c.default&&"undefined"===typeof t&&(i=c.default instanceof Function?c.default.apply(c,[e,n,a].concat(r)):c.default),c.transform&&(i=c.transform.apply(c,[i,g,e,n,a,l].concat(r))),g[c.vue]=i}))})),u&&$(g.transcludeTarget).append(s),p&&p.apply(void 0,[g,e,n,a,l].concat(r)),b&&(Array.from(n[0].attributes).forEach((function(e){i[e.nodeName]||h.firstElementChild.setAttribute(e.nodeName,e.nodeValue)})),n.replaceWith(window.$(h).children())),n.on("$destroy",(function(){m.unmount()}))}}}};return u&&(l.transclude=!0,l.template='<div ng-transclude counter="'.concat(v,'"/>')),l}return Object.entries(i).forEach((function(e){var t=At(e,2),n=t[0],r=t[1];r.vue||(r.vue=n),r.angularJsBind&&(O[n]=r.angularJsBind),y[r.vue]=n})),w.$inject=l||[],angular.module("piwikApp").directive(s,w),w}function Jt(e){if("undefined"!==typeof e)return"true"===e||!!e&&e>0&&"0"!==e}function Gt(e){if("undefined"!==typeof e)return null===e?null:parseInt(e,10)}function zt(e){return"undefined"===typeof e?e:JSON.parse(JSON.stringify(e))}function Yt(e){var t=zt(e);return S.helper.getAngularDependency("$rootScope").$applyAsync(),t}
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
index 67c6d65fb9..b8be4c128b 100644
--- a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
+++ b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
@@ -21,6 +21,11 @@ interface AjaxOptions {
   abortController?: AbortController;
 }
 
+interface ErrorResponse {
+  result: string;
+  message: string;
+}
+
 window.globalAjaxQueue = [] as unknown as GlobalAjaxQueue;
 window.globalAjaxQueue.active = 0;
 
@@ -197,13 +202,13 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
       helper.abortController = options.abortController;
     }
 
-    return helper.send().then((data) => {
+    return helper.send().then((data: R | ErrorResponse) => {
       // check for error if not using default notification behavior
-      if (data.result === 'error') {
-        throw new ApiResponseError(data.message);
+      if ((data as ErrorResponse).result === 'error') {
+        throw new ApiResponseError((data as ErrorResponse).message);
       }
 
-      return data;
+      return data as R;
     });
   }
 
@@ -396,7 +401,7 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
   /**
    * Send the request
    */
-  send(): AbortablePromise<T> {
+  send(): Promise<T | ErrorResponse> {
     if ($(this.errorElement).length) {
       $(this.errorElement).hide();
     }
@@ -416,12 +421,16 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
     }
 
     if (this.abortController) {
-      this.abortController.signal.addEventListener('abort', () => this.requestHandle.abort());
+      this.abortController.signal.addEventListener('abort', () => {
+        if (this.requestHandle) {
+          this.requestHandle.abort();
+        }
+      });
     }
 
-    const result: AbortablePromise<T> = new Promise<T>((resolve, reject) => {
+    const result = new Promise<T | ErrorResponse>((resolve, reject) => {
       this.requestHandle!.then((data: unknown) => {
-        resolve(data as T); // ignoring textStatus/jqXHR
+        resolve(data as (T | ErrorResponse)); // ignoring textStatus/jqXHR
       }).fail((xhr: jqXHR) => {
         if (xhr.statusText !== 'abort') {
           console.log(`Warning: the ${$.param(this.getParams)} request failed!`);
@@ -433,7 +442,7 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
           $timeout(); // trigger digest
         }
       });
-    }) as AbortablePromise<T>;
+    });
 
     return result;
   }
diff --git a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
index 0fdedb37cf..f7d81b14b7 100644
--- a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
+++ b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
@@ -97,6 +97,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
   noScope?: boolean,
   restrict?: string,
   priority?: number,
+  replace?: boolean,
 }): ng.IDirectiveFactory {
   const {
     component,
@@ -111,6 +112,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
     noScope,
     restrict = 'A',
     priority,
+    replace,
   } = options;
 
   const currentTranscludeCounter = transcludeCounter;
@@ -118,6 +120,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
     transcludeCounter += 1;
   }
 
+  const vueToAngular = {};
   const angularJsScope = {};
   Object.entries(scope).forEach(([scopeVarName, info]) => {
     if (!info.vue) {
@@ -126,6 +129,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
     if (info.angularJsBind) {
       angularJsScope[scopeVarName] = info.angularJsBind;
     }
+    vueToAngular[info.vue] = scopeVarName;
   });
 
   function angularJsAdapter(...injectedServices: InjectTypes) {
@@ -152,9 +156,9 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
               const [eventName] = info;
               rootVueTemplate += ` @${toKebabCase(eventName)}="onEventHandler('${eventName}', $event)"`;
             });
-            Object.entries(scope).forEach(([key, info]) => {
-              if (info.angularJsBind === '&') {
-                const eventName = toKebabCase(key);
+            Object.entries(scope).forEach(([, info]) => {
+              if (info.angularJsBind === '&' || info.angularJsBind === '&?') {
+                const eventName = toKebabCase(info.vue);
                 if (!events[eventName]) { // pass through scope & w/o a custom event handler
                   rootVueTemplate += ` @${eventName}="onEventHandler('${eventName}', $event)"`;
                 }
@@ -207,7 +211,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
               },
               methods: {
                 onEventHandler(name: string, $event: any) { // eslint-disable-line
-                  const scopePropertyName = toAngularJsCamelCase(name);
+                  const scopePropertyName = toAngularJsCamelCase(vueToAngular[name] || name);
                   if (ngScope[scopePropertyName]) {
                     ngScope[scopePropertyName]($event);
                   }
@@ -238,7 +242,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
 
             // setup watches to bind between angularjs + vue
             Object.entries(scope).forEach(([scopeVarName, info]) => {
-              if (!info.angularJsBind || info.angularJsBind === '&') {
+              if (!info.angularJsBind || info.angularJsBind === '&' || info.angularJsBind === '&?') {
                 return;
               }
 
@@ -272,6 +276,21 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
               postCreate(vm, ngScope, ngElement, ngAttrs, ngController, ...injectedServices);
             }
 
+            // specifying replace: true on the directive does nothing w/ vue inside, so
+            // handle it here.
+            if (replace) {
+              // transfer attributes from angularjs element that are not in scope to
+              // mount point element
+              Array.from(ngElement[0].attributes).forEach((attr) => {
+                if (scope[attr.nodeName]) {
+                  return;
+                }
+                mountPoint.firstElementChild.setAttribute(attr.nodeName, attr.nodeValue);
+              });
+
+              ngElement.replaceWith(window.$(mountPoint).children());
+            }
+
             ngElement.on('$destroy', () => {
               app.unmount();
             });