@cortezaproject/corteza-vue 2021.9.7 → 2022.3.0-dev.2

package/dist/index.js

@@ -15,6 +15,7 @@ var VueI18Next = _interopDefault(require('@panter/vue-i18next'));
 var path = _interopDefault(require('path'));
 var vPhotoswipe = require('v-photoswipe');
 var pdfjs = _interopDefault(require('pdfjs-dist'));
+var Draggable = _interopDefault(require('vuedraggable'));
 var Swatches = _interopDefault(require('vue-swatches'));
 var tiptap = require('tiptap');
 var tiptapExtensions = require('tiptap-extensions');
@@ -22,8 +23,10 @@ var hps = _interopDefault(require('html-parse-stringify'));
 var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var vuex = require('vuex');
-var draggable = _interopDefault(require('vuedraggable'));
+var colorschemes = _interopDefault(require('chartjs-plugin-colorschemes'));
+var Funnel = _interopDefault(require('chartjs-plugin-funnel'));
 var pino = _interopDefault(require('pino'));
+var fzy = _interopDefault(require('fuzzysort'));
 
 /* eslint-disable @typescript-eslint/ban-ts-ignore */
 /**
@@ -1926,15 +1929,19 @@ var url = /*#__PURE__*/Object.freeze({
 const accessToken = Symbol('accessToken');
 const user = Symbol('user');
 /**
- * This is an endpoint of a oauth2 authorization-code flow + refresh token exchange
+ * This is an endpoint of an oauth2 authorization-code flow + refresh token exchange
  * for default client.
  *
- * If you are concerned about security, this is not much different than using a dedicated backend
+ * If you are concerned about security, this is not much different to using a dedicated backend
  * for this SPA that only redirects to a set of allowed URIs.
  */
 const oauth2FlowURL = '/oauth2/default-client';
 const oauth2InfoURL = '/oauth2/info';
 const oauth2Scope = 'profile api';
+const storeKeyFlowStarted = 'auth.flow-started';
+const storeKeyFinalState = 'auth.state.final';
+const storeKeyRefreshToken = 'auth.refresh-token';
+const maxStartAttempts = 5;
 class Auth {
     constructor({ app, verbose, cortezaAuthURL, callbackURL, entrypointURL, location, sessionStorage, refreshFactor }) {
         if (refreshFactor >= 1 || refreshFactor <= 0) {
@@ -1977,13 +1984,6 @@ class Auth {
             error: noop,
         };
     }
-    /**
-     * Returns prefixed key
-     * @param key
-     */
-    get refreshTokenKey() {
-        return 'auth.refresh-token';
-    }
     /**
      * Returns function that returns current access token
      */
@@ -2007,43 +2007,83 @@ class Auth {
     handle(req = new URL(this.entrypointURL)) {
         return __awaiter(this, void 0, void 0, function* () {
             this.log.info('handling authentication');
-            if (/\/auth\/callback$/.test(req.pathname)) {
+            if (this.isCallback(req.pathname)) {
                 this.log.info('handling authentication callback');
                 const params = new URLSearchParams(req.search);
                 if (params.has('error')) {
                     throw new Error(params.get('error') || 'authentication flow failed with error');
                 }
                 if (params.has('code')) {
-                    let finalLocation = null;
+                    let finalLocation = this.entrypointURL;
                     if (params.has('state')) {
                         const state = params.get('state') || '';
-                        const key = `auth.state.${state}.location`;
-                        this.log.info('state received', state);
-                        finalLocation = this.sessionStorage.getItem(key);
-                        if (!finalLocation) {
-                            throw Error('state does not match');
+                        const storeKeyStateLocation = `auth.state.${state}.location`;
+                        const tmp = this.sessionStorage.getItem(storeKeyStateLocation);
+                        if (tmp === null) {
+                            console.warn('state does not match, restarting authentication flow');
+                            this.startAuthenticationFlow();
+                            return null;
                         }
-                        if (/auth\/callback/.test(finalLocation)) {
+                        if (!this.isCallback(tmp)) {
                             // if by some coincidence we got callback URL to finalLocation
-                            // we'll silently ignore it
-                            finalLocation = null;
-                        }
-                        else {
-                            this.log.info('location before auth flow start', finalLocation);
+                            // we'll silently ignore it and redirect user back to entrypoint
+                            finalLocation = tmp;
                         }
-                        this.sessionStorage.removeItem(key);
+                        this.sessionStorage.removeItem(storeKeyStateLocation);
                     }
                     const code = params.get('code') || '';
                     this.log.info('authorization code received', code);
-                    yield this.exchangeCode(code);
-                    if (finalLocation) {
-                        this.location.assign(finalLocation);
-                    }
+                    const rsp = yield this.exchangeCode(code);
+                    this.startFinalState(finalLocation);
+                    return rsp;
                 }
             }
             return this.check();
         });
     }
+    /**
+     * Flagging session storage
+     *
+     * Challenge with sessions and browser tabs:
+     * Each browser tab & window interacts with an isolated session. When user clicks on a link to and wants to open
+     * it in a new window or a tab, or when tab is duplicated, session contents are copied!
+     *
+     * Consequences of that are that two (or more) tabs end up with the same session
+     * and the same refresh token, and we need to detect if we're dealing with refresh token in an old or new  session.
+     *
+     * With this function we start the final state and flag the session. This way we'll
+     * know, after the redirection to the final location, if this is a final stage or not and if the refresh token
+     * belongs to this session or not.
+     */
+    startFinalState(dst) {
+        this.log.info('redirecting back to final destination', dst);
+        this.sessionStorage.setItem(storeKeyFinalState, Date.now().toString());
+        this.location.assign(dst);
+    }
+    /**
+     * Called when refresh token is re-fetched.
+     *
+     * Cleanup aux items in the session store
+     */
+    completeFinalState() {
+        this.sessionStorage.removeItem(storeKeyFinalState);
+        this.sessionStorage.removeItem(storeKeyFlowStarted);
+        const stateKey = /^auth\.state\.\w+\.location$/;
+        for (let i = 0; i < this.sessionStorage.length; i++) {
+            const key = this.sessionStorage.key(i);
+            if (key !== null && stateKey.test(key)) {
+                this.sessionStorage.removeItem(key);
+            }
+        }
+    }
+    /**
+     * Are we in a final state or not?
+     *
+     * See startFinalState function for more details
+     */
+    inFinalState() {
+        return this.sessionStorage.getItem(storeKeyFinalState) !== null;
+    }
     /**
      * Checks current auth state; is access token loaded OR do we have a refresh token we can use
      *
@@ -2077,27 +2117,34 @@ class Auth {
                     this[user] = authUser;
                     return data;
                 }).catch((error) => {
-                    this.log.info('data fetch form info endpoint failed', { oauth2InfoURL, headers, error });
+                    this.log.error('data fetch form info endpoint failed', { oauth2InfoURL, headers, error });
                     // assume invalid JWT and remove it
                     this[accessToken] = undefined;
                     throw new Error('Unauthenticated');
                 });
             }
-            const refreshToken = this.sessionStorage.getItem(this.refreshTokenKey);
+            const refreshToken = this.sessionStorage.getItem(storeKeyRefreshToken);
             if (refreshToken) {
-                this.log.info('refresh token found, exchanging it for new access token');
+                this.log.debug('refresh token found', { refreshToken });
                 /**
-                 * Refresh token found in the storage,
-                 * let's use it to get new access token
+                 * Only exchange refresh token if this is the final state (see startFinalState function for more details)
+                 *
+                 * If this is a duplicated-session, an error will be thrown and authentication will be (probably)
+                 * restarted by the caller.
                  */
-                return this.exchangeRefresh(refreshToken);
+                if (this.inFinalState()) {
+                    this.log.info('refreshing token', refreshToken);
+                    /**
+                     * Refresh token found in the storage,
+                     * let's use it to get new access token
+                     */
+                    return this.exchangeRefresh(refreshToken);
+                }
             }
             throw new Error('Unauthenticated');
         });
     }
     logout() {
-        this[accessToken] = undefined;
-        this[user] = undefined;
         this.pruneStore();
         this.location.assign(Make({
             url: `${this.cortezaAuthURL}/logout`,
@@ -2112,8 +2159,9 @@ class Auth {
      */
     startAuthenticationFlow() {
         this.log.debug('starting new authentication flow');
+        this.incFlowCounter();
         const state = Math.random().toString(36).substring(2);
-        this.sessionStorage.setItem(`auth.state.${state}.location`, this.location.toString());
+        this.sessionStorage.setItem(`auth.state.${state}.location`, this.getRedirect(this.location.toString()));
         this.location.assign(Make({
             url: `${this.cortezaAuthURL}` + oauth2FlowURL,
             query: {
@@ -2124,6 +2172,38 @@ class Auth {
             },
         }));
     }
+    getRedirect(url) {
+        const u = new URL(url);
+        // In case someone started the flow on a callback route, default to the root
+        // of the webapp.
+        if (this.isCallback(u.pathname)) {
+            u.pathname = '';
+            u.search = '';
+            u.hash = '';
+        }
+        return u.toString();
+    }
+    isCallback(url) {
+        return /\/auth\/callback$/.test(url);
+    }
+    /**
+     * protects against too many tries when we try to auto-fix the "state does not match" error
+     * by restarting the aut flow.
+     */
+    incFlowCounter() {
+        const aux = this.sessionStorage.getItem(storeKeyFlowStarted);
+        if (aux === null) {
+            this.sessionStorage.setItem(storeKeyFlowStarted, '1');
+            return;
+        }
+        const count = parseInt(this.sessionStorage.getItem(storeKeyFlowStarted));
+        if (count >= maxStartAttempts) {
+            // Too many start attempts
+            this.sessionStorage.removeItem(storeKeyFlowStarted);
+            throw new Error('could not start authentication flow, too many attempts');
+        }
+        this.sessionStorage.setItem(storeKeyFlowStarted, (count + 1).toString());
+    }
     /**
      * Exchanges authorization code for access and refresh tokens
      */
@@ -2147,6 +2227,10 @@ class Auth {
      */
     exchangeRefresh(refreshToken) {
         return __awaiter(this, void 0, void 0, function* () {
+            /**
+             * Finalize
+             */
+            this.completeFinalState();
             return this.oauth2token({
                 // eslint-disable-next-line @typescript-eslint/camelcase
                 refresh_token: refreshToken || '',
@@ -2190,7 +2274,7 @@ class Auth {
                 this.startAuthenticationFlow();
             });
         }), 1000 * timeout);
-        this.sessionStorage.setItem(this.refreshTokenKey, oa2tkn.refresh_token);
+        this.sessionStorage.setItem(storeKeyRefreshToken, oa2tkn.refresh_token);
         const u = new cortezaJs.system.User({
             userID: oa2tkn.sub,
             name: oa2tkn.name,
@@ -2498,6 +2582,10 @@ class Settings {
       throw new Error('api.notDefined');
     }
 
+    return this.fetch();
+  }
+
+  async fetch() {
     return this.api.settingsCurrent().then(settings => {
       this.current = settings || {};
       return settings;
@@ -2543,7 +2631,7 @@ class Settings {
 var settings = {
   install(Vue) {
     // Should be used to initialize settings
-    Vue.prototype.$Settings = new Settings(); // Should be used to access settings
+    Vue.prototype.$Settings = Vue.observable(new Settings()); // Should be used to access settings
 
     Vue.prototype.$s = Vue.prototype.$Settings.get.bind(Vue.prototype.$Settings);
   }
@@ -71035,14 +71123,109 @@ var __vue_staticRenderFns__$8 = [];
     undefined
   );
 
+function getDate(value) {
+    if (!value) {
+        return undefined;
+    }
+    if (value === 'Invalid date') {
+        // Make sure this weird value does not cause us problems
+        return undefined;
+    }
+    const dt = value.split(' ');
+    if (dt.length > 1) {
+        return dt[0]; // we only want the date part
+    }
+    else if (dt.length === 1) {
+        // If date is in the value
+        if (dt[0].indexOf('-') > -1) {
+            return dt[0];
+        }
+    }
+}
+function getTime(value) {
+    if (!value) {
+        return undefined;
+    }
+    const dt = value.split(' ');
+    if (dt.length > 1) {
+        return dt[1]; // we only want the time part
+    }
+    else if (dt.length === 1) {
+        // If we time is in the value
+        if (dt[0].indexOf(':') > -1) {
+            return dt[0];
+        }
+    }
+}
+function setDate(date, value, noDate = false, noTime = false) {
+    if (noDate || !date || !date.length) {
+        return undefined;
+    }
+    const time = getTime(value);
+    if (noTime) {
+        return moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD');
+    }
+    return moment(date + ' ' + time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm');
+}
+function setTime(time, value, noDate = false, noTime = false) {
+    if (noTime || !time || !time.length) {
+        return undefined;
+    }
+    let date = getDate(value);
+    if (noDate) {
+        return moment(time, 'HH:mm').format('HH:mm');
+    }
+    if (!date) {
+        // If no date is yet set default to today
+        date = moment().format('YYYY-MM-DD');
+    }
+    return moment(date + ' ' + time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm');
+}
+
 var script$a = {
   props: {
-    label: {
+    value: {
       type: String,
-      default: undefined
+      required: true
+    },
+    noTime: {
+      type: Boolean,
+      default: false
+    },
+    noDate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    date: {
+      get() {
+        return getDate(this.value);
+      },
+
+      set(date) {
+        date = setDate(date, this.value, this.noDate, this.noTime);
+
+        if (date) {
+          this.$emit('input', date);
+        }
+      }
+
     },
-    // eslint-disable-next-line
-    value: {}
+    time: {
+      get() {
+        return getTime(this.value);
+      },
+
+      set(time) {
+        time = setTime(time, this.value, this.noDate, this.noTime);
+
+        if (time) {
+          this.$emit('input', time);
+        }
+      }
+
+    }
   }
 };
 
@@ -71050,6 +71233,8 @@ var script$a = {
 const __vue_script__$a = script$a;
 
 /* template */
+var __vue_render__$9 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-input-group',[(!_vm.noDate)?_c('b-form-input',{staticClass:"d-inline w-50",attrs:{"type":"date"},model:{value:(_vm.date),callback:function ($$v) {_vm.date=$$v;},expression:"date"}}):_vm._e(),_vm._v(" "),(!_vm.noTime)?_c('b-form-input',{staticClass:"d-inline w-50",attrs:{"type":"time"},model:{value:(_vm.time),callback:function ($$v) {_vm.time=$$v;},expression:"time"}}):_vm._e()],1)};
+var __vue_staticRenderFns__$9 = [];
 
   /* style */
   const __vue_inject_styles__$b = undefined;
@@ -71058,7 +71243,7 @@ const __vue_script__$a = script$a;
   /* module identifier */
   const __vue_module_identifier__$b = undefined;
   /* functional template */
-  const __vue_is_functional_template__$b = undefined;
+  const __vue_is_functional_template__$b = false;
   /* style inject */
   
   /* style inject SSR */
@@ -71068,7 +71253,7 @@ const __vue_script__$a = script$a;
 
   
   const __vue_component__$b = /*#__PURE__*/normalizeComponent(
-    {},
+    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
     __vue_inject_styles__$b,
     __vue_script__$a,
     __vue_scope_id__$b,
@@ -71080,123 +71265,110 @@ const __vue_script__$a = script$a;
     undefined
   );
 
+//
 var script$b = {
-  extends: __vue_component__$b,
+  components: {
+    Draggable
+  },
   props: {
-    noTime: {
-      type: Boolean,
-      default: false
+    value: {
+      type: String,
+      required: true
     },
-    noDate: {
+    fields: {
+      type: Array,
+      required: true
+    },
+    labels: {
+      type: Object,
+      required: true
+    },
+    allowTextInput: {
       type: Boolean,
       default: false
     }
   },
+
+  data() {
+    return {
+      items: [],
+      textInput: false
+    };
+  },
+
   computed: {
-    date: {
+    presortValue: {
       get() {
-        return this.getDate();
+        return this.value;
       },
 
-      set(d) {
-        this.setDate(d);
+      set(value) {
+        this.$emit('input', value);
       }
 
     },
-    time: {
-      get() {
-        return this.getTime();
-      },
 
-      set(t) {
-        this.setTime(t);
-      }
+    sortDirections() {
+      return [{
+        value: false,
+        text: this.labels.ascending
+      }, {
+        value: true,
+        text: this.labels.descending
+      }];
+    },
 
+    sortedFields() {
+      return [...this.fields.sort((a, b) => a.label.localeCompare(b.label))];
     }
-  },
-  methods: {
-    getTime() {
-      if (!this.value) {
-        return undefined;
-      }
-
-      let dt = this.value.split(' ');
 
-      if (dt.length > 1) {
-        return dt[1]; // we only want the time part
-      } else if (dt.length === 1) {
-        // If we time is in the value
-        if (dt[0].indexOf(':') > -1) {
-          return dt[0];
-        }
-      }
-    },
+  },
+  watch: {
+    value: {
+      immediate: true,
 
-    setTime(t) {
-      if (this.noTime || !t || !t.length) {
-        return;
-      }
+      handler(value) {
+        if (value) {
+          const sort = value.includes(',') ? value.split(',') : [value];
+          this.items = sort.map(field => {
+            let descending = false;
 
-      let tm = moment();
-      let date = this.getDate();
+            if (field.includes(' ')) {
+              field = field.split(' ')[0];
+              descending = true;
+            }
 
-      if (this.noDate) {
-        tm = moment(t, 'HH:mm');
-        tm = tm.format('HH:mm');
-      } else {
-        if (!date) {
-          // If no date is yet set default to today
-          date = moment().format('YYYY-MM-DD');
+            return {
+              field,
+              descending: !!descending
+            };
+          });
+        } else {
+          this.items = [{
+            field: undefined,
+            descending: false
+          }];
         }
-
-        tm = moment(date + ' ' + t, 'YYYY-MM-DD HH:mm');
-        tm = tm.format('YYYY-MM-DD HH:mm');
       }
 
-      this.$emit('input', tm);
     },
+    items: {
+      deep: true,
 
-    getDate() {
-      if (!this.value) {
-        return undefined;
-      }
-
-      if (this.value === 'Invalid date') {
-        // Make sure this weird value does not cause us problems
-        return undefined;
-      }
-
-      let dt = this.value.split(' ');
-
-      if (dt.length > 1) {
-        return dt[0]; // we only want the date part
-      } else if (dt.length === 1) {
-        // If date is in the value
-        if (dt[0].indexOf('-') > -1) {
-          return dt[0];
+      handler(items = [], oldItems = undefined) {
+        if (oldItems) {
+          this.$emit('input', items.filter(({
+            field
+          }) => field).map(({
+            field,
+            descending
+          }) => {
+            return descending ? `${field} DESC` : field;
+          }).join(','));
         }
       }
-    },
 
-    setDate(d) {
-      if (this.noDate || !d || !d.length) {
-        return;
-      }
-
-      let dm = moment();
-      const time = this.getTime();
-
-      if (this.noTime) {
-        dm = moment(d, 'YYYY-MM-DD');
-        dm = dm.format('YYYY-MM-DD');
-      } else {
-        dm = moment(d + ' ' + time, 'YYYY-MM-DD HH:mm');
-        dm = dm.format('YYYY-MM-DD HH:mm');
-      }
-
-      this.$emit('input', dm);
     }
-
   }
 };
 
@@ -71204,8 +71376,8 @@ var script$b = {
 const __vue_script__$b = script$b;
 
 /* template */
-var __vue_render__$9 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[(!_vm.noDate)?_c('b-form-input',{staticClass:"d-inline w-50",attrs:{"type":"date"},model:{value:(_vm.date),callback:function ($$v) {_vm.date=$$v;},expression:"date"}}):_vm._e(),_vm._v(" "),(!_vm.noTime)?_c('b-form-input',{staticClass:"d-inline w-50",attrs:{"type":"time"},model:{value:(_vm.time),callback:function ($$v) {_vm.time=$$v;},expression:"time"}}):_vm._e()],1)};
-var __vue_staticRenderFns__$9 = [];
+var __vue_render__$a = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(!_vm.textInput)?_c('draggable',{attrs:{"list":_vm.items,"group":"sort","handle":".grab"},on:{"update:list":function($event){_vm.items=$event;}}},_vm._l((_vm.items),function(column,index){return _c('b-form-row',{key:index,staticClass:"mb-1"},[_c('b-col',{staticClass:"d-flex align-items-center justify-content-center",attrs:{"cols":"1"}},[_c('font-awesome-icon',{staticClass:"grab text-grey",attrs:{"icon":['fas', 'bars']}})],1),_vm._v(" "),_c('b-col',{attrs:{"cols":"5"}},[_c('b-form-select',{staticClass:"rounded",attrs:{"options":_vm.fields,"text-field":"label","value-field":"name"},scopedSlots:_vm._u([{key:"first",fn:function(){return [_c('b-form-select-option',{attrs:{"value":undefined,"disabled":""}},[_vm._v("\n              "+_vm._s(_vm.labels.none)+"\n            ")])]},proxy:true}],null,true),model:{value:(column.field),callback:function ($$v) {_vm.$set(column, "field", $$v);},expression:"column.field"}})],1),_vm._v(" "),_c('b-col',{staticClass:"d-flex align-items-center justify-content-around",attrs:{"cols":"6"}},[_c('b-form-radio-group',{attrs:{"options":_vm.sortDirections,"buttons":"","size":"sm","button-variant":"outline-primary"},model:{value:(column.descending),callback:function ($$v) {_vm.$set(column, "descending", $$v);},expression:"column.descending"}}),_vm._v(" "),_c('c-input-confirm',{attrs:{"variant":"link","size":"lg","button-class":"text-dark px-0"},on:{"confirmed":function($event){return _vm.items.splice(index, 1)}}})],1)],1)}),1):_c('div',[_c('b-form-textarea',{attrs:{"placeholder":_vm.labels.placeholder},model:{value:(_vm.presortValue),callback:function ($$v) {_vm.presortValue=$$v;},expression:"presortValue"}}),_vm._v(" "),_c('b-form-text',[_vm._v("\n      "+_vm._s(_vm.labels.footnote)+"\n    ")])],1),_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center"},[(!_vm.textInput)?_c('b-button',{staticClass:"d-flex align-items-center px-0 text-decoration-none",attrs:{"variant":"link"},on:{"click":function($event){return _vm.items.push({ field: undefined, descending: false })}}},[_c('font-awesome-icon',{staticClass:"mr-1",attrs:{"icon":['fas', 'plus'],"size":"sm"}}),_vm._v("\n      "+_vm._s(_vm.labels.add)+"\n    ")],1):_vm._e(),_vm._v(" "),(_vm.allowTextInput)?_c('b-button',{staticClass:"text-decoration-none ml-auto",attrs:{"variant":"link","size":"sm"},on:{"click":function($event){_vm.textInput = !_vm.textInput;}}},[_vm._v("\n      "+_vm._s(_vm.labels.toggleInput)+"\n    ")]):_vm._e()],1)],1)};
+var __vue_staticRenderFns__$a = [];
 
   /* style */
   const __vue_inject_styles__$c = undefined;
@@ -71224,7 +71396,7 @@ var __vue_staticRenderFns__$9 = [];
 
   
   const __vue_component__$c = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
     __vue_inject_styles__$c,
     __vue_script__$b,
     __vue_scope_id__$c,
@@ -71237,45 +71409,24 @@ var __vue_staticRenderFns__$9 = [];
   );
 
 var script$c = {
-  extends: __vue_component__$b,
   props: {
-    simple: Boolean,
-    options: {
-      type: Array,
-      default: () => []
+    value: {
+      type: String,
+      required: true
     },
-    optionsAppend: {
-      type: Array,
-      default: () => []
+    simple: {
+      type: Boolean,
+      default: false
     }
   },
-
-  data() {
-    return {
-      intervalOptions: [// @todo somehow add to i18
-      {
-        text: 'Every Minute',
-        value: '0 * * * * * *'
-      }]
-    };
-  },
-
   computed: {
-    cOptions() {
-      if (this.options.length) {
-        return this.options;
-      }
-
-      return this.intervalOptions.concat(this.optionsAppend);
-    },
-
-    cValue: {
+    cronValue: {
       get() {
         return this.value;
       },
 
-      set(v) {
-        this.$emit('input', v);
+      set(value) {
+        this.$emit('input', value);
       }
 
     }
@@ -71286,8 +71437,8 @@ var script$c = {
 const __vue_script__$c = script$c;
 
 /* template */
-var __vue_render__$a = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-select',{staticClass:"d-inline",class:{ 'w-50': !_vm.simple },attrs:{"options":_vm.cOptions},model:{value:(_vm.cValue),callback:function ($$v) {_vm.cValue=$$v;},expression:"cValue"}}),_vm._v(" "),(!_vm.simple)?_c('b-form-input',{staticClass:"d-inline w-50",attrs:{"type":"text"},model:{value:(_vm.cValue),callback:function ($$v) {_vm.cValue=$$v;},expression:"cValue"}}):_vm._e()],1)};
-var __vue_staticRenderFns__$a = [];
+var __vue_render__$b = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div")};
+var __vue_staticRenderFns__$b = [];
 
   /* style */
   const __vue_inject_styles__$d = undefined;
@@ -71306,7 +71457,7 @@ var __vue_staticRenderFns__$a = [];
 
   
   const __vue_component__$d = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
     __vue_inject_styles__$d,
     __vue_script__$c,
     __vue_scope_id__$d,
@@ -71431,8 +71582,8 @@ var script$e = {
 const __vue_script__$e = script$e;
 
 /* template */
-var __vue_render__$b = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":("color-popover-" + (_vm.format.type))}},[_c('span',{staticClass:"icon",class:_vm.typeStyle},[_vm._v("A")])]),_vm._v(" "),_c('b-popover',{ref:"popover",attrs:{"delay":0,"no-fade":"","custom-class":"tcl-popover","triggers":"focus","target":("color-popover-" + (_vm.format.type)),"placement":"bottom","container":null}},[_c('swatches',{attrs:{"swatch-size":"14","colors":"text-advanced","inline":""},on:{"input":function($event){return _vm.onClick(_vm.format.type, { color: $event })}}})],1)],1)};
-var __vue_staticRenderFns__$b = [];
+var __vue_render__$c = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":("color-popover-" + (_vm.format.type))}},[_c('span',{staticClass:"icon",class:_vm.typeStyle},[_vm._v("A")])]),_vm._v(" "),_c('b-popover',{ref:"popover",attrs:{"delay":0,"no-fade":"","custom-class":"tcl-popover","triggers":"focus","target":("color-popover-" + (_vm.format.type)),"placement":"bottom","container":null}},[_c('swatches',{attrs:{"swatch-size":"14","colors":"text-advanced","inline":""},on:{"input":function($event){return _vm.onClick(_vm.format.type, { color: $event })}}})],1)],1)};
+var __vue_staticRenderFns__$c = [];
 
   /* style */
   const __vue_inject_styles__$f = function (inject) {
@@ -71454,7 +71605,7 @@ var __vue_staticRenderFns__$b = [];
 
   
   const __vue_component__$f = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
+    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
     __vue_inject_styles__$f,
     __vue_script__$e,
     __vue_scope_id__$f,
@@ -71480,8 +71631,8 @@ var script$f = {
 const __vue_script__$f = script$f;
 
 /* template */
-var __vue_render__$c = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link"},on:{"click":function($event){return _vm.onClick(_vm.format.type, _vm.format.attrs)}}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n      "+_vm._s(_vm.format.label)+"\n    ")])],1)])};
-var __vue_staticRenderFns__$c = [];
+var __vue_render__$d = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link"},on:{"click":function($event){return _vm.onClick(_vm.format.type, _vm.format.attrs)}}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n      "+_vm._s(_vm.format.label)+"\n    ")])],1)])};
+var __vue_staticRenderFns__$d = [];
 
   /* style */
   const __vue_inject_styles__$g = undefined;
@@ -71500,7 +71651,7 @@ var __vue_staticRenderFns__$c = [];
 
   
   const __vue_component__$g = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
+    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
     __vue_inject_styles__$g,
     __vue_script__$f,
     __vue_scope_id__$g,
@@ -71532,7 +71683,8 @@ var script$g = {
     return {
       visible: false,
       attrs: {
-        href: null
+        href: null,
+        target: '_self'
       }
     };
   },
@@ -71587,8 +71739,8 @@ var script$g = {
 const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$d = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"link-popover-container"}},[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":"link-popover"},on:{"click":_vm.showPopover}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[_c('font-awesome-icon',{attrs:{"icon":"link"}})],1)]),_vm._v(" "),(_vm.currentValue)?_c('b-popover',{ref:"popover",attrs:{"triggers":"focus","target":"link-popover","placement":"auto","show":_vm.visible,"container":"link-popover-container"},on:{"update:show":function($event){_vm.visible=$event;}}},[_c('b-input-group',[_c('b-form-input',{attrs:{"type":"url","autofocus":"","state":_vm.urlValid ? null : false,"placeholder":_vm.labels.urlPlaceholder},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.link.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.close.apply(null, arguments)}]},model:{value:(_vm.attrs.href),callback:function ($$v) {_vm.$set(_vm.attrs, "href", $$v);},expression:"attrs.href"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-button',{attrs:{"disabled":!_vm.urlValid,"variant":"outline-success"},on:{"click":_vm.link}},[_vm._v("\n          "+_vm._s(_vm.labels.ok)+"\n        ")])],1)],1)],1):_vm._e()],1)};
-var __vue_staticRenderFns__$d = [];
+var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"link-popover-container"}},[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":"link-popover"},on:{"click":_vm.showPopover}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[_c('font-awesome-icon',{attrs:{"icon":"link"}})],1)]),_vm._v(" "),(_vm.currentValue)?_c('b-popover',{ref:"popover",attrs:{"triggers":"focus","target":"link-popover","placement":"auto","show":_vm.visible,"container":"link-popover-container"},on:{"update:show":function($event){_vm.visible=$event;}}},[_c('b-input-group',[_c('b-form-input',{attrs:{"type":"url","autofocus":"","state":_vm.urlValid ? null : false,"placeholder":_vm.labels.urlPlaceholder},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.link.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.close.apply(null, arguments)}]},model:{value:(_vm.attrs.href),callback:function ($$v) {_vm.$set(_vm.attrs, "href", $$v);},expression:"attrs.href"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-button',{attrs:{"disabled":!_vm.urlValid,"variant":"outline-success"},on:{"click":_vm.link}},[_vm._v("\n          "+_vm._s(_vm.labels.ok)+"\n        ")])],1),_vm._v(" "),_c('b-checkbox',{staticClass:"py-1",attrs:{"value":"_blank","unchecked-value":"_self"},model:{value:(_vm.attrs.target),callback:function ($$v) {_vm.$set(_vm.attrs, "target", $$v);},expression:"attrs.target"}},[_vm._v("\n          "+_vm._s(_vm.labels.openLinkInNewTab)+"\n      ")])],1)],1):_vm._e()],1)};
+var __vue_staticRenderFns__$e = [];
 
   /* style */
   const __vue_inject_styles__$h = undefined;
@@ -71607,7 +71759,7 @@ var __vue_staticRenderFns__$d = [];
 
   
   const __vue_component__$h = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
+    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
     __vue_inject_styles__$h,
     __vue_script__$g,
     __vue_scope_id__$h,
@@ -78173,8 +78325,9 @@ class Link extends tiptapExtensions.Link {
   get schema() {
     const base = super.schema;
     return { ...base,
-      toDOM: node => ['a', { ...node.attrs,
+      toDOM: node => ['a', {
         target: '_blank',
+        ...node.attrs,
         rel: 'noopener noreferrer nofollow'
       }, 0]
     };
@@ -78603,8 +78756,8 @@ var script$i = {
 const __vue_script__$i = script$i;
 
 /* template */
-var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link"},on:{"click":function($event){return _vm.onClick(_vm.format.type, _vm.format.attrs)}}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n      "+_vm._s(_vm.format.label)+"\n    ")])],1)])};
-var __vue_staticRenderFns__$e = [];
+var __vue_render__$f = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link"},on:{"click":function($event){return _vm.onClick(_vm.format.type, _vm.format.attrs)}}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n      "+_vm._s(_vm.format.label)+"\n    ")])],1)])};
+var __vue_staticRenderFns__$f = [];
 
   /* style */
   const __vue_inject_styles__$j = undefined;
@@ -78623,7 +78776,7 @@ var __vue_staticRenderFns__$e = [];
 
   
   const __vue_component__$j = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
+    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
     __vue_inject_styles__$j,
     __vue_script__$i,
     __vue_scope_id__$j,
@@ -78713,8 +78866,8 @@ var script$j = {
 const __vue_script__$j = script$j;
 
 /* template */
-var __vue_render__$f = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',{attrs:{"menu-class":"text-center","variant":"link"}},[_c('template',{slot:"button-content"},[_c('span',{staticClass:"text-dark font-weight-bold"},[_c('span',{class:_vm.rootActiveClasses()},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n          "+_vm._s(_vm.format.label)+"\n        ")])],1)])]),_vm._v(" "),_vm._l((_vm.format.variants),function(v){return _c('b-dropdown-item',{key:v.variant,on:{"click":function($event){return _vm.dispatchTransaction(v)}}},[_c('b-button',{staticClass:"text-dark font-weight-bold",attrs:{"variant":"link"}},[_c('span',{class:_vm.activeClasses(v.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":v.icon}}):_c('span',[_vm._v("\n          "+_vm._s(v.label)+"\n        ")])],1)])],1)})],2)};
-var __vue_staticRenderFns__$f = [];
+var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',{attrs:{"menu-class":"text-center","variant":"link"}},[_c('template',{slot:"button-content"},[_c('span',{staticClass:"text-dark font-weight-bold"},[_c('span',{class:_vm.rootActiveClasses()},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":_vm.format.icon}}):_c('span',[_vm._v("\n          "+_vm._s(_vm.format.label)+"\n        ")])],1)])]),_vm._v(" "),_vm._l((_vm.format.variants),function(v){return _c('b-dropdown-item',{key:v.variant,on:{"click":function($event){return _vm.dispatchTransaction(v)}}},[_c('b-button',{staticClass:"text-dark font-weight-bold",attrs:{"variant":"link"}},[_c('span',{class:_vm.activeClasses(v.attrs)},[(_vm.format.icon)?_c('font-awesome-icon',{attrs:{"icon":v.icon}}):_c('span',[_vm._v("\n          "+_vm._s(v.label)+"\n        ")])],1)])],1)})],2)};
+var __vue_staticRenderFns__$g = [];
 
   /* style */
   const __vue_inject_styles__$k = undefined;
@@ -78733,7 +78886,7 @@ var __vue_staticRenderFns__$f = [];
 
   
   const __vue_component__$k = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
+    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
     __vue_inject_styles__$k,
     __vue_script__$j,
     __vue_scope_id__$k,
@@ -78842,8 +78995,8 @@ var script$k = {
 const __vue_script__$k = script$k;
 
 /* template */
-var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-flex flex-wrap"},[_vm._l((_vm.formats),function(f,i){return _c(_vm.getItem(f),_vm._b({key:("" + (f.name) + i + "}"),tag:"component",attrs:{"format":f,"labels":_vm.labels,"current-value":_vm.currentValue},on:{"click":function($event){(_vm.commands[$event.type])($event.attrs);}}},'component',_vm.$props,false))}),_vm._v(" "),_c('b-button',{staticClass:"text-dark font-weight-bold",attrs:{"variant":"link"},on:{"click":_vm.removeMarks}},[_c('font-awesome-icon',{attrs:{"icon":"remove-format"}})],1)],2)};
-var __vue_staticRenderFns__$g = [];
+var __vue_render__$h = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-flex flex-wrap"},[_vm._l((_vm.formats),function(f,i){return _c(_vm.getItem(f),_vm._b({key:("" + (f.name) + i + "}"),tag:"component",attrs:{"format":f,"labels":_vm.labels,"current-value":_vm.currentValue},on:{"click":function($event){(_vm.commands[$event.type])($event.attrs);}}},'component',_vm.$props,false))}),_vm._v(" "),_c('b-button',{staticClass:"text-dark font-weight-bold",attrs:{"variant":"link"},on:{"click":_vm.removeMarks}},[_c('font-awesome-icon',{attrs:{"icon":"remove-format"}})],1)],2)};
+var __vue_staticRenderFns__$h = [];
 
   /* style */
   const __vue_inject_styles__$l = undefined;
@@ -78862,7 +79015,7 @@ var __vue_staticRenderFns__$g = [];
 
   
   const __vue_component__$l = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
+    { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
     __vue_inject_styles__$l,
     __vue_script__$k,
     __vue_scope_id__$l,
@@ -78968,13 +79121,13 @@ var script$l = {
 const __vue_script__$l = script$l;
 
 /* template */
-var __vue_render__$h = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card',{staticClass:"editor rt-content",attrs:{"no-body":""}},[(_vm.editor)?[_c('b-card-header',{attrs:{"header-class":"p-0 rounded-sm"}},[_c('editor-menu-bar',{attrs:{"editor":_vm.editor},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var __vue_render__$i = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card',{staticClass:"editor rt-content",attrs:{"no-body":""}},[(_vm.editor)?[_c('b-card-header',{attrs:{"header-class":"p-0 rounded-sm"}},[_c('editor-menu-bar',{attrs:{"editor":_vm.editor},scopedSlots:_vm._u([{key:"default",fn:function(ref){
 var commands = ref.commands;
 var isActive = ref.isActive;
 var getMarkAttrs = ref.getMarkAttrs;
 var getNodeAttrs = ref.getNodeAttrs;
 return [_c('r-toolbar',{attrs:{"editor":_vm.editor,"formats":_vm.toolbar,"commands":commands,"is-active":isActive,"get-mark-attrs":getMarkAttrs,"get-node-attrs":getNodeAttrs,"labels":_vm.labels,"current-value":_vm.currentValue}})]}}],null,false,2342935495)})],1),_vm._v(" "),_c('b-card-body',[_c('editor-content',{staticClass:"editor__content",attrs:{"editor":_vm.editor}})],1)]:_vm._e()],2)};
-var __vue_staticRenderFns__$h = [];
+var __vue_staticRenderFns__$i = [];
 
   /* style */
   const __vue_inject_styles__$m = undefined;
@@ -78993,7 +79146,7 @@ var __vue_staticRenderFns__$h = [];
 
   
   const __vue_component__$m = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
+    { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
     __vue_inject_styles__$m,
     __vue_script__$l,
     __vue_scope_id__$m,
@@ -79080,8 +79233,8 @@ var script$m = {
 const __vue_script__$m = script$m;
 
 /* template */
-var __vue_render__$i = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.link)?_c('a',{staticClass:"pointer",on:{"click":_vm.onClick}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'lock']}})],1):_c('b-button',{attrs:{"variant":_vm.buttonVariant},on:{"click":_vm.onClick}},[_vm._t("default",function(){return [(_vm.showButtonIcon)?_c('font-awesome-icon',{attrs:{"icon":['fas', 'lock']}}):_vm._e(),_vm._v(" "),(_vm.buttonLabel)?_c('span',[_vm._v("\n      "+_vm._s(_vm.buttonLabel)+"\n    ")]):_vm._e()]})],2)};
-var __vue_staticRenderFns__$i = [];
+var __vue_render__$j = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.link)?_c('a',{staticClass:"pointer",on:{"click":_vm.onClick}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'lock']}})],1):_c('b-button',{attrs:{"variant":_vm.buttonVariant},on:{"click":_vm.onClick}},[_vm._t("default",function(){return [(_vm.showButtonIcon)?_c('font-awesome-icon',{attrs:{"icon":['fas', 'lock']}}):_vm._e(),_vm._v(" "),(_vm.buttonLabel)?_c('span',[_vm._v("\n      "+_vm._s(_vm.buttonLabel)+"\n    ")]):_vm._e()]})],2)};
+var __vue_staticRenderFns__$j = [];
 
   /* style */
   const __vue_inject_styles__$n = function (inject) {
@@ -79102,7 +79255,7 @@ var __vue_staticRenderFns__$i = [];
 
   
   const __vue_component__$n = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
+    { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
     __vue_inject_styles__$n,
     __vue_script__$m,
     __vue_scope_id__$n,
@@ -79168,8 +79321,8 @@ var script$n = {
 const __vue_script__$n = script$n;
 
 /* template */
-var __vue_render__$j = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio-group',{attrs:{"buttons":"","disabled":!_vm.enabled,"button-variant":_vm.variant,"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-var __vue_staticRenderFns__$j = [];
+var __vue_render__$k = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio-group',{attrs:{"buttons":"","disabled":!_vm.enabled,"button-variant":_vm.variant,"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
+var __vue_staticRenderFns__$k = [];
 
   /* style */
   const __vue_inject_styles__$o = undefined;
@@ -79188,7 +79341,7 @@ var __vue_staticRenderFns__$j = [];
 
   
   const __vue_component__$o = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
+    { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
     __vue_inject_styles__$o,
     __vue_script__$n,
     __vue_scope_id__$o,
@@ -79271,8 +79424,8 @@ var script$o = {
 const __vue_script__$o = script$o;
 
 /* template */
-var __vue_render__$k = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-row',{staticClass:"mb-lg-1",attrs:{"no-gutters":""}},[_c('b-col',{attrs:{"cols":"12","lg":"6","order":"2","order-lg":"1"}},[_c('access',{attrs:{"access":_vm.access,"current":_vm.current,"enabled":_vm.enabled},on:{"update":_vm.onUpdate}}),_vm._v(" "),_c('b-button',{directives:[{name:"show",rawName:"v-show",value:(_vm.isChanged),expression:"isChanged"}],staticClass:"pl-0",attrs:{"variant":"link"},on:{"click":_vm.onReset}},[_vm._v("\n      "+_vm._s(_vm.$t('ui.reset-back', {current: _vm.current}))+"\n    ")])],1),_vm._v(" "),_c('b-col',{staticClass:"mb-lg-4 text-wrap",attrs:{"cols":"12","lg":"6","order":"1","order-lg":"2"}},[_c('b',{domProps:{"innerHTML":_vm._s(_vm.title || (_vm.operation + " on " + _vm.resource))}}),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.description || ' '))])])],1)};
-var __vue_staticRenderFns__$k = [];
+var __vue_render__$l = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-row',{staticClass:"mb-lg-1",attrs:{"no-gutters":""}},[_c('b-col',{attrs:{"cols":"12","lg":"6","order":"2","order-lg":"1"}},[_c('access',{attrs:{"access":_vm.access,"current":_vm.current,"enabled":_vm.enabled},on:{"update":_vm.onUpdate}}),_vm._v(" "),_c('b-button',{directives:[{name:"show",rawName:"v-show",value:(_vm.isChanged),expression:"isChanged"}],staticClass:"pl-0",attrs:{"variant":"link"},on:{"click":_vm.onReset}},[_vm._v("\n      "+_vm._s(_vm.$t('ui.reset-back', {current: _vm.current}))+"\n    ")])],1),_vm._v(" "),_c('b-col',{staticClass:"mb-lg-4 text-wrap",attrs:{"cols":"12","lg":"6","order":"1","order-lg":"2"}},[_c('b',{domProps:{"innerHTML":_vm._s(_vm.title || (_vm.operation + " on " + _vm.resource))}}),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.description || ' '))])])],1)};
+var __vue_staticRenderFns__$l = [];
 
   /* style */
   const __vue_inject_styles__$p = undefined;
@@ -79291,7 +79444,7 @@ var __vue_staticRenderFns__$k = [];
 
   
   const __vue_component__$p = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
+    { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
     __vue_inject_styles__$p,
     __vue_script__$o,
     __vue_scope_id__$p,
@@ -79335,8 +79488,8 @@ var script$p = {
 const __vue_script__$p = script$p;
 
 /* template */
-var __vue_render__$l = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-container',_vm._l((_vm.rules),function(p,i){return _c('rule',_vm._b({key:p.resource + p.operation,class:{ 'mt-4': i > 0 },on:{"update":_vm.onUpdate}},'rule',p,false))}),1)};
-var __vue_staticRenderFns__$l = [];
+var __vue_render__$m = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-container',_vm._l((_vm.rules),function(p,i){return _c('rule',_vm._b({key:p.resource + p.operation,class:{ 'mt-4': i > 0 },on:{"update":_vm.onUpdate}},'rule',p,false))}),1)};
+var __vue_staticRenderFns__$m = [];
 
   /* style */
   const __vue_inject_styles__$q = undefined;
@@ -79355,7 +79508,7 @@ var __vue_staticRenderFns__$l = [];
 
   
   const __vue_component__$q = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
+    { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
     __vue_inject_styles__$q,
     __vue_script__$p,
     __vue_scope_id__$q,
@@ -79609,8 +79762,8 @@ var script$q = {
 const __vue_script__$q = script$q;
 
 /* template */
-var __vue_render__$m = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form',{on:{"submit":function($event){$event.preventDefault();return _vm.onSubmit.apply(null, arguments)}}},[_c('b-row',[_c('b-col',{staticClass:"role-list",attrs:{"cols":"12","lg":"3"}},[_c('b-list-group',{staticClass:"d-none d-lg-block"},_vm._l((_vm.roles),function(r){return _c('b-list-group-item',{key:r.roleID,staticClass:"text-break pointer",attrs:{"active":r.roleID === _vm.currentRole.roleID,"active-class":"primary","variant":"outline-primary"},on:{"click":function($event){return _vm.onRoleChange(r)}}},[_vm._v("\n          "+_vm._s(r.name || r.handle || r.roleID)+"\n        ")])}),1),_vm._v(" "),_c('vue-select',{key:"roleID",staticClass:"mb-4 d-block d-lg-none",attrs:{"label":"name","clearable":false,"options":_vm.roles},on:{"input":_vm.onRoleChange},model:{value:(_vm.currentRole),callback:function ($$v) {_vm.currentRole=$$v;},expression:"currentRole"}})],1),_vm._v(" "),_c('b-col',{staticClass:"rule-list",attrs:{"cols":"12","lg":"9"}},[_c('rules',{attrs:{"rules":_vm.rules},on:{"update:rules":function($event){_vm.rules=$event;}}})],1)],1),_vm._v(" "),_c('b-row',{staticClass:"footer mt-3"},[_c('b-col',{staticClass:"rule-list text-right",attrs:{"cols":"9","offset":"3"}},[_c('b-button',{attrs:{"type":"submit","variant":"primary","disabled":_vm.disabled}},[_vm._v("\n        "+_vm._s(_vm.$t('permissions:ui.save-changes'))+"\n      ")])],1)],1)],1)};
-var __vue_staticRenderFns__$m = [];
+var __vue_render__$n = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form',{on:{"submit":function($event){$event.preventDefault();return _vm.onSubmit.apply(null, arguments)}}},[_c('b-row',[_c('b-col',{staticClass:"role-list",attrs:{"cols":"12","lg":"3"}},[_c('b-list-group',{staticClass:"d-none d-lg-block"},_vm._l((_vm.roles),function(r){return _c('b-list-group-item',{key:r.roleID,staticClass:"text-break pointer",attrs:{"active":r.roleID === _vm.currentRole.roleID,"active-class":"primary","variant":"outline-primary"},on:{"click":function($event){return _vm.onRoleChange(r)}}},[_vm._v("\n          "+_vm._s(r.name || r.handle || r.roleID)+"\n        ")])}),1),_vm._v(" "),_c('vue-select',{key:"roleID",staticClass:"mb-4 d-block d-lg-none",attrs:{"label":"name","clearable":false,"options":_vm.roles},on:{"input":_vm.onRoleChange},model:{value:(_vm.currentRole),callback:function ($$v) {_vm.currentRole=$$v;},expression:"currentRole"}})],1),_vm._v(" "),_c('b-col',{staticClass:"rule-list",attrs:{"cols":"12","lg":"9"}},[_c('rules',{attrs:{"rules":_vm.rules},on:{"update:rules":function($event){_vm.rules=$event;}}})],1)],1),_vm._v(" "),_c('b-row',{staticClass:"footer mt-3"},[_c('b-col',{staticClass:"rule-list text-right",attrs:{"cols":"9","offset":"3"}},[_c('b-button',{attrs:{"type":"submit","variant":"primary","disabled":_vm.disabled}},[_vm._v("\n        "+_vm._s(_vm.$t('permissions:ui.save-changes'))+"\n      ")])],1)],1)],1)};
+var __vue_staticRenderFns__$n = [];
 
   /* style */
   const __vue_inject_styles__$r = function (inject) {
@@ -79631,7 +79784,7 @@ var __vue_staticRenderFns__$m = [];
 
   
   const __vue_component__$r = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
+    { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
     __vue_inject_styles__$r,
     __vue_script__$q,
     __vue_scope_id__$r,
@@ -79748,8 +79901,8 @@ var script$r = {
 const __vue_script__$r = script$r;
 
 /* template */
-var __vue_render__$n = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-modal',{staticClass:"overflow-hidden",attrs:{"hide-footer":"","size":"xl","title":_vm.translatedTitle,"lazy":"","scrollable":""},on:{"hide":_vm.onHide},model:{value:(_vm.showModal),callback:function ($$v) {_vm.showModal=$$v;},expression:"showModal"}},[(_vm.resource)?_c('c-permissions-form',{staticClass:"h-100",attrs:{"resource":_vm.resource,"target":_vm.target,"all-specific":_vm.allSpecific}}):_vm._e()],1)],1)};
-var __vue_staticRenderFns__$n = [];
+var __vue_render__$o = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-modal',{staticClass:"overflow-hidden",attrs:{"hide-footer":"","size":"xl","title":_vm.translatedTitle,"lazy":"","scrollable":""},on:{"hide":_vm.onHide},model:{value:(_vm.showModal),callback:function ($$v) {_vm.showModal=$$v;},expression:"showModal"}},[(_vm.resource)?_c('c-permissions-form',{staticClass:"h-100",attrs:{"resource":_vm.resource,"target":_vm.target,"all-specific":_vm.allSpecific}}):_vm._e()],1)],1)};
+var __vue_staticRenderFns__$o = [];
 
   /* style */
   const __vue_inject_styles__$s = undefined;
@@ -79768,7 +79921,7 @@ var __vue_staticRenderFns__$n = [];
 
   
   const __vue_component__$s = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
+    { render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
     __vue_inject_styles__$s,
     __vue_script__$r,
     __vue_scope_id__$s,
@@ -79871,8 +80024,8 @@ var script$t = {
 const __vue_script__$t = script$t;
 
 /* template */
-var __vue_render__$o = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('div',{staticClass:"text-center m-2"},[_c('b-button',{attrs:{"variant":_vm.pVal('buttonVariant', 'primary'),"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { confirmed: _vm.pRaw('buttonValue', true, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('buttonLabel', 'OK'))+"\n    ")])],1)])};
-var __vue_staticRenderFns__$o = [];
+var __vue_render__$p = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('div',{staticClass:"text-center m-2"},[_c('b-button',{attrs:{"variant":_vm.pVal('buttonVariant', 'primary'),"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { confirmed: _vm.pRaw('buttonValue', true, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('buttonLabel', 'OK'))+"\n    ")])],1)])};
+var __vue_staticRenderFns__$p = [];
 
   /* style */
   const __vue_inject_styles__$u = undefined;
@@ -79891,7 +80044,7 @@ var __vue_staticRenderFns__$o = [];
 
   
   const __vue_component__$u = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
+    { render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
     __vue_inject_styles__$u,
     __vue_script__$t,
     __vue_scope_id__$u,
@@ -79912,8 +80065,8 @@ var script$u = {
 const __vue_script__$u = script$u;
 
 /* template */
-var __vue_render__$p = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('div',{staticClass:"text-center m-2"},[_c('b-button',{attrs:{"variant":_vm.pVal('confirmButtonVariant', 'primary'),"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { value: _vm.pRaw('confirmButtonValue', true, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('confirmButtonLabel', 'Yes'))+"\n    ")]),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading,"variant":_vm.pVal('rejectButtonVariant', 'primary')},on:{"click":function($event){_vm.$emit('submit', { value: _vm.pRaw('rejectButtonValue', false, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('rejectButtonLabel', 'No'))+"\n    ")])],1)])};
-var __vue_staticRenderFns__$p = [];
+var __vue_render__$q = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('div',{staticClass:"text-center m-2"},[_c('b-button',{attrs:{"variant":_vm.pVal('confirmButtonVariant', 'primary'),"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { value: _vm.pRaw('confirmButtonValue', true, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('confirmButtonLabel', 'Yes'))+"\n    ")]),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading,"variant":_vm.pVal('rejectButtonVariant', 'primary')},on:{"click":function($event){_vm.$emit('submit', { value: _vm.pRaw('rejectButtonValue', false, 'Boolean') });}}},[_vm._v("\n      "+_vm._s(_vm.pVal('rejectButtonLabel', 'No'))+"\n    ")])],1)])};
+var __vue_staticRenderFns__$q = [];
 
   /* style */
   const __vue_inject_styles__$v = undefined;
@@ -79932,7 +80085,7 @@ var __vue_staticRenderFns__$p = [];
 
   
   const __vue_component__$v = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
+    { render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
     __vue_inject_styles__$v,
     __vue_script__$u,
     __vue_scope_id__$v,
@@ -79981,8 +80134,8 @@ var script$v = {
 const __vue_script__$v = script$v;
 
 /* template */
-var __vue_render__$q = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-input',{attrs:{"type":_vm.type,"disabled":_vm.loading},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading},on:{"click":function($event){return _vm.$emit('submit', { value: { '@value': _vm.value, '@type': 'String' }})}}},[_vm._v("\n    "+_vm._s(_vm.pVal('buttonLabel', 'Submit'))+"\n  ")])],1)};
-var __vue_staticRenderFns__$q = [];
+var __vue_render__$r = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-input',{attrs:{"type":_vm.type,"disabled":_vm.loading},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading},on:{"click":function($event){return _vm.$emit('submit', { value: { '@value': _vm.value, '@type': 'String' }})}}},[_vm._v("\n    "+_vm._s(_vm.pVal('buttonLabel', 'Submit'))+"\n  ")])],1)};
+var __vue_staticRenderFns__$r = [];
 
   /* style */
   const __vue_inject_styles__$w = undefined;
@@ -80001,7 +80154,7 @@ var __vue_staticRenderFns__$q = [];
 
   
   const __vue_component__$w = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
+    { render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
     __vue_inject_styles__$w,
     __vue_script__$v,
     __vue_scope_id__$w,
@@ -80031,8 +80184,8 @@ var script$w = {
 const __vue_script__$w = script$w;
 
 /* template */
-var __vue_render__$r = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{staticClass:"mb-0",domProps:{"innerHTML":_vm._s(_vm.message)}})])};
-var __vue_staticRenderFns__$r = [];
+var __vue_render__$s = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{staticClass:"mb-0",domProps:{"innerHTML":_vm._s(_vm.message)}})])};
+var __vue_staticRenderFns__$s = [];
 
   /* style */
   const __vue_inject_styles__$x = undefined;
@@ -80051,7 +80204,7 @@ var __vue_staticRenderFns__$r = [];
 
   
   const __vue_component__$x = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
+    { render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
     __vue_inject_styles__$x,
     __vue_script__$w,
     __vue_scope_id__$x,
@@ -80141,8 +80294,8 @@ var script$x = {
 const __vue_script__$x = script$x;
 
 /* template */
-var __vue_render__$s = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('b-form-group',{attrs:{"label":_vm.pVal('label', 'Input')}},[(_vm.type === 'select')?_c('b-form-select',{attrs:{"options":_vm.options,"disabled":_vm.loading,"multiple":_vm.multiple},scopedSlots:_vm._u([(!_vm.multiple)?{key:"first",fn:function(){return [_c('b-form-select-option',{attrs:{"value":undefined,"disabled":""}},[_vm._v("\n          -- Please select an option --\n        ")])]},proxy:true}:null],null,true),model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}}):_vm._e(),_vm._v(" "),(_vm.type === 'radio')?_c('b-form-radio-group',{attrs:{"disabled":_vm.loading,"options":_vm.options},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}}):_vm._e()],1),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { value: _vm.encodeValue() });}}},[_vm._v("\n    "+_vm._s(_vm.pVal('buttonLabel', 'Submit'))+"\n  ")])],1)};
-var __vue_staticRenderFns__$s = [];
+var __vue_render__$t = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),_c('b-form-group',{attrs:{"label":_vm.pVal('label', 'Input')}},[(_vm.type === 'select')?_c('b-form-select',{attrs:{"options":_vm.options,"disabled":_vm.loading,"multiple":_vm.multiple},scopedSlots:_vm._u([(!_vm.multiple)?{key:"first",fn:function(){return [_c('b-form-select-option',{attrs:{"value":undefined,"disabled":""}},[_vm._v("\n          -- Please select an option --\n        ")])]},proxy:true}:null],null,true),model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}}):_vm._e(),_vm._v(" "),(_vm.type === 'radio')?_c('b-form-radio-group',{attrs:{"disabled":_vm.loading,"options":_vm.options},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}}):_vm._e()],1),_vm._v(" "),_c('b-button',{attrs:{"disabled":_vm.loading},on:{"click":function($event){_vm.$emit('submit', { value: _vm.encodeValue() });}}},[_vm._v("\n    "+_vm._s(_vm.pVal('buttonLabel', 'Submit'))+"\n  ")])],1)};
+var __vue_staticRenderFns__$t = [];
 
   /* style */
   const __vue_inject_styles__$y = undefined;
@@ -80161,7 +80314,7 @@ var __vue_staticRenderFns__$s = [];
 
   
   const __vue_component__$y = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
+    { render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
     __vue_inject_styles__$y,
     __vue_script__$x,
     __vue_scope_id__$y,
@@ -80240,7 +80393,7 @@ const definitions = {
                 }
                 else {
                     // Resolve recordID
-                    if (pType(v, 'record') === 'String') {
+                    if (pType(v, 'record') === 'ID') {
                         recordID = record;
                     }
                     // Resolve namespaceID
@@ -80290,9 +80443,12 @@ const definitions = {
                 pageID = pp[0].pageID;
                 // @ts-ignore
                 if (this.$root.$options.name === 'compose') {
-                    let name = 'page.record.edit';
-                    if (!edit) {
-                        name = 'page.record';
+                    if (!edit && !recordID) {
+                        throw new Error('invalid record page prompt configuration');
+                    }
+                    let name = 'page.record';
+                    if (edit) {
+                        name += recordID ? '.edit' : '.create';
                     }
                     // If name and params match, make sure to refresh page instead of push
                     // @ts-ignore
@@ -80442,12 +80598,12 @@ var script$y = {
 const __vue_script__$y = script$y;
 
 /* template */
-var __vue_render__$t = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.toasts),function(ref){
+var __vue_render__$u = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.toasts),function(ref){
 var prompt = ref.prompt;
 var component = ref.component;
 var passive = ref.passive;
 return _c('b-toast',{key:'wfPromptToast-'+prompt.stateID,attrs:{"id":'wfPromptToast-'+prompt.stateID,"variant":_vm.pVal(prompt, 'variant', 'primary'),"visible":!_vm.isActive,"solid":"","no-auto-hide":!passive,"auto-hide-delay":_vm.pVal(prompt, 'timeout', _vm.defaultTimeout) * 1000,"no-close-button":!passive},scopedSlots:_vm._u([{key:"toast-title",fn:function(){return [_c('div',{staticClass:"d-flex flex-grow-1 align-items-baseline"},[_c('strong',{staticClass:"mr-auto"},[_vm._v(_vm._s(_vm.pVal(prompt, 'title', 'Workflow prompt')))]),_vm._v(" "),(!passive && _vm.active.length > 1)?_c('b-button',{attrs:{"variant":"link","size":"sm"},on:{"click":function($event){return _vm.activate(true)}}},[_vm._v("\n          "+_vm._s(_vm.active.length)+" waiting\n        ")]):_vm._e()],1)]},proxy:true}],null,true)},[_vm._v(" "),(component)?_c(component,{tag:"component",attrs:{"payload":prompt.payload,"loading":_vm.isLoading},on:{"submit":function($event){return _vm.resumeToast({ input: $event, prompt: prompt })}}}):_vm._e()],1)}),1)};
-var __vue_staticRenderFns__$t = [];
+var __vue_staticRenderFns__$u = [];
 
   /* style */
   const __vue_inject_styles__$z = function (inject) {
@@ -80468,7 +80624,7 @@ var __vue_staticRenderFns__$t = [];
 
   
   const __vue_component__$z = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
+    { render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
     __vue_inject_styles__$z,
     __vue_script__$y,
     __vue_scope_id__$z,
@@ -80548,13 +80704,13 @@ var script$z = {
 const __vue_script__$z = script$z;
 
 /* template */
-var __vue_render__$u = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',{attrs:{"size":"lg","lazy":"","hide-footer":!_vm.current,"title":_vm.current ? _vm.current.title : 'Workflow prompts',"busy":_vm.isLoading},on:{"hide":function($event){return _vm.deactivate()}},scopedSlots:_vm._u([(_vm.current)?{key:"modal-footer",fn:function(){return [_c('b-button',{attrs:{"variant":"link"},on:{"click":function($event){return _vm.activate(true)}}},[_vm._v("\n      « Back to list\n    ")])]},proxy:true}:null],null,true),model:{value:(_vm.isOpened),callback:function ($$v) {_vm.isOpened=$$v;},expression:"isOpened"}},[(_vm.current)?_c(_vm.current.component,{tag:"component",attrs:{"payload":_vm.current.prompt.payload,"loading":_vm.isLoading},on:{"submit":function($event){return _vm.resume({ input: $event, prompt: _vm.current.prompt })}}}):_c('div',_vm._l((_vm.list),function(ref){
+var __vue_render__$v = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',{attrs:{"size":"lg","lazy":"","hide-footer":!_vm.current,"title":_vm.current ? _vm.current.title : 'Workflow prompts',"busy":_vm.isLoading},on:{"hide":function($event){return _vm.deactivate()}},scopedSlots:_vm._u([(_vm.current)?{key:"modal-footer",fn:function(){return [_c('b-button',{attrs:{"variant":"link"},on:{"click":function($event){return _vm.activate(true)}}},[_vm._v("\n      « Back to list\n    ")])]},proxy:true}:null],null,true),model:{value:(_vm.isOpened),callback:function ($$v) {_vm.isOpened=$$v;},expression:"isOpened"}},[(_vm.current)?_c(_vm.current.component,{tag:"component",attrs:{"payload":_vm.current.prompt.payload,"loading":_vm.isLoading},on:{"submit":function($event){return _vm.resume({ input: $event, prompt: _vm.current.prompt })}}}):_c('div',_vm._l((_vm.list),function(ref){
 var key = ref.key;
 var title = ref.title;
 var age = ref.age;
 var prompt = ref.prompt;
 return _c('div',{key:key,staticClass:"d-flex flex-grow-1 align-items-baseline"},[_c('span',{staticClass:"mr-auto",on:{"click":function($event){return _vm.activate(prompt)}}},[_vm._v("\n          "+_vm._s(title)+"\n          "),_c('time',{staticClass:"muted small",attrs:{"datetime":prompt.createdAt}},[_vm._v("\n            "+_vm._s(age)+"\n          ")])]),_vm._v(" "),_vm._e()],1)}),0)],1)};
-var __vue_staticRenderFns__$u = [];
+var __vue_staticRenderFns__$v = [];
 
   /* style */
   const __vue_inject_styles__$A = undefined;
@@ -80573,7 +80729,7 @@ var __vue_staticRenderFns__$u = [];
 
   
   const __vue_component__$A = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
+    { render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
     __vue_inject_styles__$A,
     __vue_script__$z,
     __vue_scope_id__$A,
@@ -80607,8 +80763,8 @@ var script$A = {
 const __vue_script__$A = script$A;
 
 /* template */
-var __vue_render__$v = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('c-prompt-toast'),_vm._v(" "),_c('c-prompt-modal')],1)};
-var __vue_staticRenderFns__$v = [];
+var __vue_render__$w = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('c-prompt-toast'),_vm._v(" "),_c('c-prompt-modal')],1)};
+var __vue_staticRenderFns__$w = [];
 
   /* style */
   const __vue_inject_styles__$B = undefined;
@@ -80627,7 +80783,7 @@ var __vue_staticRenderFns__$v = [];
 
   
   const __vue_component__$B = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
+    { render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
     __vue_inject_styles__$B,
     __vue_script__$A,
     __vue_scope_id__$B,
@@ -80639,7 +80795,16 @@ var __vue_staticRenderFns__$v = [];
     undefined
   );
 
-const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'];
+const variants = [
+    { value: 'primary', text: 'Primary' },
+    { value: 'secondary', text: 'Secondary' },
+    { value: 'success', text: 'Success' },
+    { value: 'warning', text: 'Warning' },
+    { value: 'danger', text: 'Danger' },
+    { value: 'info', text: 'Info' },
+    { value: 'light', text: 'Light' },
+    { value: 'dark', text: 'Dark' },
+];
 const prompts = Object.freeze([{
         ref: 'redirect',
         meta: { short: 'Redirect user to an outside URL' },
@@ -80672,7 +80837,7 @@ const prompts = Object.freeze([{
         parameters: [
             { name: 'title', types: ['String'] },
             { name: 'message', types: ['String'], required: true },
-            { name: 'variant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'variant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'timeout', types: ['Integer'], meta: { description: 'How long do we show the notification in seconds' } },
         ],
     }, {
@@ -80682,7 +80847,7 @@ const prompts = Object.freeze([{
             { name: 'title', types: ['String'] },
             { name: 'message', types: ['String'], required: true },
             { name: 'buttonLabel', types: ['String'] },
-            { name: 'buttonVariant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'buttonVariant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'buttonValue', types: ['Any'] },
         ],
     }, {
@@ -80692,10 +80857,10 @@ const prompts = Object.freeze([{
             { name: 'title', types: ['String'] },
             { name: 'message', types: ['String'], required: true },
             { name: 'confirmButtonLabel', types: ['String'] },
-            { name: 'confirmButtonVariant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'confirmButtonVariant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'confirmButtonValue', types: ['Any'] },
             { name: 'rejectButtonLabel', types: ['String'] },
-            { name: 'rejectButtonVariant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'rejectButtonVariant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'rejectButtonValue', types: ['Any'] },
         ],
         results: [
@@ -80706,7 +80871,7 @@ const prompts = Object.freeze([{
         meta: { short: 'Prompt user with a single input' },
         parameters: [
             { name: 'title', types: ['String'] },
-            { name: 'variant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'variant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'message', types: ['String'], required: true },
             { name: 'label', types: ['String'] },
             {
@@ -80714,7 +80879,15 @@ const prompts = Object.freeze([{
                 types: ['String'],
                 meta: {
                     visual: {
-                        options: ['text', 'number', 'email', 'password', 'search', 'date', 'time'],
+                        options: [
+                            { value: 'text', text: 'Text' },
+                            { value: 'number', text: 'Number' },
+                            { value: 'email', text: 'Email' },
+                            { value: 'password', text: 'Password' },
+                            { value: 'search', text: 'Search' },
+                            { value: 'date', text: 'Date' },
+                            { value: 'time', text: 'Time' },
+                        ],
                     },
                 },
             },
@@ -80728,7 +80901,7 @@ const prompts = Object.freeze([{
         meta: { short: 'Prompt user with options' },
         parameters: [
             { name: 'title', types: ['String'] },
-            { name: 'variant', types: ['String'], meta: { visual: { options: variants } } },
+            { name: 'variant', types: ['String'], meta: { visual: { input: { type: 'select', properties: { options: variants } } } } },
             { name: 'message', types: ['String'], required: true },
             { name: 'label', types: ['String'] },
             {
@@ -80736,7 +80909,10 @@ const prompts = Object.freeze([{
                 types: ['String'],
                 meta: {
                     visual: {
-                        options: ['select', 'radio'],
+                        options: [
+                            { value: 'select', text: 'Select' },
+                            { value: 'radio', text: 'Radio' },
+                        ],
                     },
                 },
             },
@@ -80775,8 +80951,8 @@ var script$B = {
 const __vue_script__$B = script$B;
 
 /* template */
-var __vue_render__$w = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-container',{staticClass:"d-flex justify-content-center vh-100 logo",attrs:{"fluid":""}},[(_vm.logo)?_c('img',{staticClass:"w-25 my-auto",attrs:{"src":_vm.logo}}):_vm._e()])};
-var __vue_staticRenderFns__$w = [];
+var __vue_render__$x = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-container',{staticClass:"d-flex justify-content-center vh-100 logo",attrs:{"fluid":""}},[(_vm.logo)?_c('img',{staticClass:"w-25 my-auto",attrs:{"src":_vm.logo}}):_vm._e()])};
+var __vue_staticRenderFns__$x = [];
 
   /* style */
   const __vue_inject_styles__$C = function (inject) {
@@ -80797,7 +80973,7 @@ var __vue_staticRenderFns__$w = [];
 
   
   const __vue_component__$C = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
+    { render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
     __vue_inject_styles__$C,
     __vue_script__$B,
     __vue_scope_id__$C,
@@ -80958,6 +81134,31 @@ var __vue_staticRenderFns__$w = [];
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$C = {
   props: {
     sidebarPinned: {
@@ -80974,6 +81175,10 @@ var script$C = {
       type: String,
       default: '../'
     },
+    settings: {
+      type: Object,
+      required: true
+    },
     labels: {
       type: Object,
       required: true
@@ -80993,6 +81198,35 @@ var script$C = {
       return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/index.html`;
     },
 
+    helpLinks() {
+      const {
+        helpLinks = []
+      } = this.settings || {};
+      return (helpLinks || []).filter(({
+        handle,
+        url
+      }) => handle && url);
+    },
+
+    profileLinks() {
+      const {
+        profileLinks = []
+      } = this.settings || {};
+      return (profileLinks || []).filter(({
+        handle,
+        url
+      }) => handle && url);
+    },
+
+    onlyVersion() {
+      const {
+        hideForumLink,
+        hideDocumentationLink,
+        hideFeedbackLink
+      } = this.settings || {};
+      return !this.helpLinks.length && hideForumLink && hideDocumentationLink && hideFeedbackLink;
+    },
+
     frontendVersion() {
       /* eslint-disable no-undef */
       return VERSION;
@@ -81005,19 +81239,19 @@ var script$C = {
 const __vue_script__$C = script$C;
 
 /* template */
-var __vue_render__$x = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 "},[_c('div',{staticClass:"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100"},[[_c('div',{staticClass:"spacer",class:{
+var __vue_render__$y = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 "},[_c('div',{staticClass:"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100"},[[_c('div',{staticClass:"spacer",class:{
           'expanded': _vm.sidebarPinned,
-        }})],_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center ml-2 text-truncate mr-auto h-100"},[_c('h2',{staticClass:"d-none d-sm-block mb-0"},[_vm._t("title")],2)]),_vm._v(" "),_c('div',{staticClass:"ml-3"},[_vm._t("tools")],2),_vm._v(" "),(!_vm.hideAppSelector)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2",attrs:{"variant":"outline-light","href":_vm.appSelectorURL,"size":"lg"}},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['fas', 'grip-horizontal']}})],1):_vm._e(),_vm._v(" "),_c('b-dropdown',{staticClass:"nav-icon mx-1",attrs:{"size":"lg","variant":"outline-light","toggle-class":"text-decoration-none text-dark rounded-circle border-0 w-100","menu-class":"border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'question-circle']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            Help\n          ")])],1)]},proxy:true}])},[_vm._v(" "),_c('div',[_vm._t("help-dropdown")],2),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":"https://forum.cortezaproject.org/","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpForum)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.documentationURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpDocumentation)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":"mailto:info@crust.tech","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpFeedback)+"\n      ")]),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"small",attrs:{"disabled":""}},[_vm._v("\n        "+_vm._s(_vm.labels.helpVersion)+"\n        "),_c('br'),_vm._v("\n        "+_vm._s(_vm.frontendVersion)+"\n      ")])],1),_vm._v(" "),_c('b-dropdown',{staticClass:"nav-user-icon",attrs:{"data-v-onboarding":"profile","size":"lg","variant":"outline-light","toggle-class":"nav-icon text-decoration-none text-dark rounded-circle border","menu-class":"border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'user']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            "+_vm._s(_vm.labels.helpForum)+"\n          ")])],1)]},proxy:true}])},[_vm._v(" "),_c('b-dropdown-text',{staticClass:"text-muted mb-2"},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLoggedInAs)+"\n      ")]),_vm._v(" "),_c('div',[_vm._t("avatar-dropdown")],2),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.userProfileURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsProfile)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.changePasswordURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsChangePassword)+"\n      ")]),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"mt-2",attrs:{"href":""},on:{"click":function($event){return _vm.$auth.logout()}}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLogout)+"\n      ")])],1)],2)])};
-var __vue_staticRenderFns__$x = [];
+        }})],_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center ml-2 text-truncate mr-auto h-100"},[_c('h2',{staticClass:"d-none d-sm-block mb-0"},[_vm._t("title")],2)]),_vm._v(" "),_c('div',{staticClass:"ml-3"},[_vm._t("tools")],2),_vm._v(" "),(!_vm.hideAppSelector && !_vm.settings.hideAppSelector)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2",attrs:{"variant":"outline-light","href":_vm.appSelectorURL,"size":"lg"}},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['fas', 'grip-horizontal']}})],1):_vm._e(),_vm._v(" "),(!_vm.settings.hideHelp)?_c('b-dropdown',{staticClass:"nav-icon mx-1",attrs:{"size":"lg","variant":"outline-light","toggle-class":"text-decoration-none text-dark rounded-circle border-0 w-100","menu-class":"topbar-dropdown-menu border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'question-circle']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            Help\n          ")])],1)]},proxy:true}],null,false,3609523728)},[_vm._v(" "),_c('div',[_vm._t("help-dropdown")],2),_vm._v(" "),_vm._l((_vm.helpLinks),function(helpLink,index){return _c('b-dropdown-item',{key:index,attrs:{"href":helpLink.url,"target":helpLink.newTab ? '_blank' : ''}},[_vm._v("\n        "+_vm._s(helpLink.handle)+"\n      ")])}),_vm._v(" "),(!_vm.settings.hideForumLink)?_c('b-dropdown-item',{attrs:{"href":"https://forum.cortezaproject.org/","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpForum)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideDocumentationLink)?_c('b-dropdown-item',{attrs:{"href":_vm.documentationURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpDocumentation)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideFeedbackLink)?_c('b-dropdown-item',{attrs:{"href":"mailto:info@crust.tech","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpFeedback)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.onlyVersion)?_c('b-dropdown-divider'):_vm._e(),_vm._v(" "),_c('b-dropdown-item',{staticClass:"small",attrs:{"disabled":""}},[_vm._v("\n        "+_vm._s(_vm.labels.helpVersion)+"\n        "),_c('br'),_vm._v("\n        "+_vm._s(_vm.frontendVersion)+"\n      ")])],2):_vm._e(),_vm._v(" "),(!_vm.settings.hideProfile)?_c('b-dropdown',{staticClass:"nav-user-icon",attrs:{"data-v-onboarding":"profile","size":"lg","variant":"outline-light","toggle-class":"nav-icon text-decoration-none text-dark rounded-circle border","menu-class":"topbar-dropdown-menu border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'user']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            "+_vm._s(_vm.labels.helpForum)+"\n          ")])],1)]},proxy:true}],null,false,2199786693)},[_vm._v(" "),_c('b-dropdown-text',{staticClass:"text-muted mb-2"},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLoggedInAs)+"\n      ")]),_vm._v(" "),_c('div',[_vm._t("avatar-dropdown")],2),_vm._v(" "),_vm._l((_vm.profileLinks),function(profileLink,index){return _c('b-dropdown-item',{key:index,attrs:{"href":profileLink.url,"target":profileLink.newTab ? '_blank' : ''}},[_vm._v("\n        "+_vm._s(profileLink.handle)+"\n      ")])}),_vm._v(" "),(!_vm.settings.hideProfileLink)?_c('b-dropdown-item',{attrs:{"href":_vm.userProfileURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsProfile)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideChangePasswordLink)?_c('b-dropdown-item',{attrs:{"href":_vm.changePasswordURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsChangePassword)+"\n      ")]):_vm._e(),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"mt-2",attrs:{"href":""},on:{"click":function($event){return _vm.$auth.logout()}}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLogout)+"\n      ")])],2):_vm._e()],2)])};
+var __vue_staticRenderFns__$y = [];
 
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    inject("data-v-d822059c_0", { source: ".icon-logo[data-v-d822059c]{height:calc(64px / 2);background-repeat:no-repeat;background-position:center}.nav-icon[data-v-d822059c]{width:40px;height:40px}.nav-user-icon[data-v-d822059c]{width:50px;height:50px}.header-navigation[data-v-d822059c]{width:100vw;height:64px;background-color:#f3f3f5!important}.header-navigation h2[data-v-d822059c]{padding-left:calc(.5rem + 2px)}.spacer[data-v-d822059c]{min-width:0;-webkit-transition:min-width .15s ease-in-out;-moz-transition:min-width .15s ease-in-out;-o-transition:min-width .15s ease-in-out;transition:min-width .15s ease-in-out}.spacer.expanded[data-v-d822059c]{min-width:calc(320px - 42px);-webkit-transition:min-width .2s ease-in-out;-moz-transition:min-width .2s ease-in-out;-o-transition:min-width .2s ease-in-out;transition:min-width .2s ease-in-out}", map: undefined, media: undefined });
+    inject("data-v-39d2e772_0", { source: ".icon-logo[data-v-39d2e772]{height:calc(64px / 2);background-repeat:no-repeat;background-position:center}.nav-icon[data-v-39d2e772]{width:40px;height:40px}.nav-user-icon[data-v-39d2e772]{width:50px;height:50px}.header-navigation[data-v-39d2e772]{width:100vw;height:64px;background-color:#f3f3f5!important}.header-navigation h2[data-v-39d2e772]{padding-left:calc(.5rem + 2px)}.topbar-dropdown-menu[data-v-39d2e772]{max-height:80vh;overflow-y:auto}.spacer[data-v-39d2e772]{min-width:0;-webkit-transition:min-width .15s ease-in-out;-moz-transition:min-width .15s ease-in-out;-o-transition:min-width .15s ease-in-out;transition:min-width .15s ease-in-out}.spacer.expanded[data-v-39d2e772]{min-width:calc(320px - 42px);-webkit-transition:min-width .2s ease-in-out;-moz-transition:min-width .2s ease-in-out;-o-transition:min-width .2s ease-in-out;transition:min-width .2s ease-in-out}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$D = "data-v-d822059c";
+  const __vue_scope_id__$D = "data-v-39d2e772";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -81029,7 +81263,7 @@ var __vue_staticRenderFns__$x = [];
 
   
   const __vue_component__$D = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
+    { render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
     __vue_inject_styles__$D,
     __vue_script__$C,
     __vue_scope_id__$D,
@@ -81339,8 +81573,8 @@ var script$D = {
 const __vue_script__$D = script$D;
 
 /* template */
-var __vue_render__$y = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{on:{"mouseleave":function($event){return _vm.onHover(false)}}},[_c('b-sidebar',{attrs:{"sidebar-class":("sidebar " + (_vm.isExpanded ? 'expanded' : '')),"header-class":("d-block sidebar-header " + (_vm.isExpanded ? 'expanded border-bottom p-2' : '')),"body-class":("bg-white " + (_vm.isExpanded ? 'py-2 px-3' : '')),"footer-class":("bg-white rounded-right " + (_vm.isExpanded ? 'p-2' : '')),"no-header":!_vm.isExpanded,"backdrop":_vm.isMobile,"shadow":_vm.isExpanded,"no-slide":"","right":_vm.right,"no-close-on-route-change":"","no-close-on-esc":""},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-between px-2",staticStyle:{"height":"50px"}},[_c('img',{staticClass:"logo w-auto border-0",attrs:{"src":_vm.logo}}),_vm._v(" "),(_vm.isMobile)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){return _vm.closeSidebar()}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0 text-dark",attrs:{"icon":['fas', 'times']}})],1):_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){return _vm.togglePin()}}},[_c('font-awesome-icon',{class:("h6 mb-0 " + (_vm.isPinned ? 'text-primary' : 'text-secondary')),attrs:{"icon":['fas', 'thumbtack']}})],1)],1),_vm._v(" "),(!_vm.isExpanded)?_c('div',{staticClass:"d-flex align-items-center justify-content-center my-3"},[_c('b-button',{attrs:{"variant":"link"},on:{"click":function($event){return _vm.togglePin()}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0",attrs:{"icon":['fas', 'chevron-right']}})],1)],1):_vm._e(),_vm._v(" "),(_vm.isExpanded)?_c('div',{staticClass:"px-2"},[_vm._t("header-expanded")],2):_vm._e(),_vm._v(" "),(!_vm.isExpanded)?_c('hr',{staticClass:"my-2"}):_vm._e()]},proxy:true},{key:"footer",fn:function(){return [(_vm.isExpanded)?_vm._t("footer-expanded"):_vm._e()]},proxy:true}],null,true),model:{value:(_vm.isExpanded),callback:function ($$v) {_vm.isExpanded=$$v;},expression:"isExpanded"}},[_vm._v(" "),(_vm.isExpanded)?_vm._t("body-expanded"):_vm._e()],2)],1),_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center justify-content-center tab position-absolute p-2"},[(_vm.expandOnHover && !_vm.disabledRoutes.includes(_vm.$route.name))?_c('b-button',{staticClass:"d-flex align-items-center border-0",attrs:{"variant":"outline-light","size":"lg"},on:{"mouseover":function($event){return _vm.onHover(true)}}},[_c('font-awesome-icon',{staticClass:"h4 mb-0 text-primary",attrs:{"icon":['fas', 'bars']}})],1):(!_vm.disabledRoutes.includes(_vm.$route.name))?_c('b-button',{staticClass:"d-flex align-items-center p-2 border-0",attrs:{"variant":"outline-light","size":"lg","to":{ name: 'root' }}},[_c('font-awesome-icon',{staticClass:"h4 mb-0 text-primary",attrs:{"icon":['fas', 'home']}})],1):_c('div',{staticClass:"d-flex align-items-center border-0 p-2"},[_c('img',{staticClass:"icon w-auto border-0",attrs:{"src":_vm.icon}})])],1)])};
-var __vue_staticRenderFns__$y = [];
+var __vue_render__$z = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{on:{"mouseleave":function($event){return _vm.onHover(false)}}},[_c('b-sidebar',{attrs:{"sidebar-class":("sidebar " + (_vm.isExpanded ? 'expanded' : '')),"header-class":("d-block sidebar-header " + (_vm.isExpanded ? 'expanded border-bottom p-2' : '')),"body-class":("bg-white " + (_vm.isExpanded ? 'py-2 px-3' : '')),"footer-class":("bg-white rounded-right " + (_vm.isExpanded ? 'p-2' : '')),"no-header":!_vm.isExpanded,"backdrop":_vm.isMobile,"shadow":_vm.isExpanded,"no-slide":"","right":_vm.right,"no-close-on-route-change":"","no-close-on-esc":""},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-between px-2",staticStyle:{"height":"50px"}},[_c('img',{staticClass:"logo w-auto border-0",attrs:{"src":_vm.logo}}),_vm._v(" "),(_vm.isMobile)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){return _vm.closeSidebar()}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0 text-dark",attrs:{"icon":['fas', 'times']}})],1):_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){return _vm.togglePin()}}},[_c('font-awesome-icon',{class:("h6 mb-0 " + (_vm.isPinned ? 'text-primary' : 'text-secondary')),attrs:{"icon":['fas', 'thumbtack']}})],1)],1),_vm._v(" "),(!_vm.isExpanded)?_c('div',{staticClass:"d-flex align-items-center justify-content-center my-3"},[_c('b-button',{attrs:{"variant":"link"},on:{"click":function($event){return _vm.togglePin()}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0",attrs:{"icon":['fas', 'chevron-right']}})],1)],1):_vm._e(),_vm._v(" "),(_vm.isExpanded)?_c('div',{staticClass:"px-2"},[_vm._t("header-expanded")],2):_vm._e(),_vm._v(" "),(!_vm.isExpanded)?_c('hr',{staticClass:"my-2"}):_vm._e()]},proxy:true},{key:"footer",fn:function(){return [(_vm.isExpanded)?_vm._t("footer-expanded"):_vm._e()]},proxy:true}],null,true),model:{value:(_vm.isExpanded),callback:function ($$v) {_vm.isExpanded=$$v;},expression:"isExpanded"}},[_vm._v(" "),(_vm.isExpanded)?_vm._t("body-expanded"):_vm._e()],2)],1),_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center justify-content-center tab position-absolute p-2"},[(_vm.expandOnHover && !_vm.disabledRoutes.includes(_vm.$route.name))?_c('b-button',{staticClass:"d-flex align-items-center border-0",attrs:{"variant":"outline-light","size":"lg"},on:{"mouseover":function($event){return _vm.onHover(true)}}},[_c('font-awesome-icon',{staticClass:"h4 mb-0 text-primary",attrs:{"icon":['fas', 'bars']}})],1):(!_vm.disabledRoutes.includes(_vm.$route.name))?_c('b-button',{staticClass:"d-flex align-items-center p-2 border-0",attrs:{"variant":"outline-light","size":"lg","to":{ name: 'root' }}},[_c('font-awesome-icon',{staticClass:"h4 mb-0 text-primary",attrs:{"icon":['fas', 'home']}})],1):_c('div',{staticClass:"d-flex align-items-center border-0 p-2"},[_c('img',{staticClass:"icon w-auto border-0",attrs:{"src":_vm.icon}})])],1)])};
+var __vue_staticRenderFns__$z = [];
 
   /* style */
   const __vue_inject_styles__$E = function (inject) {
@@ -81362,7 +81596,7 @@ var __vue_staticRenderFns__$y = [];
 
   
   const __vue_component__$E = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
+    { render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
     __vue_inject_styles__$E,
     __vue_script__$D,
     __vue_scope_id__$E,
@@ -81501,15 +81735,19 @@ var script$E = {
     },
 
     // Recursively check for child pages that are open, so that parents can open aswell
-    showChildren(page = {}, children = []) {
-      if (page.pageID === this.$route.params.pageID) {
-        return page.pageID === this.$route.params.pageID;
+    showChildren({
+      params = {},
+      children = []
+    }) {
+      const partialParamsMatch = Object.entries(params).some(([key, value]) => {
+        return this.$route.params[key] === value;
+      });
+
+      if (partialParamsMatch) {
+        return partialParamsMatch;
       }
 
-      return children.map(({
-        page,
-        children
-      }) => this.showChildren(page, children)).some(isOpen => isOpen);
+      return children.map(c => this.showChildren(c)).some(isOpen => isOpen);
     }
 
   }
@@ -81519,21 +81757,21 @@ var script$E = {
 const __vue_script__$E = script$E;
 
 /* template */
-var __vue_render__$z = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"nav-sidebar"},_vm._l((_vm.items),function(ref,index){
+var __vue_render__$A = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"nav-sidebar"},_vm._l((_vm.items),function(ref,index){
 var page = ref.page; if ( page === void 0 ) page = {};
 var params = ref.params; if ( params === void 0 ) params = {};
 var children = ref.children; if ( children === void 0 ) children = [];
-return _c('b-button',{key:index,staticClass:"w-100 text-dark text-decoration-none p-0 pt-2 nav-item",attrs:{"variant":"link","active-class":"nav-active","exact-active-class":"nav-active","to":{ name: page.name || _vm.defaultRouteName, params: params }}},[_c('span',{staticClass:"d-inline-block w-75 text-nowrap text-truncate",on:{"click":function($event){return _vm.closeSidebar()}}},[(page.icon)?_c('font-awesome-icon',{staticClass:"icon",attrs:{"icon":page.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v("\n        "+_vm._s(page.title)+"\n      ")])],1),_vm._v(" "),(children.length)?[_c('b-button',{staticClass:"p-0 float-right",attrs:{"variant":"link","disabled":_vm.showChildren(page, children)},on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.toggle(page)}}},[(!_vm.collapses[_vm.pageIndex(page)])?_c('font-awesome-icon',{staticClass:"pointer-none",attrs:{"icon":['fas', 'chevron-down']}}):_c('font-awesome-icon',{staticClass:"pointer-none",attrs:{"icon":['fas', 'chevron-up']}})],1),_vm._v(" "),_c('b-collapse',{attrs:{"visible":_vm.collapses[_vm.pageIndex(page)] || _vm.showChildren(page, children)},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();}}},[_c('c-sidebar-nav-items',_vm._g({staticClass:"ml-2",attrs:{"items":children,"start-expanded":_vm.startExpanded,"default-route-name":_vm.defaultRouteName}},_vm.$listeners))],1)]:_vm._e()],2)}),1)};
-var __vue_staticRenderFns__$z = [];
+return _c('b-button',{key:index,staticClass:"w-100 text-dark text-decoration-none p-0 pt-2 nav-item",attrs:{"variant":"link","active-class":"nav-active","exact-active-class":"nav-active","to":{ name: page.name || _vm.defaultRouteName, params: params }}},[_c('span',{staticClass:"d-inline-block w-75 text-nowrap text-truncate",on:{"click":function($event){return _vm.closeSidebar()}}},[(page.icon)?_c('font-awesome-icon',{staticClass:"icon",attrs:{"icon":page.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v("\n        "+_vm._s(page.title)+"\n      ")])],1),_vm._v(" "),(children.length)?[_c('b-button',{staticClass:"p-0 float-right",attrs:{"variant":"link","disabled":_vm.showChildren({ params: params, children: children })},on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.toggle(page)}}},[(!_vm.collapses[_vm.pageIndex(page)])?_c('font-awesome-icon',{staticClass:"pointer-none",attrs:{"icon":['fas', 'chevron-down']}}):_c('font-awesome-icon',{staticClass:"pointer-none",attrs:{"icon":['fas', 'chevron-up']}})],1),_vm._v(" "),_c('b-collapse',{attrs:{"visible":_vm.collapses[_vm.pageIndex(page)] || _vm.showChildren({ params: params, children: children })},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();}}},[_c('c-sidebar-nav-items',_vm._g({staticClass:"ml-2",attrs:{"items":children,"start-expanded":_vm.startExpanded,"default-route-name":_vm.defaultRouteName}},_vm.$listeners))],1)]:_vm._e()],2)}),1)};
+var __vue_staticRenderFns__$A = [];
 
   /* style */
   const __vue_inject_styles__$F = function (inject) {
     if (!inject) return
-    inject("data-v-6ae03c14_0", { source: ".pointer-none[data-v-6ae03c14]{pointer-events:none}.svg-inline--fa[data-v-6ae03c14]{width:30px}.nav-item>span>.title[data-v-6ae03c14]{font-family:Poppins-Regular}.nav-active>span>.icon[data-v-6ae03c14]{color:#4d7281}.nav-active>span>.title[data-v-6ae03c14]{font-family:Poppins-SemiBold}.nav-item[data-v-6ae03c14]{text-align:left}[dir=rtl] .nav-item[data-v-6ae03c14]{text-align:right}", map: undefined, media: undefined });
+    inject("data-v-16ceb9b5_0", { source: ".pointer-none[data-v-16ceb9b5]{pointer-events:none}.svg-inline--fa[data-v-16ceb9b5]{width:30px}.nav-item>span>.title[data-v-16ceb9b5]{font-family:Poppins-Regular}.nav-active>span>.icon[data-v-16ceb9b5]{color:#4d7281}.nav-active>span>.title[data-v-16ceb9b5]{font-family:Poppins-SemiBold}.nav-item[data-v-16ceb9b5]{text-align:left}[dir=rtl] .nav-item[data-v-16ceb9b5]{text-align:right}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$F = "data-v-6ae03c14";
+  const __vue_scope_id__$F = "data-v-16ceb9b5";
   /* module identifier */
   const __vue_module_identifier__$F = undefined;
   /* functional template */
@@ -81545,7 +81783,7 @@ var __vue_staticRenderFns__$z = [];
 
   
   const __vue_component__$F = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
+    { render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
     __vue_inject_styles__$F,
     __vue_script__$E,
     __vue_scope_id__$F,
@@ -81705,8 +81943,8 @@ var script$F = {
 const __vue_script__$F = script$F;
 
 /* template */
-var __vue_render__$A = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.tour !== null)?_c('v-tour',{attrs:{"name":_vm.tour.name,"steps":_vm.tour.steps,"options":_vm.tour,"callbacks":this.callbacks},on:{"onStop":_vm.onStop},scopedSlots:_vm._u([{key:"default",fn:function(tour){return [_c('transition',{attrs:{"name":"fade"}},[_vm._l((tour.steps),function(step,index){return [(tour.currentStep === index)?_c('v-step',{key:index,staticClass:"shadow p-3 text-light text-center",attrs:{"step":step,"previous-step":tour.previousStep,"next-step":tour.nextStep,"stop":tour.stop,"is-first":tour.isFirst,"is-last":tour.isLast,"labels":tour.labels},on:{"onStop":_vm.onStop}},[_c('div',{attrs:{"slot":"header"},slot:"header"},[((step.header || {}).title)?_c('h5',{domProps:{"innerHTML":_vm._s(_vm.$t(step.header.title))}}):_vm._e()]),_vm._v(" "),_c('div',{attrs:{"slot":"content"},slot:"content"},[_c('div',{staticClass:"p-1 mb-2"},[_c('div',{domProps:{"innerHTML":_vm._s(_vm.$t(step.content))}})])]),_vm._v(" "),_c('div',{attrs:{"slot":"actions"},slot:"actions"},[_c('b-button',{attrs:{"variant":"primary"},on:{"click":_vm.onStop}},[(tour.isLast && !(_vm.callbacks || {}).onNextRedirect)?[_vm._v("\n                "+_vm._s(_vm.$t('buttons.end'))+"\n              ")]:[_vm._v("\n                "+_vm._s(_vm.$t('buttons.skip'))+"\n              ")]],2),_vm._v(" "),(tour.isFirst && (_vm.callbacks || {}).onPrevRedirect)?_c('b-button',{attrs:{"variant":"primary","href":_vm.callbacks.onPrevRedirect}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.previous'))+"\n            ")]):(!tour.isFirst)?_c('b-button',{attrs:{"variant":"primary"},on:{"click":tour.previousStep}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.previous'))+"\n            ")]):_vm._e(),_vm._v(" "),(tour.isLast && (_vm.callbacks || {}).onNextRedirect)?_c('b-button',{attrs:{"variant":"primary","href":_vm.callbacks.onNextRedirect}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.next'))+"\n            ")]):(!tour.isLast)?_c('b-button',{attrs:{"variant":"primary"},on:{"click":tour.nextStep}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.next'))+"\n            ")]):_vm._e()],1)]):_vm._e()]})],2)]}}],null,false,1119462003)}):_vm._e()};
-var __vue_staticRenderFns__$A = [];
+var __vue_render__$B = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.tour !== null)?_c('v-tour',{attrs:{"name":_vm.tour.name,"steps":_vm.tour.steps,"options":_vm.tour,"callbacks":this.callbacks},on:{"onStop":_vm.onStop},scopedSlots:_vm._u([{key:"default",fn:function(tour){return [_c('transition',{attrs:{"name":"fade"}},[_vm._l((tour.steps),function(step,index){return [(tour.currentStep === index)?_c('v-step',{key:index,staticClass:"shadow p-3 text-light text-center",attrs:{"step":step,"previous-step":tour.previousStep,"next-step":tour.nextStep,"stop":tour.stop,"is-first":tour.isFirst,"is-last":tour.isLast,"labels":tour.labels},on:{"onStop":_vm.onStop}},[_c('div',{attrs:{"slot":"header"},slot:"header"},[((step.header || {}).title)?_c('h5',{domProps:{"innerHTML":_vm._s(_vm.$t(step.header.title))}}):_vm._e()]),_vm._v(" "),_c('div',{attrs:{"slot":"content"},slot:"content"},[_c('div',{staticClass:"p-1 mb-2"},[_c('div',{domProps:{"innerHTML":_vm._s(_vm.$t(step.content))}})])]),_vm._v(" "),_c('div',{attrs:{"slot":"actions"},slot:"actions"},[_c('b-button',{attrs:{"variant":"primary"},on:{"click":_vm.onStop}},[(tour.isLast && !(_vm.callbacks || {}).onNextRedirect)?[_vm._v("\n                "+_vm._s(_vm.$t('buttons.end'))+"\n              ")]:[_vm._v("\n                "+_vm._s(_vm.$t('buttons.skip'))+"\n              ")]],2),_vm._v(" "),(tour.isFirst && (_vm.callbacks || {}).onPrevRedirect)?_c('b-button',{attrs:{"variant":"primary","href":_vm.callbacks.onPrevRedirect}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.previous'))+"\n            ")]):(!tour.isFirst)?_c('b-button',{attrs:{"variant":"primary"},on:{"click":tour.previousStep}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.previous'))+"\n            ")]):_vm._e(),_vm._v(" "),(tour.isLast && (_vm.callbacks || {}).onNextRedirect)?_c('b-button',{attrs:{"variant":"primary","href":_vm.callbacks.onNextRedirect}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.next'))+"\n            ")]):(!tour.isLast)?_c('b-button',{attrs:{"variant":"primary"},on:{"click":tour.nextStep}},[_vm._v("\n              "+_vm._s(_vm.$t('buttons.next'))+"\n            ")]):_vm._e()],1)]):_vm._e()]})],2)]}}],null,false,1119462003)}):_vm._e()};
+var __vue_staticRenderFns__$B = [];
 
   /* style */
   const __vue_inject_styles__$G = function (inject) {
@@ -81727,7 +81965,7 @@ var __vue_staticRenderFns__$A = [];
 
   
   const __vue_component__$G = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
+    { render: __vue_render__$B, staticRenderFns: __vue_staticRenderFns__$B },
     __vue_inject_styles__$G,
     __vue_script__$F,
     __vue_scope_id__$G,
@@ -81794,8 +82032,8 @@ var script$G = {
 const __vue_script__$G = script$G;
 
 /* template */
-var __vue_render__$B = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',{attrs:{"id":"tourStart","size":"lg","title":_vm.$t('start.welcome'),"ok-title":_vm.$t('start.show'),"cancel-title":_vm.$t('start.skip'),"body-class":"p-0"},on:{"ok":_vm.onSave,"cancel":_vm.onCancel}},[_c('div',{staticClass:"card-body"},[_vm._v("\n    "+_vm._s(_vm.$t('start.instructions'))+"\n  ")])])};
-var __vue_staticRenderFns__$B = [];
+var __vue_render__$C = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',{attrs:{"id":"tourStart","size":"lg","title":_vm.$t('start.welcome'),"ok-title":_vm.$t('start.show'),"cancel-title":_vm.$t('start.skip'),"body-class":"p-0"},on:{"ok":_vm.onSave,"cancel":_vm.onCancel}},[_c('div',{staticClass:"card-body"},[_vm._v("\n    "+_vm._s(_vm.$t('start.instructions'))+"\n  ")])])};
+var __vue_staticRenderFns__$C = [];
 
   /* style */
   const __vue_inject_styles__$H = undefined;
@@ -81814,7 +82052,7 @@ var __vue_staticRenderFns__$B = [];
 
   
   const __vue_component__$H = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$B, staticRenderFns: __vue_staticRenderFns__$B },
+    { render: __vue_render__$C, staticRenderFns: __vue_staticRenderFns__$C },
     __vue_inject_styles__$H,
     __vue_script__$G,
     __vue_scope_id__$H,
@@ -81883,8 +82121,8 @@ var script$I = {
 const __vue_script__$I = script$I;
 
 /* template */
-var __vue_render__$C = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',_vm._b({on:{"click":function($event){return _vm.$emit('action')}}},'b-button',_vm.options,false),[_c('span',{domProps:{"innerHTML":_vm._s(_vm.label)}})])};
-var __vue_staticRenderFns__$C = [];
+var __vue_render__$D = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button',_vm._b({on:{"click":function($event){return _vm.$emit('action')}}},'b-button',_vm.options,false),[_c('span',{domProps:{"innerHTML":_vm._s(_vm.label)}})])};
+var __vue_staticRenderFns__$D = [];
 
   /* style */
   const __vue_inject_styles__$J = undefined;
@@ -81903,7 +82141,7 @@ var __vue_staticRenderFns__$C = [];
 
   
   const __vue_component__$J = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$C, staticRenderFns: __vue_staticRenderFns__$C },
+    { render: __vue_render__$D, staticRenderFns: __vue_staticRenderFns__$D },
     __vue_inject_styles__$J,
     __vue_script__$I,
     __vue_scope_id__$J,
@@ -81931,8 +82169,8 @@ var script$J = {
 const __vue_script__$J = script$J;
 
 /* template */
-var __vue_render__$D = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._b({scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('span',{domProps:{"innerHTML":_vm._s(_vm.label)}})]},proxy:true}])},'b-dropdown',_vm.options,false),[_vm._v(" "),_vm._l((_vm.options.items || []),function(opt,i){return _c(_vm.fromKind(opt),_vm._b({key:i,tag:"component",on:{"click":function($event){return _vm.$emit('action', opt.value)}}},'component',opt,false),[_c('span',{domProps:{"innerHTML":_vm._s(opt.label)}})])})],2)};
-var __vue_staticRenderFns__$D = [];
+var __vue_render__$E = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._b({scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('span',{domProps:{"innerHTML":_vm._s(_vm.label)}})]},proxy:true}])},'b-dropdown',_vm.options,false),[_vm._v(" "),_vm._l((_vm.options.items || []),function(opt,i){return _c(_vm.fromKind(opt),_vm._b({key:i,tag:"component",on:{"click":function($event){return _vm.$emit('action', opt.value)}}},'component',opt,false),[_c('span',{domProps:{"innerHTML":_vm._s(opt.label)}})])})],2)};
+var __vue_staticRenderFns__$E = [];
 
   /* style */
   const __vue_inject_styles__$K = undefined;
@@ -81951,7 +82189,7 @@ var __vue_staticRenderFns__$D = [];
 
   
   const __vue_component__$K = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$D, staticRenderFns: __vue_staticRenderFns__$D },
+    { render: __vue_render__$E, staticRenderFns: __vue_staticRenderFns__$E },
     __vue_inject_styles__$K,
     __vue_script__$J,
     __vue_scope_id__$K,
@@ -81971,8 +82209,8 @@ var script$K = {
 const __vue_script__$K = script$K;
 
 /* template */
-var __vue_render__$E = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-select',_vm._b({staticClass:"w-auto",attrs:{"value":null},on:{"change":function($event){return _vm.$emit('action', $event)}},scopedSlots:_vm._u([{key:"first",fn:function(){return [_c('option',{attrs:{"disabled":""},domProps:{"value":null,"innerHTML":_vm._s(_vm.label)}})]},proxy:true}])},'b-form-select',_vm.options,false),[_vm._v(" "),_vm._l((_vm.options.items || []),function(opt,i){return _c('option',_vm._b({key:i,domProps:{"value":opt.value,"innerHTML":_vm._s(opt.label)}},'option',opt,false))})],2)};
-var __vue_staticRenderFns__$E = [];
+var __vue_render__$F = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-select',_vm._b({staticClass:"w-auto",attrs:{"value":null},on:{"change":function($event){return _vm.$emit('action', $event)}},scopedSlots:_vm._u([{key:"first",fn:function(){return [_c('option',{attrs:{"disabled":""},domProps:{"value":null,"innerHTML":_vm._s(_vm.label)}})]},proxy:true}])},'b-form-select',_vm.options,false),[_vm._v(" "),_vm._l((_vm.options.items || []),function(opt,i){return _c('option',_vm._b({key:i,domProps:{"value":opt.value,"innerHTML":_vm._s(opt.label)}},'option',opt,false))})],2)};
+var __vue_staticRenderFns__$F = [];
 
   /* style */
   const __vue_inject_styles__$L = undefined;
@@ -81991,7 +82229,7 @@ var __vue_staticRenderFns__$E = [];
 
   
   const __vue_component__$L = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$E, staticRenderFns: __vue_staticRenderFns__$E },
+    { render: __vue_render__$F, staticRenderFns: __vue_staticRenderFns__$F },
     __vue_inject_styles__$L,
     __vue_script__$K,
     __vue_scope_id__$L,
@@ -82036,8 +82274,8 @@ var script$L = {
 const __vue_script__$L = script$L;
 
 /* template */
-var __vue_render__$F = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.toast.link)?_c('a',_vm._b({domProps:{"innerHTML":_vm._s(_vm.toast.linkLabel)}},'a',_vm.toast.linkOpts,false)):(_vm.toast.routerLink)?_c('router-link',_vm._b({attrs:{"to":_vm.toast.routerLink}},'router-link',_vm.toast.linkOpts,false),[_c('span',{domProps:{"innerHTML":_vm._s(_vm.toast.linkLabel)}})]):_vm._e()],1)};
-var __vue_staticRenderFns__$F = [];
+var __vue_render__$G = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.toast.link)?_c('a',_vm._b({domProps:{"innerHTML":_vm._s(_vm.toast.linkLabel)}},'a',_vm.toast.linkOpts,false)):(_vm.toast.routerLink)?_c('router-link',_vm._b({attrs:{"to":_vm.toast.routerLink}},'router-link',_vm.toast.linkOpts,false),[_c('span',{domProps:{"innerHTML":_vm._s(_vm.toast.linkLabel)}})]):_vm._e()],1)};
+var __vue_staticRenderFns__$G = [];
 
   /* style */
   const __vue_inject_styles__$M = undefined;
@@ -82056,7 +82294,7 @@ var __vue_staticRenderFns__$F = [];
 
   
   const __vue_component__$M = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$F, staticRenderFns: __vue_staticRenderFns__$F },
+    { render: __vue_render__$G, staticRenderFns: __vue_staticRenderFns__$G },
     __vue_inject_styles__$M,
     __vue_script__$L,
     __vue_scope_id__$M,
@@ -82111,11 +82349,11 @@ var script$M = {
 const __vue_script__$M = script$M;
 
 /* template */
-var __vue_render__$G = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.toasts),function(t){return _c('b-toast',_vm._b({key:t.id,attrs:{"visible":"","title":t.payload.title,"no-close-button":!t.actions.hide,"toast-class":"overflow-unset"},on:{"hide":function($event){t.actions.hide ? t.actions.hide.cb(t) : _vm.evtSink;}}},'b-toast',t.options || {},false),[_c('b-card',{staticClass:"border-0",attrs:{"header-bg-variant":"transparent","bg-variant":"transparent","body-class":"p-0"}},[_c('b-card-text',[_vm._v("\n        "+_vm._s(t.payload.notes)+"\n      ")]),_vm._v(" "),(t.payload.link)?_c('b-card-text',[_c('c-toaster-link',{attrs:{"toast":t}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.extraActions(t)),function(ref){
+var __vue_render__$H = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.toasts),function(t){return _c('b-toast',_vm._b({key:t.id,attrs:{"visible":"","title":t.payload.title,"no-close-button":!t.actions.hide,"toast-class":"overflow-unset"},on:{"hide":function($event){t.actions.hide ? t.actions.hide.cb(t) : _vm.evtSink;}}},'b-toast',t.options || {},false),[_c('b-card',{staticClass:"border-0",attrs:{"header-bg-variant":"transparent","bg-variant":"transparent","body-class":"p-0"}},[_c('b-card-text',[_vm._v("\n        "+_vm._s(t.payload.notes)+"\n      ")]),_vm._v(" "),(t.payload.link)?_c('b-card-text',[_c('c-toaster-link',{attrs:{"toast":t}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.extraActions(t)),function(ref){
 var name = ref[0];
 var act = ref[1];
 return _c(_vm.actComponent(act),_vm._b({key:name,tag:"component",staticClass:"mr-1",on:{"action":function($event){act.cb ? act.cb(t, $event) : _vm.evtSink;}}},'component',act,false))})],2)],1)}),1)};
-var __vue_staticRenderFns__$G = [];
+var __vue_staticRenderFns__$H = [];
 
   /* style */
   const __vue_inject_styles__$N = function (inject) {
@@ -82136,7 +82374,7 @@ var __vue_staticRenderFns__$G = [];
 
   
   const __vue_component__$N = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$G, staticRenderFns: __vue_staticRenderFns__$G },
+    { render: __vue_render__$H, staticRenderFns: __vue_staticRenderFns__$H },
     __vue_inject_styles__$N,
     __vue_script__$M,
     __vue_scope_id__$N,
@@ -82183,8 +82421,8 @@ var script$N = {
 const __vue_script__$N = script$N;
 
 /* template */
-var __vue_render__$H = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-sidebar',{attrs:{"header-class":"d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom","body-class":"bg-white px-2","title":_vm.title,"backdrop":_vm.isMobile,"no-footer":"","right":"","shadow":"","no-close-on-route-change":"","no-close-on-esc":""},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('h4',{staticClass:"text-primary mb-0"},[_c('b',[_vm._v(_vm._s(_vm.title))])]),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){_vm.isVisible = false;}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0 text-dark",attrs:{"icon":['fas', 'times']}})],1)]},proxy:true}]),model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._v(" "),_vm._t("default")],2)};
-var __vue_staticRenderFns__$H = [];
+var __vue_render__$I = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-sidebar',{attrs:{"header-class":"d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom","body-class":"bg-white px-2","title":_vm.title,"backdrop":_vm.isMobile,"no-footer":"","right":"","shadow":"","no-close-on-route-change":"","no-close-on-esc":""},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('h4',{staticClass:"text-primary mb-0"},[_c('b',[_vm._v(_vm._s(_vm.title))])]),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center justify-content-center p-2",attrs:{"variant":"outline-light border-0"},on:{"click":function($event){_vm.isVisible = false;}}},[_c('font-awesome-icon',{staticClass:"h6 mb-0 text-dark",attrs:{"icon":['fas', 'times']}})],1)]},proxy:true}]),model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._v(" "),_vm._t("default")],2)};
+var __vue_staticRenderFns__$I = [];
 
   /* style */
   const __vue_inject_styles__$O = function (inject) {
@@ -82205,7 +82443,7 @@ var __vue_staticRenderFns__$H = [];
 
   
   const __vue_component__$O = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$H, staticRenderFns: __vue_staticRenderFns__$H },
+    { render: __vue_render__$I, staticRenderFns: __vue_staticRenderFns__$I },
     __vue_inject_styles__$O,
     __vue_script__$N,
     __vue_scope_id__$O,
@@ -82244,36 +82482,46 @@ var __vue_staticRenderFns__$H = [];
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$O = {
-  name: "FieldItem",
+  name: 'CItemPickerItem',
   props: {
-    field: {
+    item: {
       type: Object,
       required: true
     },
-    isSelected: {
-      type: Boolean,
-      required: true
+    textField: {
+      type: String,
+      default: 'text'
     },
-    selectedFields: {
-      type: Array,
-      required: true
+    selected: {
+      type: Boolean
     },
-    systemFieldLabel: {
-      type: String,
-      required: true
+    disabled: {
+      type: Boolean
+    },
+    disabledDragging: {
+      type: Boolean
+    },
+    disabledSorting: {
+      type: Boolean
+    },
+    hideIcons: {
+      type: Boolean
     }
   },
   computed: {
-    fieldLabel() {
-      let fieldLabel = this.field.name || "";
-
-      if (this.field.label) {
-        fieldLabel = `${this.field.label} (${this.field.name})`;
-      }
-
-      fieldLabel += this.field.isRequired ? " *" : "";
-      return fieldLabel;
+    _hideIcons() {
+      return !this.disabled && !this.hideIcons;
     }
 
   }
@@ -82283,17 +82531,17 @@ var script$O = {
 const __vue_script__$O = script$O;
 
 /* template */
-var __vue_render__$I = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-flex align-items-center"},[_c('font-awesome-icon',{staticClass:"handle align-baseline mr-3 text-primary",attrs:{"icon":['fas', 'grip-vertical']}}),_vm._v(" "),_c('b',{staticClass:"cursor-default text-dark text-truncate"},[_vm._v("\n    "+_vm._s(_vm.fieldLabel)+"\n  ")]),_vm._v(" "),(_vm.field.isSystem)?_c('small',{staticClass:"cursor-default ml-1 text-truncate"},[_vm._v("\n    "+_vm._s(_vm.systemFieldLabel)+"\n  ")]):_vm._e(),_vm._v(" "),(_vm.isSelected)?_c('font-awesome-icon',{staticClass:"align-baseline ml-auto text-muted pointer",attrs:{"icon":['far', 'eye']},on:{"click":function($event){return _vm.$emit('unselect-field', _vm.field)}}}):_c('font-awesome-icon',{staticClass:"align-baseline ml-auto text-muted pointer",attrs:{"icon":['fas', 'eye-slash']},on:{"click":function($event){return _vm.$emit('select-field', _vm.field)}}})],1)};
-var __vue_staticRenderFns__$I = [];
+var __vue_render__$J = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-flex align-items-center"},[(!_vm.disabled && !_vm.disabledDragging && !_vm.disabledSorting && !_vm.hideIcons)?_c('font-awesome-icon',{staticClass:"handle align-baseline mr-3 text-primary",attrs:{"icon":['fas', 'grip-vertical']}}):_vm._e(),_vm._v(" "),_c('b',{staticClass:"cursor-default text-truncate"},[_vm._t("default",function(){return [_vm._v("\n      "+_vm._s(_vm.item[_vm.textField])+"\n    ")]},null,_vm.item)],2),_vm._v(" "),(_vm._hideIcons)?[(_vm.selected)?_c('font-awesome-icon',{staticClass:"align-baseline ml-auto text-muted pointer",attrs:{"icon":['far', 'eye']},on:{"click":function($event){return _vm.$emit('unselect')}}}):_c('font-awesome-icon',{staticClass:"align-baseline ml-auto text-muted pointer",attrs:{"icon":['fas', 'eye-slash']},on:{"click":function($event){return _vm.$emit('select')}}})]:_vm._e()],2)};
+var __vue_staticRenderFns__$J = [];
 
   /* style */
   const __vue_inject_styles__$P = function (inject) {
     if (!inject) return
-    inject("data-v-475bd41a_0", { source: ".handle[data-v-475bd41a]{cursor:grab}.cursor-default[data-v-475bd41a]{cursor:default}", map: undefined, media: undefined });
+    inject("data-v-70b6001a_0", { source: ".handle[data-v-70b6001a]{cursor:grab}.handle[data-v-70b6001a]:active{cursor:grabbing}.cursor-default[data-v-70b6001a]{cursor:default}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$P = "data-v-475bd41a";
+  const __vue_scope_id__$P = "data-v-70b6001a";
   /* module identifier */
   const __vue_module_identifier__$P = undefined;
   /* functional template */
@@ -82305,7 +82553,7 @@ var __vue_staticRenderFns__$I = [];
 
   
   const __vue_component__$P = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$I, staticRenderFns: __vue_staticRenderFns__$I },
+    { render: __vue_render__$J, staticRenderFns: __vue_staticRenderFns__$J },
     __vue_inject_styles__$P,
     __vue_script__$O,
     __vue_scope_id__$P,
@@ -82319,161 +82567,253 @@ var __vue_staticRenderFns__$I = [];
 
 //
 var script$P = {
+  name: 'CItemPicker',
   components: {
-    draggable,
-    FieldItem: __vue_component__$P
+    draggable: Draggable,
+    CItemPickerItem: __vue_component__$P
   },
   props: {
-    module: {
-      type: Object,
+    /**
+     * List of all items, available and selected/picked
+     *
+     * Internally, we'll build 2 arrays for each group (available + selected)
+     * and work with them.
+     * On the outside, we'll always deal input array of (full) items and
+     * array of selected/picked values of those items.
+     *
+     * This component mimics the behaviour of <b-form-select> component from
+     * Vue Bootstrap and could serve as a drop-in replacement!
+     */
+    options: {
+      type: Array,
       required: true
     },
-    fields: {
+
+    /**
+     * List of values that can be found in the items
+     */
+    value: {
       type: Array,
       required: true
     },
-    disabled: {
-      type: Boolean,
-      default: false
+    valueField: {
+      type: String,
+      default: 'value'
     },
-    disabledTypes: {
-      type: Array,
-      default: () => []
+    textField: {
+      type: String,
+      default: 'text'
     },
-    disableSystemFields: {
-      type: Boolean,
-      default: false
+    labels: {
+      type: Object,
+      default: () => ({
+        searchPlaceholder: 'Filter items',
+        availableItems: 'Available',
+        selectAllItems: 'Select all',
+        selectedItems: 'Selected',
+        unselectAllItems: 'Unselect all',
+        noItemsFound: 'No items found'
+      })
     },
-    systemFields: {
-      type: Array,
-      default: null
+    disabled: {
+      type: Boolean
     },
-    fieldSubset: {
-      type: Array,
-      default: null
+    disabledFilter: {
+      type: Boolean
     },
-    group: {
-      type: String,
-      default: 'fields'
+    disabledSorting: {
+      type: Boolean
     },
-    maxHeight: {
-      type: String,
-      default: 'max-height: 65vh;'
+    disabledDragging: {
+      type: Boolean
     },
-    labels: {
-      type: Object,
-      required: true
+    hideIcons: {
+      type: Boolean
+    },
+    hideFilter: {
+      type: Boolean
     }
   },
 
   data() {
     return {
-      modules: [],
-      query: ''
+      query: '',
+      available: [],
+      selected: []
     };
   },
 
   computed: {
-    selectedFields: {
-      get() {
-        // Needs to be done this way so it retains order of fields
-        return this.fields.reduce((fields, field) => {
-          field = this.allFields.find(({
-            name
-          }) => name === field.name);
+    _disabledFilter() {
+      return this.disabled || this.disabledFilter;
+    },
 
-          if (field) {
-            fields.push(field);
-          }
+    _disabledSorting() {
+      return this.disabled || this.disabledSorting;
+    },
 
-          return fields;
-        }, []);
+    /**
+     * Provides list of all available items, filtered by query
+     * and a setter for draggable component to update available items on drag
+     */
+    filteredAvailable: {
+      get() {
+        const q = this.query.toLowerCase();
+        return this.available.filter(i => i.text.toLowerCase().indexOf(q) > -1);
       },
 
-      set(f) {
-        this.$emit('update:fields', f);
+      set(items) {
+        this.available = items;
       }
 
     },
 
-    allFields() {
-      let mFields = [];
+    /**
+     * Provides list of all selected items, filtered by query
+     * and a setter for draggable component to update selected items on drag
+     */
+    filteredSelected: {
+      get() {
+        const q = this.query.toLowerCase();
+        return this.selected.filter(i => i.text.toLowerCase().indexOf(q) > -1);
+      },
 
-      if (this.fieldSubset) {
-        mFields = this.module.filterFields(this.fieldSubset);
-      } else {
-        mFields = this.module.fields;
+      set(items) {
+        this.selected = items;
       }
 
-      if (this.disabledTypes.length > 0) {
-        mFields = mFields.filter(({
-          kind
-        }) => !this.disabledTypes.find(t => t === kind));
+    }
+  },
+  watch: {
+    /**
+     * Update parent component (if needed)
+     * @param v
+     */
+    selected: {
+      immediate: false,
+
+      handler(items) {
+        const value = items.map(i => i[this.valueField]); // satisfy value.sync
+
+        this.$emit('update:value', value); // satisfy v-model
+
+        this.$emit('input', value);
       }
 
-      let sysFields = [];
+    },
+    options: {
+      deep: true,
+      immediate: true,
 
-      if (!this.disableSystemFields) {
-        sysFields = this.module.systemFields();
+      handler() {
+        this.sync();
+      }
 
-        if (this.systemFields) {
-          sysFields = sysFields.filter(({
-            name
-          }) => this.systemFields.find(sf => sf === name));
+    },
+    value: {
+      immediate: false,
+
+      handler(value = [], oldValue = []) {
+        /**
+        * Make sure we do not fall into an infinite loop
+        * 
+        * If we update the value thenn sync will trigger recomputation of selected
+        * Which then emits the update event and the loop will begin
+        */
+        if (value.length === oldValue.length) {
+          if (value.filter(v => !oldValue.includes(v)).length === 0) {
+            return;
+          }
         }
-      } else {
-        mFields = mFields.filter(({
-          isSystem
-        }) => !isSystem);
+
+        this.sync();
       }
 
-      return [...[...mFields].sort((a, b) => a.label.localeCompare(b.label)), ...sysFields];
-    },
+    }
+  },
+
+  created() {
+    this.options.forEach(o => {
+      if (typeof o !== 'object') {
+        throw new Error('expecting array of objects for options prop');
+      }
+    });
+  },
 
-    allSelected() {
-      return this.availableFields.length > 0;
+  methods: {
+    _disableDragging(e) {
+      if (this.disabledDragging && e.to !== e.from) {
+        return false;
+      }
     },
 
-    allUnselected() {
-      return this.selectedFields.length > 0;
+    selectAll() {
+      if (this.disabledSorting) {
+        // sorting disabled, just reuse list from the frozen list
+        this.selected = [...this.frozen()];
+      } else {
+        // sorting enabled, push all items left in available
+        // at the end of the list
+        this.selected.push(...this.available);
+      }
+
+      this.available = [];
     },
 
-    availableFields() {
-      // Remove selected fields
-      return this.allFields.filter(a => !this.fields.some(f => a.name === f.name));
+    select(item) {
+      // remove available
+      this.available = this.available.filter(i => i !== item); // put the selected item in the place where it was (if sorting is disabled)
+      // or at the end
+
+      if (this.disabledSorting) {
+        this.selected = this.frozen().filter(i => !this.available.includes(i));
+      } else {
+        this.selected.push(item);
+      }
     },
 
-    filteredAvailableFields() {
-      return this.filterFields(this.availableFields);
+    unselectAll() {
+      this.available = [...this.frozen()];
+      this.selected = [];
     },
 
-    filteredSelectedFields() {
-      return this.filterFields(this.selectedFields);
-    }
+    unselect(item) {
+      // filtering out the unselected item
+      this.selected = this.selected.filter(i => i !== item); // sync available from the list of frozen items without selected
 
-  },
-  watch: {
-    'moduleID'(o, n) {
-      if (o !== n) {
-        this.selectedFields = [];
-      }
-    }
+      this.available = this.frozen().filter(i => !this.selected.includes(i));
+    },
 
-  },
-  methods: {
-    filterFields(fields) {
-      return fields.filter(f => f.name.toLowerCase().indexOf(this.query.toLowerCase()) > -1 || f.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1);
+    /**
+     * Returns true given item is selected or not
+     *
+     * Item is considered selected if value of item's value-field is inside the selected array.
+     *
+     * @param item object
+     * @returns boolean
+     */
+    isPicked(item) {
+      return item[this.valueField] && this.value.includes(item[this.valueField]);
     },
 
-    selectField(field) {
-      if (this.selectedFields.some(selectedField => selectedField.label === field.label)) return;
-      this.selectedFields = [...this.selectedFields, field];
+    sync() {
+      /**
+       * filter all unpicked options, freeze each item in the array and
+       * build list of available items
+       */
+      this.available = this.frozen().filter(opt => !this.isPicked(opt));
+      /**
+       * filter all unpicked options, freeze each item in the array and
+       * build list of selected items, traverse value to keep order
+       */
+
+      this.selected = this.value.map(v => {
+        return this.frozen().find(item => item[this.valueField] === v);
+      }).filter(f => f);
     },
 
-    unselectField(field) {
-      this.selectedFields = this.selectedFields.filter(({
-        name
-      }) => field.name !== name);
+    frozen() {
+      return this.options.map(Object.freeze);
     }
 
   }
@@ -82483,21 +82823,19 @@ var script$P = {
 const __vue_script__$P = script$P;
 
 /* template */
-var __vue_render__$J = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"overflow-hidden"},[_c('b-input-group',[_c('b-input',{staticClass:"text-truncate",attrs:{"type":"search","placeholder":_vm.labels.searchPlaceholder},model:{value:(_vm.query),callback:function ($$v) {_vm.query=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"query"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-input-group-text',{staticClass:"text-primary bg-white border-left-0"},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'search']}})],1)],1)],1),_vm._v(" "),_c('b-row',{staticClass:"mt-2 h-100"},[_c('b-col',{attrs:{"cols":"12","sm":"6"}},[_c('div',{staticClass:"d-flex align-items-center"},[_c('label',{staticClass:"text-primary mb-0"},[_vm._v("\n          "+_vm._s(_vm.labels.availableFields)+"\n        ")]),_vm._v(" "),_c('b-button',{staticClass:"ml-auto px-0 text-muted",class:[_vm.allSelected ? 'visible' : 'invisible'],attrs:{"variant":"link"},on:{"click":function($event){$event.preventDefault();_vm.selectedFields = [].concat( _vm.allFields );}}},[_vm._v("\n          "+_vm._s(_vm.labels.selectAllFields)+"\n        ")])],1),_vm._v(" "),_c('b-list-group',{attrs:{"vertical":""}},[_c('draggable',{key:_vm.filteredAvailableFields.length,staticClass:"overflow-auto",style:(("" + _vm.maxHeight)),attrs:{"handle":".handle","disabled":_vm.disabled,"group":_vm.group,"value":_vm.filteredAvailableFields}},_vm._l((_vm.filteredAvailableFields),function(field){return _c('b-list-group-item',{key:field.name,staticClass:"mb-3 border rounded",on:{"dblclick":function($event){return _vm.selectField(field)}}},[_c('field-item',{attrs:{"field":field,"selected-fields":_vm.selectedFields,"is-selected":false,"system-field-label":_vm.labels.systemField},on:{"select-field":_vm.selectField}})],1)}),1)],1)],1),_vm._v(" "),_c('b-col',{staticClass:"pl-sm-0",attrs:{"cols":"12","sm":"6"}},[_c('div',{staticClass:"d-flex align-items-center"},[_c('label',{staticClass:"mb-0 text-primary"},[_vm._v("\n          "+_vm._s(_vm.labels.selectedFields)+"\n        ")]),_vm._v(" "),_c('b-button',{staticClass:"ml-auto px-0 text-muted",class:[_vm.allUnselected ? 'visible' : 'invisible'],attrs:{"variant":"link"},on:{"click":function($event){$event.preventDefault();_vm.selectedFields = [];}}},[_vm._v("\n          "+_vm._s(_vm.labels.unselectAllFields)+"\n        ")])],1),_vm._v(" "),_c('b-list-group',{attrs:{"vertical":""}},[_c('draggable',{staticClass:"overflow-auto",style:(("" + _vm.maxHeight)),attrs:{"handle":".handle","disabled":_vm.disabled,"group":_vm.group},model:{value:(_vm.selectedFields),callback:function ($$v) {_vm.selectedFields=$$v;},expression:"selectedFields"}},_vm._l((_vm.filteredSelectedFields),function(field){return _c('b-list-group-item',{key:field.name,staticClass:"mb-3 border rounded",on:{"dblclick":function($event){return _vm.unselectField(field)}}},[_c('field-item',{attrs:{"field":field,"selected-fields":_vm.selectedFields,"is-selected":true,"system-field-label":_vm.labels.systemField},on:{"unselect-field":_vm.unselectField}})],1)}),1)],1)],1)],1)],1)};
-var __vue_staticRenderFns__$J = [];
+var __vue_render__$K = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"overflow-hidden d-flex flex-column w-100 vh-100"},[_c('b-card',{staticClass:"h-100",attrs:{"no-body":""}},[_c('b-card-header',{staticClass:"bg-white p-0"},[(!_vm.hideFilter)?_c('b-input-group',[_c('b-input',{staticClass:"text-truncate",attrs:{"type":"search","disabled":_vm._disabledFilter,"placeholder":_vm.labels.searchPlaceholder},model:{value:(_vm.query),callback:function ($$v) {_vm.query=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"query"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-input-group-text',{staticClass:"text-primary bg-white border-left-0"},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'search']}})],1)],1)],1):_vm._e()],1),_vm._v(" "),_c('b-card-body',{staticClass:"d-flex p-0"},[_c('b-card',{staticClass:"col-sm-6 col-12 h-100 p-0",attrs:{"no-body":""}},[_c('b-card-header',{staticClass:"bg-white py-2 pl-0 pr-2"},[_c('div',{staticClass:"d-flex align-items-center"},[_c('label',{staticClass:"text-primary mb-1 mt-2"},[_vm._v("\n              "+_vm._s(_vm.labels.availableItems)+"\n            ")]),_vm._v(" "),_c('b-button',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredAvailable.length && !_vm.disabled),expression:"filteredAvailable.length && !disabled"}],staticClass:"ml-auto px-0 text-muted",attrs:{"variant":"link"},on:{"click":function($event){return _vm.selectAll()}}},[_vm._v("\n              "+_vm._s(_vm.labels.selectAllItems)+"\n            ")])],1)]),_vm._v(" "),_c('b-card-body',{staticClass:"overflow-auto py-0 pl-0 pr-2"},[_c('b-list-group',{staticClass:"h-100",attrs:{"vertical":""}},[_c('draggable',{staticClass:"overflow-auto h-100",attrs:{"sort":!_vm._disabledSorting,"move":_vm._disableDragging,"draggable":".item","group":"items"},scopedSlots:_vm._u([{key:"footer",fn:function(){return [(!_vm.filteredAvailable.length && _vm.query)?_c('h6',{staticClass:"text-center my-4"},[_vm._v("\n                  "+_vm._s(_vm.labels.noItemsFound)+"\n                ")]):_vm._e()]},proxy:true}]),model:{value:(_vm.filteredAvailable),callback:function ($$v) {_vm.filteredAvailable=$$v;},expression:"filteredAvailable"}},_vm._l((_vm.filteredAvailable),function(item){return _c('b-list-group-item',{key:item.value,staticClass:"item mb-3 border rounded",on:{"dblclick":function($event){return _vm.select(item)}}},[_c('c-item-picker-item',{attrs:{"item":item,"disabled":_vm.disabled,"disabled-dragging":_vm.disabledDragging,"disabled-sorting":_vm.disabledSorting,"hide-icons":_vm.hideIcons},on:{"select":function($event){return _vm.select(item)}},scopedSlots:_vm._u([_vm._l((_vm.$scopedSlots),function(_,slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,{"textField":_vm.textField,"disabled":_vm.disabled,"disabledDragging":_vm.disabledDragging,"disabledSorting":_vm.disabledSorting,"hideIcons":_vm.hideIcons},scope)]}}})],null,true)})],1)}),1)],1)],1)],1),_vm._v(" "),_c('b-card',{staticClass:"h-100 pl-sm-0 col-sm-6 col-12 p-0",attrs:{"no-body":""}},[_c('b-card-header',{staticClass:"bg-white py-2 pl-2 pr-0"},[_c('div',{staticClass:"d-flex align-items-center"},[_c('label',{staticClass:"text-primary mb-2 mt-1"},[_vm._v("\n              "+_vm._s(_vm.labels.selectedItems)+"\n            ")]),_vm._v(" "),_c('b-button',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredSelected.length && !_vm.disabled),expression:"filteredSelected.length && !disabled"}],staticClass:"ml-auto px-0 text-muted",attrs:{"variant":"link"},on:{"click":function($event){return _vm.unselectAll()}}},[_vm._v("\n              "+_vm._s(_vm.labels.unselectAllItems)+"\n            ")])],1)]),_vm._v(" "),_c('b-card-body',{staticClass:"overflow-auto py-0 pl-2 pr-0"},[_c('b-list-group',{staticClass:"h-100",attrs:{"vertical":""}},[_c('draggable',{staticClass:"overflow-auto h-100",attrs:{"sort":!_vm._disabledSorting,"move":_vm._disableDragging,"draggable":".item","group":"items"},scopedSlots:_vm._u([{key:"footer",fn:function(){return [(!_vm.filteredSelected.length && _vm.query)?_c('h6',{staticClass:"text-center my-4"},[_vm._v("\n                  "+_vm._s(_vm.labels.noItemsFound)+"\n                ")]):_vm._e()]},proxy:true}]),model:{value:(_vm.filteredSelected),callback:function ($$v) {_vm.filteredSelected=$$v;},expression:"filteredSelected"}},_vm._l((_vm.filteredSelected),function(item){return _c('b-list-group-item',{key:item.value,staticClass:"item mb-3 border rounded",on:{"dblclick":function($event){return _vm.unselect(item)}}},[_c('c-item-picker-item',{attrs:{"item":item,"disabled":_vm.disabled,"disabled-dragging":_vm.disabledDragging,"disabled-sorting":_vm.disabledSorting,"hide-icons":_vm.hideIcons,"selected":""},on:{"unselect":function($event){return _vm.unselect(item)}},scopedSlots:_vm._u([_vm._l((_vm.$scopedSlots),function(_,slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,{"textField":_vm.textField,"disabled":_vm.disabled,"disabledDragging":_vm.disabledDragging,"disabledSorting":_vm.disabledSorting,"hideIcons":_vm.hideIcons},scope)]}}})],null,true)})],1)}),1)],1)],1)],1)],1)],1)],1)};
+var __vue_staticRenderFns__$K = [];
 
   /* style */
-  const __vue_inject_styles__$Q = function (inject) {
-    if (!inject) return
-    inject("data-v-6f297e50_0", { source: ".handle[data-v-6f297e50]{cursor:grab}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__$Q = undefined;
   /* scoped */
-  const __vue_scope_id__$Q = "data-v-6f297e50";
+  const __vue_scope_id__$Q = undefined;
   /* module identifier */
   const __vue_module_identifier__$Q = undefined;
   /* functional template */
   const __vue_is_functional_template__$Q = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -82505,89 +82843,36 @@ var __vue_staticRenderFns__$J = [];
 
   
   const __vue_component__$Q = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$J, staticRenderFns: __vue_staticRenderFns__$J },
+    { render: __vue_render__$K, staticRenderFns: __vue_staticRenderFns__$K },
     __vue_inject_styles__$Q,
     __vue_script__$P,
     __vue_scope_id__$Q,
     __vue_is_functional_template__$Q,
     __vue_module_identifier__$Q,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );
 
-const del$1 = '|||';
-/**
- * Extract subgroups from the given groups
- * @param groups
- * @param path Array of groups that represent the path
- */
-function extractGroups(groups, ...path) {
-    const jpath = path.join(del$1);
-    return [...(new Set(groups
-            .filter(g => g.slice(0, path.length).join(del$1) === jpath)
-            .map(g => g.slice(path.length, path.length + 1)[0])
-            .filter(g => !!g))).values()];
-}
-/**
- * Extract subgroups from the catalogue that match the given path
- *
- * @param cat Catalogue
- * @param path Array of groups that represent the path
- * @constructor
- */
-function ExtractSubgroups(cat, ...path) {
-    const groups = Object.values(cat)
-        .map(({ group }) => group)
-        .filter(g => g !== undefined);
-    return extractGroups(groups, ...path);
-}
-/**
- * Returns all components that match the given path
- *
- * @param cat Catalogue
- * @param path Array of groups that represent the path
-
- */
-function ExtractComponents(cat, ...path) {
-    const jpath = path.join(del$1);
-    return Object.values(cat)
-        .filter(({ group }) => (group || []).join(del$1) === jpath);
-}
-
-//
 var script$Q = {
-  name: 'ComponentList',
   props: {
-    catalogue: {
-      required: true,
-      type: Object
+    displayElement: {
+      type: Object,
+      required: true
     },
-    path: {
-      type: Array,
-      default: () => []
+    labels: {
+      type: Object,
+      default: () => ({})
     }
   },
   computed: {
-    // name of the current group
-    root() {
-      return this.path.length === 0;
+    dataframes() {
+      return this.displayElement.dataframes || [];
     },
 
-    // name of the current group
-    group() {
-      return this.root ? undefined : this.path[this.path.length - 1];
-    },
-
-    // returns all groups at this level
-    subgroups() {
-      return ExtractSubgroups(this.catalogue, ...this.path);
-    },
-
-    components() {
-      // return ExtractComponents(this.catalogue, ...this.path)
-      return ExtractComponents(this.catalogue, ...this.path);
+    options() {
+      return this.displayElement.options || undefined;
     }
 
   }
@@ -82597,21 +82882,17 @@ var script$Q = {
 const __vue_script__$Q = script$Q;
 
 /* template */
-var __vue_render__$K = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(!_vm.root)?_c('h5',{staticClass:"mb-0"},[_vm._v("\n    "+_vm._s(_vm.group)+"\n  ")]):_vm._e(),_vm._v(" "),(_vm.subgroups.length > 0 || _vm.components.length > 0)?_c('div',[_vm._l((_vm.components),function(cmp,i){return _c('div',{key:i,staticClass:"component ml-2",on:{"click":function($event){return _vm.$emit('select', cmp)}}},[_vm._v("\n      "+_vm._s(cmp.name || cmp.component.name || 'Untitled')+"\n      "),(cmp.wip)?_c('b-badge',{staticClass:"float-right",attrs:{"variant":"warning"}},[_vm._v("\n        wip\n      ")]):_vm._e()],1)}),_vm._v(" "),_vm._l((_vm.subgroups),function(group){return _c('component-list',{key:group,staticClass:"my-3",attrs:{"catalogue":_vm.catalogue,"path":_vm.path.concat( [group])},on:{"select":function($event){return _vm.$emit('select', $event)}}})})],2):_vm._e()])};
-var __vue_staticRenderFns__$K = [];
 
   /* style */
-  const __vue_inject_styles__$R = function (inject) {
-    if (!inject) return
-    inject("data-v-8b2b254e_0", { source: ".component[data-v-8b2b254e]{cursor:pointer}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__$R = undefined;
   /* scoped */
-  const __vue_scope_id__$R = "data-v-8b2b254e";
+  const __vue_scope_id__$R = undefined;
   /* module identifier */
   const __vue_module_identifier__$R = undefined;
   /* functional template */
-  const __vue_is_functional_template__$R = false;
+  const __vue_is_functional_template__$R = undefined;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -82619,77 +82900,75 @@ var __vue_staticRenderFns__$K = [];
 
   
   const __vue_component__$R = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$K, staticRenderFns: __vue_staticRenderFns__$K },
+    {},
     __vue_inject_styles__$R,
     __vue_script__$Q,
     __vue_scope_id__$R,
     __vue_is_functional_template__$R,
     __vue_module_identifier__$R,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );
 
 //
 var script$R = {
-  name: 'C3',
-  components: {
-    ComponentList: __vue_component__$R
-  },
-  props: {
-    catalogue: {
-      required: true,
-      type: Object
-    }
-  },
-  computed: {
-    controlGroups() {
-      if (this.current.controls.length === 0) {
-        return [];
-      }
+  extends: __vue_component__$R,
 
-      if (Array.isArray(this.current.controls[0])) {
-        // already grouped
-        return this.current.controls;
-      } // make one virtual group holding all controls
+  data() {
+    return {
+      chart: undefined,
+      plugins: [Funnel, colorschemes]
+    };
+  },
 
+  computed: {
+    localDataframe() {
+      return this.dataframes[0];
+    },
 
-      return [this.current.controls];
+    size() {
+      return this.displayElement ? this.displayElement.meta.size || 100 : 100;
     }
 
   },
+  watch: {
+    dataframes: {
+      deep: true,
 
-  data() {
-    return {
-      current: undefined
-    };
-  },
+      handler(dataframes = []) {
+        if (dataframes.length) {
+          this.$nextTick(() => {
+            this.renderChart();
+          });
+        }
+      }
 
-  methods: {
-    setCurrent(component) {
-      this.current = {
-        props: {},
-        ...component
-      };
-      this.setScenario(this.current);
     },
+    size: {
+      immediate: true,
+      deep: true,
 
-    setScenario({
-      props = {},
-      controls = []
-    }) {
-      // create missing props from controls
-      const apply = (c, props) => c.update(props, c.value(props) || null);
+      handler() {
+        this.$nextTick(() => {
+          this.renderChart();
+        });
+      }
 
-      controls.forEach(c => {
-        if (Array.isArray(c)) {
-          c.forEach(c => apply(c, props));
-        } else {
-          apply(c, props);
-        }
+    }
+  },
+  methods: {
+    renderChart() {
+      if (this.chart) {
+        this.chart.destroy();
+      }
+
+      const ctx = this.$refs.chart.getContext('2d');
+      const chartConfig = this.options.getChartConfiguration(this.dataframes);
+      this.chart = new Chart(ctx, { ...chartConfig,
+        plugins: this.plugins
       });
-      this.current.props = props;
     }
 
   }
@@ -82699,21 +82978,19 @@ var script$R = {
 const __vue_script__$R = script$R;
 
 /* template */
-var __vue_render__$L = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout"},[_c('aside',{staticClass:"sidebar p-2"},[_c('h5',{staticClass:"border-bottom"},[_vm._v("\n      C3: Component Catalogue\n    ")]),_vm._v(" "),_c('component-list',{attrs:{"catalogue":_vm.catalogue},on:{"select":function($event){return _vm.setCurrent($event)}}})],1),_vm._v(" "),_c('main',{staticClass:"p-5"},[(_vm.current)?_c(_vm.current.component,_vm._b({tag:"component"},'component',_vm.current.props,false)):_c('p',{staticClass:"text-center"},[_vm._v("\n      Select a component from the C3 Catalogue and start hacking :)\n    ")])],1),_vm._v(" "),(_vm.current)?_c('div',{staticClass:"controls px-5 py-2 mt-2"},[_vm._l((_vm.controlGroups),function(cg,g){return _c('div',{key:("control-group-" + g),staticClass:"control-group mr-2"},[_c('h3',[_vm._v("\n        Controls\n      ")]),_vm._v(" "),_vm._l((cg),function(c,i){return _c(c.component,_vm._b({key:i,tag:"component",attrs:{"value":c.value(_vm.current.props)},on:{"update":function($event){return c.update(_vm.current.props, $event)}}},'component',c.props,false))})],2)}),_vm._v(" "),(_vm.current.scenarios)?_c('div',{staticClass:"control-group float-right"},[_c('h3',[_vm._v("\n        Pre-set controls\n      ")]),_vm._v(" "),_c('ul',{staticClass:"pl-0"},_vm._l((_vm.current.scenarios),function(s,i){return _c('li',{key:i,staticClass:"list-unstyled scenario",on:{"click":function($event){return _vm.setScenario(s)}}},[_vm._v("\n          "+_vm._s(s.label)+"\n        ")])}),0)]):_vm._e()],2):_vm._e()])};
+var __vue_render__$L = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('canvas',{ref:"chart",staticClass:"h-100 w-100"})};
 var __vue_staticRenderFns__$L = [];
 
   /* style */
-  const __vue_inject_styles__$S = function (inject) {
-    if (!inject) return
-    inject("data-v-2c86815c_0", { source: ".layout{height:100vh;width:100vw;display:grid;grid-template-rows:auto 400px;grid-template-columns:300px auto;align-content:stretch;grid-template-areas:\"side main\" \"side controls\"}.layout aside{grid-area:side;overflow:auto}.layout main{grid-area:main;background-image:linear-gradient(135deg,#f3f3f5 21.43%,#fff 21.43%,#fff 50%,#f3f3f5 50%,#f3f3f5 71.43%,#fff 71.43%,#fff 100%);background-size:35px 35px;overflow:auto}.layout .controls{grid-area:controls;overflow:auto}.layout .controls .control-group{float:left}.layout .scenario{cursor:pointer}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__$S = undefined;
   /* scoped */
   const __vue_scope_id__$S = undefined;
   /* module identifier */
   const __vue_module_identifier__$S = undefined;
   /* functional template */
   const __vue_is_functional_template__$S = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -82728,32 +83005,90 @@ var __vue_staticRenderFns__$L = [];
     __vue_is_functional_template__$S,
     __vue_module_identifier__$S,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 //
 var script$S = {
-  props: {
-    label: {
-      required: true,
-      type: String
+  extends: __vue_component__$R,
+
+  data() {
+    return {
+      vvb: ['0', '0', '0', '0']
+    };
+  },
+
+  computed: {
+    viewbox() {
+      return this.vvb.join(' ');
+    },
+
+    style() {
+      return {
+        fill: this.options.color || '#000000',
+        backgroundColor: this.options.backgroundColor || '#ffffff'
+      };
     },
+
+    value() {
+      if (this.dataframes.length) {
+        const {
+          rows = [],
+          columns = []
+        } = this.dataframes[0];
+
+        if (columns.length) {
+          const columnIndex = columns.findIndex(({
+            name
+          }) => name === this.options.valueColumn);
+
+          if (rows.length) {
+            return rows[0] ? rows[0][columnIndex] || '' : '';
+          }
+        }
+      }
+
+      return '';
+    },
+
+    displayedMetric() {
+      const {
+        prefix = '',
+        suffix = ''
+      } = this.options;
+
+      if (this.value) {
+        return `${prefix}${this.value}${suffix}`;
+      }
+
+      return '';
+    }
+
+  },
+  watch: {
     value: {
-      type: String,
-      default: () => ''
+      immediate: true,
+      handler: function () {
+        this.update();
+      }
     }
+  },
+  methods: {
+    update() {
+      this.$nextTick(function () {
+        const {
+          width,
+          height
+        } = this.$refs.metricItem.getBBox();
+        const tmp = [...this.vvb];
+        tmp[2] = parseInt(Math.ceil(width));
+        tmp[3] = parseInt(Math.ceil(height));
+        this.vvb = tmp;
+      });
+    }
+
   }
 };
 
@@ -82761,7 +83096,7 @@ var script$S = {
 const __vue_script__$S = script$S;
 
 /* template */
-var __vue_render__$M = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-input',{attrs:{"value":_vm.value},on:{"update":function($event){return _vm.$emit('update', $event)}}})],1)};
+var __vue_render__$M = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.options)?_c('div',{staticClass:"d-flex align-items-center justify-content-center overflow-hidden h-100 px-2 rounded",style:(_vm.style)},[_c('svg',{staticClass:"h-100 w-100 align-items-end d-flex",attrs:{"viewBox":_vm.viewbox,"width":"100%","height":"100%"}},[_c('text',{ref:"metricItem",attrs:{"y":"50%","x":"50%","text-anchor":"middle","dominant-baseline":"central","text-rendering":"geometricPrecision"}},[_vm._v("\n      "+_vm._s(_vm.displayedMetric)+"\n    ")])])]):_vm._e()};
 var __vue_staticRenderFns__$M = [];
 
   /* style */
@@ -82793,27 +83128,377 @@ var __vue_staticRenderFns__$M = [];
     undefined
   );
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 //
 var script$T = {
-  props: {
-    label: {
-      required: true,
-      type: String
+  extends: __vue_component__$R,
+
+  data() {
+    return {
+      sort: {
+        field: '',
+        descending: false
+      },
+      cursors: [],
+      cursor: undefined
+    };
+  },
+
+  computed: {
+    localDataframe() {
+      return this.dataframes[0];
     },
-    value: {
-      type: String,
-      default: () => ''
+
+    // indexFrames groups frames based on the related DS identifiers
+    // for easier work.
+    indexFrames() {
+      const ix = {};
+
+      for (const df of this.dataframes || []) {
+        if (!df.relSource) {
+          continue;
+        }
+
+        if (!ix[df.relSource]) {
+          ix[df.relSource] = {};
+        }
+
+        if (!ix[df.relSource][df.refValue]) {
+          ix[df.relSource][df.refValue] = [];
+        }
+
+        ix[df.relSource][df.refValue].push(df);
+      }
+
+      return ix;
+    },
+
+    tabelify() {
+      if (!this.dataframes.length) {
+        return {};
+      }
+
+      return this.tabelifyFrame(this.localDataframe);
+    },
+
+    hasPrevPage() {
+      return !!this.cursors.length;
+    },
+
+    nextPage() {
+      if (this.localDataframe) {
+        const {
+          nextPage
+        } = this.localDataframe.paging || {};
+        return nextPage;
+      }
+
+      return undefined;
+    },
+
+    hasNextPage() {
+      return !!this.nextPage;
     }
+
+  },
+  watch: {
+    localDataframe: {
+      immediate: true,
+
+      handler(dataframe, oldDataframe) {
+        if (dataframe && !oldDataframe) {
+          const firstField = dataframe.sort.includes(',') ? dataframe.sort.split(',')[0] : dataframe.sort;
+
+          if (firstField.includes('DESC')) {
+            this.sort.descending = true;
+            this.sort.field = firstField.split(' ')[0];
+          } else {
+            this.sort.field = firstField;
+          }
+        }
+      }
+
+    }
+  },
+  methods: {
+    // keyColumns returns all of the key columns with indexes for all of the
+    // columns that are used in joins.
+    keyColumns(frame) {
+      const foreignFrames = this.getForeignFrames(frame);
+      const keys = {};
+
+      if (foreignFrames === undefined) {
+        return keys;
+      }
+
+      for (const ff of Object.values(foreignFrames)) {
+        for (const f of ff) {
+          keys[f.relColumn] = f.columns.findIndex(({
+            name
+          }) => name === f.relColumn);
+        }
+      }
+
+      return keys;
+    },
+
+    getForeignFrames(frame) {
+      return this.indexFrames[frame.ref];
+    },
+
+    // tabelifyFrame returns a set of rows and columns that should be shown
+    // for this frame.
+    //
+    // maxSize is used to calculate the rowSpan that should be applied to joined
+    // frames with fewer rows then the other.
+    //
+    // Flow outline:
+    //  * for each row of the frame:
+    //  ** find all foreign frames
+    //  ** tabelify foreign frames
+    //  ** merge with the current tabelified result
+    tabelifyFrame(frame, maxSize = 1) {
+      const outRows = [];
+      const isLocal = frame.ref === this.localDataframe.ref; // Index selected columns
+
+      const selectedCols = new Set();
+
+      for (const c of this.options.columns[frame.ref] || []) {
+        selectedCols.add(frame.columns.findIndex(({
+          name
+        }) => name === c.name));
+      }
+
+      const hSeanFrames = {};
+      const outHeader = [...selectedCols].map(index => {
+        const column = frame.columns[index];
+        return {
+          column,
+          meta: {
+            ref: frame.ref,
+            sortKey: isLocal ? column.name : `${frame.ref}.${column.name}`
+          }
+        };
+      });
+      const outColgroups = [{
+        size: outHeader.length,
+        isLocal: isLocal
+      }];
+      const relFrames = this.getForeignFrames(frame);
+      const usedKeys = this.keyColumns(frame);
+
+      for (const r of frame.rows || []) {
+        maxSize = 1;
+        const row = this.tabelifyRow(r, [...selectedCols]);
+        const auxRows = [];
+
+        for (const colIndex of Object.values(usedKeys)) {
+          const relFrame = relFrames[r[colIndex]]; // Determine the largest frame so our maxSize will match
+
+          for (const rf of relFrame || []) {
+            maxSize = Math.max(maxSize, rf.rows.length);
+          } // Tabelify related frames
+
+
+          for (const rf of relFrame || []) {
+            // const refColumnIndexes = (this.options.columns[rf.ref] || []).map(({ name }) => {
+            //   return frame.columns.findIndex(fc => fc.name === name)
+            // })
+            const aux = this.tabelifyFrame(rf, Math.max(rf.rows.length, maxSize)); // Optionally append header
+
+            if (!hSeanFrames[rf.ref]) {
+              const x = [...aux.header];
+              x[0].sourceName = rf.ref;
+              outHeader.push(...x);
+              hSeanFrames[rf.ref] = true;
+              outColgroups.push(...aux.colgroups);
+            } // Rowspan smaller frames so the table is nice and aligned
+
+
+            if (aux.rows.length < maxSize) {
+              for (const col of aux.rows[aux.rows.length - 1]) {
+                col.attrs = {
+                  rowspan: maxSize - aux.rows.length + 1
+                };
+              }
+            }
+
+            auxRows.push(aux.rows);
+          }
+        } // Merge the original row with joined rows
+        // - the forst row of the merged row gets joined with the original row
+        // - the rest are appended to the list (they are offsetted by rowspan)
+
+
+        if (auxRows.length > 0) {
+          for (const c of row) {
+            c.attrs = {
+              rowspan: maxSize
+            };
+          }
+
+          row[0].separator = true;
+          const merged = this.mergeRows(auxRows).pop();
+          row.push(...merged[0]);
+          outRows.push(row);
+          outRows.push(...merged.slice(1));
+        } else {
+          outRows.push(row);
+        }
+      }
+
+      return {
+        rows: outRows,
+        maxSize,
+        header: outHeader,
+        colgroups: outColgroups
+      };
+    },
+
+    mergeRows(auxRows, maxSize) {
+      if (auxRows.length <= 1) {
+        return auxRows;
+      }
+
+      const a = auxRows[auxRows.length - 2];
+      const b = auxRows[auxRows.length - 1];
+      const tmpRows = [];
+
+      for (let i = 0; i < a.length; i++) {
+        const row = a[i];
+
+        if (i >= b.length) {
+          tmpRows.push(row);
+          continue;
+        }
+
+        row.push(...b[i]);
+        tmpRows.push(row);
+      }
+
+      if (b.length > a.length) {
+        tmpRows.push(...b.slice(a.length));
+      }
+
+      auxRows.splice(auxRows.length - 2, 2, tmpRows);
+      return this.mergeRows(auxRows);
+    },
+
+    tabelifyRow(row, selectedCols = []) {
+      const out = [];
+      selectedCols.forEach(index => {
+        out.push({
+          value: row[index]
+        });
+      });
+      return out;
+    },
+
+    // Sorting
+    handleSort(fieldName) {
+      let relatedDatasource;
+
+      if (fieldName.includes('.')) {
+        [relatedDatasource, fieldName] = fieldName.split('.');
+        return; // Uncomment this when foreign frame sorting is implemented
+      }
+
+      if (fieldName) {
+        const {
+          field,
+          descending
+        } = this.sort;
+
+        if (this.cursor) {
+          this.cursor = undefined;
+          this.cursors = [];
+        }
+
+        if (fieldName === field) {
+          this.sort.descending = !descending;
+        } else {
+          this.sort.field = fieldName;
+          this.sort.descending = false;
+        }
+      }
+
+      this.updateDefinition(relatedDatasource);
+    },
+
+    goToPage(dir) {
+      switch (dir) {
+        case 'nextPage':
+          if (!this.cursors.length) {
+            this.cursors.push(undefined);
+          }
+
+          this.cursors.push(this.nextPage);
+          this.cursor = this.nextPage;
+          break;
+
+        case 'prevPage':
+          this.cursors.pop();
+          this.cursor = this.cursors.pop();
+          break;
+
+        default:
+          this.cursor = undefined;
+          this.cursors = [];
+      }
+
+      this.updateDefinition();
+    },
+
+    // Meta
+    updateDefinition(updatedDatasource) {
+      if (this.localDataframe) {
+        // Get related datasource
+        let ref = this.localDataframe.ref;
+
+        if (updatedDatasource) {
+          ref = (this.dataframes.find(({
+            ref
+          }) => ref === updatedDatasource) || {}).ref;
+        }
+
+        if (ref) {
+          const def = {
+            ref
+          }; // Sorting
+
+          const {
+            field,
+            descending
+          } = this.sort;
+
+          if (field) {
+            // Generate sort string
+            const sort = descending ? `${field} DESC` : field;
+            def.sort = sort;
+          } // Paging
+
+
+          if (this.cursor) {
+            let {
+              limit
+            } = this.localDataframe.paging || {};
+
+            if (!limit) {
+              limit = this.options.datasources[0] ? this.options.datasources[0].paging.limit || 20 : 20;
+            }
+
+            def.paging = {
+              cursor: this.cursor,
+              limit
+            };
+          }
+
+          const definition = {};
+          definition[ref] = def;
+          this.$emit('update', definition);
+        }
+      }
+    }
+
   }
 };
 
@@ -82821,19 +83506,27 @@ var script$T = {
 const __vue_script__$T = script$T;
 
 /* template */
-var __vue_render__$N = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-textarea',{attrs:{"value":_vm.value},on:{"update":function($event){return _vm.$emit('update', $event)}}})],1)};
+var __vue_render__$N = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card',{staticClass:"h-100 rounded-0",attrs:{"no-body":""}},[_c('b-table-simple',{staticClass:"flex-grow-1 mh-100 mb-0",attrs:{"table-variant":_vm.options.tableVariant,"dark":_vm.options.dark,"bordered":_vm.options.bordered,"borderless":_vm.options.borderless,"outlined":_vm.options.outlined,"striped":_vm.options.striped,"responsive":_vm.options.responsive,"fixed":_vm.options.fixed,"hover":_vm.options.hover,"small":_vm.options.small,"no-border-collapse":_vm.options.noCollapse,"sticky-header":""}},[_vm._l((_vm.tabelify.colgroups),function(cg,i){return _c('colgroup',{key:i,class:{ local: cg.isLocal, foreign: !cg.isLocal },attrs:{"span":cg.size}})}),_vm._v(" "),_c('b-thead',{attrs:{"head-variant":_vm.options.headVariant}},[(_vm.dataframes.length > 1)?_c('b-tr',_vm._l((_vm.tabelify.header),function(c,i){return _c('b-th',_vm._b({key:i,staticClass:"border-0"},'b-th',c.column.attrs || {},false),[(c.sourceName)?_c('p',{staticClass:"m-0"},[_vm._v("\n            "+_vm._s(c.sourceName)+"\n          ")]):_vm._e()])}),1):_vm._e(),_vm._v(" "),_c('b-tr',_vm._l((_vm.tabelify.header),function(c,i){return _c('b-th',{key:i,staticClass:"border-0",class:{ 'pointer': !c.meta.sortKey.includes('.') },on:{"click":function($event){return _vm.handleSort(c.meta.sortKey)}}},[_c('div',{staticClass:"d-flex align-items-center"},[_c('div',{staticClass:"d-flex text-nowrap"},[_vm._v("\n              "+_vm._s(c.column.label)+"\n            ")]),_vm._v(" "),(!c.meta.sortKey.includes('.'))?_c('font-awesome-layers',{staticClass:"ml-2"},[_c('font-awesome-icon',{staticClass:"mb-1",style:({
+                  color: _vm.sort.field === c.meta.sortKey && !_vm.sort.descending ? 'black' : 'grey',
+                }),attrs:{"icon":['fas', 'angle-up']}}),_vm._v(" "),_c('font-awesome-icon',{staticClass:"mt-1",style:({
+                  color: _vm.sort.field === c.meta.sortKey && _vm.sort.descending ? 'black' : 'grey',
+                }),attrs:{"icon":['fas', 'angle-down']}})],1):_vm._e()],1)])}),1)],1),_vm._v(" "),_c('b-tbody',{staticClass:"h-100"},_vm._l((_vm.tabelify.rows),function(r,i){return _c('b-tr',{key:i,class:{
+          separator: !!(r[0] || {}).separator,
+        }},_vm._l((r),function(c,j){return _c('b-td',_vm._b({key:j},'b-td',c.attrs || {},false),[_vm._v("\n          "+_vm._s(c.value)+"\n        ")])}),1)}),1)],2),_vm._v(" "),_c('b-card-footer',{staticClass:"d-flex p-1 rounded-0"},[_c('b-button-group',{staticClass:"ml-auto"},[_c('b-button',{staticClass:"d-flex align-items-center text-dark px-1",attrs:{"disabled":!_vm.hasPrevPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage()}}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'angle-double-left']}})],1),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center text-dark",attrs:{"disabled":!_vm.hasPrevPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage('prevPage')}}},[_c('font-awesome-icon',{staticClass:"mr-1",attrs:{"icon":['fas', 'angle-left']}}),_vm._v("\n        "+_vm._s(_vm.labels.previous)+"\n      ")],1),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center text-dark",attrs:{"disabled":!_vm.hasNextPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage('nextPage')}}},[_vm._v("\n        "+_vm._s(_vm.labels.next)+"\n        "),_c('font-awesome-icon',{staticClass:"ml-1",attrs:{"icon":['fas', 'angle-right']}})],1)],1)],1)],1)};
 var __vue_staticRenderFns__$N = [];
 
   /* style */
-  const __vue_inject_styles__$U = undefined;
+  const __vue_inject_styles__$U = function (inject) {
+    if (!inject) return
+    inject("data-v-b515bfce_0", { source: ".foreign[data-v-b515bfce]{border:1px solid rgba(22,36,37,.8);border-top:0;border-bottom:0}.separator[data-v-b515bfce]{border-top:2px solid rgba(22,36,37,.5)}.card-rounded[data-v-b515bfce]{border-radius:1rem 1rem 0 0}", map: undefined, media: undefined });
+
+  };
   /* scoped */
-  const __vue_scope_id__$U = undefined;
+  const __vue_scope_id__$U = "data-v-b515bfce";
   /* module identifier */
   const __vue_module_identifier__$U = undefined;
   /* functional template */
   const __vue_is_functional_template__$U = false;
-  /* style inject */
-  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -82848,39 +83541,21 @@ var __vue_staticRenderFns__$N = [];
     __vue_is_functional_template__$U,
     __vue_module_identifier__$U,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
 //
 var script$U = {
-  props: {
-    label: {
-      required: true,
-      type: String
-    },
-    value: {
-      type: Boolean,
-      default: () => false
-    }
-  }
+  extends: __vue_component__$R
 };
 
 /* script */
 const __vue_script__$U = script$U;
 
 /* template */
-var __vue_render__$O = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',[_c('b-form-checkbox',{attrs:{"checked":_vm.value},on:{"change":function($event){return _vm.$emit('update', $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")])],1)};
+var __vue_render__$O = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.options)?_c('div',{staticClass:"p-2",domProps:{"innerHTML":_vm._s(_vm.options.value)}}):_vm._e()};
 var __vue_staticRenderFns__$O = [];
 
   /* style */
@@ -82912,8 +83587,222 @@ var __vue_staticRenderFns__$O = [];
     undefined
   );
 
+const del$1 = '|||';
+/**
+ * Extract subgroups from the given groups
+ * @param groups
+ * @param path Array of groups that represent the path
+ */
+function extractGroups(groups, ...path) {
+    const jpath = path.join(del$1);
+    return [...(new Set(groups
+            .filter(g => g.slice(0, path.length).join(del$1) === jpath)
+            .map(g => g.slice(path.length, path.length + 1)[0])
+            .filter(g => !!g))).values()];
+}
+/**
+ * Extract subgroups from the catalogue that match the given path
+ *
+ * @param cat Catalogue
+ * @param path Array of groups that represent the path
+ * @constructor
+ */
+function ExtractSubgroups(cat, ...path) {
+    const groups = Object.values(cat)
+        .map(({ group }) => group)
+        .filter(g => g !== undefined);
+    return extractGroups(groups, ...path);
+}
+/**
+ * Returns all components that match the given path
+ *
+ * @param cat Catalogue
+ * @param path Array of groups that represent the path
+
+ */
+function ExtractComponents(cat, ...path) {
+    const jpath = path.join(del$1);
+    return Object.values(cat)
+        .filter(({ group }) => (group || []).join(del$1) === jpath);
+}
+
 //
+var script$V = {
+  name: 'ComponentList',
+  props: {
+    catalogue: {
+      required: true,
+      type: Object
+    },
+    path: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    // name of the current group
+    root() {
+      return this.path.length === 0;
+    },
+
+    // name of the current group
+    group() {
+      return this.root ? undefined : this.path[this.path.length - 1];
+    },
+
+    // returns all groups at this level
+    subgroups() {
+      return ExtractSubgroups(this.catalogue, ...this.path);
+    },
+
+    components() {
+      // return ExtractComponents(this.catalogue, ...this.path)
+      return ExtractComponents(this.catalogue, ...this.path);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__$V = script$V;
+
+/* template */
+var __vue_render__$P = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(!_vm.root)?_c('h5',{staticClass:"mb-0"},[_vm._v("\n    "+_vm._s(_vm.group)+"\n  ")]):_vm._e(),_vm._v(" "),(_vm.subgroups.length > 0 || _vm.components.length > 0)?_c('div',[_vm._l((_vm.components),function(cmp,i){return _c('div',{key:i,staticClass:"component ml-2",on:{"click":function($event){return _vm.$emit('select', cmp)}}},[_vm._v("\n      "+_vm._s(cmp.name || cmp.component.name || 'Untitled')+"\n      "),(cmp.wip)?_c('b-badge',{staticClass:"float-right",attrs:{"variant":"warning"}},[_vm._v("\n        wip\n      ")]):_vm._e()],1)}),_vm._v(" "),_vm._l((_vm.subgroups),function(group){return _c('component-list',{key:group,staticClass:"my-3",attrs:{"catalogue":_vm.catalogue,"path":_vm.path.concat( [group])},on:{"select":function($event){return _vm.$emit('select', $event)}}})})],2):_vm._e()])};
+var __vue_staticRenderFns__$P = [];
+
+  /* style */
+  const __vue_inject_styles__$W = function (inject) {
+    if (!inject) return
+    inject("data-v-8b2b254e_0", { source: ".component[data-v-8b2b254e]{cursor:pointer}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$W = "data-v-8b2b254e";
+  /* module identifier */
+  const __vue_module_identifier__$W = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$W = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$W = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$P, staticRenderFns: __vue_staticRenderFns__$P },
+    __vue_inject_styles__$W,
+    __vue_script__$V,
+    __vue_scope_id__$W,
+    __vue_is_functional_template__$W,
+    __vue_module_identifier__$W,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
 //
+var script$W = {
+  name: 'C3',
+  components: {
+    ComponentList: __vue_component__$W
+  },
+  props: {
+    catalogue: {
+      required: true,
+      type: Object
+    }
+  },
+  computed: {
+    controlGroups() {
+      if (this.current.controls.length === 0) {
+        return [];
+      }
+
+      if (Array.isArray(this.current.controls[0])) {
+        // already grouped
+        return this.current.controls;
+      } // make one virtual group holding all controls
+
+
+      return [this.current.controls];
+    }
+
+  },
+
+  data() {
+    return {
+      current: undefined
+    };
+  },
+
+  methods: {
+    setCurrent(component) {
+      this.current = {
+        props: {},
+        ...component
+      };
+      this.setScenario(this.current);
+    },
+
+    setScenario({
+      props = {},
+      controls = []
+    }) {
+      // create missing props from controls
+      const apply = (c, props) => c.update(props, c.value(props) || null);
+
+      controls.forEach(c => {
+        if (Array.isArray(c)) {
+          c.forEach(c => apply(c, props));
+        } else {
+          apply(c, props);
+        }
+      });
+      this.current.props = props;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__$W = script$W;
+
+/* template */
+var __vue_render__$Q = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout"},[_c('aside',{staticClass:"sidebar p-2"},[_c('h5',{staticClass:"border-bottom"},[_vm._v("\n      C3: Component Catalogue\n    ")]),_vm._v(" "),_c('component-list',{attrs:{"catalogue":_vm.catalogue},on:{"select":function($event){return _vm.setCurrent($event)}}})],1),_vm._v(" "),_c('main',{staticClass:"p-5"},[(_vm.current)?_c(_vm.current.component,_vm._b({tag:"component"},'component',_vm.current.props,false)):_c('p',{staticClass:"text-center"},[_vm._v("\n      Select a component from the C3 Catalogue and start hacking :)\n    ")])],1),_vm._v(" "),(_vm.current)?_c('div',{staticClass:"controls px-5 py-2 mt-2"},[_vm._l((_vm.controlGroups),function(cg,g){return _c('div',{key:("control-group-" + g),staticClass:"control-group mr-2"},[_c('h3',[_vm._v("\n        Controls\n      ")]),_vm._v(" "),_vm._l((cg),function(c,i){return _c(c.component,_vm._b({key:i,tag:"component",attrs:{"value":c.value(_vm.current.props)},on:{"update":function($event){return c.update(_vm.current.props, $event)}}},'component',c.props,false))})],2)}),_vm._v(" "),(_vm.current.scenarios)?_c('div',{staticClass:"control-group float-right"},[_c('h3',[_vm._v("\n        Pre-set controls\n      ")]),_vm._v(" "),_c('ul',{staticClass:"pl-0"},_vm._l((_vm.current.scenarios),function(s,i){return _c('li',{key:i,staticClass:"list-unstyled scenario",on:{"click":function($event){return _vm.setScenario(s)}}},[_vm._v("\n          "+_vm._s(s.label)+"\n        ")])}),0)]):_vm._e()],2):_vm._e()])};
+var __vue_staticRenderFns__$Q = [];
+
+  /* style */
+  const __vue_inject_styles__$X = function (inject) {
+    if (!inject) return
+    inject("data-v-2c86815c_0", { source: ".layout{height:100vh;width:100vw;display:grid;grid-template-rows:auto 400px;grid-template-columns:300px auto;align-content:stretch;grid-template-areas:\"side main\" \"side controls\"}.layout aside{grid-area:side;overflow:auto}.layout main{grid-area:main;background-image:linear-gradient(135deg,#f3f3f5 21.43%,#fff 21.43%,#fff 50%,#f3f3f5 50%,#f3f3f5 71.43%,#fff 71.43%,#fff 100%);background-size:35px 35px;overflow:auto}.layout .controls{grid-area:controls;overflow:auto}.layout .controls .control-group{float:left}.layout .scenario{cursor:pointer}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$X = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$X = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$X = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$X = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$Q, staticRenderFns: __vue_staticRenderFns__$Q },
+    __vue_inject_styles__$X,
+    __vue_script__$W,
+    __vue_scope_id__$X,
+    __vue_is_functional_template__$X,
+    __vue_module_identifier__$X,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
 //
 //
 //
@@ -82924,7 +83813,188 @@ var __vue_staticRenderFns__$O = [];
 //
 //
 //
-var script$V = {
+//
+var script$X = {
+  props: {
+    label: {
+      required: true,
+      type: String
+    },
+    value: {
+      type: String,
+      default: () => ''
+    }
+  }
+};
+
+/* script */
+const __vue_script__$X = script$X;
+
+/* template */
+var __vue_render__$R = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-input',{attrs:{"value":_vm.value},on:{"update":function($event){return _vm.$emit('update', $event)}}})],1)};
+var __vue_staticRenderFns__$R = [];
+
+  /* style */
+  const __vue_inject_styles__$Y = undefined;
+  /* scoped */
+  const __vue_scope_id__$Y = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$Y = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$Y = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$Y = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$R, staticRenderFns: __vue_staticRenderFns__$R },
+    __vue_inject_styles__$Y,
+    __vue_script__$X,
+    __vue_scope_id__$Y,
+    __vue_is_functional_template__$Y,
+    __vue_module_identifier__$Y,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script$Y = {
+  props: {
+    label: {
+      required: true,
+      type: String
+    },
+    value: {
+      type: String,
+      default: () => ''
+    }
+  }
+};
+
+/* script */
+const __vue_script__$Y = script$Y;
+
+/* template */
+var __vue_render__$S = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-textarea',{attrs:{"value":_vm.value},on:{"update":function($event){return _vm.$emit('update', $event)}}})],1)};
+var __vue_staticRenderFns__$S = [];
+
+  /* style */
+  const __vue_inject_styles__$Z = undefined;
+  /* scoped */
+  const __vue_scope_id__$Z = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$Z = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$Z = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$Z = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$S, staticRenderFns: __vue_staticRenderFns__$S },
+    __vue_inject_styles__$Z,
+    __vue_script__$Y,
+    __vue_scope_id__$Z,
+    __vue_is_functional_template__$Z,
+    __vue_module_identifier__$Z,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script$Z = {
+  props: {
+    label: {
+      required: true,
+      type: String
+    },
+    value: {
+      type: Boolean,
+      default: () => false
+    }
+  }
+};
+
+/* script */
+const __vue_script__$Z = script$Z;
+
+/* template */
+var __vue_render__$T = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',[_c('b-form-checkbox',{attrs:{"checked":_vm.value},on:{"change":function($event){return _vm.$emit('update', $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")])],1)};
+var __vue_staticRenderFns__$T = [];
+
+  /* style */
+  const __vue_inject_styles__$_ = undefined;
+  /* scoped */
+  const __vue_scope_id__$_ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$_ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$_ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$_ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$T, staticRenderFns: __vue_staticRenderFns__$T },
+    __vue_inject_styles__$_,
+    __vue_script__$Z,
+    __vue_scope_id__$_,
+    __vue_is_functional_template__$_,
+    __vue_module_identifier__$_,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script$_ = {
   props: {
     label: {
       required: true,
@@ -82942,20 +84012,20 @@ var script$V = {
 };
 
 /* script */
-const __vue_script__$V = script$V;
+const __vue_script__$_ = script$_;
 
 /* template */
-var __vue_render__$P = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-select',{attrs:{"value":_vm.value,"options":_vm.options},on:{"input":function($event){return _vm.$emit('update', $event)}}})],1)};
-var __vue_staticRenderFns__$P = [];
+var __vue_render__$U = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',{attrs:{"label":_vm.label}},[_c('b-form-select',{attrs:{"value":_vm.value,"options":_vm.options},on:{"input":function($event){return _vm.$emit('update', $event)}}})],1)};
+var __vue_staticRenderFns__$U = [];
 
   /* style */
-  const __vue_inject_styles__$W = undefined;
+  const __vue_inject_styles__$$ = undefined;
   /* scoped */
-  const __vue_scope_id__$W = undefined;
+  const __vue_scope_id__$$ = undefined;
   /* module identifier */
-  const __vue_module_identifier__$W = undefined;
+  const __vue_module_identifier__$$ = undefined;
   /* functional template */
-  const __vue_is_functional_template__$W = false;
+  const __vue_is_functional_template__$$ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -82964,13 +84034,13 @@ var __vue_staticRenderFns__$P = [];
   
 
   
-  const __vue_component__$W = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$P, staticRenderFns: __vue_staticRenderFns__$P },
-    __vue_inject_styles__$W,
-    __vue_script__$V,
-    __vue_scope_id__$W,
-    __vue_is_functional_template__$W,
-    __vue_module_identifier__$W,
+  const __vue_component__$$ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$U, staticRenderFns: __vue_staticRenderFns__$U },
+    __vue_inject_styles__$$,
+    __vue_script__$_,
+    __vue_scope_id__$$,
+    __vue_is_functional_template__$$,
+    __vue_module_identifier__$$,
     false,
     undefined,
     undefined,
@@ -100182,16 +101252,16 @@ function generic(component, { handler, props }) {
         props }, handler);
 }
 function input(label, handler) {
-    return generic(__vue_component__$T, { handler, props: { label } });
+    return generic(__vue_component__$Y, { handler, props: { label } });
 }
 function textarea(label, handler) {
-    return generic(__vue_component__$U, { handler, props: { label } });
+    return generic(__vue_component__$Z, { handler, props: { label } });
 }
 function checkbox(label, handler) {
-    return generic(__vue_component__$V, { handler, props: { label } });
+    return generic(__vue_component__$_, { handler, props: { label } });
 }
 function select(label, handler, options) {
-    return generic(__vue_component__$W, {
+    return generic(__vue_component__$$, {
         handler,
         props: {
             label,
@@ -100210,7 +101280,7 @@ var controls = /*#__PURE__*/Object.freeze({
 });
 
 var index$2 = {
-    View: __vue_component__$S,
+    View: __vue_component__$X,
     controls,
 };
 
@@ -100224,8 +101294,9 @@ var index$3 = /*#__PURE__*/Object.freeze({
   canPreview: canPreview,
   CInputConfirm: __vue_component__$9,
   CInputProcessing: __vue_component__$a,
-  CInputDateTime: __vue_component__$c,
-  CInputInterval: __vue_component__$d,
+  CInputDateTime: __vue_component__$b,
+  CInputPresort: __vue_component__$c,
+  CInputCron: __vue_component__$d,
   CRichTextInput: __vue_component__$m,
   CLightbox: __vue_component__$5,
   CPermissionsButton: __vue_component__$n,
@@ -100240,8 +101311,12 @@ var index$3 = /*#__PURE__*/Object.freeze({
   CToaster: __vue_component__$N,
   CToasterLink: __vue_component__$M,
   CReminderSidebar: __vue_component__$O,
-  FieldItem: __vue_component__$P,
-  FieldPicker: __vue_component__$Q,
+  CItemPicker: __vue_component__$Q,
+  CItemPickerItem: __vue_component__$P,
+  CReportChart: __vue_component__$S,
+  CReportMetric: __vue_component__$T,
+  CReportTable: __vue_component__$U,
+  CReportText: __vue_component__$V,
   C3: index$2,
   CPrompts: __vue_component__$B,
   CPromptModal: __vue_component__$A,
@@ -100663,6 +101738,66 @@ var index$7 = /*#__PURE__*/Object.freeze({
   RBAC: RBAC
 });
 
+// A helper function to remove diacritics from the given string.
+// This allows us so search over characters like čšž with csz.
+//
+// stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript/37511463#37511463
+function toNFD(s) {
+    return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+// Here we try to calculate the quality of the match using relative numbers.
+// By default, fuzzy sort uses score that is not capped.
+const goodMatchThreshold = 0.35;
+function fuzzyMatch({ indexes }) {
+    return indexes.length / (Math.max(...indexes) + 1);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function assert(match, obj, query, field, ...fields) {
+    if (!obj) {
+        return false;
+    }
+    query = toNFD(query.trim().toLowerCase());
+    if (typeof obj === 'string') {
+        return match(toNFD(obj.trim().toLowerCase()), query);
+    }
+    else {
+        if (!field) {
+            throw new Error('field must be provided when searching over objects');
+        }
+        return fields.concat([field])
+            .some(f => match(toNFD(obj[f].trim().toLowerCase()), query));
+    }
+}
+// AssertStrict checks for a substring and doesn't do any additional guessing
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function AssertStrict(obj, query, field, ...fields) {
+    return assert((v, query) => v.includes(query), obj, query, field, ...fields);
+}
+// AssertFuzzy uses some heuristic to determine if the query maybe probably perhaps matches
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function AssertFuzzy(obj, query, field, ...fields) {
+    return assert((v, query) => {
+        const rs = fzy.single(query, v);
+        if (!rs) {
+            return false;
+        }
+        return fuzzyMatch(rs) >= goodMatchThreshold;
+    }, obj, query, field, ...fields);
+}
+// Assert uses both AssertStrict and AssertFuzzy to check if the query matches,
+// If the strict assertion passes that is used, else it tries to do a AssertFuzzy just to make sure
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function Assert(obj, query, field, ...fields) {
+    return AssertStrict(obj, query, field, ...fields) || AssertFuzzy(obj, query, field, ...fields);
+}
+
+var filter = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AssertStrict: AssertStrict,
+  AssertFuzzy: AssertFuzzy,
+  Assert: Assert
+});
+
 const config = {
     format: 'json',
     // (Boolean) whether to reconnect automatically (false)
@@ -100747,6 +101882,7 @@ var websocket = /*#__PURE__*/Object.freeze({
 
 exports.components = index$3;
 exports.corredor = index$4;
+exports.filter = filter;
 exports.filters = index$5;
 exports.i18n = i18n;
 exports.mixins = index$1;