[Vue] migrate widgetize plugin to vue (#19029)

* migrate widget preview directive

* migrate export-widget controller to vue

* fix ui tests

* update expected screenshot

* remove unneeded deletes

14 files changed, 849 insertions, 176 deletions

diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts
index 2a454c6b78..6478aa398d 100644
--- a/plugins/CoreVue/types/index.d.ts
+++ b/plugins/CoreVue/types/index.d.ts
@@ -176,6 +176,7 @@ declare global {
   interface WidgetsHelper {
     availableWidgets?: unknown[];
     getAvailableWidgets(callback?: (widgets: Record<string, unknown[]>) => unknown);
+    getWidgetObjectFromUniqueId(id: string, callback: (widget: unknown) => void);
 
     firstGetAvailableWidgetsCall?: Promise<void>;
   }
diff --git a/plugins/Widgetize/Widgetize.php b/plugins/Widgetize/Widgetize.php
index 5bdb57df09..6cec8acb83 100644
--- a/plugins/Widgetize/Widgetize.php
+++ b/plugins/Widgetize/Widgetize.php
@@ -30,8 +30,6 @@ class Widgetize extends \Piwik\Plugin
         $jsFiles[] = "plugins/Morpheus/javascripts/piwikHelper.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/dataTable.js";
         $jsFiles[] = "plugins/Dashboard/javascripts/widgetMenu.js";
-        $jsFiles[] = "plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js";
-        $jsFiles[] = "plugins/Widgetize/angularjs/export-widget/export-widget.controller.js";
     }
 
     public function getStylesheetFiles(&$stylesheets)
diff --git a/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js b/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js
deleted file mode 100644
index 19faf5166b..0000000000
--- a/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').controller('ExportWidgetController', ExportWidgetController);
-
-    ExportWidgetController.$inject = ['piwik', '$window'];
-
-    function ExportWidgetController(piwik, $window) {
-
-        function getIframeCode(iframeUrl)
-        {
-            var url = iframeUrl.replace(/"/g, '&quot;');
-
-            return '<iframe src="' + url + '" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>';
-        }
-
-        // remember to keep controller very simple. Create a service/factory (model) if needed
-        var urlPath = $window.location.protocol + '//' + $window.location.hostname + ($window.location.port == '' ? '' : (':' + $window.location.port)) + $window.location.pathname;
-        this.dashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=Dashboard&actionToWidgetize=index&idSite=' + piwik.idSite + '&period=week&date=yesterday';
-        this.dashboardCode = getIframeCode(this.dashboardUrl);
-
-        this.allWebsitesDashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=MultiSites&actionToWidgetize=standalone&idSite=' + piwik.idSite + '&period=week&date=yesterday';
-        this.allWebsitesDashboardCode = getIframeCode(this.allWebsitesDashboardUrl);
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js b/plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js
deleted file mode 100644
index cb5599e51d..0000000000
--- a/plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Usage:
- * <div piwik-widget-preview>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikWidgetPreview', piwikWidgetPreview);
-
-    piwikWidgetPreview.$inject = ['piwik', '$window'];
-
-    function piwikWidgetPreview(piwik, $window){
-
-        function getEmbedUrl(parameters, exportFormat) {
-            var copyParameters = {};
-            for (var variableName in parameters) {
-                copyParameters[variableName] = parameters[variableName];
-            }
-            copyParameters['moduleToWidgetize'] = parameters['module'];
-            copyParameters['actionToWidgetize'] = parameters['action'];
-            delete copyParameters['action'];
-            delete copyParameters['module'];
-            var sourceUrl;
-            sourceUrl = $window.location.protocol + '//' + $window.location.hostname + ($window.location.port == '' ? '' : (':' + $window.location.port)) + $window.location.pathname + '?';
-            sourceUrl += "module=Widgetize" +
-                "&action=" + exportFormat +
-                "&" + piwik.helper.getQueryStringFromParameters(copyParameters) +
-                "&idSite=" + piwik.idSite +
-                "&period=" + piwik.period +
-                "&date=" + piwik.broadcast.getValueFromUrl('date') +
-                "&disableLink=1&widget=1";
-            return sourceUrl;
-        }
-
-        return {
-            restrict: 'A',
-            controller: function () {
-
-                var self = this;
-
-                this.getInputFormWithHtml = function (inputId, htmlEmbed) {
-                    return '<pre piwik-select-on-focus readonly="true"  id="' + inputId + '">' + this.htmlentities(htmlEmbed) + '</pre>';
-                };
-
-                this.htmlentities = function (s) {
-                    return piwik.helper.escape(piwik.helper.htmlEntities(s));
-                };
-
-                this.callbackAddExportButtonsUnderWidget = function (widgetUniqueId, loadedWidgetElement) {
-                    widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function(widget) {
-                        var widgetParameters = widget['parameters'];
-
-                        var exportButtonsElement = $('<span id="exportButtons">');
-
-                        var urlIframe = getEmbedUrl(widgetParameters, "iframe");
-                        // We first build the HTML code that will load the widget in an IFRAME
-                        var widgetIframeHtml = '<div id="widgetIframe">' +
-                            '<iframe width="100%" height="350" src="' + urlIframe + '" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0">' +
-                            '</iframe>' +
-                            '</div>';
-
-                        // Add the input field containing the widget in an Iframe
-                        $(exportButtonsElement).append(
-                            '<div id="embedThisWidgetIframe">' +
-                            '<label for="embedThisWidgetIframeInput">&rsaquo; Embed Iframe</label>' +
-                            '<div id="embedThisWidgetIframeInput">' +
-                            self.getInputFormWithHtml('iframeEmbed', widgetIframeHtml) +
-                            '</div>' +
-                            '</div>' +
-                            '<div> <label for="embedThisWidgetDirectLink">&rsaquo; Direct Link</label>' +
-                            '<div id="embedThisWidgetDirectLink"> ' + self.getInputFormWithHtml('directLinkEmbed', urlIframe) + ' - <a href="' + urlIframe + '" rel="noreferrer noopener" target="_blank">' + _pk_translate('Widgetize_OpenInNewWindow') + '</a></div>'
-                            + '</div>'
-                        );
-
-                        // Finally we append the content to the parent widget DIV
-                        $(loadedWidgetElement)
-                            .parent()
-                            .append(exportButtonsElement);
-
-                        piwik.helper.compileAngularComponents(exportButtonsElement);
-                    });
-                }
-            },
-            compile: function (element, attrs) {
-
-                return function (scope, element, attrs, controller) {
-                    element.widgetPreview({
-                        onPreviewLoaded: controller.callbackAddExportButtonsUnderWidget
-                    });
-                };
-            }
-        };
-    }
-})();
diff --git a/plugins/Widgetize/templates/index.twig b/plugins/Widgetize/templates/index.twig
index 2ab204877c..e6ff2bb844 100644
--- a/plugins/Widgetize/templates/index.twig
+++ b/plugins/Widgetize/templates/index.twig
@@ -11,50 +11,10 @@
 
 <div>
 
-<div class="widgetize" ng-controller="ExportWidgetController as exportWidget">
-<div piwik-content-intro>
-    <h2 piwik-enriched-headline>{{ title|e('html_attr') }}</h2>
-    <p>With Matomo, you can <a rel="noreferrer noopener" target="_blank" href="https://matomo.org/docs/embed-piwik-report/">export your Web Analytics reports</a> on your blog, website, or intranet dashboard... in one click.</p>
-</div>
-<div piwik-content-block content-title="Authentication">
-    <p>
-        If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions
-        to the anonymous user in the <a href='index.php?module=UsersManager' rel='noreferrer noopener' target='_blank'>Users Management section</a>.
-        <br/>Alternatively, if you are publishing widgets on a password protected or private page,
-        you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret <code>token_auth</code> parameter in the widget URL.
-        You can manage your auth tokens on your <a href='{{ linkTo({'module':'UsersManager','action':'userSecurity'}) }}' rel='noreferrer noopener' target='_blank'>Security page</a>.
-    </p>
-</div>
-<div piwik-content-block content-title="Widgetize dashboards">
-    <p>You can also display the full Matomo dashboard in your application or website in an IFRAME
-        (<a ng-href='{{ '{{ exportWidget.dashboardUrl }}'|raw }}' rel='noreferrer noopener' target='_blank' >see example</a>).
-        The date parameter can be set to a specific calendar date, "today", or "yesterday". The period parameter can be set to "day", "week", "month", or
-        "year".
-        The language parameter can be set to the language code of a translation, such as language=fr.
-        For example, for idSite=1 and date=yesterday, you can write:
-
-        <br />
-
-        <pre piwik-select-on-focus ng-bind="exportWidget.dashboardCode"> </pre>
-
-        <br />
-        You can also widgetize the all websites dashboard in an IFRAME
-        (<a ng-href='{{ '{{ exportWidget.allWebsitesDashboardUrl }}'|raw }}' rel='noreferrer noopener' target='_blank' id='linkAllWebsitesDashboardUrl'>see example</a>)
-
-        <br />
-
-        <pre piwik-select-on-focus ng-bind="exportWidget.allWebsitesDashboardCode"> </pre>
-    </p>
-</div>
-<div piwik-content-block content-title="Widgetize reports">
-    <p>Select a report, and copy paste in your page the embed code below the widget:
-
-    <div piwik-widget-preview></div>
-
-    <br class="clearfix" />
-
-</div>
-</div>
+<div
+  vue-entry="Widgetize.ExportWidget"
+  title="{{ title|default(null)|json_encode|e('html_attr') }}"
+></div>
 </div>
 
 {% include "@Dashboard/_widgetFactoryTemplate.twig" %}
diff --git a/plugins/Widgetize/vue/dist/Widgetize.umd.js b/plugins/Widgetize/vue/dist/Widgetize.umd.js
new file mode 100644
index 0000000000..57bfa210f6
--- /dev/null
+++ b/plugins/Widgetize/vue/dist/Widgetize.umd.js
@@ -0,0 +1,513 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", ], factory);
+	else if(typeof exports === 'object')
+		exports["Widgetize"] = factory(require("CoreHome"), require("vue"));
+	else
+		root["Widgetize"] = factory(root["CoreHome"], root["Vue"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/Widgetize/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "WidgetPreviewIframe", function() { return /* reexport */ WidgetPreviewIframe; });
+__webpack_require__.d(__webpack_exports__, "WidgetPreview", function() { return /* reexport */ WidgetPreview; });
+__webpack_require__.d(__webpack_exports__, "ExportWidget", function() { return /* reexport */ ExportWidget; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=template&id=c3436116
+
+var _hoisted_1 = {
+  id: "embedThisWidgetIframe"
+};
+
+var _hoisted_2 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("label", {
+  for: "embedThisWidgetIframeInput"
+}, "› Embed Iframe", -1);
+
+var _hoisted_3 = {
+  id: "embedThisWidgetIframeInput"
+};
+var _hoisted_4 = {
+  readonly: "true",
+  id: "iframeEmbed"
+};
+
+var _hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("label", {
+  for: "embedThisWidgetDirectLink"
+}, "› Direct Link", -1);
+
+var _hoisted_6 = {
+  id: "embedThisWidgetDirectLink"
+};
+var _hoisted_7 = {
+  readonly: "true",
+  id: "directLinkEmbed"
+};
+
+var _hoisted_8 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" - ");
+
+var _hoisted_9 = ["href"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_select_on_focus = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("select-on-focus");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_1, [_hoisted_2, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.widgetIframeHtml), 1)], 512), [[_directive_select_on_focus, {}]])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", _hoisted_7, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.urlIframe), 1)], 512), [[_directive_select_on_focus, {}]]), _hoisted_8, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    href: _ctx.urlIframe,
+    rel: "noreferrer noopener",
+    target: "_blank"
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Widgetize_OpenInNewWindow')), 9, _hoisted_9)])])], 64);
+}
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=template&id=c3436116
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=script&lang=ts
+
+
+/* harmony default export */ var WidgetPreviewIframevue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    urlIframe: {
+      type: String,
+      required: true
+    },
+    widgetIframeHtml: {
+      type: String,
+      required: true
+    }
+  },
+  inheritAttrs: false,
+  directives: {
+    SelectOnFocus: external_CoreHome_["SelectOnFocus"]
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue
+
+
+
+WidgetPreviewIframevue_type_script_lang_ts.render = render
+
+/* harmony default export */ var WidgetPreviewIframe = (WidgetPreviewIframevue_type_script_lang_ts);
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=template&id=73d2ef45
+
+var WidgetPreviewvue_type_template_id_73d2ef45_hoisted_1 = {
+  ref: "root"
+};
+function WidgetPreviewvue_type_template_id_73d2ef45_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", WidgetPreviewvue_type_template_id_73d2ef45_hoisted_1, null, 512);
+}
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=template&id=73d2ef45
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=script&lang=ts
+
+
+var _window = window,
+    $ = _window.$,
+    widgetsHelper = _window.widgetsHelper;
+/* harmony default export */ var WidgetPreviewvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  mounted: function mounted() {
+    var _this = this;
+
+    var element = this.$refs.root; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    $(element).widgetPreview({
+      onPreviewLoaded: function onPreviewLoaded(widgetUniqueId, loadedWidgetElement) {
+        _this.callbackAddExportButtonsUnderWidget(widgetUniqueId, loadedWidgetElement);
+      }
+    });
+  },
+  methods: {
+    callbackAddExportButtonsUnderWidget: function callbackAddExportButtonsUnderWidget(widgetUniqueId, loadedWidgetElement) {
+      var _this2 = this;
+
+      widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function (widget) {
+        var widgetParameters = widget.parameters;
+        var exportButtonsElement = $('<div id="exportButtons">');
+
+        var urlIframe = _this2.getEmbedUrl(widgetParameters, 'iframe');
+
+        var widgetIframeHtml = '<div id="widgetIframe"><iframe width="100%" height="350" ' + "src=\"".concat(urlIframe, "\" scrolling=\"yes\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">") + '</iframe></div>';
+        var previewIframe = $('<div>').attr('vue-entry', 'Widgetize.WidgetPreviewIframe').attr('widget-iframe-html', JSON.stringify(widgetIframeHtml)).attr('url-iframe', JSON.stringify(urlIframe));
+        $(exportButtonsElement).append(previewIframe);
+        $(loadedWidgetElement).parent().append(exportButtonsElement);
+        external_CoreHome_["Matomo"].helper.compileVueEntryComponents(exportButtonsElement);
+      });
+    },
+    getEmbedUrl: function getEmbedUrl(parameters, exportFormat) {
+      var finalParams = Object.assign(Object.assign({}, parameters), {}, {
+        moduleToWidgetize: parameters.module,
+        actionToWidgetize: parameters.action,
+        module: 'Widgetize',
+        action: exportFormat,
+        idSite: external_CoreHome_["Matomo"].idSite,
+        period: external_CoreHome_["Matomo"].period,
+        date: external_CoreHome_["MatomoUrl"].urlParsed.value.date,
+        disableLink: 1,
+        widget: 1
+      });
+      var _window$location = window.location,
+          protocol = _window$location.protocol,
+          hostname = _window$location.hostname;
+      var port = window.location.port === '' ? '' : ":".concat(window.location.port);
+      var path = window.location.pathname;
+      var query = external_CoreHome_["MatomoUrl"].stringify(finalParams);
+      return "".concat(protocol, "//").concat(hostname).concat(port).concat(path, "?").concat(query);
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue
+
+
+
+WidgetPreviewvue_type_script_lang_ts.render = WidgetPreviewvue_type_template_id_73d2ef45_render
+
+/* harmony default export */ var WidgetPreview = (WidgetPreviewvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=template&id=6a596dc6
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_1 = {
+  class: "widgetize"
+};
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_2 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [/*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("With Matomo, you can "), /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+  rel: "noreferrer noopener",
+  target: "_blank",
+  href: "https://matomo.org/docs/embed-piwik-report/"
+}, "export your Web Analytics reports"), /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" on your blog, website, or intranet dashboard... in one click.")], -1);
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions to the anonymous user in the ");
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+  href: "index.php?module=UsersManager",
+  rel: "noreferrer noopener",
+  target: "_blank"
+}, "Users Management section", -1);
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(". ");
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("Alternatively, if you are publishing widgets on a password protected or private page, you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret ");
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_8 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("code", null, "token_auth", -1);
+
+var ExportWidgetvue_type_template_id_6a596dc6_hoisted_9 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" parameter in the widget URL. You can manage your auth tokens on your ");
+
+var _hoisted_10 = ["href"];
+
+var _hoisted_11 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(". ");
+
+var _hoisted_12 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" You can also display the full Matomo dashboard in your application or website in an IFRAME (");
+
+var _hoisted_13 = ["href"];
+
+var _hoisted_14 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("). The date parameter can be set to a specific calendar date, \"today\", or \"yesterday\". The period parameter can be set to \"day\", \"week\", \"month\", or \"year\". The language parameter can be set to the language code of a translation, such as language=fr. For example, for idSite=1 and date=yesterday, you can write: ");
+
+var _hoisted_15 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_16 = ["textContent"];
+
+var _hoisted_17 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" You can also widgetize the all websites dashboard in an IFRAME (");
+
+var _hoisted_19 = ["href"];
+
+var _hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_22 = ["textContent"];
+
+var _hoisted_23 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, "Select a report, and copy paste in your page the embed code below the widget:", -1);
+
+var _hoisted_24 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", {
+  class: "clearfix"
+}, null, -1);
+
+function ExportWidgetvue_type_template_id_6a596dc6_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_EnrichedHeadline = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("EnrichedHeadline");
+
+  var _component_ContentBlock = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ContentBlock");
+
+  var _component_WidgetPreview = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("WidgetPreview");
+
+  var _directive_content_intro = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("content-intro");
+
+  var _directive_select_on_focus = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("select-on-focus");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", ExportWidgetvue_type_template_id_6a596dc6_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h2", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_EnrichedHeadline, null, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.title), 1)];
+    }),
+    _: 1
+  })]), ExportWidgetvue_type_template_id_6a596dc6_hoisted_2], 512), [[_directive_content_intro]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, {
+    "content-title": "Authentication"
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [ExportWidgetvue_type_template_id_6a596dc6_hoisted_3, ExportWidgetvue_type_template_id_6a596dc6_hoisted_4, ExportWidgetvue_type_template_id_6a596dc6_hoisted_5, ExportWidgetvue_type_template_id_6a596dc6_hoisted_6, ExportWidgetvue_type_template_id_6a596dc6_hoisted_7, ExportWidgetvue_type_template_id_6a596dc6_hoisted_8, ExportWidgetvue_type_template_id_6a596dc6_hoisted_9, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        rel: "noreferrer noopener",
+        target: "_blank",
+        href: _ctx.linkTo({
+          'module': 'UsersManager',
+          'action': 'userSecurity'
+        })
+      }, "Security page", 8, _hoisted_10), _hoisted_11])];
+    }),
+    _: 1
+  }), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, {
+    "content-title": "Widgetize dashboards"
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [_hoisted_12, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        rel: "noreferrer noopener",
+        target: "_blank",
+        href: _ctx.dashboardUrl
+      }, "see example", 8, _hoisted_13), _hoisted_14, _hoisted_15]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", {
+        textContent: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.dashboardCode)
+      }, null, 8, _hoisted_16), [[_directive_select_on_focus, {}]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [_hoisted_17, _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        rel: "noreferrer noopener",
+        target: "_blank",
+        id: "linkAllWebsitesDashboardUrl",
+        href: _ctx.allWebsitesDashboardUrl
+      }, "see example", 8, _hoisted_19), _hoisted_20, _hoisted_21]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", {
+        textContent: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.allWebsitesDashboardCode)
+      }, null, 8, _hoisted_22), [[_directive_select_on_focus, {}]])])];
+    }),
+    _: 1
+  }), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, {
+    "content-title": "Widgetize reports"
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_hoisted_23, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_WidgetPreview)]), _hoisted_24])];
+    }),
+    _: 1
+  })]);
+}
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=template&id=6a596dc6
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=script&lang=ts
+
+
+
+
+function getIframeCode(iframeUrl) {
+  var url = iframeUrl.replace(/"/g, '&quot;');
+  return "<iframe src=\"".concat(url, "\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" width=\"100%\" ") + 'height="100%"></iframe>';
+}
+
+/* harmony default export */ var ExportWidgetvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  components: {
+    EnrichedHeadline: external_CoreHome_["EnrichedHeadline"],
+    ContentBlock: external_CoreHome_["ContentBlock"],
+    WidgetPreview: WidgetPreview
+  },
+  directives: {
+    ContentIntro: external_CoreHome_["ContentIntro"],
+    SelectOnFocus: external_CoreHome_["SelectOnFocus"]
+  },
+  data: function data() {
+    var port = window.location.port === '' ? '' : ":".concat(window.location.port);
+    var path = window.location.pathname;
+    var urlPath = "".concat(window.location.protocol, "//").concat(window.location.hostname).concat(port).concat(path);
+    return {
+      dashboardUrl: "".concat(urlPath, "?").concat(external_CoreHome_["MatomoUrl"].stringify({
+        module: 'Widgetize',
+        action: 'iframe',
+        moduleToWidgetize: 'Dashboard',
+        actionToWidgetize: 'index',
+        idSite: external_CoreHome_["Matomo"].idSite,
+        period: 'week',
+        date: 'yesterday'
+      })),
+      allWebsitesDashboardUrl: "".concat(urlPath, "?").concat(external_CoreHome_["MatomoUrl"].stringify({
+        module: 'Widgetize',
+        action: 'iframe',
+        moduleToWidgetize: 'MultiSites',
+        actionToWidgetize: 'standalone',
+        idSite: external_CoreHome_["Matomo"].idSite,
+        period: 'week',
+        date: 'yesterday'
+      }))
+    };
+  },
+  computed: {
+    dashboardCode: function dashboardCode() {
+      return getIframeCode(this.dashboardUrl);
+    },
+    allWebsitesDashboardCode: function allWebsitesDashboardCode() {
+      return getIframeCode(this.allWebsitesDashboardUrl);
+    }
+  },
+  methods: {
+    linkTo: function linkTo(params) {
+      return "?".concat(external_CoreHome_["MatomoUrl"].stringify(Object.assign(Object.assign({}, external_CoreHome_["MatomoUrl"].urlParsed.value), {}, {
+        params: params
+      })));
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue
+
+
+
+ExportWidgetvue_type_script_lang_ts.render = ExportWidgetvue_type_template_id_6a596dc6_render
+
+/* harmony default export */ var ExportWidget = (ExportWidgetvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=Widgetize.umd.js.map
\ No newline at end of file
diff --git a/plugins/Widgetize/vue/dist/Widgetize.umd.min.js b/plugins/Widgetize/vue/dist/Widgetize.umd.min.js
new file mode 100644
index 0000000000..d6b95c9b20
--- /dev/null
+++ b/plugins/Widgetize/vue/dist/Widgetize.umd.min.js
@@ -0,0 +1,8 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue")):"function"===typeof define&&define.amd?define(["CoreHome"],t):"object"===typeof exports?exports["Widgetize"]=t(require("CoreHome"),require("vue")):e["Widgetize"]=t(e["CoreHome"],e["Vue"])})("undefined"!==typeof self?self:this,(function(e,t){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="plugins/Widgetize/vue/dist/",r(r.s="fae3")}({"19dc":function(t,r){t.exports=e},"8bbf":function(e,r){e.exports=t},fae3:function(e,t,r){"use strict";if(r.r(t),r.d(t,"WidgetPreviewIframe",(function(){return h})),r.d(t,"WidgetPreview",(function(){return E})),r.d(t,"ExportWidget",(function(){return Z})),"undefined"!==typeof window){var o=window.document.currentScript,n=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);n&&(r.p=n[1])}var i=r("8bbf"),a={id:"embedThisWidgetIframe"},c=Object(i["createElementVNode"])("label",{for:"embedThisWidgetIframeInput"},"› Embed Iframe",-1),d={id:"embedThisWidgetIframeInput"},l={readonly:"true",id:"iframeEmbed"},u=Object(i["createElementVNode"])("label",{for:"embedThisWidgetDirectLink"},"› Direct Link",-1),s={id:"embedThisWidgetDirectLink"},b={readonly:"true",id:"directLinkEmbed"},m=Object(i["createTextVNode"])(" - "),f=["href"];function p(e,t,r,o,n,p){var g=Object(i["resolveDirective"])("select-on-focus");return Object(i["openBlock"])(),Object(i["createElementBlock"])(i["Fragment"],null,[Object(i["createElementVNode"])("div",a,[c,Object(i["createElementVNode"])("div",d,[Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",l,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.widgetIframeHtml),1)],512),[[g,{}]])])]),Object(i["createElementVNode"])("div",null,[u,Object(i["createElementVNode"])("div",s,[Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",b,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.urlIframe),1)],512),[[g,{}]]),m,Object(i["createElementVNode"])("a",{href:e.urlIframe,rel:"noreferrer noopener",target:"_blank"},Object(i["toDisplayString"])(e.translate("Widgetize_OpenInNewWindow")),9,f)])])],64)}var g=r("19dc"),O=Object(i["defineComponent"])({props:{urlIframe:{type:String,required:!0},widgetIframeHtml:{type:String,required:!0}},inheritAttrs:!1,directives:{SelectOnFocus:g["SelectOnFocus"]}});O.render=p;var h=O,j={ref:"root"};function y(e,t,r,o,n,a){return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",j,null,512)}var v=window,w=v.$,N=v.widgetsHelper,V=Object(i["defineComponent"])({mounted:function(){var e=this,t=this.$refs.root;w(t).widgetPreview({onPreviewLoaded:function(t,r){e.callbackAddExportButtonsUnderWidget(t,r)}})},methods:{callbackAddExportButtonsUnderWidget:function(e,t){var r=this;N.getWidgetObjectFromUniqueId(e,(function(e){var o=e.parameters,n=w('<div id="exportButtons">'),i=r.getEmbedUrl(o,"iframe"),a='<div id="widgetIframe"><iframe width="100%" height="350" '+'src="'.concat(i,'" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0">')+"</iframe></div>",c=w("<div>").attr("vue-entry","Widgetize.WidgetPreviewIframe").attr("widget-iframe-html",JSON.stringify(a)).attr("url-iframe",JSON.stringify(i));w(n).append(c),w(t).parent().append(n),g["Matomo"].helper.compileVueEntryComponents(n)}))},getEmbedUrl:function(e,t){var r=Object.assign(Object.assign({},e),{},{moduleToWidgetize:e.module,actionToWidgetize:e.action,module:"Widgetize",action:t,idSite:g["Matomo"].idSite,period:g["Matomo"].period,date:g["MatomoUrl"].urlParsed.value.date,disableLink:1,widget:1}),o=window.location,n=o.protocol,i=o.hostname,a=""===window.location.port?"":":".concat(window.location.port),c=window.location.pathname,d=g["MatomoUrl"].stringify(r);return"".concat(n,"//").concat(i).concat(a).concat(c,"?").concat(d)}}});V.render=y;var E=V,x={class:"widgetize"},W=Object(i["createElementVNode"])("p",null,[Object(i["createTextVNode"])("With Matomo, you can "),Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:"https://matomo.org/docs/embed-piwik-report/"},"export your Web Analytics reports"),Object(i["createTextVNode"])(" on your blog, website, or intranet dashboard... in one click.")],-1),T=Object(i["createTextVNode"])(" If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions to the anonymous user in the "),k=Object(i["createElementVNode"])("a",{href:"index.php?module=UsersManager",rel:"noreferrer noopener",target:"_blank"},"Users Management section",-1),S=Object(i["createTextVNode"])(". "),C=Object(i["createElementVNode"])("br",null,null,-1),D=Object(i["createTextVNode"])("Alternatively, if you are publishing widgets on a password protected or private page, you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret "),M=Object(i["createElementVNode"])("code",null,"token_auth",-1),I=Object(i["createTextVNode"])(" parameter in the widget URL. You can manage your auth tokens on your "),U=["href"],z=Object(i["createTextVNode"])(". "),_=Object(i["createTextVNode"])(" You can also display the full Matomo dashboard in your application or website in an IFRAME ("),P=["href"],B=Object(i["createTextVNode"])('). The date parameter can be set to a specific calendar date, "today", or "yesterday". The period parameter can be set to "day", "week", "month", or "year". The language parameter can be set to the language code of a translation, such as language=fr. For example, for idSite=1 and date=yesterday, you can write: '),H=Object(i["createElementVNode"])("br",null,null,-1),q=["textContent"],A=Object(i["createElementVNode"])("br",null,null,-1),F=Object(i["createTextVNode"])(" You can also widgetize the all websites dashboard in an IFRAME ("),L=["href"],R=Object(i["createTextVNode"])(") "),Y=Object(i["createElementVNode"])("br",null,null,-1),$=["textContent"],J=Object(i["createElementVNode"])("p",null,"Select a report, and copy paste in your page the embed code below the widget:",-1),G=Object(i["createElementVNode"])("br",{class:"clearfix"},null,-1);function K(e,t,r,o,n,a){var c=Object(i["resolveComponent"])("EnrichedHeadline"),d=Object(i["resolveComponent"])("ContentBlock"),l=Object(i["resolveComponent"])("WidgetPreview"),u=Object(i["resolveDirective"])("content-intro"),s=Object(i["resolveDirective"])("select-on-focus");return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",x,[Object(i["withDirectives"])(Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("h2",null,[Object(i["createVNode"])(c,null,{default:Object(i["withCtx"])((function(){return[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.title),1)]})),_:1})]),W],512),[[u]]),Object(i["createVNode"])(d,{"content-title":"Authentication"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("p",null,[T,k,S,C,D,M,I,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.linkTo({module:"UsersManager",action:"userSecurity"})},"Security page",8,U),z])]})),_:1}),Object(i["createVNode"])(d,{"content-title":"Widgetize dashboards"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("p",null,[_,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.dashboardUrl},"see example",8,P),B,H]),Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",{textContent:Object(i["toDisplayString"])(e.dashboardCode)},null,8,q),[[s,{}]]),Object(i["createElementVNode"])("p",null,[A,F,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",id:"linkAllWebsitesDashboardUrl",href:e.allWebsitesDashboardUrl},"see example",8,L),R,Y]),Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",{textContent:Object(i["toDisplayString"])(e.allWebsitesDashboardCode)},null,8,$),[[s,{}]])])]})),_:1}),Object(i["createVNode"])(d,{"content-title":"Widgetize reports"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("div",null,[J,Object(i["createElementVNode"])("div",null,[Object(i["createVNode"])(l)]),G])]})),_:1})])}function Q(e){var t=e.replace(/"/g,"&quot;");return'<iframe src="'.concat(t,'" frameborder="0" marginheight="0" marginwidth="0" width="100%" ')+'height="100%"></iframe>'}var X=Object(i["defineComponent"])({props:{title:{type:String,required:!0}},components:{EnrichedHeadline:g["EnrichedHeadline"],ContentBlock:g["ContentBlock"],WidgetPreview:E},directives:{ContentIntro:g["ContentIntro"],SelectOnFocus:g["SelectOnFocus"]},data:function(){var e=""===window.location.port?"":":".concat(window.location.port),t=window.location.pathname,r="".concat(window.location.protocol,"//").concat(window.location.hostname).concat(e).concat(t);return{dashboardUrl:"".concat(r,"?").concat(g["MatomoUrl"].stringify({module:"Widgetize",action:"iframe",moduleToWidgetize:"Dashboard",actionToWidgetize:"index",idSite:g["Matomo"].idSite,period:"week",date:"yesterday"})),allWebsitesDashboardUrl:"".concat(r,"?").concat(g["MatomoUrl"].stringify({module:"Widgetize",action:"iframe",moduleToWidgetize:"MultiSites",actionToWidgetize:"standalone",idSite:g["Matomo"].idSite,period:"week",date:"yesterday"}))}},computed:{dashboardCode:function(){return Q(this.dashboardUrl)},allWebsitesDashboardCode:function(){return Q(this.allWebsitesDashboardUrl)}},methods:{linkTo:function(e){return"?".concat(g["MatomoUrl"].stringify(Object.assign(Object.assign({},g["MatomoUrl"].urlParsed.value),{},{params:e})))}}});X.render=K;var Z=X;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */}})}));
+//# sourceMappingURL=Widgetize.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Widgetize/vue/dist/umd.metadata.json b/plugins/Widgetize/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..9ecfcc0456
--- /dev/null
+++ b/plugins/Widgetize/vue/dist/umd.metadata.json
@@ -0,0 +1,5 @@
+{
+  "dependsOn": [
+    "CoreHome"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue
new file mode 100644
index 0000000000..3ced9730a1
--- /dev/null
+++ b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue
@@ -0,0 +1,169 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div class="widgetize">
+    <div v-content-intro>
+      <h2>
+        <EnrichedHeadline>{{ title }}</EnrichedHeadline>
+      </h2>
+      <p>With Matomo, you can <a
+          rel="noreferrer noopener"
+          target="_blank"
+          href="https://matomo.org/docs/embed-piwik-report/"
+        >export your Web Analytics reports</a> on your blog, website, or intranet dashboard...
+        in one click.</p>
+    </div>
+    <ContentBlock content-title="Authentication">
+      <p>
+        If you want your widgets to be viewable by everybody, you first have to set the 'view'
+        permissions to the anonymous user in the <a
+          href="index.php?module=UsersManager"
+          rel="noreferrer noopener"
+          target="_blank"
+        >Users Management section</a>.
+        <br />Alternatively, if you are publishing widgets on a password protected or private page,
+        you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can
+        add the secret <code>token_auth</code> parameter in the widget URL.
+        You can manage your auth tokens on your <a
+          rel="noreferrer noopener"
+          target="_blank"
+          :href="linkTo({'module': 'UsersManager', 'action': 'userSecurity'})"
+        >Security page</a>.
+      </p>
+    </ContentBlock>
+    <ContentBlock content-title="Widgetize dashboards">
+      <div>
+        <p>
+            You can also display the full Matomo dashboard in your application or website in an
+          IFRAME (<a
+            rel="noreferrer noopener"
+            target="_blank"
+            :href="dashboardUrl"
+          >see example</a>).
+          The date parameter can be set to a specific calendar date, "today", or "yesterday". The
+          period parameter can be set to "day", "week", "month", or
+          "year".
+          The language parameter can be set to the language code of a translation, such as
+          language=fr. For example, for idSite=1 and date=yesterday, you can write:
+          <br />
+        </p>
+        <pre
+          v-text="dashboardCode"
+          v-select-on-focus="{}"
+        ></pre>
+        <p>
+          <br />
+          You can also widgetize the all websites dashboard in an IFRAME
+          (<a
+            rel="noreferrer noopener"
+            target="_blank"
+            id="linkAllWebsitesDashboardUrl"
+            :href="allWebsitesDashboardUrl"
+          >see example</a>)
+          <br />
+        </p>
+        <pre
+          v-text="allWebsitesDashboardCode"
+          v-select-on-focus="{}"
+        ></pre>
+      </div>
+    </ContentBlock>
+    <ContentBlock content-title="Widgetize reports">
+      <div>
+        <p>Select a report, and copy paste in your page the embed code below the widget:</p>
+        <div>
+          <WidgetPreview />
+        </div>
+        <br class="clearfix" />
+      </div>
+    </ContentBlock>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  Matomo,
+  ContentIntro,
+  EnrichedHeadline,
+  ContentBlock,
+  SelectOnFocus,
+  MatomoUrl,
+} from 'CoreHome';
+import WidgetPreview from '../WidgetPreview/WidgetPreview.vue';
+
+interface ExportWidgetState {
+  dashboardUrl: string;
+  allWebsitesDashboardUrl: string;
+}
+
+function getIframeCode(iframeUrl: string) {
+  const url = iframeUrl.replace(/"/g, '&quot;');
+  return `<iframe src="${url}" frameborder="0" marginheight="0" marginwidth="0" width="100%" `
+    + 'height="100%"></iframe>';
+}
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    EnrichedHeadline,
+    ContentBlock,
+    WidgetPreview,
+  },
+  directives: {
+    ContentIntro,
+    SelectOnFocus,
+  },
+  data(): ExportWidgetState {
+    const port = window.location.port === '' ? '' : `:${window.location.port}`;
+    const path = window.location.pathname;
+    const urlPath = `${window.location.protocol}//${window.location.hostname}${port}${path}`;
+
+    return {
+      dashboardUrl: `${urlPath}?${MatomoUrl.stringify({
+        module: 'Widgetize',
+        action: 'iframe',
+        moduleToWidgetize: 'Dashboard',
+        actionToWidgetize: 'index',
+        idSite: Matomo.idSite,
+        period: 'week',
+        date: 'yesterday',
+      })}`,
+      allWebsitesDashboardUrl: `${urlPath}?${MatomoUrl.stringify({
+        module: 'Widgetize',
+        action: 'iframe',
+        moduleToWidgetize: 'MultiSites',
+        actionToWidgetize: 'standalone',
+        idSite: Matomo.idSite,
+        period: 'week',
+        date: 'yesterday',
+      })}`,
+    };
+  },
+  computed: {
+    dashboardCode() {
+      return getIframeCode(this.dashboardUrl);
+    },
+    allWebsitesDashboardCode() {
+      return getIframeCode(this.allWebsitesDashboardUrl);
+    },
+  },
+  methods: {
+    linkTo(params: QueryParameters) {
+      return `?${MatomoUrl.stringify({
+        ...MatomoUrl.urlParsed.value,
+        params,
+      })}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts
new file mode 100644
index 0000000000..b8d0b94385
--- /dev/null
+++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts
@@ -0,0 +1,14 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { createAngularJsAdapter } from 'CoreHome';
+import WidgetPreview from './WidgetPreview.vue';
+
+export default createAngularJsAdapter({
+  component: WidgetPreview,
+  directiveName: 'piwikWidgetPreview',
+});
diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue
new file mode 100644
index 0000000000..914db36728
--- /dev/null
+++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue
@@ -0,0 +1,76 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div ref="root"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  Matomo,
+  WidgetType,
+  MatomoUrl,
+} from 'CoreHome';
+
+const { $, widgetsHelper } = window;
+
+export default defineComponent({
+  mounted() {
+    const element = this.$refs.root as HTMLElement;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ($(element) as any).widgetPreview({
+      onPreviewLoaded: (widgetUniqueId: string, loadedWidgetElement: HTMLElement) => {
+        this.callbackAddExportButtonsUnderWidget(widgetUniqueId, loadedWidgetElement);
+      },
+    });
+  },
+  methods: {
+    callbackAddExportButtonsUnderWidget(widgetUniqueId: string, loadedWidgetElement: HTMLElement) {
+      widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, (widget) => {
+        const widgetParameters = (widget as WidgetType).parameters;
+        const exportButtonsElement = $('<div id="exportButtons">');
+
+        const urlIframe = this.getEmbedUrl(widgetParameters!, 'iframe');
+        const widgetIframeHtml = '<div id="widgetIframe"><iframe width="100%" height="350" '
+          + `src="${urlIframe}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0">`
+          + '</iframe></div>';
+
+        const previewIframe = $('<div>')
+          .attr('vue-entry', 'Widgetize.WidgetPreviewIframe')
+          .attr('widget-iframe-html', JSON.stringify(widgetIframeHtml))
+          .attr('url-iframe', JSON.stringify(urlIframe));
+        $(exportButtonsElement).append(previewIframe);
+
+        $(loadedWidgetElement).parent().append(exportButtonsElement);
+        Matomo.helper.compileVueEntryComponents(exportButtonsElement);
+      });
+    },
+    getEmbedUrl(parameters: NonNullable<WidgetType['parameters']>, exportFormat: string) {
+      const finalParams: QueryParameters = {
+        ...parameters,
+        moduleToWidgetize: parameters.module as string,
+        actionToWidgetize: parameters.action as string,
+        module: 'Widgetize',
+        action: exportFormat,
+        idSite: Matomo.idSite,
+        period: Matomo.period,
+        date: MatomoUrl.urlParsed.value.date,
+        disableLink: 1,
+        widget: 1,
+      };
+
+      const { protocol, hostname } = window.location;
+      const port = window.location.port === '' ? '' : `:${window.location.port}`;
+      const path = window.location.pathname;
+      const query = MatomoUrl.stringify(finalParams);
+
+      return `${protocol}//${hostname}${port}${path}?${query}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue
new file mode 100644
index 0000000000..c26be1b533
--- /dev/null
+++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue
@@ -0,0 +1,47 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div id="embedThisWidgetIframe">
+    <label for="embedThisWidgetIframeInput">&rsaquo; Embed Iframe</label>
+    <div id="embedThisWidgetIframeInput">
+      <pre v-select-on-focus="{}" readonly="true" id="iframeEmbed">{{ widgetIframeHtml }}</pre>
+    </div>
+  </div>
+
+  <div>
+    <label for="embedThisWidgetDirectLink">&rsaquo; Direct Link</label>
+    <div id="embedThisWidgetDirectLink">
+      <pre v-select-on-focus="{}" readonly="true" id="directLinkEmbed">{{ urlIframe }}</pre>
+      -
+      <a :href="urlIframe" rel="noreferrer noopener" target="_blank">
+        {{ translate('Widgetize_OpenInNewWindow') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { SelectOnFocus } from 'CoreHome';
+
+export default defineComponent({
+  props: {
+    urlIframe: {
+      type: String,
+      required: true,
+    },
+    widgetIframeHtml: {
+      type: String,
+      required: true,
+    },
+  },
+  inheritAttrs: false,
+  directives: {
+    SelectOnFocus,
+  },
+});
+</script>
diff --git a/plugins/Widgetize/vue/src/index.ts b/plugins/Widgetize/vue/src/index.ts
new file mode 100644
index 0000000000..1083248a16
--- /dev/null
+++ b/plugins/Widgetize/vue/src/index.ts
@@ -0,0 +1,10 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+export { default as WidgetPreviewIframe } from './WidgetPreview/WidgetPreviewIframe.vue';
+export { default as WidgetPreview } from './WidgetPreview/WidgetPreview.vue';
+export { default as ExportWidget } from './ExportWidget/ExportWidget.vue';
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png b/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png
index f31cd3b29a..a3dac39f5d 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:37c5efff1ec57a298b5fb468419058ce8bb2d4fa448901649753e0b61672a986
-size 190884
+oid sha256:f006e227737fa8b5aa27e58be385d16420861fc0171fb8f9470ed420bdd32255
+size 191222