@cortezaproject/corteza-vue 2021.9.6-dev.1.1 → 2021.9.6-dev.2

package/dist/index.es.js

@@ -16,6 +16,7 @@ import hps from 'html-parse-stringify';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import { mapGetters, mapActions } from 'vuex';
+import draggable from 'vuedraggable';
 import pino from 'pino';
 
 /* eslint-disable @typescript-eslint/ban-ts-ignore */
@@ -13948,11 +13949,11 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-4906883d_0", { source: "div[data-v-4906883d] {\n  object-fit: contain;\n}\ndiv img.loaded[data-v-4906883d] {\n  width: auto;\n  height: auto;\n  display: block;\n}\ndiv.inline img[data-v-4906883d] {\n  cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/IMG/InlineIMG.vue","InlineIMG.vue"],"names":[],"mappings":"AAiFA;EACA,mBAAA;AChFA;ADkFA;EACA,WAAA;EACA,YAAA;EACA,cAAA;AChFA;ADoFA;EACA,eAAA;AClFA;;AAEA,wCAAwC","file":"InlineIMG.vue","sourcesContent":["<template>\n  <div class=\"inline\">\n    <img\n      ref=\"image\"\n      :key=\"src\"\n      :src=\"src\"\n      :title=\"title\"\n      :alt=\"alt\"\n      :class=\"getClass\"\n      :style=\"previewStyle\"\n      :width=\"getWidth\"\n      :height=\"getHeight\"\n      @click=\"$emit('openPreview', {})\"\n      @error.once=\"reloadBrokenImage\"\n      @load=\"loaded=true\"\n    >\n  </div>\n</template>\n\n<script lang=\"js\">\nimport base from '../base.vue'\n\nexport default {\n  extends: base,\n\n  props: {\n    alt: {\n      required: false,\n      type: String,\n      default: null,\n    },\n    title: {\n      required: false,\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      loaded: false,\n    }\n  },\n\n  computed: {\n    getClass () {\n      const rtr = [...this.previewClass]\n      if (this.$listeners.click) {\n        rtr.push('clickable')\n      }\n      if (this.loaded) {\n        rtr.push('loaded')\n      }\n      return rtr\n    },\n\n    getWidth () {\n      return this.meta.preview.image.width\n    },\n    getHeight () {\n      return this.meta.preview.image.height\n    },\n  },\n\n  methods: {\n    reloadBrokenImage (ev) {\n      if (ev.target && ev.target.src) {\n        window.setTimeout(() => {\n          if (!ev.target && !ev.target.src) return\n\n          // This forces Vue to re-try image download\n          // eslint-disable-next-line\n          ev.target.src = ev.target.src\n        }, 500)\n      }\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\ndiv {\n  object-fit: contain;\n  img {\n    &.loaded {\n      width: auto;\n      height: auto;\n      display: block;\n    }\n  }\n  &.inline {\n    img {\n      cursor: zoom-in;\n    }\n  }\n}\n</style>\n","div {\n  object-fit: contain;\n}\ndiv img.loaded {\n  width: auto;\n  height: auto;\n  display: block;\n}\ndiv.inline img {\n  cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */"]}, media: undefined });
+    inject("data-v-2f92f970_0", { source: "div[data-v-2f92f970] {\n  object-fit: contain;\n}\ndiv img.loaded[data-v-2f92f970] {\n  width: auto;\n  height: auto;\n  display: block;\n}\ndiv.inline img[data-v-2f92f970] {\n  cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/filePreview/common/types/IMG/InlineIMG.vue","InlineIMG.vue"],"names":[],"mappings":"AAiFA;EACA,mBAAA;AChFA;ADkFA;EACA,WAAA;EACA,YAAA;EACA,cAAA;AChFA;ADoFA;EACA,eAAA;AClFA;;AAEA,wCAAwC","file":"InlineIMG.vue","sourcesContent":["<template>\n  <div class=\"inline\">\n    <img\n      ref=\"image\"\n      :key=\"src\"\n      :src=\"src\"\n      :title=\"title\"\n      :alt=\"alt\"\n      :class=\"getClass\"\n      :style=\"previewStyle\"\n      :width=\"getWidth\"\n      :height=\"getHeight\"\n      @click=\"$emit('openPreview', {})\"\n      @error.once=\"reloadBrokenImage\"\n      @load=\"loaded=true\"\n    >\n  </div>\n</template>\n\n<script lang=\"js\">\nimport base from '../base.vue'\n\nexport default {\n  extends: base,\n\n  props: {\n    alt: {\n      required: false,\n      type: String,\n      default: null,\n    },\n    title: {\n      required: false,\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      loaded: false,\n    }\n  },\n\n  computed: {\n    getClass () {\n      const rtr = [...this.previewClass]\n      if (this.$listeners.click) {\n        rtr.push('clickable')\n      }\n      if (this.loaded) {\n        rtr.push('loaded')\n      }\n      return rtr\n    },\n\n    getWidth () {\n      return this.meta.preview.image.width\n    },\n    getHeight () {\n      return this.meta.preview.image.height\n    },\n  },\n\n  methods: {\n    reloadBrokenImage (ev) {\n      if (ev.target && ev.target.src) {\n        window.setTimeout(() => {\n          if (!ev.target && !ev.target.src) return\n\n          // This forces Vue to re-try image download\n          // eslint-disable-next-line\n          ev.target.src = ev.target.src\n        }, 500)\n      }\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\ndiv {\n  object-fit: contain;\n  img {\n    &.loaded {\n      width: auto;\n      height: auto;\n      display: block;\n    }\n  }\n  &.inline {\n    img {\n      cursor: zoom-in;\n    }\n  }\n}\n</style>\n","div {\n  object-fit: contain;\n}\ndiv img.loaded {\n  width: auto;\n  height: auto;\n  display: block;\n}\ndiv.inline img {\n  cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$2 = "data-v-4906883d";
+  const __vue_scope_id__$2 = "data-v-2f92f970";
   /* module identifier */
   const __vue_module_identifier__$2 = undefined;
   /* functional template */
@@ -14058,7 +14059,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
-    inject("data-v-ccce0558_0", { source: ".popup-img-preview .pswp {\n  pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n  pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n  display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/IMG/LightboxIMG.vue","LightboxIMG.vue"],"names":[],"mappings":"AAoEA;EACA,oBAAA;ACnEA;ADoEA;EACA,mBAAA;AClEA;ADqEA;EACA,wBAAA;ACnEA;;AAEA,0CAA0C","file":"LightboxIMG.vue","sourcesContent":["<template>\n  <div class=\"popup-img-preview\">\n    <photo-swipe\n      :is-open=\"true\"\n      :items=\"items\"\n      :options=\"options\"\n      @close=\"() => $emit('close')\"\n    />\n  </div>\n</template>\n\n<script lang=\"js\">\nimport { PhotoSwipe } from 'v-photoswipe'\nimport base from '../base.vue'\n\nexport default {\n  components: {\n    PhotoSwipe,\n  },\n\n  extends: base,\n\n  data () {\n    return {\n      options: {\n        index: 0,\n        bgOpacity: 0,\n        closeOnScroll: false,\n        escKey: false,\n        history: false,\n        arrowKeys: false,\n        modal: false,\n\n        closeEl: false,\n        captionEl: false,\n        fullscreenEl: false,\n        zoomEl: false,\n        shareEl: false,\n        counterEl: false,\n        arrowEl: false,\n        preloaderEl: false,\n\n        clickToCloseNonZoomable: false,\n      },\n    }\n  },\n\n  computed: {\n    items () {\n      const { original, preview } = this.meta\n      const image = (original || preview || {}).image\n      if (!image) {\n        this.$emit('close')\n        return []\n      }\n\n      return [{\n        src: this.src,\n        w: image.width,\n        h: image.height,\n      }]\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.popup-img-preview {\n  .pswp {\n    pointer-events: none;\n    .pswp__img {\n      pointer-events: all;\n    }\n  }\n  .pswp__top-bar {\n    display: none!important;\n  }\n}\n</style>\n",".popup-img-preview .pswp {\n  pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n  pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n  display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */"]}, media: undefined });
+    inject("data-v-7c2a9272_0", { source: ".popup-img-preview .pswp {\n  pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n  pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n  display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/filePreview/common/types/IMG/LightboxIMG.vue","LightboxIMG.vue"],"names":[],"mappings":"AAoEA;EACA,oBAAA;ACnEA;ADoEA;EACA,mBAAA;AClEA;ADqEA;EACA,wBAAA;ACnEA;;AAEA,0CAA0C","file":"LightboxIMG.vue","sourcesContent":["<template>\n  <div class=\"popup-img-preview\">\n    <photo-swipe\n      :is-open=\"true\"\n      :items=\"items\"\n      :options=\"options\"\n      @close=\"() => $emit('close')\"\n    />\n  </div>\n</template>\n\n<script lang=\"js\">\nimport { PhotoSwipe } from 'v-photoswipe'\nimport base from '../base.vue'\n\nexport default {\n  components: {\n    PhotoSwipe,\n  },\n\n  extends: base,\n\n  data () {\n    return {\n      options: {\n        index: 0,\n        bgOpacity: 0,\n        closeOnScroll: false,\n        escKey: false,\n        history: false,\n        arrowKeys: false,\n        modal: false,\n\n        closeEl: false,\n        captionEl: false,\n        fullscreenEl: false,\n        zoomEl: false,\n        shareEl: false,\n        counterEl: false,\n        arrowEl: false,\n        preloaderEl: false,\n\n        clickToCloseNonZoomable: false,\n      },\n    }\n  },\n\n  computed: {\n    items () {\n      const { original, preview } = this.meta\n      const image = (original || preview || {}).image\n      if (!image) {\n        this.$emit('close')\n        return []\n      }\n\n      return [{\n        src: this.src,\n        w: image.width,\n        h: image.height,\n      }]\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.popup-img-preview {\n  .pswp {\n    pointer-events: none;\n    .pswp__img {\n      pointer-events: all;\n    }\n  }\n  .pswp__top-bar {\n    display: none!important;\n  }\n}\n</style>\n",".popup-img-preview .pswp {\n  pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n  pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n  display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -70269,12 +70270,12 @@ __vue_render__$3._withStripped = true;
   /* style */
   const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
-    inject("data-v-66127e42_0", { source: ".doc-msg[data-v-66127e42] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n}\n.doc-err[data-v-66127e42] {\n  cursor: pointer;\n}\n.doc-err .err-message[data-v-66127e42] {\n  color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA0SA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,uBATA;AChSA;AD2SA;EACA,eAAA;ACxSA;AD0SA;EACA,UAdA;AC1RA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n  <div\n    :style=\"previewStyle\"\n    :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n    @click=\"onPreviewClick\"\n  >\n    <!-- Container for pdf's pages -->\n    <div\n      v-show=\"show\"\n      ref=\"pages\"\n      class=\"pages\"\n    />\n\n    <div\n      v-if=\"loadError\"\n      class=\"doc-msg doc-err\"\n    >\n      <div>\n        <h4 class=\"err-message\">\n          {{ loadError.message }}\n        </h4>\n        <p v-if=\"labels.clickToRetry\">\n          {{ labels.clickToRetry }}\n        </p>\n      </div>\n    </div>\n    <div\n      v-else-if=\"!show && labels.loading\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.loading }}</p>\n    </div>\n    <div\n      v-else-if=\"!pageCount && labels.noPages\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.noPages }}</p>\n    </div>\n    <template v-else>\n      <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n        <p>{{ labels.downloadForAll }}</p>\n      </div>\n      <div v-else-if=\"inline && labels.firstPagePreview && show\">\n        <p>{{ labels.firstPagePreview }}</p>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n  return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n  extends: base,\n\n  props: {\n    retryBackoff: {\n      type: Number,\n      required: false,\n      default: 300,\n    },\n    maxRetries: {\n      type: Number,\n      required: false,\n      default: 10,\n    },\n\n    maxPages: {\n      required: false,\n      type: Number,\n      default: 5,\n    },\n\n    initialScale: {\n      required: false,\n      type: Number,\n      default: 1,\n    },\n  },\n\n  data () {\n    return {\n      document: null,\n      pages: [],\n      show: false,\n      loadError: undefined,\n    }\n  },\n\n  computed: {\n    /**\n     * Helper to provide the number of pages for the given PDF\n     * @returns {Number}\n     */\n    pageCount () {\n      if (!this.document || !this.document.pdf) {\n        return 0\n      }\n      return this.document.pdf.numPages\n    },\n\n    /**\n     * Helper to determine if the given PDF has more pages then we are willing to show\n     * @returns {Boolean}\n     */\n    hasMore () {\n      return this.maxPages < this.pageCount\n    },\n  },\n\n  created () {\n    if (!this.src) {\n      this.stdErr(new Error('src.missing'))\n      return\n    }\n\n    this.$nextTick(() => this.init())\n  },\n\n  methods: {\n    /**\n     * Helper to handle on preview click. It either requests a retry or\n     * emits an open event\n     */\n    onPreviewClick () {\n      if (this.loadError) {\n        this.init()\n      } else {\n        this.$emit('openPreview', { document: this.document })\n      }\n    },\n\n    /**\n     * Initializes the state, loads the document & renderes it's pages\n     */\n    async init () {\n      this.document = null\n      this.pages = []\n      this.show = false\n      this.loadError = undefined\n\n      return this.loadDocument(this.src)\n        .then(this.renderDocument)\n        .catch(this.stdErr)\n    },\n\n    /**\n     * Helper method to load the given document. Needed for test stubbing\n     * @param {String} src Document's src\n     * @returns {Promise<PDFDocumentProxy>}\n     */\n    async pdfjsLoad (src) {\n      return pdfjs.getDocument(src).promise\n    },\n\n    /**\n     * Loads the given PDF. It can load it from API or re-use existing document\n     * @param {Document|String} src PDF's source or a Document object\n     * @returns {Document}\n     */\n    async loadDocument (src) {\n      if (src instanceof Document) {\n        this.document = new Document({ ...src, scale: this.initialScale })\n      } else if (typeof src === 'string') {\n        let retries = 0\n        let err\n        const pdfl = async () => {\n          return sleep(retries * this.retryBackoff)\n            .then(() => this.pdfjsLoad(src))\n            .then(pdf => {\n              this.document = new Document({ pdf, src, scale: this.initialScale })\n            })\n        }\n\n        // Retry with backoff it it fails to load\n        while (!this.document && retries < this.maxRetries) {\n          await pdfl().catch(e => {\n            retries++\n            err = e\n          })\n        }\n\n        if (!this.document) {\n          throw err\n        }\n      } else {\n        throw new Error('src.notValid')\n      }\n      return this.document\n    },\n\n    /**\n     * Renders the given PDF\n     * @param {Document} doc The Document to render\n     * @return {Promise<undefined>}\n     */\n    async renderDocument (doc) {\n      const rf = this.$refs.pages\n\n      const pgCount = Math.min(this.pageCount, this.maxPages)\n      this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n      if (pgCount <= 0) {\n        this.show = true\n        return\n      }\n\n      // Loadup pages\n      for (let i = 0; i < pgCount; i++) {\n        const node = makePlaceholder(this.labels)\n        rf.appendChild(node)\n        this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n        this.renderPage(this.pages[i], doc, rf)\n          .then(page => {\n            this.pages.splice(page.index, 1, page)\n\n            if (page.index === 0) {\n              this.show = true\n            }\n          })\n          .catch(this.stdErr)\n      }\n    },\n\n    /**\n     * Renders the given page\n     * @param {Page} page The page in question\n     * @param {Document} doc Page source\n     * @param {Node} rf PDF container\n     * @returns {Promise<undefined>}\n     */\n    async renderPage (page, doc, rf) {\n      // pdfjs starts with 1!\n      return doc.pdf.getPage(page.index + 1).then(p => {\n        const np = new Page(page)\n        np.loading = false\n        np.loaded = true\n        np.page = p\n\n        // Render page\n        const canvas = document.createElement('canvas')\n        const scale = doc.scale\n        const viewport = np.page.getViewport(scale)\n        const canvasContext = canvas.getContext('2d')\n        const renderContext = { canvasContext, viewport }\n        canvas.height = viewport.height\n        canvas.width = viewport.width\n\n        return np.page.render(renderContext).then(() => {\n          np.node = canvas\n          np.rendered = true\n          if (this.inline) {\n            canvas.classList.add('inline')\n          }\n          return np\n        })\n\n          .catch(() => {\n            const node = makeFailedPage(this.labels)\n            np.node = node\n            np.rendered = false\n            np.failed = true\n            return np\n          })\n\n          .then(np => {\n            rf.replaceChild(np.node, page.node)\n            return np\n          })\n      })\n    },\n\n    /**\n     * Standard error handler\n     * @param {Error} err The error\n     */\n    stdErr (err) {\n      this.loadError = err\n      this.$emit('error', err)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: $white;\n}\n.doc-err {\n  cursor: pointer;\n\n  .err-message {\n    color: $danger;\n  }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n  text-align: center;\n  &:not(.inline) {\n    padding-top: 20px;\n    padding-bottom: 20px;\n    canvas {\n      box-shadow: 0 0 3px #1E1E1E41;\n    }\n  }\n  &.inline {\n    height: 200px;\n    overflow-y: scroll;\n    display: inline-block;\n    cursor: zoom-in;\n    width: 100%;\n    max-width: 500px;\n  }\n\n  canvas {\n    margin-bottom: 10px;\n    &.inline {\n      width: 100%;\n    }\n\n    &:not(.inline) {\n      margin: 0 auto 10px auto;\n      display: block;\n    }\n\n    &:last-of-type {\n      margin-bottom: unset;\n    }\n  }\n\n  .loader {\n    margin-bottom: 10px;\n  }\n}\n\n</style>\n",".doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n}\n\n.doc-err {\n  cursor: pointer;\n}\n.doc-err .err-message {\n  color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined })
-,inject("data-v-66127e42_1", { source: ".pdf-preview {\n  text-align: center;\n}\n.pdf-preview:not(.inline) {\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n  box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n  height: 200px;\n  overflow-y: scroll;\n  display: inline-block;\n  cursor: zoom-in;\n  width: 100%;\n  max-width: 500px;\n}\n.pdf-preview canvas {\n  margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n  width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n  margin: 0 auto 10px auto;\n  display: block;\n}\n.pdf-preview canvas:last-of-type {\n  margin-bottom: unset;\n}\n.pdf-preview .loader {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA+TA;EACA,kBAAA;AC9TA;AD+TA;EACA,iBAAA;EACA,oBAAA;AC7TA;AD8TA;EACA,6BAAA;AC5TA;AD+TA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;AD+TA;EACA,WAAA;AC7TA;ADgUA;EACA,wBAAA;EACA,cAAA;AC9TA;ADiUA;EACA,oBAAA;AC/TA;ADmUA;EACA,mBAAA;ACjUA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n  <div\n    :style=\"previewStyle\"\n    :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n    @click=\"onPreviewClick\"\n  >\n    <!-- Container for pdf's pages -->\n    <div\n      v-show=\"show\"\n      ref=\"pages\"\n      class=\"pages\"\n    />\n\n    <div\n      v-if=\"loadError\"\n      class=\"doc-msg doc-err\"\n    >\n      <div>\n        <h4 class=\"err-message\">\n          {{ loadError.message }}\n        </h4>\n        <p v-if=\"labels.clickToRetry\">\n          {{ labels.clickToRetry }}\n        </p>\n      </div>\n    </div>\n    <div\n      v-else-if=\"!show && labels.loading\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.loading }}</p>\n    </div>\n    <div\n      v-else-if=\"!pageCount && labels.noPages\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.noPages }}</p>\n    </div>\n    <template v-else>\n      <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n        <p>{{ labels.downloadForAll }}</p>\n      </div>\n      <div v-else-if=\"inline && labels.firstPagePreview && show\">\n        <p>{{ labels.firstPagePreview }}</p>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n  return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n  extends: base,\n\n  props: {\n    retryBackoff: {\n      type: Number,\n      required: false,\n      default: 300,\n    },\n    maxRetries: {\n      type: Number,\n      required: false,\n      default: 10,\n    },\n\n    maxPages: {\n      required: false,\n      type: Number,\n      default: 5,\n    },\n\n    initialScale: {\n      required: false,\n      type: Number,\n      default: 1,\n    },\n  },\n\n  data () {\n    return {\n      document: null,\n      pages: [],\n      show: false,\n      loadError: undefined,\n    }\n  },\n\n  computed: {\n    /**\n     * Helper to provide the number of pages for the given PDF\n     * @returns {Number}\n     */\n    pageCount () {\n      if (!this.document || !this.document.pdf) {\n        return 0\n      }\n      return this.document.pdf.numPages\n    },\n\n    /**\n     * Helper to determine if the given PDF has more pages then we are willing to show\n     * @returns {Boolean}\n     */\n    hasMore () {\n      return this.maxPages < this.pageCount\n    },\n  },\n\n  created () {\n    if (!this.src) {\n      this.stdErr(new Error('src.missing'))\n      return\n    }\n\n    this.$nextTick(() => this.init())\n  },\n\n  methods: {\n    /**\n     * Helper to handle on preview click. It either requests a retry or\n     * emits an open event\n     */\n    onPreviewClick () {\n      if (this.loadError) {\n        this.init()\n      } else {\n        this.$emit('openPreview', { document: this.document })\n      }\n    },\n\n    /**\n     * Initializes the state, loads the document & renderes it's pages\n     */\n    async init () {\n      this.document = null\n      this.pages = []\n      this.show = false\n      this.loadError = undefined\n\n      return this.loadDocument(this.src)\n        .then(this.renderDocument)\n        .catch(this.stdErr)\n    },\n\n    /**\n     * Helper method to load the given document. Needed for test stubbing\n     * @param {String} src Document's src\n     * @returns {Promise<PDFDocumentProxy>}\n     */\n    async pdfjsLoad (src) {\n      return pdfjs.getDocument(src).promise\n    },\n\n    /**\n     * Loads the given PDF. It can load it from API or re-use existing document\n     * @param {Document|String} src PDF's source or a Document object\n     * @returns {Document}\n     */\n    async loadDocument (src) {\n      if (src instanceof Document) {\n        this.document = new Document({ ...src, scale: this.initialScale })\n      } else if (typeof src === 'string') {\n        let retries = 0\n        let err\n        const pdfl = async () => {\n          return sleep(retries * this.retryBackoff)\n            .then(() => this.pdfjsLoad(src))\n            .then(pdf => {\n              this.document = new Document({ pdf, src, scale: this.initialScale })\n            })\n        }\n\n        // Retry with backoff it it fails to load\n        while (!this.document && retries < this.maxRetries) {\n          await pdfl().catch(e => {\n            retries++\n            err = e\n          })\n        }\n\n        if (!this.document) {\n          throw err\n        }\n      } else {\n        throw new Error('src.notValid')\n      }\n      return this.document\n    },\n\n    /**\n     * Renders the given PDF\n     * @param {Document} doc The Document to render\n     * @return {Promise<undefined>}\n     */\n    async renderDocument (doc) {\n      const rf = this.$refs.pages\n\n      const pgCount = Math.min(this.pageCount, this.maxPages)\n      this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n      if (pgCount <= 0) {\n        this.show = true\n        return\n      }\n\n      // Loadup pages\n      for (let i = 0; i < pgCount; i++) {\n        const node = makePlaceholder(this.labels)\n        rf.appendChild(node)\n        this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n        this.renderPage(this.pages[i], doc, rf)\n          .then(page => {\n            this.pages.splice(page.index, 1, page)\n\n            if (page.index === 0) {\n              this.show = true\n            }\n          })\n          .catch(this.stdErr)\n      }\n    },\n\n    /**\n     * Renders the given page\n     * @param {Page} page The page in question\n     * @param {Document} doc Page source\n     * @param {Node} rf PDF container\n     * @returns {Promise<undefined>}\n     */\n    async renderPage (page, doc, rf) {\n      // pdfjs starts with 1!\n      return doc.pdf.getPage(page.index + 1).then(p => {\n        const np = new Page(page)\n        np.loading = false\n        np.loaded = true\n        np.page = p\n\n        // Render page\n        const canvas = document.createElement('canvas')\n        const scale = doc.scale\n        const viewport = np.page.getViewport(scale)\n        const canvasContext = canvas.getContext('2d')\n        const renderContext = { canvasContext, viewport }\n        canvas.height = viewport.height\n        canvas.width = viewport.width\n\n        return np.page.render(renderContext).then(() => {\n          np.node = canvas\n          np.rendered = true\n          if (this.inline) {\n            canvas.classList.add('inline')\n          }\n          return np\n        })\n\n          .catch(() => {\n            const node = makeFailedPage(this.labels)\n            np.node = node\n            np.rendered = false\n            np.failed = true\n            return np\n          })\n\n          .then(np => {\n            rf.replaceChild(np.node, page.node)\n            return np\n          })\n      })\n    },\n\n    /**\n     * Standard error handler\n     * @param {Error} err The error\n     */\n    stdErr (err) {\n      this.loadError = err\n      this.$emit('error', err)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: $white;\n}\n.doc-err {\n  cursor: pointer;\n\n  .err-message {\n    color: $danger;\n  }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n  text-align: center;\n  &:not(.inline) {\n    padding-top: 20px;\n    padding-bottom: 20px;\n    canvas {\n      box-shadow: 0 0 3px #1E1E1E41;\n    }\n  }\n  &.inline {\n    height: 200px;\n    overflow-y: scroll;\n    display: inline-block;\n    cursor: zoom-in;\n    width: 100%;\n    max-width: 500px;\n  }\n\n  canvas {\n    margin-bottom: 10px;\n    &.inline {\n      width: 100%;\n    }\n\n    &:not(.inline) {\n      margin: 0 auto 10px auto;\n      display: block;\n    }\n\n    &:last-of-type {\n      margin-bottom: unset;\n    }\n  }\n\n  .loader {\n    margin-bottom: 10px;\n  }\n}\n\n</style>\n",".pdf-preview {\n  text-align: center;\n}\n.pdf-preview:not(.inline) {\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n  box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n  height: 200px;\n  overflow-y: scroll;\n  display: inline-block;\n  cursor: zoom-in;\n  width: 100%;\n  max-width: 500px;\n}\n.pdf-preview canvas {\n  margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n  width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n  margin: 0 auto 10px auto;\n  display: block;\n}\n.pdf-preview canvas:last-of-type {\n  margin-bottom: unset;\n}\n.pdf-preview .loader {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined });
+    inject("data-v-0e0b6952_0", { source: ".doc-msg[data-v-0e0b6952] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n}\n.doc-err[data-v-0e0b6952] {\n  cursor: pointer;\n}\n.doc-err .err-message[data-v-0e0b6952] {\n  color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA0SA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,uBATA;AChSA;AD2SA;EACA,eAAA;ACxSA;AD0SA;EACA,UAdA;AC1RA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n  <div\n    :style=\"previewStyle\"\n    :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n    @click=\"onPreviewClick\"\n  >\n    <!-- Container for pdf's pages -->\n    <div\n      v-show=\"show\"\n      ref=\"pages\"\n      class=\"pages\"\n    />\n\n    <div\n      v-if=\"loadError\"\n      class=\"doc-msg doc-err\"\n    >\n      <div>\n        <h4 class=\"err-message\">\n          {{ loadError.message }}\n        </h4>\n        <p v-if=\"labels.clickToRetry\">\n          {{ labels.clickToRetry }}\n        </p>\n      </div>\n    </div>\n    <div\n      v-else-if=\"!show && labels.loading\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.loading }}</p>\n    </div>\n    <div\n      v-else-if=\"!pageCount && labels.noPages\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.noPages }}</p>\n    </div>\n    <template v-else>\n      <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n        <p>{{ labels.downloadForAll }}</p>\n      </div>\n      <div v-else-if=\"inline && labels.firstPagePreview && show\">\n        <p>{{ labels.firstPagePreview }}</p>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n  return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n  extends: base,\n\n  props: {\n    retryBackoff: {\n      type: Number,\n      required: false,\n      default: 300,\n    },\n    maxRetries: {\n      type: Number,\n      required: false,\n      default: 10,\n    },\n\n    maxPages: {\n      required: false,\n      type: Number,\n      default: 5,\n    },\n\n    initialScale: {\n      required: false,\n      type: Number,\n      default: 1,\n    },\n  },\n\n  data () {\n    return {\n      document: null,\n      pages: [],\n      show: false,\n      loadError: undefined,\n    }\n  },\n\n  computed: {\n    /**\n     * Helper to provide the number of pages for the given PDF\n     * @returns {Number}\n     */\n    pageCount () {\n      if (!this.document || !this.document.pdf) {\n        return 0\n      }\n      return this.document.pdf.numPages\n    },\n\n    /**\n     * Helper to determine if the given PDF has more pages then we are willing to show\n     * @returns {Boolean}\n     */\n    hasMore () {\n      return this.maxPages < this.pageCount\n    },\n  },\n\n  created () {\n    if (!this.src) {\n      this.stdErr(new Error('src.missing'))\n      return\n    }\n\n    this.$nextTick(() => this.init())\n  },\n\n  methods: {\n    /**\n     * Helper to handle on preview click. It either requests a retry or\n     * emits an open event\n     */\n    onPreviewClick () {\n      if (this.loadError) {\n        this.init()\n      } else {\n        this.$emit('openPreview', { document: this.document })\n      }\n    },\n\n    /**\n     * Initializes the state, loads the document & renderes it's pages\n     */\n    async init () {\n      this.document = null\n      this.pages = []\n      this.show = false\n      this.loadError = undefined\n\n      return this.loadDocument(this.src)\n        .then(this.renderDocument)\n        .catch(this.stdErr)\n    },\n\n    /**\n     * Helper method to load the given document. Needed for test stubbing\n     * @param {String} src Document's src\n     * @returns {Promise<PDFDocumentProxy>}\n     */\n    async pdfjsLoad (src) {\n      return pdfjs.getDocument(src).promise\n    },\n\n    /**\n     * Loads the given PDF. It can load it from API or re-use existing document\n     * @param {Document|String} src PDF's source or a Document object\n     * @returns {Document}\n     */\n    async loadDocument (src) {\n      if (src instanceof Document) {\n        this.document = new Document({ ...src, scale: this.initialScale })\n      } else if (typeof src === 'string') {\n        let retries = 0\n        let err\n        const pdfl = async () => {\n          return sleep(retries * this.retryBackoff)\n            .then(() => this.pdfjsLoad(src))\n            .then(pdf => {\n              this.document = new Document({ pdf, src, scale: this.initialScale })\n            })\n        }\n\n        // Retry with backoff it it fails to load\n        while (!this.document && retries < this.maxRetries) {\n          await pdfl().catch(e => {\n            retries++\n            err = e\n          })\n        }\n\n        if (!this.document) {\n          throw err\n        }\n      } else {\n        throw new Error('src.notValid')\n      }\n      return this.document\n    },\n\n    /**\n     * Renders the given PDF\n     * @param {Document} doc The Document to render\n     * @return {Promise<undefined>}\n     */\n    async renderDocument (doc) {\n      const rf = this.$refs.pages\n\n      const pgCount = Math.min(this.pageCount, this.maxPages)\n      this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n      if (pgCount <= 0) {\n        this.show = true\n        return\n      }\n\n      // Loadup pages\n      for (let i = 0; i < pgCount; i++) {\n        const node = makePlaceholder(this.labels)\n        rf.appendChild(node)\n        this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n        this.renderPage(this.pages[i], doc, rf)\n          .then(page => {\n            this.pages.splice(page.index, 1, page)\n\n            if (page.index === 0) {\n              this.show = true\n            }\n          })\n          .catch(this.stdErr)\n      }\n    },\n\n    /**\n     * Renders the given page\n     * @param {Page} page The page in question\n     * @param {Document} doc Page source\n     * @param {Node} rf PDF container\n     * @returns {Promise<undefined>}\n     */\n    async renderPage (page, doc, rf) {\n      // pdfjs starts with 1!\n      return doc.pdf.getPage(page.index + 1).then(p => {\n        const np = new Page(page)\n        np.loading = false\n        np.loaded = true\n        np.page = p\n\n        // Render page\n        const canvas = document.createElement('canvas')\n        const scale = doc.scale\n        const viewport = np.page.getViewport(scale)\n        const canvasContext = canvas.getContext('2d')\n        const renderContext = { canvasContext, viewport }\n        canvas.height = viewport.height\n        canvas.width = viewport.width\n\n        return np.page.render(renderContext).then(() => {\n          np.node = canvas\n          np.rendered = true\n          if (this.inline) {\n            canvas.classList.add('inline')\n          }\n          return np\n        })\n\n          .catch(() => {\n            const node = makeFailedPage(this.labels)\n            np.node = node\n            np.rendered = false\n            np.failed = true\n            return np\n          })\n\n          .then(np => {\n            rf.replaceChild(np.node, page.node)\n            return np\n          })\n      })\n    },\n\n    /**\n     * Standard error handler\n     * @param {Error} err The error\n     */\n    stdErr (err) {\n      this.loadError = err\n      this.$emit('error', err)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: $white;\n}\n.doc-err {\n  cursor: pointer;\n\n  .err-message {\n    color: $danger;\n  }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n  text-align: center;\n  &:not(.inline) {\n    padding-top: 20px;\n    padding-bottom: 20px;\n    canvas {\n      box-shadow: 0 0 3px #1E1E1E41;\n    }\n  }\n  &.inline {\n    height: 200px;\n    overflow-y: scroll;\n    display: inline-block;\n    cursor: zoom-in;\n    width: 100%;\n    max-width: 500px;\n  }\n\n  canvas {\n    margin-bottom: 10px;\n    &.inline {\n      width: 100%;\n    }\n\n    &:not(.inline) {\n      margin: 0 auto 10px auto;\n      display: block;\n    }\n\n    &:last-of-type {\n      margin-bottom: unset;\n    }\n  }\n\n  .loader {\n    margin-bottom: 10px;\n  }\n}\n\n</style>\n",".doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n}\n\n.doc-err {\n  cursor: pointer;\n}\n.doc-err .err-message {\n  color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined })
+,inject("data-v-0e0b6952_1", { source: ".pdf-preview {\n  text-align: center;\n}\n.pdf-preview:not(.inline) {\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n  box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n  height: 200px;\n  overflow-y: scroll;\n  display: inline-block;\n  cursor: zoom-in;\n  width: 100%;\n  max-width: 500px;\n}\n.pdf-preview canvas {\n  margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n  width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n  margin: 0 auto 10px auto;\n  display: block;\n}\n.pdf-preview canvas:last-of-type {\n  margin-bottom: unset;\n}\n.pdf-preview .loader {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA+TA;EACA,kBAAA;AC9TA;AD+TA;EACA,iBAAA;EACA,oBAAA;AC7TA;AD8TA;EACA,6BAAA;AC5TA;AD+TA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;AD+TA;EACA,WAAA;AC7TA;ADgUA;EACA,wBAAA;EACA,cAAA;AC9TA;ADiUA;EACA,oBAAA;AC/TA;ADmUA;EACA,mBAAA;ACjUA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n  <div\n    :style=\"previewStyle\"\n    :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n    @click=\"onPreviewClick\"\n  >\n    <!-- Container for pdf's pages -->\n    <div\n      v-show=\"show\"\n      ref=\"pages\"\n      class=\"pages\"\n    />\n\n    <div\n      v-if=\"loadError\"\n      class=\"doc-msg doc-err\"\n    >\n      <div>\n        <h4 class=\"err-message\">\n          {{ loadError.message }}\n        </h4>\n        <p v-if=\"labels.clickToRetry\">\n          {{ labels.clickToRetry }}\n        </p>\n      </div>\n    </div>\n    <div\n      v-else-if=\"!show && labels.loading\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.loading }}</p>\n    </div>\n    <div\n      v-else-if=\"!pageCount && labels.noPages\"\n      class=\"doc-msg doc-err\"\n    >\n      <p>{{ labels.noPages }}</p>\n    </div>\n    <template v-else>\n      <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n        <p>{{ labels.downloadForAll }}</p>\n      </div>\n      <div v-else-if=\"inline && labels.firstPagePreview && show\">\n        <p>{{ labels.firstPagePreview }}</p>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n  return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n  extends: base,\n\n  props: {\n    retryBackoff: {\n      type: Number,\n      required: false,\n      default: 300,\n    },\n    maxRetries: {\n      type: Number,\n      required: false,\n      default: 10,\n    },\n\n    maxPages: {\n      required: false,\n      type: Number,\n      default: 5,\n    },\n\n    initialScale: {\n      required: false,\n      type: Number,\n      default: 1,\n    },\n  },\n\n  data () {\n    return {\n      document: null,\n      pages: [],\n      show: false,\n      loadError: undefined,\n    }\n  },\n\n  computed: {\n    /**\n     * Helper to provide the number of pages for the given PDF\n     * @returns {Number}\n     */\n    pageCount () {\n      if (!this.document || !this.document.pdf) {\n        return 0\n      }\n      return this.document.pdf.numPages\n    },\n\n    /**\n     * Helper to determine if the given PDF has more pages then we are willing to show\n     * @returns {Boolean}\n     */\n    hasMore () {\n      return this.maxPages < this.pageCount\n    },\n  },\n\n  created () {\n    if (!this.src) {\n      this.stdErr(new Error('src.missing'))\n      return\n    }\n\n    this.$nextTick(() => this.init())\n  },\n\n  methods: {\n    /**\n     * Helper to handle on preview click. It either requests a retry or\n     * emits an open event\n     */\n    onPreviewClick () {\n      if (this.loadError) {\n        this.init()\n      } else {\n        this.$emit('openPreview', { document: this.document })\n      }\n    },\n\n    /**\n     * Initializes the state, loads the document & renderes it's pages\n     */\n    async init () {\n      this.document = null\n      this.pages = []\n      this.show = false\n      this.loadError = undefined\n\n      return this.loadDocument(this.src)\n        .then(this.renderDocument)\n        .catch(this.stdErr)\n    },\n\n    /**\n     * Helper method to load the given document. Needed for test stubbing\n     * @param {String} src Document's src\n     * @returns {Promise<PDFDocumentProxy>}\n     */\n    async pdfjsLoad (src) {\n      return pdfjs.getDocument(src).promise\n    },\n\n    /**\n     * Loads the given PDF. It can load it from API or re-use existing document\n     * @param {Document|String} src PDF's source or a Document object\n     * @returns {Document}\n     */\n    async loadDocument (src) {\n      if (src instanceof Document) {\n        this.document = new Document({ ...src, scale: this.initialScale })\n      } else if (typeof src === 'string') {\n        let retries = 0\n        let err\n        const pdfl = async () => {\n          return sleep(retries * this.retryBackoff)\n            .then(() => this.pdfjsLoad(src))\n            .then(pdf => {\n              this.document = new Document({ pdf, src, scale: this.initialScale })\n            })\n        }\n\n        // Retry with backoff it it fails to load\n        while (!this.document && retries < this.maxRetries) {\n          await pdfl().catch(e => {\n            retries++\n            err = e\n          })\n        }\n\n        if (!this.document) {\n          throw err\n        }\n      } else {\n        throw new Error('src.notValid')\n      }\n      return this.document\n    },\n\n    /**\n     * Renders the given PDF\n     * @param {Document} doc The Document to render\n     * @return {Promise<undefined>}\n     */\n    async renderDocument (doc) {\n      const rf = this.$refs.pages\n\n      const pgCount = Math.min(this.pageCount, this.maxPages)\n      this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n      if (pgCount <= 0) {\n        this.show = true\n        return\n      }\n\n      // Loadup pages\n      for (let i = 0; i < pgCount; i++) {\n        const node = makePlaceholder(this.labels)\n        rf.appendChild(node)\n        this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n        this.renderPage(this.pages[i], doc, rf)\n          .then(page => {\n            this.pages.splice(page.index, 1, page)\n\n            if (page.index === 0) {\n              this.show = true\n            }\n          })\n          .catch(this.stdErr)\n      }\n    },\n\n    /**\n     * Renders the given page\n     * @param {Page} page The page in question\n     * @param {Document} doc Page source\n     * @param {Node} rf PDF container\n     * @returns {Promise<undefined>}\n     */\n    async renderPage (page, doc, rf) {\n      // pdfjs starts with 1!\n      return doc.pdf.getPage(page.index + 1).then(p => {\n        const np = new Page(page)\n        np.loading = false\n        np.loaded = true\n        np.page = p\n\n        // Render page\n        const canvas = document.createElement('canvas')\n        const scale = doc.scale\n        const viewport = np.page.getViewport(scale)\n        const canvasContext = canvas.getContext('2d')\n        const renderContext = { canvasContext, viewport }\n        canvas.height = viewport.height\n        canvas.width = viewport.width\n\n        return np.page.render(renderContext).then(() => {\n          np.node = canvas\n          np.rendered = true\n          if (this.inline) {\n            canvas.classList.add('inline')\n          }\n          return np\n        })\n\n          .catch(() => {\n            const node = makeFailedPage(this.labels)\n            np.node = node\n            np.rendered = false\n            np.failed = true\n            return np\n          })\n\n          .then(np => {\n            rf.replaceChild(np.node, page.node)\n            return np\n          })\n      })\n    },\n\n    /**\n     * Standard error handler\n     * @param {Error} err The error\n     */\n    stdErr (err) {\n      this.loadError = err\n      this.$emit('error', err)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-color: $white;\n}\n.doc-err {\n  cursor: pointer;\n\n  .err-message {\n    color: $danger;\n  }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n  text-align: center;\n  &:not(.inline) {\n    padding-top: 20px;\n    padding-bottom: 20px;\n    canvas {\n      box-shadow: 0 0 3px #1E1E1E41;\n    }\n  }\n  &.inline {\n    height: 200px;\n    overflow-y: scroll;\n    display: inline-block;\n    cursor: zoom-in;\n    width: 100%;\n    max-width: 500px;\n  }\n\n  canvas {\n    margin-bottom: 10px;\n    &.inline {\n      width: 100%;\n    }\n\n    &:not(.inline) {\n      margin: 0 auto 10px auto;\n      display: block;\n    }\n\n    &:last-of-type {\n      margin-bottom: unset;\n    }\n  }\n\n  .loader {\n    margin-bottom: 10px;\n  }\n}\n\n</style>\n",".pdf-preview {\n  text-align: center;\n}\n.pdf-preview:not(.inline) {\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n  box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n  height: 200px;\n  overflow-y: scroll;\n  display: inline-block;\n  cursor: zoom-in;\n  width: 100%;\n  max-width: 500px;\n}\n.pdf-preview canvas {\n  margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n  width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n  margin: 0 auto 10px auto;\n  display: block;\n}\n.pdf-preview canvas:last-of-type {\n  margin-bottom: unset;\n}\n.pdf-preview .loader {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$4 = "data-v-66127e42";
+  const __vue_scope_id__$4 = "data-v-0e0b6952";
   /* module identifier */
   const __vue_module_identifier__$4 = undefined;
   /* functional template */
@@ -70341,11 +70342,11 @@ __vue_render__$4._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-09c086fd_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Temporary style; update when messaging is updated with bootstrap */\n.lightbox[data-v-09c086fd] {\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  background-color: #EEF1F3;\n  z-index: 2000;\n}\n.lightbox header[data-v-09c086fd] {\n  display: flex;\n  justify-content: space-between;\n  background-color: #FFFFFF;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  box-shadow: 0 0 3px #1E1E1E41;\n  z-index: 1000;\n  height: 50px;\n}\n.lightbox header .left[data-v-09c086fd] {\n  margin-left: 10px;\n}\n.lightbox header .right[data-v-09c086fd] {\n  margin-right: 10px;\n}\n.lightbox header > div[data-v-09c086fd] {\n  display: flex;\n  align-items: center;\n}\n.lightbox main[data-v-09c086fd] {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n  z-index: 1;\n}\n.lightbox header button[data-v-09c086fd] {\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-size: 25px;\n  font-weight: bold;\n  margin: 10px;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.lightbox header button[data-v-09c086fd]:last-of-type {\n  margin-right: 0;\n}\n\n", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/lightbox/CLightbox.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,qEAAA;AAEA;EACA,eAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;;EAEA,yBAAA;EACA,aAAA;AACA;AAEA;EACA,aAAA;EACA,8BAAA;EACA,yBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,6BAAA;EACA,aAAA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AACA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,6BAAA;EACA,YAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AACA;AAEA;EACA,eAAA;AACA","file":"CLightbox.vue","sourcesContent":["<template>\n  <div class=\"lightbox\">\n    <header>\n      <div class=\"left\">\n        <slot name=\"header.left\" />\n      </div>\n      <div class=\"right\">\n        <slot name=\"header.right\" />\n        <button\n          class=\"closer\"\n          @click=\"$emit('close')\"\n        >\n          &times;\n        </button>\n      </div>\n    </header>\n    <main>\n      <slot name=\"main\" />\n    </main>\n  </div>\n</template>\n\n<style scoped>\n/* Temporary style; update when messaging is updated with bootstrap */\n\n.lightbox {\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  background-color: #EEF1F3;\n  z-index: 2000;\n}\n\n.lightbox header {\n  display: flex;\n  justify-content: space-between;\n  background-color: #FFFFFF;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  box-shadow: 0 0 3px #1E1E1E41;\n  z-index: 1000;\n  height: 50px;\n}\n\n.lightbox header .left {\n  margin-left: 10px;\n}\n.lightbox header .right {\n  margin-right: 10px;\n}\n\n.lightbox header > div {\n  display: flex;\n  align-items: center;\n}\n\n.lightbox main {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n  z-index: 1;\n}\n\n.lightbox header button {\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-size: 25px;\n  font-weight: bold;\n  margin: 10px;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n.lightbox header button:last-of-type {\n  margin-right: 0;\n}\n\n</style>\n"]}, media: undefined });
+    inject("data-v-5950f2a0_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Temporary style; update when messaging is updated with bootstrap */\n.lightbox[data-v-5950f2a0] {\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  background-color: #EEF1F3;\n  z-index: 2000;\n}\n.lightbox header[data-v-5950f2a0] {\n  display: flex;\n  justify-content: space-between;\n  background-color: #FFFFFF;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  box-shadow: 0 0 3px #1E1E1E41;\n  z-index: 1000;\n  height: 50px;\n}\n.lightbox header .left[data-v-5950f2a0] {\n  margin-left: 10px;\n}\n.lightbox header .right[data-v-5950f2a0] {\n  margin-right: 10px;\n}\n.lightbox header > div[data-v-5950f2a0] {\n  display: flex;\n  align-items: center;\n}\n.lightbox main[data-v-5950f2a0] {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n  z-index: 1;\n}\n.lightbox header button[data-v-5950f2a0] {\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-size: 25px;\n  font-weight: bold;\n  margin: 10px;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.lightbox header button[data-v-5950f2a0]:last-of-type {\n  margin-right: 0;\n}\n\n", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/lightbox/CLightbox.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,qEAAA;AAEA;EACA,eAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;;EAEA,yBAAA;EACA,aAAA;AACA;AAEA;EACA,aAAA;EACA,8BAAA;EACA,yBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,6BAAA;EACA,aAAA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AACA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,6BAAA;EACA,YAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AACA;AAEA;EACA,eAAA;AACA","file":"CLightbox.vue","sourcesContent":["<template>\n  <div class=\"lightbox\">\n    <header>\n      <div class=\"left\">\n        <slot name=\"header.left\" />\n      </div>\n      <div class=\"right\">\n        <slot name=\"header.right\" />\n        <button\n          class=\"closer\"\n          @click=\"$emit('close')\"\n        >\n          &times;\n        </button>\n      </div>\n    </header>\n    <main>\n      <slot name=\"main\" />\n    </main>\n  </div>\n</template>\n\n<style scoped>\n/* Temporary style; update when messaging is updated with bootstrap */\n\n.lightbox {\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  background-color: #EEF1F3;\n  z-index: 2000;\n}\n\n.lightbox header {\n  display: flex;\n  justify-content: space-between;\n  background-color: #FFFFFF;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  box-shadow: 0 0 3px #1E1E1E41;\n  z-index: 1000;\n  height: 50px;\n}\n\n.lightbox header .left {\n  margin-left: 10px;\n}\n.lightbox header .right {\n  margin-right: 10px;\n}\n\n.lightbox header > div {\n  display: flex;\n  align-items: center;\n}\n\n.lightbox main {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n  z-index: 1;\n}\n\n.lightbox header button {\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-size: 25px;\n  font-weight: bold;\n  margin: 10px;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n.lightbox header button:last-of-type {\n  margin-right: 0;\n}\n\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$5 = "data-v-09c086fd";
+  const __vue_scope_id__$5 = "data-v-5950f2a0";
   /* module identifier */
   const __vue_module_identifier__$5 = undefined;
   /* functional template */
@@ -71343,6 +71344,10 @@ var script$d = {
       type: Function,
       required: false,
       default: () => {}
+    },
+    currentValue: {
+      type: String,
+      required: false
     }
   },
   methods: {
@@ -71489,12 +71494,12 @@ __vue_render__$b._withStripped = true;
   /* style */
   const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
-    inject("data-v-d8948e54_0", { source: ".icon[data-v-d8948e54] {\n  padding: 0 2px;\n}\n.icon.color-icon[data-v-d8948e54] {\n  border-bottom: 1px solid black;\n}\n.icon.background-icon[data-v-d8948e54] {\n  background-color: rgba(0, 0, 0, 0.07);\n  padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA8DA;EACA,cAAA;AC7DA;AD+DA;EACA,8BAAA;AC7DA;ADgEA;EACA,qCAAA;EACA,gBAAA;AC9DA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n  <div>\n    <b-button\n      variant=\"link\"\n      class=\"text-dark font-weight-bold text-decoration-none\"\n      :id=\"`color-popover-${format.type}`\">\n\n      <span\n        class=\"icon\"\n        :class=\"typeStyle\">A</span>\n\n    </b-button>\n\n    <b-popover\n      :delay=\"0\"\n      no-fade\n      custom-class=\"tcl-popover\"\n      triggers=\"focus\"\n      :target=\"`color-popover-${format.type}`\"\n      placement=\"bottom\"\n      :container=\"null\"\n      ref=\"popover\">\n\n      <swatches\n        swatch-size=\"14\"\n        colors=\"text-advanced\"\n        @input=\"onClick(format.type, { color: $event })\"\n        inline />\n\n    </b-popover>\n  </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n  name: 't-mark-color',\n\n  components: {\n    Swatches,\n  },\n  extends: base,\n\n  computed: {\n    typeStyle () {\n      return `${this.format.type}-icon`\n    },\n  },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n  padding: 0 2px;\n\n  &.color-icon {\n    border-bottom: 1px solid black;\n  }\n\n  &.background-icon {\n    background-color: rgba(black, 0.07);\n    padding: 2px 3px;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n  padding: 0 !important;\n}\n</style>\n",".icon {\n  padding: 0 2px;\n}\n.icon.color-icon {\n  border-bottom: 1px solid black;\n}\n.icon.background-icon {\n  background-color: rgba(0, 0, 0, 0.07);\n  padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined })
-,inject("data-v-d8948e54_1", { source: ".tcl-popover .popover-body {\n  padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;AC9EA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n  <div>\n    <b-button\n      variant=\"link\"\n      class=\"text-dark font-weight-bold text-decoration-none\"\n      :id=\"`color-popover-${format.type}`\">\n\n      <span\n        class=\"icon\"\n        :class=\"typeStyle\">A</span>\n\n    </b-button>\n\n    <b-popover\n      :delay=\"0\"\n      no-fade\n      custom-class=\"tcl-popover\"\n      triggers=\"focus\"\n      :target=\"`color-popover-${format.type}`\"\n      placement=\"bottom\"\n      :container=\"null\"\n      ref=\"popover\">\n\n      <swatches\n        swatch-size=\"14\"\n        colors=\"text-advanced\"\n        @input=\"onClick(format.type, { color: $event })\"\n        inline />\n\n    </b-popover>\n  </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n  name: 't-mark-color',\n\n  components: {\n    Swatches,\n  },\n  extends: base,\n\n  computed: {\n    typeStyle () {\n      return `${this.format.type}-icon`\n    },\n  },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n  padding: 0 2px;\n\n  &.color-icon {\n    border-bottom: 1px solid black;\n  }\n\n  &.background-icon {\n    background-color: rgba(black, 0.07);\n    padding: 2px 3px;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n  padding: 0 !important;\n}\n</style>\n",".tcl-popover .popover-body {\n  padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined });
+    inject("data-v-bfd7c2ee_0", { source: ".icon[data-v-bfd7c2ee] {\n  padding: 0 2px;\n}\n.icon.color-icon[data-v-bfd7c2ee] {\n  border-bottom: 1px solid black;\n}\n.icon.background-icon[data-v-bfd7c2ee] {\n  background-color: rgba(0, 0, 0, 0.07);\n  padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA8DA;EACA,cAAA;AC7DA;AD+DA;EACA,8BAAA;AC7DA;ADgEA;EACA,qCAAA;EACA,gBAAA;AC9DA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n  <div>\n    <b-button\n      variant=\"link\"\n      class=\"text-dark font-weight-bold text-decoration-none\"\n      :id=\"`color-popover-${format.type}`\">\n\n      <span\n        class=\"icon\"\n        :class=\"typeStyle\">A</span>\n\n    </b-button>\n\n    <b-popover\n      :delay=\"0\"\n      no-fade\n      custom-class=\"tcl-popover\"\n      triggers=\"focus\"\n      :target=\"`color-popover-${format.type}`\"\n      placement=\"bottom\"\n      :container=\"null\"\n      ref=\"popover\">\n\n      <swatches\n        swatch-size=\"14\"\n        colors=\"text-advanced\"\n        @input=\"onClick(format.type, { color: $event })\"\n        inline />\n\n    </b-popover>\n  </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n  name: 't-mark-color',\n\n  components: {\n    Swatches,\n  },\n  extends: base,\n\n  computed: {\n    typeStyle () {\n      return `${this.format.type}-icon`\n    },\n  },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n  padding: 0 2px;\n\n  &.color-icon {\n    border-bottom: 1px solid black;\n  }\n\n  &.background-icon {\n    background-color: rgba(black, 0.07);\n    padding: 2px 3px;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n  padding: 0 !important;\n}\n</style>\n",".icon {\n  padding: 0 2px;\n}\n.icon.color-icon {\n  border-bottom: 1px solid black;\n}\n.icon.background-icon {\n  background-color: rgba(0, 0, 0, 0.07);\n  padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined })
+,inject("data-v-bfd7c2ee_1", { source: ".tcl-popover .popover-body {\n  padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;AC9EA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n  <div>\n    <b-button\n      variant=\"link\"\n      class=\"text-dark font-weight-bold text-decoration-none\"\n      :id=\"`color-popover-${format.type}`\">\n\n      <span\n        class=\"icon\"\n        :class=\"typeStyle\">A</span>\n\n    </b-button>\n\n    <b-popover\n      :delay=\"0\"\n      no-fade\n      custom-class=\"tcl-popover\"\n      triggers=\"focus\"\n      :target=\"`color-popover-${format.type}`\"\n      placement=\"bottom\"\n      :container=\"null\"\n      ref=\"popover\">\n\n      <swatches\n        swatch-size=\"14\"\n        colors=\"text-advanced\"\n        @input=\"onClick(format.type, { color: $event })\"\n        inline />\n\n    </b-popover>\n  </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n  name: 't-mark-color',\n\n  components: {\n    Swatches,\n  },\n  extends: base,\n\n  computed: {\n    typeStyle () {\n      return `${this.format.type}-icon`\n    },\n  },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n  padding: 0 2px;\n\n  &.color-icon {\n    border-bottom: 1px solid black;\n  }\n\n  &.background-icon {\n    background-color: rgba(black, 0.07);\n    padding: 2px 3px;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n  padding: 0 !important;\n}\n</style>\n",".tcl-popover .popover-body {\n  padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$f = "data-v-d8948e54";
+  const __vue_scope_id__$f = "data-v-bfd7c2ee";
   /* module identifier */
   const __vue_module_identifier__$f = undefined;
   /* functional template */
@@ -71640,9 +71645,11 @@ var script$g = {
      * Helper to show the popup & determine if a link already exists
      */
     showPopover() {
-      this.visible = true;
-      this.attrs = { ...this.getMarkAttrs(this.format.type)
-      };
+      if (this.currentValue) {
+        this.visible = true;
+        this.attrs = { ...this.getMarkAttrs(this.format.type)
+        };
+      }
     },
 
     /**
@@ -71693,89 +71700,101 @@ var __vue_render__$d = function() {
         ]
       ),
       _vm._v(" "),
-      _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.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;
                 }
-              }),
-              _vm._v(" "),
+              }
+            },
+            [
               _c(
-                "b-input-group-append",
+                "b-input-group",
                 [
-                  _c(
-                    "b-button",
-                    {
-                      attrs: {
-                        disabled: !_vm.urlValid,
-                        variant: "outline-success"
-                      },
-                      on: { click: _vm.link }
+                  _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",
                     [
-                      _vm._v(
-                        "\n          " + _vm._s(_vm.labels.ok) + "\n        "
+                      _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
@@ -71783,9 +71802,7 @@ var __vue_render__$d = function() {
             ],
             1
           )
-        ],
-        1
-      )
+        : _vm._e()
     ],
     1
   )
@@ -79077,6 +79094,10 @@ var script$k = {
     labels: {
       type: Object,
       default: () => ({})
+    },
+    currentValue: {
+      type: String,
+      required: false
     }
   },
   methods: {
@@ -79147,7 +79168,11 @@ var __vue_render__$g = function() {
             {
               key: "" + f.name + i + "}",
               tag: "component",
-              attrs: { format: f, labels: _vm.labels },
+              attrs: {
+                format: f,
+                labels: _vm.labels,
+                "current-value": _vm.currentValue
+              },
               on: {
                 click: function($event) {
                   _vm.commands[$event.type]($event.attrs);
@@ -79234,7 +79259,8 @@ var script$l = {
       toolbar: getToolbar(),
       // Helper to determine if current content differes from prop's content
       emittedContent: false,
-      editor: undefined
+      editor: undefined,
+      currentValue: ''
     };
   },
 
@@ -79286,11 +79312,11 @@ var script$l = {
      * Because of this, we are using `view.dom.innerHTML`. This should be improved at a later point
      */
     onUpdate() {
-      let content = this.editor.view.dom.innerHTML; // Makes sure to default to '' as the value if no text is present, for validation purposes
+      this.currentValue = this.editor.view.dom.innerHTML; // Makes sure to default to '' as the value if no text is present, for validation purposes
 
-      content = content !== '<p><br></p>' ? content : '';
+      this.currentValue = this.currentValue !== '<p><br></p>' ? this.currentValue : '';
       this.emittedContent = true;
-      this.$emit('input', content);
+      this.$emit('input', this.currentValue);
     }
 
   }
@@ -79334,7 +79360,8 @@ var __vue_render__$h = function() {
                                 "is-active": isActive,
                                 "get-mark-attrs": getMarkAttrs,
                                 "get-node-attrs": getNodeAttrs,
-                                labels: _vm.labels
+                                labels: _vm.labels,
+                                "current-value": _vm.currentValue
                               }
                             })
                           ]
@@ -79343,7 +79370,7 @@ var __vue_render__$h = function() {
                     ],
                     null,
                     false,
-                    859481980
+                    2342935495
                   )
                 })
               ],
@@ -79511,11 +79538,11 @@ __vue_render__$i._withStripped = true;
   /* style */
   const __vue_inject_styles__$n = function (inject) {
     if (!inject) return
-    inject("data-v-9fb84ff2_0", { source: ".pointer[data-v-9fb84ff2] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/permissions/CPermissionsButton.vue","CPermissionsButton.vue"],"names":[],"mappings":"AA0FA;EACA,eAAA;ACzFA;;AAEA,iDAAiD","file":"CPermissionsButton.vue","sourcesContent":["<template>\n  <a\n    v-if=\"link\"\n    class=\"pointer\"\n    @click=\"onClick\"\n  >\n    <font-awesome-icon :icon=\"['fas', 'lock']\" />\n  </a>\n  <b-button\n    v-else\n    :variant=\"buttonVariant\"\n    @click=\"onClick\"\n  >\n    <slot>\n      <font-awesome-icon v-if=\"showButtonIcon\" :icon=\"['fas', 'lock']\" />\n      <span v-if=\"buttonLabel\">\n        {{ buttonLabel }}\n      </span>\n    </slot>\n  </b-button>\n</template>\n<script lang=\"js\">\nimport { modalOpenEventName } from './def.ts'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faLock } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faLock)\n\nexport default {\n  props: {\n    link: {\n      type: Boolean,\n    },\n\n    buttonVariant: {\n      type: String,\n      default: undefined,\n    },\n\n    resource: {\n      type: String,\n      required: true,\n    },\n\n    title: {\n      type: String,\n      default: undefined,\n    },\n\n    buttonLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    modalOpenEvent: {\n      type: String,\n      default: modalOpenEventName,\n    },\n\n    target: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n\n    showButtonIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    // Use this prop if you want the translations to look for all-specific key instead of all/specific\n    allSpecific: {\n      type: Boolean,\n      default: false\n    },\n  },\n\n  methods: {\n    onClick () {\n      this.$root.$emit(this.modalOpenEvent, {\n        target: this.target,\n        resource: this.resource,\n        title: this.title,\n        allSpecific: this.allSpecific\n      })\n    },\n  },\n}\n</script>\n<style lang=\"scss\" scoped>\n.pointer {\n  cursor: pointer;\n}\n</style>\n",".pointer {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */"]}, media: undefined });
+    inject("data-v-7413f73a_0", { source: ".pointer[data-v-7413f73a] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/permissions/CPermissionsButton.vue","CPermissionsButton.vue"],"names":[],"mappings":"AA0FA;EACA,eAAA;ACzFA;;AAEA,iDAAiD","file":"CPermissionsButton.vue","sourcesContent":["<template>\n  <a\n    v-if=\"link\"\n    class=\"pointer\"\n    @click=\"onClick\"\n  >\n    <font-awesome-icon :icon=\"['fas', 'lock']\" />\n  </a>\n  <b-button\n    v-else\n    :variant=\"buttonVariant\"\n    @click=\"onClick\"\n  >\n    <slot>\n      <font-awesome-icon v-if=\"showButtonIcon\" :icon=\"['fas', 'lock']\" />\n      <span v-if=\"buttonLabel\">\n        {{ buttonLabel }}\n      </span>\n    </slot>\n  </b-button>\n</template>\n<script lang=\"js\">\nimport { modalOpenEventName } from './def.ts'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faLock } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faLock)\n\nexport default {\n  props: {\n    link: {\n      type: Boolean,\n    },\n\n    buttonVariant: {\n      type: String,\n      default: undefined,\n    },\n\n    resource: {\n      type: String,\n      required: true,\n    },\n\n    title: {\n      type: String,\n      default: undefined,\n    },\n\n    buttonLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    modalOpenEvent: {\n      type: String,\n      default: modalOpenEventName,\n    },\n\n    target: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n\n    showButtonIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    // Use this prop if you want the translations to look for all-specific key instead of all/specific\n    allSpecific: {\n      type: Boolean,\n      default: false\n    },\n  },\n\n  methods: {\n    onClick () {\n      this.$root.$emit(this.modalOpenEvent, {\n        target: this.target,\n        resource: this.resource,\n        title: this.title,\n        allSpecific: this.allSpecific\n      })\n    },\n  },\n}\n</script>\n<style lang=\"scss\" scoped>\n.pointer {\n  cursor: pointer;\n}\n</style>\n",".pointer {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$n = "data-v-9fb84ff2";
+  const __vue_scope_id__$n = "data-v-7413f73a";
   /* module identifier */
   const __vue_module_identifier__$n = undefined;
   /* functional template */
@@ -80282,11 +80309,11 @@ __vue_render__$m._withStripped = true;
   /* style */
   const __vue_inject_styles__$r = function (inject) {
     if (!inject) return
-    inject("data-v-4bfc6a37_0", { source: ".pointer[data-v-4bfc6a37] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/permissions/CPermissionsForm.vue","CPermissionsForm.vue"],"names":[],"mappings":"AAsQA;EACA,eAAA;ACrQA;;AAEA,+CAA+C","file":"CPermissionsForm.vue","sourcesContent":["<template>\n  <b-form @submit.prevent=\"onSubmit\">\n    <b-row>\n      <b-col\n        class=\"role-list\"\n        cols=\"12\"\n        lg=\"3\"\n      >\n        <b-list-group class=\"d-none d-lg-block\">\n          <b-list-group-item\n            v-for=\"r in roles\"\n            :key=\"r.roleID\"\n            :active=\"r.roleID === currentRole.roleID\"\n            active-class=\"primary\"\n            variant=\"outline-primary\"\n            class=\"text-break pointer\"\n            @click=\"onRoleChange(r)\"\n          >\n            {{ r.name || r.handle || r.roleID }}\n          </b-list-group-item>\n        </b-list-group>\n        <vue-select\n          v-model=\"currentRole\"\n          key=\"roleID\"\n          label=\"name\"\n          class=\"mb-4 d-block d-lg-none\"\n          :clearable=\"false\"\n          :options=\"roles\"\n          @input=\"onRoleChange\"\n        />\n      </b-col>\n      <b-col\n        class=\"rule-list\"\n        cols=\"12\"\n        lg=\"9\"\n      >\n        <rules :rules.sync=\"rules\" />\n      </b-col>\n    </b-row>\n\n    <b-row class=\"footer mt-3\"\n    >\n      <b-col\n        class=\"rule-list text-right\"\n        cols=\"9\"\n        offset=\"3\"\n      >\n        <b-button\n          type=\"submit\"\n          variant=\"primary\"\n          :disabled=\"disabled\"\n        >\n          {{ $t('permissions:ui.save-changes') }}\n        </b-button>\n      </b-col>\n    </b-row>\n  </b-form>\n</template>\n<script lang=\"js\">\nimport Rules from './form/Rules.vue'\nimport { VueSelect } from 'vue-select'\nimport { split } from './def.ts'\n\n// Data, Methods, Computed, Props\nexport default {\n  i18nOptions: {\n    /**\n     * Using both, implicit (here) and explicit (at $t()) namespace setting.\n     * If we only use implicit the behaviour is flaky.\n     */\n    namespaces: 'permissions',\n  },\n\n  components: {\n    Rules,\n    VueSelect,\n  },\n\n  props: {\n    resource: {\n      type: String,\n      required: true,\n    },\n\n    target: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n\n    allSpecific: {\n      type: Boolean,\n      default: false\n    },\n\n    backendComponentName: {\n      type: String,\n      default () {\n        // Assuming backend service will\n        // be equal to (first part of) resource\n        if (!this.resource.startsWith('corteza::')) {\n          throw Error('unrecognized resource type schema')\n        }\n\n        // <schema>::<backend-component-name>:...\n        return this.resource.split(':')[2]\n      },\n    },\n  },\n\n  data () {\n    return {\n      processing: false,\n\n      // List of available permissions (for a specific resource)\n      permissions: [],\n\n      // List of rules for the current role\n      rules: [],\n\n      // List of all available roles\n      roles: [],\n\n      // Current role object\n      currentRole: undefined,\n    }\n  },\n\n  computed: {\n    dirty () {\n      return this.collectChangedRules().length > 0\n    },\n\n    disabled () {\n      return !this.dirty\n    },\n\n    api () {\n      const s = this.backendComponentName\n      return this['$' + s.charAt(0).toUpperCase() + s.slice(1) + 'API']\n    },\n  },\n\n  created () {\n    this.fetchPermissions()\n    this.fetchRoles()\n  },\n\n  methods: {\n    onRoleChange (role) {\n      this.currentRole = role\n      this.fetchRules(role.roleID)\n    },\n\n    onSubmit () {\n      this.processing = true\n      const rules = this.collectChangedRules()\n      const { roleID } = this.currentRole\n\n      this.api.permissionsUpdate({ roleID, rules }).then(() => {\n        this.fetchRules(roleID)\n        this.processing = false\n      })\n    },\n\n    async fetchPermissions () {\n      // clean loaded rules\n      this.rules = []\n      this.permissions = []\n      this.processing = true\n\n      return this.api.permissionsList().then((pp) => {\n        this.permissions = this.filterPermissions(pp)\n        this.processing = false\n      })\n    },\n\n    async fetchRules (roleID) {\n      this.processing = true\n      return this.api.permissionsRead({ roleID }).then((rules) => {\n        this.rules = this.normalizeRules(rules)\n        this.processing = false\n      })\n    },\n\n    async fetchRoles () {\n      this.processing = true\n      // Roles are always fetched from $SystemAPI.\n      return this.$SystemAPI.roleList().then(({ set }) => {\n        this.roles = set\n          .filter(({ isBypass  }) => !isBypass )\n          .sort((a, b) => a.roleID.localeCompare(b.roleID))\n\n        if (this.roles.length > 0) {\n          this.onRoleChange(this.roles[0])\n        }\n        this.processing = false\n      })\n    },\n\n    normalizeRules (rr) {\n      const inherit = 'inherit'\n\n      // merges roleRules (subset) with list of all permissions\n      const findCurrent = ({ resource, operation }) => {\n        if (!rr) {\n          return inherit\n        }\n\n        return (rr.find(r => r.resource === resource && r.operation === operation) || {}).access || inherit\n      }\n\n      return this.permissions.map((p) => {\n        const current = findCurrent(p)\n        return { ...p, access: current, current }\n      })\n    },\n\n    // Removes unneeded permissions (ones that do not match resource prop)\n    // and translates the rest\n    filterPermissions (pp) {\n      const [ resourceType ] = this.resource.split('/', 2)\n      return pp\n        .filter(({ type }) => resourceType === type)\n        .map(({ type, op: operation }) => {\n          return {\n            ...this.describePermission({ resource: type, operation }),\n            operation,\n            // override resource-type with the actual resource-ID\n            resource: this.resource\n          }\n        })\n    },\n\n    collectChangedRules () {\n      return this.rules.filter(r => r.access !== r.current).map(({ resource, operation, access }) => {\n        return { resource, operation, access }\n      })\n    },\n\n    describePermission ({ resource, operation }) {\n      const i18nPrefix = split(resource).i18nPrefix + `.operations.${operation}`\n\n      let title = ''\n      if (this.allSpecific) {\n        title = this.$t(`permissions:${i18nPrefix}.all-specific`, { target: this.target, interpolation: { escapeValue: false } })\n      } else if (this.target) {\n        title = this.$t(`permissions:${i18nPrefix}.specific`, { target: this.target, interpolation: { escapeValue: false } })\n      } else {\n        title = this.$t(`permissions:${i18nPrefix}.title`)\n      }\n\n      return {\n        title,\n        description: this.$t(`permissions:${i18nPrefix}.description`),\n      }\n    },\n  },\n}\n\n</script>\n<style scoped lang=\"scss\">\n.pointer {\n  cursor: pointer;\n}\n</style>\n",".pointer {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */"]}, media: undefined });
+    inject("data-v-5004c9ac_0", { source: ".pointer[data-v-5004c9ac] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/permissions/CPermissionsForm.vue","CPermissionsForm.vue"],"names":[],"mappings":"AAsQA;EACA,eAAA;ACrQA;;AAEA,+CAA+C","file":"CPermissionsForm.vue","sourcesContent":["<template>\n  <b-form @submit.prevent=\"onSubmit\">\n    <b-row>\n      <b-col\n        class=\"role-list\"\n        cols=\"12\"\n        lg=\"3\"\n      >\n        <b-list-group class=\"d-none d-lg-block\">\n          <b-list-group-item\n            v-for=\"r in roles\"\n            :key=\"r.roleID\"\n            :active=\"r.roleID === currentRole.roleID\"\n            active-class=\"primary\"\n            variant=\"outline-primary\"\n            class=\"text-break pointer\"\n            @click=\"onRoleChange(r)\"\n          >\n            {{ r.name || r.handle || r.roleID }}\n          </b-list-group-item>\n        </b-list-group>\n        <vue-select\n          v-model=\"currentRole\"\n          key=\"roleID\"\n          label=\"name\"\n          class=\"mb-4 d-block d-lg-none\"\n          :clearable=\"false\"\n          :options=\"roles\"\n          @input=\"onRoleChange\"\n        />\n      </b-col>\n      <b-col\n        class=\"rule-list\"\n        cols=\"12\"\n        lg=\"9\"\n      >\n        <rules :rules.sync=\"rules\" />\n      </b-col>\n    </b-row>\n\n    <b-row class=\"footer mt-3\"\n    >\n      <b-col\n        class=\"rule-list text-right\"\n        cols=\"9\"\n        offset=\"3\"\n      >\n        <b-button\n          type=\"submit\"\n          variant=\"primary\"\n          :disabled=\"disabled\"\n        >\n          {{ $t('permissions:ui.save-changes') }}\n        </b-button>\n      </b-col>\n    </b-row>\n  </b-form>\n</template>\n<script lang=\"js\">\nimport Rules from './form/Rules.vue'\nimport { VueSelect } from 'vue-select'\nimport { split } from './def.ts'\n\n// Data, Methods, Computed, Props\nexport default {\n  i18nOptions: {\n    /**\n     * Using both, implicit (here) and explicit (at $t()) namespace setting.\n     * If we only use implicit the behaviour is flaky.\n     */\n    namespaces: 'permissions',\n  },\n\n  components: {\n    Rules,\n    VueSelect,\n  },\n\n  props: {\n    resource: {\n      type: String,\n      required: true,\n    },\n\n    target: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n\n    allSpecific: {\n      type: Boolean,\n      default: false\n    },\n\n    backendComponentName: {\n      type: String,\n      default () {\n        // Assuming backend service will\n        // be equal to (first part of) resource\n        if (!this.resource.startsWith('corteza::')) {\n          throw Error('unrecognized resource type schema')\n        }\n\n        // <schema>::<backend-component-name>:...\n        return this.resource.split(':')[2]\n      },\n    },\n  },\n\n  data () {\n    return {\n      processing: false,\n\n      // List of available permissions (for a specific resource)\n      permissions: [],\n\n      // List of rules for the current role\n      rules: [],\n\n      // List of all available roles\n      roles: [],\n\n      // Current role object\n      currentRole: undefined,\n    }\n  },\n\n  computed: {\n    dirty () {\n      return this.collectChangedRules().length > 0\n    },\n\n    disabled () {\n      return !this.dirty\n    },\n\n    api () {\n      const s = this.backendComponentName\n      return this['$' + s.charAt(0).toUpperCase() + s.slice(1) + 'API']\n    },\n  },\n\n  created () {\n    this.fetchPermissions()\n    this.fetchRoles()\n  },\n\n  methods: {\n    onRoleChange (role) {\n      this.currentRole = role\n      this.fetchRules(role.roleID)\n    },\n\n    onSubmit () {\n      this.processing = true\n      const rules = this.collectChangedRules()\n      const { roleID } = this.currentRole\n\n      this.api.permissionsUpdate({ roleID, rules }).then(() => {\n        this.fetchRules(roleID)\n        this.processing = false\n      })\n    },\n\n    async fetchPermissions () {\n      // clean loaded rules\n      this.rules = []\n      this.permissions = []\n      this.processing = true\n\n      return this.api.permissionsList().then((pp) => {\n        this.permissions = this.filterPermissions(pp)\n        this.processing = false\n      })\n    },\n\n    async fetchRules (roleID) {\n      this.processing = true\n      return this.api.permissionsRead({ roleID }).then((rules) => {\n        this.rules = this.normalizeRules(rules)\n        this.processing = false\n      })\n    },\n\n    async fetchRoles () {\n      this.processing = true\n      // Roles are always fetched from $SystemAPI.\n      return this.$SystemAPI.roleList().then(({ set }) => {\n        this.roles = set\n          .filter(({ isBypass  }) => !isBypass )\n          .sort((a, b) => a.roleID.localeCompare(b.roleID))\n\n        if (this.roles.length > 0) {\n          this.onRoleChange(this.roles[0])\n        }\n        this.processing = false\n      })\n    },\n\n    normalizeRules (rr) {\n      const inherit = 'inherit'\n\n      // merges roleRules (subset) with list of all permissions\n      const findCurrent = ({ resource, operation }) => {\n        if (!rr) {\n          return inherit\n        }\n\n        return (rr.find(r => r.resource === resource && r.operation === operation) || {}).access || inherit\n      }\n\n      return this.permissions.map((p) => {\n        const current = findCurrent(p)\n        return { ...p, access: current, current }\n      })\n    },\n\n    // Removes unneeded permissions (ones that do not match resource prop)\n    // and translates the rest\n    filterPermissions (pp) {\n      const [ resourceType ] = this.resource.split('/', 2)\n      return pp\n        .filter(({ type }) => resourceType === type)\n        .map(({ type, op: operation }) => {\n          return {\n            ...this.describePermission({ resource: type, operation }),\n            operation,\n            // override resource-type with the actual resource-ID\n            resource: this.resource\n          }\n        })\n    },\n\n    collectChangedRules () {\n      return this.rules.filter(r => r.access !== r.current).map(({ resource, operation, access }) => {\n        return { resource, operation, access }\n      })\n    },\n\n    describePermission ({ resource, operation }) {\n      const i18nPrefix = split(resource).i18nPrefix + `.operations.${operation}`\n\n      let title = ''\n      if (this.allSpecific) {\n        title = this.$t(`permissions:${i18nPrefix}.all-specific`, { target: this.target, interpolation: { escapeValue: false } })\n      } else if (this.target) {\n        title = this.$t(`permissions:${i18nPrefix}.specific`, { target: this.target, interpolation: { escapeValue: false } })\n      } else {\n        title = this.$t(`permissions:${i18nPrefix}.title`)\n      }\n\n      return {\n        title,\n        description: this.$t(`permissions:${i18nPrefix}.description`),\n      }\n    },\n  },\n}\n\n</script>\n<style scoped lang=\"scss\">\n.pointer {\n  cursor: pointer;\n}\n</style>\n",".pointer {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$r = "data-v-4bfc6a37";
+  const __vue_scope_id__$r = "data-v-5004c9ac";
   /* module identifier */
   const __vue_module_identifier__$r = undefined;
   /* functional template */
@@ -81502,11 +81529,11 @@ __vue_render__$t._withStripped = true;
   /* style */
   const __vue_inject_styles__$z = function (inject) {
     if (!inject) return
-    inject("data-v-4a7f9f1e_0", { source: ".slide-enter-active[data-v-4a7f9f1e] {\n  transition: all 0.3s ease;\n}\n.slide-leave-active[data-v-4a7f9f1e] {\n  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n.slide-enter[data-v-4a7f9f1e], .slide-leave-to[data-v-4a7f9f1e] {\n  transform: translateX(10px);\n  opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/prompts/CPromptToast.vue","CPromptToast.vue"],"names":[],"mappings":"AAqJA;EACA,yBAAA;ACpJA;ADsJA;EACA,iDAAA;ACnJA;ADqJA;EAEA,2BAAA;EACA,UAAA;ACnJA;;AAEA,2CAA2C","file":"CPromptToast.vue","sourcesContent":["<template>\n  <div>\n    <b-toast\n      v-for=\"({ prompt, component, passive }) in toasts\"\n      :id=\"'wfPromptToast-'+prompt.stateID\"\n      :key=\"'wfPromptToast-'+prompt.stateID\"\n      :variant=\"pVal(prompt, 'variant', 'primary')\"\n      :visible=\"!isActive\"\n      solid\n      :no-auto-hide=\"!passive\"\n      :auto-hide-delay=\"pVal(prompt, 'timeout', defaultTimeout) * 1000\"\n      :no-close-button=\"!passive\"\n    >\n      <template #toast-title>\n        <div class=\"d-flex flex-grow-1 align-items-baseline\">\n          <strong class=\"mr-auto\">{{ pVal(prompt, 'title', 'Workflow prompt') }}</strong>\n          <b-button\n            variant=\"link\"\n            size=\"sm\"\n            v-if=\"!passive && active.length > 1\"\n            @click=\"activate(true)\"\n          >\n            {{ active.length }} waiting\n          </b-button>\n        </div>\n      </template>\n      <component\n        v-if=\"component\"\n        :is=\"component\"\n        :payload=\"prompt.payload\"\n        :loading=\"isLoading\"\n        @submit=\"resumeToast({ input: $event, prompt })\"\n      />\n    </b-toast>\n  </div>\n</template>\n<script>\nimport { mapGetters, mapActions } from 'vuex'\nimport definitions from './kinds/index.ts'\nimport { pVal } from './utils.ts'\n\nexport default {\n  name: 'c-prompt-toast',\n\n  data () {\n    return {\n      passive: new Set(),\n    }\n  },\n\n  computed: {\n    ...mapGetters({\n      prompts: 'wfPrompts/all',\n      isActive: 'wfPrompts/isActive',\n      isLoading: 'wfPrompts/isLoading',\n    }),\n\n    withHandlers () {\n      return this.prompts\n        .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].handler)\n        .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n    },\n\n    withComponents () {\n      return this.prompts\n        .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].component)\n        .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n    },\n\n    /**\n     * All non-passive prompts with components\n     */\n    active() {\n      return this.withComponents.filter(({ passive }) => !passive)\n    },\n\n    /**\n     * Returns list of prompts that we can interpret as toasts: display component is defined\n     *\n     * Toasts (prompts with components) are displayed in order received but\n     * passive (no feedback or input from user required) first and the rest later\n     */\n    toasts () {\n      return [\n        ...this.passive.values(),\n        ...this.active\n      ]\n    },\n\n    defaultTimeout () {\n      return 7\n    }\n  },\n\n  watch: {\n    // watch prompts with handlers and when a new one arrives\n    // shift it from the stack, resume the prompt and handle it\n    withHandlers (hh) {\n      if (hh.length > 0) {\n        const { handler, prompt } = hh.shift()\n        this.resume({ input: {}, prompt }).then(() => {\n          handler.call(this, prompt.payload)\n        })\n      }\n    },\n\n    /**\n     * Make a copy of prompt if it is defined as passive\n     *\n     * We do this because we do not want it to be removed right away\n     * but through a toast component's timeout\n     */\n    prompts: {\n      immediate: true,\n      handler () {\n        this.withComponents.forEach(p => {\n          if (p.passive) {\n            this.passive.add(p)\n          }\n        })\n      },\n    },\n  },\n\n  methods: {\n    ...mapActions({\n      resume: 'wfPrompts/resume',\n      activate: 'wfPrompts/activate',\n    }),\n\n    resumeToast (values) {\n      // Only reset input if prompt is kept open\n      if (values.input && values.input.keep) {\n        values.input = {}\n      } else {\n        // Otherwise remove prompt from toasts\n        this.toasts = this.toasts.filter(({ prompt }) => prompt.stateID !== values.prompt.stateID)\n      }\n\n      this.resume(values)\n    },\n\n    pVal (prompt, k, def = undefined) {\n      return pVal(prompt.payload, k, def)\n    },\n  },\n}\n</script>\n<style scoped lang=\"scss\">\n.slide-enter-active {\n  transition: all .3s ease;\n}\n.slide-leave-active {\n  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n}\n.slide-enter, .slide-leave-to\n/* .slide-leave-active below version 2.1.8 */ {\n  transform: translateX(10px);\n  opacity: 0;\n}\n</style>\n",".slide-enter-active {\n  transition: all 0.3s ease;\n}\n\n.slide-leave-active {\n  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-enter, .slide-leave-to {\n  transform: translateX(10px);\n  opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */"]}, media: undefined });
+    inject("data-v-7e37674b_0", { source: ".slide-enter-active[data-v-7e37674b] {\n  transition: all 0.3s ease;\n}\n.slide-leave-active[data-v-7e37674b] {\n  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n.slide-enter[data-v-7e37674b], .slide-leave-to[data-v-7e37674b] {\n  transform: translateX(10px);\n  opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/prompts/CPromptToast.vue","CPromptToast.vue"],"names":[],"mappings":"AAqJA;EACA,yBAAA;ACpJA;ADsJA;EACA,iDAAA;ACnJA;ADqJA;EAEA,2BAAA;EACA,UAAA;ACnJA;;AAEA,2CAA2C","file":"CPromptToast.vue","sourcesContent":["<template>\n  <div>\n    <b-toast\n      v-for=\"({ prompt, component, passive }) in toasts\"\n      :id=\"'wfPromptToast-'+prompt.stateID\"\n      :key=\"'wfPromptToast-'+prompt.stateID\"\n      :variant=\"pVal(prompt, 'variant', 'primary')\"\n      :visible=\"!isActive\"\n      solid\n      :no-auto-hide=\"!passive\"\n      :auto-hide-delay=\"pVal(prompt, 'timeout', defaultTimeout) * 1000\"\n      :no-close-button=\"!passive\"\n    >\n      <template #toast-title>\n        <div class=\"d-flex flex-grow-1 align-items-baseline\">\n          <strong class=\"mr-auto\">{{ pVal(prompt, 'title', 'Workflow prompt') }}</strong>\n          <b-button\n            variant=\"link\"\n            size=\"sm\"\n            v-if=\"!passive && active.length > 1\"\n            @click=\"activate(true)\"\n          >\n            {{ active.length }} waiting\n          </b-button>\n        </div>\n      </template>\n      <component\n        v-if=\"component\"\n        :is=\"component\"\n        :payload=\"prompt.payload\"\n        :loading=\"isLoading\"\n        @submit=\"resumeToast({ input: $event, prompt })\"\n      />\n    </b-toast>\n  </div>\n</template>\n<script>\nimport { mapGetters, mapActions } from 'vuex'\nimport definitions from './kinds/index.ts'\nimport { pVal } from './utils.ts'\n\nexport default {\n  name: 'c-prompt-toast',\n\n  data () {\n    return {\n      passive: new Set(),\n    }\n  },\n\n  computed: {\n    ...mapGetters({\n      prompts: 'wfPrompts/all',\n      isActive: 'wfPrompts/isActive',\n      isLoading: 'wfPrompts/isLoading',\n    }),\n\n    withHandlers () {\n      return this.prompts\n        .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].handler)\n        .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n    },\n\n    withComponents () {\n      return this.prompts\n        .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].component)\n        .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n    },\n\n    /**\n     * All non-passive prompts with components\n     */\n    active() {\n      return this.withComponents.filter(({ passive }) => !passive)\n    },\n\n    /**\n     * Returns list of prompts that we can interpret as toasts: display component is defined\n     *\n     * Toasts (prompts with components) are displayed in order received but\n     * passive (no feedback or input from user required) first and the rest later\n     */\n    toasts () {\n      return [\n        ...this.passive.values(),\n        ...this.active\n      ]\n    },\n\n    defaultTimeout () {\n      return 7\n    }\n  },\n\n  watch: {\n    // watch prompts with handlers and when a new one arrives\n    // shift it from the stack, resume the prompt and handle it\n    withHandlers (hh) {\n      if (hh.length > 0) {\n        const { handler, prompt } = hh.shift()\n        this.resume({ input: {}, prompt }).then(() => {\n          handler.call(this, prompt.payload)\n        })\n      }\n    },\n\n    /**\n     * Make a copy of prompt if it is defined as passive\n     *\n     * We do this because we do not want it to be removed right away\n     * but through a toast component's timeout\n     */\n    prompts: {\n      immediate: true,\n      handler () {\n        this.withComponents.forEach(p => {\n          if (p.passive) {\n            this.passive.add(p)\n          }\n        })\n      },\n    },\n  },\n\n  methods: {\n    ...mapActions({\n      resume: 'wfPrompts/resume',\n      activate: 'wfPrompts/activate',\n    }),\n\n    resumeToast (values) {\n      // Only reset input if prompt is kept open\n      if (values.input && values.input.keep) {\n        values.input = {}\n      } else {\n        // Otherwise remove prompt from toasts\n        this.toasts = this.toasts.filter(({ prompt }) => prompt.stateID !== values.prompt.stateID)\n      }\n\n      this.resume(values)\n    },\n\n    pVal (prompt, k, def = undefined) {\n      return pVal(prompt.payload, k, def)\n    },\n  },\n}\n</script>\n<style scoped lang=\"scss\">\n.slide-enter-active {\n  transition: all .3s ease;\n}\n.slide-leave-active {\n  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n}\n.slide-enter, .slide-leave-to\n/* .slide-leave-active below version 2.1.8 */ {\n  transform: translateX(10px);\n  opacity: 0;\n}\n</style>\n",".slide-enter-active {\n  transition: all 0.3s ease;\n}\n\n.slide-leave-active {\n  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-enter, .slide-leave-to {\n  transform: translateX(10px);\n  opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$z = "data-v-4a7f9f1e";
+  const __vue_scope_id__$z = "data-v-7e37674b";
   /* module identifier */
   const __vue_module_identifier__$z = undefined;
   /* functional template */
@@ -81970,11 +81997,11 @@ __vue_render__$w._withStripped = true;
   /* style */
   const __vue_inject_styles__$C = function (inject) {
     if (!inject) return
-    inject("data-v-cc01ea74_0", { source: ".logo img[data-v-cc01ea74] {\n  animation: pulse-data-v-cc01ea74 4.2s infinite;\n}\n@keyframes pulse-data-v-cc01ea74 {\n0% {\n    opacity: 0;\n}\n65% {\n    opacity: 1;\n}\n100% {\n    opacity: 0;\n}\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/loader/CLoaderLogo.vue","CLoaderLogo.vue"],"names":[],"mappings":"AA0BA;EACA,8CAAA;ACzBA;AD4BA;AACA;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AACF;;AAEA,0CAA0C","file":"CLoaderLogo.vue","sourcesContent":["<template>\n  <b-container\n    fluid\n    class=\"d-flex justify-content-center vh-100 logo\"\n  >\n    <img\n      v-if=\"logo\"\n      :src=\"logo\"\n      class=\"w-25 my-auto\"\n    >\n  </b-container>\n</template>\n\n<script>\nexport default {\n  props: {\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.logo {\n  img {\n    animation: pulse 4.2s infinite;\n  }\n\n  @keyframes pulse {\n    0% {\n      opacity: 0;\n    }\n    65% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n}\n</style>\n",".logo img {\n  animation: pulse 4.2s infinite;\n}\n@keyframes pulse {\n  0% {\n    opacity: 0;\n  }\n  65% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */"]}, media: undefined });
+    inject("data-v-4482739a_0", { source: ".logo img[data-v-4482739a] {\n  animation: pulse-data-v-4482739a 4.2s infinite;\n}\n@keyframes pulse-data-v-4482739a {\n0% {\n    opacity: 0;\n}\n65% {\n    opacity: 1;\n}\n100% {\n    opacity: 0;\n}\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/loader/CLoaderLogo.vue","CLoaderLogo.vue"],"names":[],"mappings":"AA0BA;EACA,8CAAA;ACzBA;AD4BA;AACA;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AACF;;AAEA,0CAA0C","file":"CLoaderLogo.vue","sourcesContent":["<template>\n  <b-container\n    fluid\n    class=\"d-flex justify-content-center vh-100 logo\"\n  >\n    <img\n      v-if=\"logo\"\n      :src=\"logo\"\n      class=\"w-25 my-auto\"\n    >\n  </b-container>\n</template>\n\n<script>\nexport default {\n  props: {\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.logo {\n  img {\n    animation: pulse 4.2s infinite;\n  }\n\n  @keyframes pulse {\n    0% {\n      opacity: 0;\n    }\n    65% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n}\n</style>\n",".logo img {\n  animation: pulse 4.2s infinite;\n}\n@keyframes pulse {\n  0% {\n    opacity: 0;\n  }\n  65% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$C = "data-v-cc01ea74";
+  const __vue_scope_id__$C = "data-v-4482739a";
   /* module identifier */
   const __vue_module_identifier__$C = undefined;
   /* functional template */
@@ -82484,11 +82511,11 @@ __vue_render__$x._withStripped = true;
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    inject("data-v-1e94218e_0", { source: ".icon-logo[data-v-1e94218e] {\n  height: calc(64px / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.nav-icon[data-v-1e94218e] {\n  width: 40px;\n  height: 40px;\n}\n.nav-user-icon[data-v-1e94218e] {\n  width: 50px;\n  height: 50px;\n}\n.header-navigation[data-v-1e94218e] {\n  width: 100vw;\n  height: 64px;\n  background-color: #F3F3F5 !important;\n}\n.header-navigation h2[data-v-1e94218e] {\n  padding-left: calc(0.5rem + 2px);\n}\n.spacer[data-v-1e94218e] {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded[data-v-1e94218e] {\n  min-width: calc(320px - 42px);\n  -webkit-transition: min-width 0.2s ease-in-out;\n  -moz-transition: min-width 0.2s ease-in-out;\n  -o-transition: min-width 0.2s ease-in-out;\n  transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CTopbar.vue","CTopbar.vue"],"names":[],"mappings":"AA2MA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;AC1MA;AD6MA;EACA,WAVA;EAWA,YAXA;AC/LA;AD6MA;EACA,WAdA;EAeA,YAfA;AC3LA;AD6MA;EACA,YAAA;EACA,YAvBA;EAwBA,oCAAA;AC1MA;AD4MA;EACA,gCAAA;AC1MA;AD8MA;EACA,cAAA;EACA,+CAAA;EACA,4CAAA;EACA,0CAAA;EACA,uCAAA;AC3MA;AD6MA;EACA,6BAAA;EACA,8CAAA;EACA,2CAAA;EACA,yCAAA;EACA,sCAAA;AC3MA;;AAEA,sCAAsC","file":"CTopbar.vue","sourcesContent":["<template>\n  <div class=\"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 \">\n    <div\n      class=\"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100\"\n    >\n      <template>\n        <div\n          class=\"spacer\"\n          :class=\"{\n            'expanded': sidebarPinned,\n          }\"\n        />\n      </template>\n\n      <div\n        class=\"d-flex align-items-center ml-2 text-truncate mr-auto h-100\"\n      >\n        <h2\n          class=\"d-none d-sm-block mb-0\"\n        >\n          <slot name=\"title\" />\n        </h2>\n\n      </div>\n\n      <div class=\"ml-3\">\n        <slot name=\"tools\" />\n      </div>\n\n      <b-button\n        v-if=\"!hideAppSelector\"\n        variant=\"outline-light\"\n        :href=\"appSelectorURL\"\n        size=\"lg\"\n        class=\"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2\"\n      >\n        <font-awesome-icon\n          class=\"m-0 h5\"\n          :icon=\"['fas', 'grip-horizontal']\"\n        />\n      </b-button>\n\n      <b-dropdown\n        size=\"lg\"\n        variant=\"outline-light\"\n        class=\"nav-icon mx-1\"\n        toggle-class=\"text-decoration-none text-dark rounded-circle border-0 w-100\"\n        menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n        right\n        no-caret\n      >\n        <template #button-content>\n          <div\n            class=\"d-flex align-items-center justify-content-center\"\n          >\n            <font-awesome-icon\n              class=\"m-0 h5\"\n              :icon=\"['far', 'question-circle']\"\n            />\n            <span class=\"sr-only\">\n              Help\n            </span>\n          </div>\n        </template>\n        <div>\n          <slot name=\"help-dropdown\" />\n        </div>\n        <b-dropdown-item\n          href=\"https://forum.cortezaproject.org/\"\n          target=\"_blank\"\n        >\n          {{ labels.helpForum }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          :href=\"documentationURL\"\n          target=\"_blank\"\n        >\n          {{ labels.helpDocumentation }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          href=\"mailto:info@crust.tech\"\n          target=\"_blank\"\n        >\n          {{ labels.helpFeedback }}\n        </b-dropdown-item>\n        <b-dropdown-divider />\n        <b-dropdown-item\n          disabled\n          class=\"small\"\n        >\n          {{ labels.helpVersion }}\n          <br>\n          {{ frontendVersion }}\n        </b-dropdown-item>\n      </b-dropdown>\n      <b-dropdown\n        data-v-onboarding=\"profile\"\n        size=\"lg\"\n        variant=\"outline-light\"\n        class=\"nav-user-icon\"\n        toggle-class=\"nav-icon text-decoration-none text-dark rounded-circle border\"\n        menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n        right\n        no-caret\n      >\n        <template #button-content>\n          <div\n            class=\"d-flex align-items-center justify-content-center\"\n          >\n            <font-awesome-icon\n              class=\"m-0 h5\"\n              :icon=\"['far', 'user']\"\n            />\n            <span class=\"sr-only\">\n              {{ labels.helpForum }}\n            </span>\n          </div>\n        </template>\n        <b-dropdown-text class=\"text-muted mb-2\">\n          {{ labels.userSettingsLoggedInAs  }}\n        </b-dropdown-text>\n        <div>\n          <slot name=\"avatar-dropdown\" />\n        </div>\n        <b-dropdown-item\n          :href=\"userProfileURL\"\n          target=\"_blank\"\n        >\n          {{ labels.userSettingsProfile }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          :href=\"changePasswordURL\"\n          target=\"_blank\"\n        >\n          {{ labels.userSettingsChangePassword }}\n        </b-dropdown-item>\n        <b-dropdown-divider />\n        <b-dropdown-item\n          href=\"\"\n          @click=\"$auth.logout()\"\n          class=\"mt-2\"\n        >\n          {{ labels.userSettingsLogout }}\n        </b-dropdown-item>\n      </b-dropdown>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    sidebarPinned: {\n      type: Boolean,\n      required: true,\n      default: false,\n    },\n\n    hideAppSelector: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    appSelectorURL: {\n      type: String,\n      default: '../'\n    },\n\n    labels: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  computed: {\n    userProfileURL () {\n      return this.$auth.cortezaAuthURL\n    },\n\n    changePasswordURL () {\n      return `${this.$auth.cortezaAuthURL}/change-password`\n    },\n\n    documentationURL () {\n      const [year, month] = VERSION.split('.')\n      return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/index.html`\n    },\n\n    frontendVersion () {\n      /* eslint-disable no-undef */\n      return VERSION\n    },\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n$nav-width: 320px;\n$nav-icon-size: 40px;\n$nav-user-icon-size: 50px;\n\n.icon-logo {\n  height: calc(#{$header-height} / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.nav-icon {\n  width: $nav-icon-size;\n  height: $nav-icon-size;\n}\n\n.nav-user-icon {\n  width: $nav-user-icon-size;\n  height: $nav-user-icon-size;\n}\n\n.header-navigation {\n  width: 100vw;\n  height: $header-height;\n  background-color: #F3F3F5 !important;\n\n  h2 {\n    padding-left: calc(0.5rem + 2px);\n  }\n}\n\n.spacer {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n\n  &.expanded {\n    min-width: calc(#{$nav-width} - 42px);\n    -webkit-transition: min-width 0.2s ease-in-out;\n    -moz-transition: min-width 0.2s ease-in-out;\n    -o-transition: min-width 0.2s ease-in-out;\n    transition: min-width 0.2s ease-in-out;\n  }\n}\n</style>\n",".icon-logo {\n  height: calc(64px / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.nav-icon {\n  width: 40px;\n  height: 40px;\n}\n\n.nav-user-icon {\n  width: 50px;\n  height: 50px;\n}\n\n.header-navigation {\n  width: 100vw;\n  height: 64px;\n  background-color: #F3F3F5 !important;\n}\n.header-navigation h2 {\n  padding-left: calc(0.5rem + 2px);\n}\n\n.spacer {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded {\n  min-width: calc(320px - 42px);\n  -webkit-transition: min-width 0.2s ease-in-out;\n  -moz-transition: min-width 0.2s ease-in-out;\n  -o-transition: min-width 0.2s ease-in-out;\n  transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */"]}, media: undefined });
+    inject("data-v-ff5125a8_0", { source: ".icon-logo[data-v-ff5125a8] {\n  height: calc(64px / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.nav-icon[data-v-ff5125a8] {\n  width: 40px;\n  height: 40px;\n}\n.nav-user-icon[data-v-ff5125a8] {\n  width: 50px;\n  height: 50px;\n}\n.header-navigation[data-v-ff5125a8] {\n  width: 100vw;\n  height: 64px;\n  background-color: #F3F3F5 !important;\n}\n.header-navigation h2[data-v-ff5125a8] {\n  padding-left: calc(0.5rem + 2px);\n}\n.spacer[data-v-ff5125a8] {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded[data-v-ff5125a8] {\n  min-width: calc(320px - 42px);\n  -webkit-transition: min-width 0.2s ease-in-out;\n  -moz-transition: min-width 0.2s ease-in-out;\n  -o-transition: min-width 0.2s ease-in-out;\n  transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/navigation/CTopbar.vue","CTopbar.vue"],"names":[],"mappings":"AA2MA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;AC1MA;AD6MA;EACA,WAVA;EAWA,YAXA;AC/LA;AD6MA;EACA,WAdA;EAeA,YAfA;AC3LA;AD6MA;EACA,YAAA;EACA,YAvBA;EAwBA,oCAAA;AC1MA;AD4MA;EACA,gCAAA;AC1MA;AD8MA;EACA,cAAA;EACA,+CAAA;EACA,4CAAA;EACA,0CAAA;EACA,uCAAA;AC3MA;AD6MA;EACA,6BAAA;EACA,8CAAA;EACA,2CAAA;EACA,yCAAA;EACA,sCAAA;AC3MA;;AAEA,sCAAsC","file":"CTopbar.vue","sourcesContent":["<template>\n  <div class=\"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 \">\n    <div\n      class=\"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100\"\n    >\n      <template>\n        <div\n          class=\"spacer\"\n          :class=\"{\n            'expanded': sidebarPinned,\n          }\"\n        />\n      </template>\n\n      <div\n        class=\"d-flex align-items-center ml-2 text-truncate mr-auto h-100\"\n      >\n        <h2\n          class=\"d-none d-sm-block mb-0\"\n        >\n          <slot name=\"title\" />\n        </h2>\n\n      </div>\n\n      <div class=\"ml-3\">\n        <slot name=\"tools\" />\n      </div>\n\n      <b-button\n        v-if=\"!hideAppSelector\"\n        variant=\"outline-light\"\n        :href=\"appSelectorURL\"\n        size=\"lg\"\n        class=\"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2\"\n      >\n        <font-awesome-icon\n          class=\"m-0 h5\"\n          :icon=\"['fas', 'grip-horizontal']\"\n        />\n      </b-button>\n\n      <b-dropdown\n        size=\"lg\"\n        variant=\"outline-light\"\n        class=\"nav-icon mx-1\"\n        toggle-class=\"text-decoration-none text-dark rounded-circle border-0 w-100\"\n        menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n        right\n        no-caret\n      >\n        <template #button-content>\n          <div\n            class=\"d-flex align-items-center justify-content-center\"\n          >\n            <font-awesome-icon\n              class=\"m-0 h5\"\n              :icon=\"['far', 'question-circle']\"\n            />\n            <span class=\"sr-only\">\n              Help\n            </span>\n          </div>\n        </template>\n        <div>\n          <slot name=\"help-dropdown\" />\n        </div>\n        <b-dropdown-item\n          href=\"https://forum.cortezaproject.org/\"\n          target=\"_blank\"\n        >\n          {{ labels.helpForum }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          :href=\"documentationURL\"\n          target=\"_blank\"\n        >\n          {{ labels.helpDocumentation }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          href=\"mailto:info@crust.tech\"\n          target=\"_blank\"\n        >\n          {{ labels.helpFeedback }}\n        </b-dropdown-item>\n        <b-dropdown-divider />\n        <b-dropdown-item\n          disabled\n          class=\"small\"\n        >\n          {{ labels.helpVersion }}\n          <br>\n          {{ frontendVersion }}\n        </b-dropdown-item>\n      </b-dropdown>\n      <b-dropdown\n        data-v-onboarding=\"profile\"\n        size=\"lg\"\n        variant=\"outline-light\"\n        class=\"nav-user-icon\"\n        toggle-class=\"nav-icon text-decoration-none text-dark rounded-circle border\"\n        menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n        right\n        no-caret\n      >\n        <template #button-content>\n          <div\n            class=\"d-flex align-items-center justify-content-center\"\n          >\n            <font-awesome-icon\n              class=\"m-0 h5\"\n              :icon=\"['far', 'user']\"\n            />\n            <span class=\"sr-only\">\n              {{ labels.helpForum }}\n            </span>\n          </div>\n        </template>\n        <b-dropdown-text class=\"text-muted mb-2\">\n          {{ labels.userSettingsLoggedInAs  }}\n        </b-dropdown-text>\n        <div>\n          <slot name=\"avatar-dropdown\" />\n        </div>\n        <b-dropdown-item\n          :href=\"userProfileURL\"\n          target=\"_blank\"\n        >\n          {{ labels.userSettingsProfile }}\n        </b-dropdown-item>\n        <b-dropdown-item\n          :href=\"changePasswordURL\"\n          target=\"_blank\"\n        >\n          {{ labels.userSettingsChangePassword }}\n        </b-dropdown-item>\n        <b-dropdown-divider />\n        <b-dropdown-item\n          href=\"\"\n          @click=\"$auth.logout()\"\n          class=\"mt-2\"\n        >\n          {{ labels.userSettingsLogout }}\n        </b-dropdown-item>\n      </b-dropdown>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    sidebarPinned: {\n      type: Boolean,\n      required: true,\n      default: false,\n    },\n\n    hideAppSelector: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    appSelectorURL: {\n      type: String,\n      default: '../'\n    },\n\n    labels: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  computed: {\n    userProfileURL () {\n      return this.$auth.cortezaAuthURL\n    },\n\n    changePasswordURL () {\n      return `${this.$auth.cortezaAuthURL}/change-password`\n    },\n\n    documentationURL () {\n      const [year, month] = VERSION.split('.')\n      return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/index.html`\n    },\n\n    frontendVersion () {\n      /* eslint-disable no-undef */\n      return VERSION\n    },\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n$nav-width: 320px;\n$nav-icon-size: 40px;\n$nav-user-icon-size: 50px;\n\n.icon-logo {\n  height: calc(#{$header-height} / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.nav-icon {\n  width: $nav-icon-size;\n  height: $nav-icon-size;\n}\n\n.nav-user-icon {\n  width: $nav-user-icon-size;\n  height: $nav-user-icon-size;\n}\n\n.header-navigation {\n  width: 100vw;\n  height: $header-height;\n  background-color: #F3F3F5 !important;\n\n  h2 {\n    padding-left: calc(0.5rem + 2px);\n  }\n}\n\n.spacer {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n\n  &.expanded {\n    min-width: calc(#{$nav-width} - 42px);\n    -webkit-transition: min-width 0.2s ease-in-out;\n    -moz-transition: min-width 0.2s ease-in-out;\n    -o-transition: min-width 0.2s ease-in-out;\n    transition: min-width 0.2s ease-in-out;\n  }\n}\n</style>\n",".icon-logo {\n  height: calc(64px / 2);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.nav-icon {\n  width: 40px;\n  height: 40px;\n}\n\n.nav-user-icon {\n  width: 50px;\n  height: 50px;\n}\n\n.header-navigation {\n  width: 100vw;\n  height: 64px;\n  background-color: #F3F3F5 !important;\n}\n.header-navigation h2 {\n  padding-left: calc(0.5rem + 2px);\n}\n\n.spacer {\n  min-width: 0px;\n  -webkit-transition: min-width 0.15s ease-in-out;\n  -moz-transition: min-width 0.15s ease-in-out;\n  -o-transition: min-width 0.15s ease-in-out;\n  transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded {\n  min-width: calc(320px - 42px);\n  -webkit-transition: min-width 0.2s ease-in-out;\n  -moz-transition: min-width 0.2s ease-in-out;\n  -o-transition: min-width 0.2s ease-in-out;\n  transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$D = "data-v-1e94218e";
+  const __vue_scope_id__$D = "data-v-ff5125a8";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -83048,12 +83075,12 @@ __vue_render__$y._withStripped = true;
   /* style */
   const __vue_inject_styles__$E = function (inject) {
     if (!inject) return
-    inject("data-v-5c37b5a0_0", { source: ".tab[data-v-5c37b5a0] {\n  z-index: 1021;\n  top: 0;\n  height: 64px;\n  width: 66px;\n}\n.icon[data-v-5c37b5a0] {\n  max-height: 40px;\n  max-width: 40px;\n}\n.logo[data-v-5c37b5a0] {\n  max-height: 40px;\n}\n.sidebar-header[data-v-5c37b5a0] {\n  height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AAiSA;EACA,aAAA;EACA,MAAA;EACA,YALA;EAMA,WAAA;AChSA;ADmSA;EACA,gBAAA;EACA,eAAA;AChSA;ADmSA;EACA,gBAAA;AChSA;ADmSA;EACA,YAnBA;AC7QA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n  <div>\n    <div\n      @mouseleave=\"onHover(false)\"\n    >\n      <b-sidebar\n        v-model=\"isExpanded\"\n        :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n        :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n        :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n        :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n        :no-header=\"!isExpanded\"\n        :backdrop=\"isMobile\"\n        :shadow=\"isExpanded\"\n        no-slide\n        no-close-on-route-change\n        no-close-on-esc\n      >\n        <template #header>\n          <div\n            class=\"d-flex align-items-center justify-content-between px-2\"\n            style=\"height: 50px;\"\n          >\n            <img\n              class=\"logo w-auto border-0\"\n              :src=\"logo\"\n            >\n\n            <b-button\n              v-if=\"isMobile\"\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"closeSidebar()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'times']\"\n                class=\"h6 mb-0 text-dark\"\n              />\n            </b-button>\n\n            <b-button\n              v-else\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'thumbtack']\"\n                :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"!isExpanded\"\n            class=\"d-flex align-items-center justify-content-center my-3\"\n          >\n            <b-button\n              variant=\"link\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'chevron-right']\"\n                class=\"h6 mb-0\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"isExpanded\"\n            class=\"px-2\"\n          >\n            <slot\n              name=\"header-expanded\"\n            />\n          </div>\n\n\n          <hr\n            v-if=\"!isExpanded\"\n            class=\"my-2\"\n          >\n        </template>\n\n        <slot\n          v-if=\"isExpanded\"\n          name=\"body-expanded\"\n        />\n\n        <template #footer>\n          <slot\n            v-if=\"isExpanded\"\n            name=\"footer-expanded\"\n          />\n        </template>\n      </b-sidebar>\n    </div>\n\n    <div\n      class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n    >\n      <b-button\n        v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center border-0\"\n        @mouseover=\"onHover(true)\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'bars']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <b-button\n        v-else-if=\"!disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center p-2 border-0\"\n        :to=\"{ name: 'root' }\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'home']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <div\n        v-else\n        class=\"d-flex align-items-center border-0 p-2\"\n      >\n        <img\n          class=\"icon w-auto border-0\"\n          :src=\"icon\"\n        >\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    expanded: {\n      type: Boolean,\n      default: false,\n    },\n\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    expandOnHover: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabledRoutes: {\n      type: Array,\n      default: () => [],\n    },\n\n    icon: {\n      type: String,\n      default: () => ''\n    },\n\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n\n  data () {\n    return {\n      sidebar_settings : {}\n    }\n  },\n\n  computed: {\n    isExpanded: {\n      get () {\n        return this.expanded\n      },\n\n      set (expanded) {\n        this.$emit('update:expanded', expanded)\n      },\n    },\n\n    isPinned: {\n      get () {\n        return this.pinned\n      },\n\n      set (pinned) {\n        this.$emit('update:pinned', pinned)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n\n  created () {\n    this.$root.$on('close-sidebar', () => {\n      this.isExpanded = false\n      this.isPinned = false\n    })\n  },\n\n  beforeDestroy () {\n    this.$root.$off('close-sidebar')\n  },\n\n  watch: {\n    '$route.name': {\n      immediate: true,\n      handler (name) {\n        // If sidebar should be disabled on route, close and unpin when navigating to route\n        if (this.disabledRoutes.includes(name)) {\n          this.isPinned = false\n          this.isExpanded = false\n        } else if(this.expandOnHover){\n          this.defaultSidebarAppearance()\n        }\n      },\n    },\n  },\n\n  methods: {\n    onHover (expand) {\n      if (!this.pinned && this.expandOnHover) {\n        setTimeout(() => {\n          this.isExpanded = expand\n        }, expand ? 0 : 100)\n      }\n    },\n\n    togglePin () {\n      this.saveSettings(!this.isPinned)\n      this.isPinned = !this.isPinned\n    },\n\n    defaultSidebarAppearance () {\n      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n      if (localstorage_settings) {\n        this.sidebar_settings = localstorage_settings\n      }\n      const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n      if (!this.isMobile) {\n        if (app_sidebar) {\n          this.isExpanded = app_sidebar.pinned\n          this.isPinned = app_sidebar.pinned\n        } else {\n          this.openSidebar()\n        }\n      } else {\n        this.closeSidebar()\n      }\n    },\n\n    saveSettings (pinned) {\n      if (this.sidebar_settings[this.$root.$options.name]) {\n        this.sidebar_settings[this.$root.$options.name].pinned = pinned\n      } else {\n        this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n      }\n      window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n    },\n\n    openSidebar () {\n      this.isPinned = true\n      this.isExpanded = true\n    },\n\n    closeSidebar () {\n      this.isPinned = false\n      this.isExpanded = false\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n  z-index: 1021;\n  top: 0;\n  height: $header-height;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n  display: flex !important;\n  left: calc(-#{$nav-width}) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n\n  header {\n    background-color: white;\n\n    &.expanded {\n      background-color: $sidebar-bg !important;\n    }\n  }\n\n  &.expanded {\n    left: 0 !important;\n    -webkit-transition: left 0.2s ease-in-out;\n    -moz-transition: left 0.2s ease-in-out;\n    -o-transition: left 0.2s ease-in-out;\n    transition: left 0.2s ease-in-out;\n  }\n}\n</style>\n",".tab {\n  z-index: 1021;\n  top: 0;\n  height: 64px;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined })
-,inject("data-v-5c37b5a0_1", { source: ".sidebar {\n  display: flex !important;\n  left: calc(-320px) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n  background-color: white;\n}\n.sidebar header.expanded {\n  background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n  left: 0 !important;\n  -webkit-transition: left 0.2s ease-in-out;\n  -moz-transition: left 0.2s ease-in-out;\n  -o-transition: left 0.2s ease-in-out;\n  transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AA0TA;EACA,wBAAA;EACA,6BAAA;EACA,0CAAA;EACA,uCAAA;EACA,qCAAA;EACA,kCAAA;ACzTA;AD2TA;EACA,uBAAA;ACzTA;AD2TA;EACA,oCAAA;ACzTA;AD6TA;EACA,kBAAA;EACA,yCAAA;EACA,sCAAA;EACA,oCAAA;EACA,iCAAA;AC3TA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n  <div>\n    <div\n      @mouseleave=\"onHover(false)\"\n    >\n      <b-sidebar\n        v-model=\"isExpanded\"\n        :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n        :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n        :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n        :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n        :no-header=\"!isExpanded\"\n        :backdrop=\"isMobile\"\n        :shadow=\"isExpanded\"\n        no-slide\n        no-close-on-route-change\n        no-close-on-esc\n      >\n        <template #header>\n          <div\n            class=\"d-flex align-items-center justify-content-between px-2\"\n            style=\"height: 50px;\"\n          >\n            <img\n              class=\"logo w-auto border-0\"\n              :src=\"logo\"\n            >\n\n            <b-button\n              v-if=\"isMobile\"\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"closeSidebar()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'times']\"\n                class=\"h6 mb-0 text-dark\"\n              />\n            </b-button>\n\n            <b-button\n              v-else\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'thumbtack']\"\n                :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"!isExpanded\"\n            class=\"d-flex align-items-center justify-content-center my-3\"\n          >\n            <b-button\n              variant=\"link\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'chevron-right']\"\n                class=\"h6 mb-0\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"isExpanded\"\n            class=\"px-2\"\n          >\n            <slot\n              name=\"header-expanded\"\n            />\n          </div>\n\n\n          <hr\n            v-if=\"!isExpanded\"\n            class=\"my-2\"\n          >\n        </template>\n\n        <slot\n          v-if=\"isExpanded\"\n          name=\"body-expanded\"\n        />\n\n        <template #footer>\n          <slot\n            v-if=\"isExpanded\"\n            name=\"footer-expanded\"\n          />\n        </template>\n      </b-sidebar>\n    </div>\n\n    <div\n      class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n    >\n      <b-button\n        v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center border-0\"\n        @mouseover=\"onHover(true)\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'bars']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <b-button\n        v-else-if=\"!disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center p-2 border-0\"\n        :to=\"{ name: 'root' }\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'home']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <div\n        v-else\n        class=\"d-flex align-items-center border-0 p-2\"\n      >\n        <img\n          class=\"icon w-auto border-0\"\n          :src=\"icon\"\n        >\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    expanded: {\n      type: Boolean,\n      default: false,\n    },\n\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    expandOnHover: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabledRoutes: {\n      type: Array,\n      default: () => [],\n    },\n\n    icon: {\n      type: String,\n      default: () => ''\n    },\n\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n\n  data () {\n    return {\n      sidebar_settings : {}\n    }\n  },\n\n  computed: {\n    isExpanded: {\n      get () {\n        return this.expanded\n      },\n\n      set (expanded) {\n        this.$emit('update:expanded', expanded)\n      },\n    },\n\n    isPinned: {\n      get () {\n        return this.pinned\n      },\n\n      set (pinned) {\n        this.$emit('update:pinned', pinned)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n\n  created () {\n    this.$root.$on('close-sidebar', () => {\n      this.isExpanded = false\n      this.isPinned = false\n    })\n  },\n\n  beforeDestroy () {\n    this.$root.$off('close-sidebar')\n  },\n\n  watch: {\n    '$route.name': {\n      immediate: true,\n      handler (name) {\n        // If sidebar should be disabled on route, close and unpin when navigating to route\n        if (this.disabledRoutes.includes(name)) {\n          this.isPinned = false\n          this.isExpanded = false\n        } else if(this.expandOnHover){\n          this.defaultSidebarAppearance()\n        }\n      },\n    },\n  },\n\n  methods: {\n    onHover (expand) {\n      if (!this.pinned && this.expandOnHover) {\n        setTimeout(() => {\n          this.isExpanded = expand\n        }, expand ? 0 : 100)\n      }\n    },\n\n    togglePin () {\n      this.saveSettings(!this.isPinned)\n      this.isPinned = !this.isPinned\n    },\n\n    defaultSidebarAppearance () {\n      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n      if (localstorage_settings) {\n        this.sidebar_settings = localstorage_settings\n      }\n      const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n      if (!this.isMobile) {\n        if (app_sidebar) {\n          this.isExpanded = app_sidebar.pinned\n          this.isPinned = app_sidebar.pinned\n        } else {\n          this.openSidebar()\n        }\n      } else {\n        this.closeSidebar()\n      }\n    },\n\n    saveSettings (pinned) {\n      if (this.sidebar_settings[this.$root.$options.name]) {\n        this.sidebar_settings[this.$root.$options.name].pinned = pinned\n      } else {\n        this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n      }\n      window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n    },\n\n    openSidebar () {\n      this.isPinned = true\n      this.isExpanded = true\n    },\n\n    closeSidebar () {\n      this.isPinned = false\n      this.isExpanded = false\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n  z-index: 1021;\n  top: 0;\n  height: $header-height;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n  display: flex !important;\n  left: calc(-#{$nav-width}) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n\n  header {\n    background-color: white;\n\n    &.expanded {\n      background-color: $sidebar-bg !important;\n    }\n  }\n\n  &.expanded {\n    left: 0 !important;\n    -webkit-transition: left 0.2s ease-in-out;\n    -moz-transition: left 0.2s ease-in-out;\n    -o-transition: left 0.2s ease-in-out;\n    transition: left 0.2s ease-in-out;\n  }\n}\n</style>\n",".sidebar {\n  display: flex !important;\n  left: calc(-320px) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n  background-color: white;\n}\n.sidebar header.expanded {\n  background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n  left: 0 !important;\n  -webkit-transition: left 0.2s ease-in-out;\n  -moz-transition: left 0.2s ease-in-out;\n  -o-transition: left 0.2s ease-in-out;\n  transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined });
+    inject("data-v-6a351e13_0", { source: ".tab[data-v-6a351e13] {\n  z-index: 1021;\n  top: 0;\n  height: 64px;\n  width: 66px;\n}\n.icon[data-v-6a351e13] {\n  max-height: 40px;\n  max-width: 40px;\n}\n.logo[data-v-6a351e13] {\n  max-height: 40px;\n}\n.sidebar-header[data-v-6a351e13] {\n  height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AAiSA;EACA,aAAA;EACA,MAAA;EACA,YALA;EAMA,WAAA;AChSA;ADmSA;EACA,gBAAA;EACA,eAAA;AChSA;ADmSA;EACA,gBAAA;AChSA;ADmSA;EACA,YAnBA;AC7QA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n  <div>\n    <div\n      @mouseleave=\"onHover(false)\"\n    >\n      <b-sidebar\n        v-model=\"isExpanded\"\n        :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n        :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n        :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n        :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n        :no-header=\"!isExpanded\"\n        :backdrop=\"isMobile\"\n        :shadow=\"isExpanded\"\n        no-slide\n        no-close-on-route-change\n        no-close-on-esc\n      >\n        <template #header>\n          <div\n            class=\"d-flex align-items-center justify-content-between px-2\"\n            style=\"height: 50px;\"\n          >\n            <img\n              class=\"logo w-auto border-0\"\n              :src=\"logo\"\n            >\n\n            <b-button\n              v-if=\"isMobile\"\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"closeSidebar()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'times']\"\n                class=\"h6 mb-0 text-dark\"\n              />\n            </b-button>\n\n            <b-button\n              v-else\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'thumbtack']\"\n                :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"!isExpanded\"\n            class=\"d-flex align-items-center justify-content-center my-3\"\n          >\n            <b-button\n              variant=\"link\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'chevron-right']\"\n                class=\"h6 mb-0\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"isExpanded\"\n            class=\"px-2\"\n          >\n            <slot\n              name=\"header-expanded\"\n            />\n          </div>\n\n\n          <hr\n            v-if=\"!isExpanded\"\n            class=\"my-2\"\n          >\n        </template>\n\n        <slot\n          v-if=\"isExpanded\"\n          name=\"body-expanded\"\n        />\n\n        <template #footer>\n          <slot\n            v-if=\"isExpanded\"\n            name=\"footer-expanded\"\n          />\n        </template>\n      </b-sidebar>\n    </div>\n\n    <div\n      class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n    >\n      <b-button\n        v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center border-0\"\n        @mouseover=\"onHover(true)\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'bars']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <b-button\n        v-else-if=\"!disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center p-2 border-0\"\n        :to=\"{ name: 'root' }\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'home']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <div\n        v-else\n        class=\"d-flex align-items-center border-0 p-2\"\n      >\n        <img\n          class=\"icon w-auto border-0\"\n          :src=\"icon\"\n        >\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    expanded: {\n      type: Boolean,\n      default: false,\n    },\n\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    expandOnHover: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabledRoutes: {\n      type: Array,\n      default: () => [],\n    },\n\n    icon: {\n      type: String,\n      default: () => ''\n    },\n\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n\n  data () {\n    return {\n      sidebar_settings : {}\n    }\n  },\n\n  computed: {\n    isExpanded: {\n      get () {\n        return this.expanded\n      },\n\n      set (expanded) {\n        this.$emit('update:expanded', expanded)\n      },\n    },\n\n    isPinned: {\n      get () {\n        return this.pinned\n      },\n\n      set (pinned) {\n        this.$emit('update:pinned', pinned)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n\n  created () {\n    this.$root.$on('close-sidebar', () => {\n      this.isExpanded = false\n      this.isPinned = false\n    })\n  },\n\n  beforeDestroy () {\n    this.$root.$off('close-sidebar')\n  },\n\n  watch: {\n    '$route.name': {\n      immediate: true,\n      handler (name) {\n        // If sidebar should be disabled on route, close and unpin when navigating to route\n        if (this.disabledRoutes.includes(name)) {\n          this.isPinned = false\n          this.isExpanded = false\n        } else if(this.expandOnHover){\n          this.defaultSidebarAppearance()\n        }\n      },\n    },\n  },\n\n  methods: {\n    onHover (expand) {\n      if (!this.pinned && this.expandOnHover) {\n        setTimeout(() => {\n          this.isExpanded = expand\n        }, expand ? 0 : 100)\n      }\n    },\n\n    togglePin () {\n      this.saveSettings(!this.isPinned)\n      this.isPinned = !this.isPinned\n    },\n\n    defaultSidebarAppearance () {\n      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n      if (localstorage_settings) {\n        this.sidebar_settings = localstorage_settings\n      }\n      const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n      if (!this.isMobile) {\n        if (app_sidebar) {\n          this.isExpanded = app_sidebar.pinned\n          this.isPinned = app_sidebar.pinned\n        } else {\n          this.openSidebar()\n        }\n      } else {\n        this.closeSidebar()\n      }\n    },\n\n    saveSettings (pinned) {\n      if (this.sidebar_settings[this.$root.$options.name]) {\n        this.sidebar_settings[this.$root.$options.name].pinned = pinned\n      } else {\n        this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n      }\n      window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n    },\n\n    openSidebar () {\n      this.isPinned = true\n      this.isExpanded = true\n    },\n\n    closeSidebar () {\n      this.isPinned = false\n      this.isExpanded = false\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n  z-index: 1021;\n  top: 0;\n  height: $header-height;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n  display: flex !important;\n  left: calc(-#{$nav-width}) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n\n  header {\n    background-color: white;\n\n    &.expanded {\n      background-color: $sidebar-bg !important;\n    }\n  }\n\n  &.expanded {\n    left: 0 !important;\n    -webkit-transition: left 0.2s ease-in-out;\n    -moz-transition: left 0.2s ease-in-out;\n    -o-transition: left 0.2s ease-in-out;\n    transition: left 0.2s ease-in-out;\n  }\n}\n</style>\n",".tab {\n  z-index: 1021;\n  top: 0;\n  height: 64px;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined })
+,inject("data-v-6a351e13_1", { source: ".sidebar {\n  display: flex !important;\n  left: calc(-320px) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n  background-color: white;\n}\n.sidebar header.expanded {\n  background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n  left: 0 !important;\n  -webkit-transition: left 0.2s ease-in-out;\n  -moz-transition: left 0.2s ease-in-out;\n  -o-transition: left 0.2s ease-in-out;\n  transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AA0TA;EACA,wBAAA;EACA,6BAAA;EACA,0CAAA;EACA,uCAAA;EACA,qCAAA;EACA,kCAAA;ACzTA;AD2TA;EACA,uBAAA;ACzTA;AD2TA;EACA,oCAAA;ACzTA;AD6TA;EACA,kBAAA;EACA,yCAAA;EACA,sCAAA;EACA,oCAAA;EACA,iCAAA;AC3TA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n  <div>\n    <div\n      @mouseleave=\"onHover(false)\"\n    >\n      <b-sidebar\n        v-model=\"isExpanded\"\n        :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n        :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n        :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n        :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n        :no-header=\"!isExpanded\"\n        :backdrop=\"isMobile\"\n        :shadow=\"isExpanded\"\n        no-slide\n        no-close-on-route-change\n        no-close-on-esc\n      >\n        <template #header>\n          <div\n            class=\"d-flex align-items-center justify-content-between px-2\"\n            style=\"height: 50px;\"\n          >\n            <img\n              class=\"logo w-auto border-0\"\n              :src=\"logo\"\n            >\n\n            <b-button\n              v-if=\"isMobile\"\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"closeSidebar()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'times']\"\n                class=\"h6 mb-0 text-dark\"\n              />\n            </b-button>\n\n            <b-button\n              v-else\n              variant=\"outline-light border-0\"\n              class=\"d-flex align-items-center justify-content-center p-2\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'thumbtack']\"\n                :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"!isExpanded\"\n            class=\"d-flex align-items-center justify-content-center my-3\"\n          >\n            <b-button\n              variant=\"link\"\n              @click=\"togglePin()\"\n            >\n              <font-awesome-icon\n                :icon=\"['fas', 'chevron-right']\"\n                class=\"h6 mb-0\"\n              />\n            </b-button>\n          </div>\n\n          <div\n            v-if=\"isExpanded\"\n            class=\"px-2\"\n          >\n            <slot\n              name=\"header-expanded\"\n            />\n          </div>\n\n\n          <hr\n            v-if=\"!isExpanded\"\n            class=\"my-2\"\n          >\n        </template>\n\n        <slot\n          v-if=\"isExpanded\"\n          name=\"body-expanded\"\n        />\n\n        <template #footer>\n          <slot\n            v-if=\"isExpanded\"\n            name=\"footer-expanded\"\n          />\n        </template>\n      </b-sidebar>\n    </div>\n\n    <div\n      class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n    >\n      <b-button\n        v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center border-0\"\n        @mouseover=\"onHover(true)\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'bars']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <b-button\n        v-else-if=\"!disabledRoutes.includes($route.name)\"\n        variant=\"outline-light\"\n        size=\"lg\"\n        class=\"d-flex align-items-center p-2 border-0\"\n        :to=\"{ name: 'root' }\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'home']\"\n          class=\"h4 mb-0 text-primary\"\n        />\n      </b-button>\n\n      <div\n        v-else\n        class=\"d-flex align-items-center border-0 p-2\"\n      >\n        <img\n          class=\"icon w-auto border-0\"\n          :src=\"icon\"\n        >\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    expanded: {\n      type: Boolean,\n      default: false,\n    },\n\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    expandOnHover: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabledRoutes: {\n      type: Array,\n      default: () => [],\n    },\n\n    icon: {\n      type: String,\n      default: () => ''\n    },\n\n    logo: {\n      type: String,\n      default: () => ''\n    },\n  },\n\n  data () {\n    return {\n      sidebar_settings : {}\n    }\n  },\n\n  computed: {\n    isExpanded: {\n      get () {\n        return this.expanded\n      },\n\n      set (expanded) {\n        this.$emit('update:expanded', expanded)\n      },\n    },\n\n    isPinned: {\n      get () {\n        return this.pinned\n      },\n\n      set (pinned) {\n        this.$emit('update:pinned', pinned)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n\n  created () {\n    this.$root.$on('close-sidebar', () => {\n      this.isExpanded = false\n      this.isPinned = false\n    })\n  },\n\n  beforeDestroy () {\n    this.$root.$off('close-sidebar')\n  },\n\n  watch: {\n    '$route.name': {\n      immediate: true,\n      handler (name) {\n        // If sidebar should be disabled on route, close and unpin when navigating to route\n        if (this.disabledRoutes.includes(name)) {\n          this.isPinned = false\n          this.isExpanded = false\n        } else if(this.expandOnHover){\n          this.defaultSidebarAppearance()\n        }\n      },\n    },\n  },\n\n  methods: {\n    onHover (expand) {\n      if (!this.pinned && this.expandOnHover) {\n        setTimeout(() => {\n          this.isExpanded = expand\n        }, expand ? 0 : 100)\n      }\n    },\n\n    togglePin () {\n      this.saveSettings(!this.isPinned)\n      this.isPinned = !this.isPinned\n    },\n\n    defaultSidebarAppearance () {\n      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n      if (localstorage_settings) {\n        this.sidebar_settings = localstorage_settings\n      }\n      const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n      if (!this.isMobile) {\n        if (app_sidebar) {\n          this.isExpanded = app_sidebar.pinned\n          this.isPinned = app_sidebar.pinned\n        } else {\n          this.openSidebar()\n        }\n      } else {\n        this.closeSidebar()\n      }\n    },\n\n    saveSettings (pinned) {\n      if (this.sidebar_settings[this.$root.$options.name]) {\n        this.sidebar_settings[this.$root.$options.name].pinned = pinned\n      } else {\n        this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n      }\n      window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n    },\n\n    openSidebar () {\n      this.isPinned = true\n      this.isExpanded = true\n    },\n\n    closeSidebar () {\n      this.isPinned = false\n      this.isExpanded = false\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n  z-index: 1021;\n  top: 0;\n  height: $header-height;\n  width: 66px;\n}\n\n.icon {\n  max-height: 40px;\n  max-width: 40px;\n}\n\n.logo {\n  max-height: 40px;\n}\n\n.sidebar-header {\n  height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n  display: flex !important;\n  left: calc(-#{$nav-width}) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n\n  header {\n    background-color: white;\n\n    &.expanded {\n      background-color: $sidebar-bg !important;\n    }\n  }\n\n  &.expanded {\n    left: 0 !important;\n    -webkit-transition: left 0.2s ease-in-out;\n    -moz-transition: left 0.2s ease-in-out;\n    -o-transition: left 0.2s ease-in-out;\n    transition: left 0.2s ease-in-out;\n  }\n}\n</style>\n",".sidebar {\n  display: flex !important;\n  left: calc(-320px) !important;\n  -webkit-transition: left 0.15s ease-in-out;\n  -moz-transition: left 0.15s ease-in-out;\n  -o-transition: left 0.15s ease-in-out;\n  transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n  background-color: white;\n}\n.sidebar header.expanded {\n  background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n  left: 0 !important;\n  -webkit-transition: left 0.2s ease-in-out;\n  -moz-transition: left 0.2s ease-in-out;\n  -o-transition: left 0.2s ease-in-out;\n  transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$E = "data-v-5c37b5a0";
+  const __vue_scope_id__$E = "data-v-6a351e13";
   /* module identifier */
   const __vue_module_identifier__$E = undefined;
   /* functional template */
@@ -83358,11 +83385,11 @@ __vue_render__$z._withStripped = true;
   /* style */
   const __vue_inject_styles__$F = function (inject) {
     if (!inject) return
-    inject("data-v-3ce3680e_0", { source: ".pointer-none[data-v-3ce3680e] {\n  pointer-events: none;\n}\n.svg-inline--fa[data-v-3ce3680e] {\n  width: 30px;\n}\n.nav-item > span > .title[data-v-3ce3680e] {\n  font-family: \"Poppins-Regular\";\n}\n.nav-active > span > .icon[data-v-3ce3680e] {\n  color: #4D7281;\n}\n.nav-active > span > .title[data-v-3ce3680e] {\n  font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebarNavItems.vue","CSidebarNavItems.vue"],"names":[],"mappings":"AA+IA;EACA,oBAAA;AC9IA;ADiJA;EACA,WAAA;AC9IA;ADkJA;EACA,8BAAA;AC/IA;ADoJA;EACA,cAAA;ACjJA;ADoJA;EACA,+BAAA;AClJA;;AAEA,+CAA+C","file":"CSidebarNavItems.vue","sourcesContent":["<template>\n  <div class=\"nav-sidebar\">\n    <b-button\n      v-for=\"({page = {}, params = {}, children = []}, index) of items\"\n      :key=\"index\"\n      variant=\"link\"\n      class=\"w-100 text-left text-dark text-decoration-none p-0 pt-2 nav-item\"\n      active-class=\"nav-active\"\n      exact-active-class=\"nav-active\"\n      :to=\"{ name: page.name || defaultRouteName, params }\"\n    >\n      <span\n        class=\"d-inline-block w-75 text-nowrap text-truncate\"\n        @click=\"closeSidebar()\"\n      >\n        <font-awesome-icon\n          v-if=\"page.icon\"\n          class=\"icon\"\n          :icon=\"page.icon\"\n        />\n        <span\n          class=\"title\"\n        >\n          {{ page.title }}\n        </span>\n      </span>\n\n      <template\n        v-if=\"children.length\"\n      >\n        <b-button\n          variant=\"link\"\n          class=\"p-0 float-right\"\n          :disabled=\"showChildren(page, children)\"\n          @click.self.stop.prevent=\"toggle(page)\"\n        >\n          <font-awesome-icon\n            v-if=\"!collapses[pageIndex(page)]\"\n            class=\"pointer-none\"\n            :icon=\"['fas', 'chevron-down']\"\n          />\n          <font-awesome-icon\n            v-else\n            class=\"pointer-none\"\n            :icon=\"['fas', 'chevron-up']\"\n          />\n        </b-button>\n\n        <b-collapse\n          :visible=\"collapses[pageIndex(page)] || showChildren(page, children)\"\n          @click.stop.prevent\n        >\n          <c-sidebar-nav-items\n            class=\"ml-2\"\n            :items=\"children\"\n            :start-expanded=\"startExpanded\"\n            :default-route-name=\"defaultRouteName\"\n            v-on=\"$listeners\"\n          />\n        </b-collapse>\n      </template>\n    </b-button>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'CSidebarNavItems',\n\n  props: {\n    /*\n    * {\n        page: { name, title }\n        params: {...}\n      }\n    */\n    items: {\n      type: Array,\n      required: true,\n      default: () => [],\n    },\n    defaultRouteName: {\n      type: String,\n      required: true,\n    },\n    startExpanded: {\n      type: Boolean,\n      required: false,\n    },\n  },\n\n  data () {\n    return {\n      collapses: {},\n    }\n  },\n\n  watch: {\n    items: {\n      handler: function (items) {\n        for (const i of items) {\n          this.setState(i.page, this.startExpanded)\n        }\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    closeSidebar () {\n      if (window.innerWidth < 576) {\n        this.$root.$emit('close-sidebar')\n      }\n    },\n\n    pageIndex (p) {\n      return p.pageID || p.name || p.title\n    },\n\n    toggle (p) {\n      const px = this.pageIndex(p)\n      this.$set(this.collapses, px, !this.collapses[px])\n    },\n\n    setState (p, state = false) {\n      const px = this.pageIndex(p)\n      this.$set(this.collapses, px, state)\n    },\n\n    // Recursively check for child pages that are open, so that parents can open aswell\n    showChildren (page = {}, children = []) {\n      if (page.pageID === this.$route.params.pageID) {\n        return page.pageID === this.$route.params.pageID\n      }\n\n      return children.map(({ page, children }) => this.showChildren(page, children)).some(isOpen => isOpen)\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n// This has to be there, so chevrons are clickable inside the button\n.pointer-none {\n  pointer-events: none;\n}\n\n.svg-inline--fa {\n  width: 30px;\n}\n\n.nav-item > span > {\n  .title {\n    font-family: 'Poppins-Regular'\n  }\n}\n\n.nav-active > span > {\n  .icon {\n    color: #4D7281;\n  }\n\n  .title {\n    font-family: 'Poppins-SemiBold'\n  }\n}\n</style>\n",".pointer-none {\n  pointer-events: none;\n}\n\n.svg-inline--fa {\n  width: 30px;\n}\n\n.nav-item > span > .title {\n  font-family: \"Poppins-Regular\";\n}\n\n.nav-active > span > .icon {\n  color: #4D7281;\n}\n.nav-active > span > .title {\n  font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */"]}, media: undefined });
+    inject("data-v-48e0e128_0", { source: ".pointer-none[data-v-48e0e128] {\n  pointer-events: none;\n}\n.svg-inline--fa[data-v-48e0e128] {\n  width: 30px;\n}\n.nav-item > span > .title[data-v-48e0e128] {\n  font-family: \"Poppins-Regular\";\n}\n.nav-active > span > .icon[data-v-48e0e128] {\n  color: #4D7281;\n}\n.nav-active > span > .title[data-v-48e0e128] {\n  font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/navigation/CSidebarNavItems.vue","CSidebarNavItems.vue"],"names":[],"mappings":"AA+IA;EACA,oBAAA;AC9IA;ADiJA;EACA,WAAA;AC9IA;ADkJA;EACA,8BAAA;AC/IA;ADoJA;EACA,cAAA;ACjJA;ADoJA;EACA,+BAAA;AClJA;;AAEA,+CAA+C","file":"CSidebarNavItems.vue","sourcesContent":["<template>\n  <div class=\"nav-sidebar\">\n    <b-button\n      v-for=\"({page = {}, params = {}, children = []}, index) of items\"\n      :key=\"index\"\n      variant=\"link\"\n      class=\"w-100 text-left text-dark text-decoration-none p-0 pt-2 nav-item\"\n      active-class=\"nav-active\"\n      exact-active-class=\"nav-active\"\n      :to=\"{ name: page.name || defaultRouteName, params }\"\n    >\n      <span\n        class=\"d-inline-block w-75 text-nowrap text-truncate\"\n        @click=\"closeSidebar()\"\n      >\n        <font-awesome-icon\n          v-if=\"page.icon\"\n          class=\"icon\"\n          :icon=\"page.icon\"\n        />\n        <span\n          class=\"title\"\n        >\n          {{ page.title }}\n        </span>\n      </span>\n\n      <template\n        v-if=\"children.length\"\n      >\n        <b-button\n          variant=\"link\"\n          class=\"p-0 float-right\"\n          :disabled=\"showChildren(page, children)\"\n          @click.self.stop.prevent=\"toggle(page)\"\n        >\n          <font-awesome-icon\n            v-if=\"!collapses[pageIndex(page)]\"\n            class=\"pointer-none\"\n            :icon=\"['fas', 'chevron-down']\"\n          />\n          <font-awesome-icon\n            v-else\n            class=\"pointer-none\"\n            :icon=\"['fas', 'chevron-up']\"\n          />\n        </b-button>\n\n        <b-collapse\n          :visible=\"collapses[pageIndex(page)] || showChildren(page, children)\"\n          @click.stop.prevent\n        >\n          <c-sidebar-nav-items\n            class=\"ml-2\"\n            :items=\"children\"\n            :start-expanded=\"startExpanded\"\n            :default-route-name=\"defaultRouteName\"\n            v-on=\"$listeners\"\n          />\n        </b-collapse>\n      </template>\n    </b-button>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'CSidebarNavItems',\n\n  props: {\n    /*\n    * {\n        page: { name, title }\n        params: {...}\n      }\n    */\n    items: {\n      type: Array,\n      required: true,\n      default: () => [],\n    },\n    defaultRouteName: {\n      type: String,\n      required: true,\n    },\n    startExpanded: {\n      type: Boolean,\n      required: false,\n    },\n  },\n\n  data () {\n    return {\n      collapses: {},\n    }\n  },\n\n  watch: {\n    items: {\n      handler: function (items) {\n        for (const i of items) {\n          this.setState(i.page, this.startExpanded)\n        }\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    closeSidebar () {\n      if (window.innerWidth < 576) {\n        this.$root.$emit('close-sidebar')\n      }\n    },\n\n    pageIndex (p) {\n      return p.pageID || p.name || p.title\n    },\n\n    toggle (p) {\n      const px = this.pageIndex(p)\n      this.$set(this.collapses, px, !this.collapses[px])\n    },\n\n    setState (p, state = false) {\n      const px = this.pageIndex(p)\n      this.$set(this.collapses, px, state)\n    },\n\n    // Recursively check for child pages that are open, so that parents can open aswell\n    showChildren (page = {}, children = []) {\n      if (page.pageID === this.$route.params.pageID) {\n        return page.pageID === this.$route.params.pageID\n      }\n\n      return children.map(({ page, children }) => this.showChildren(page, children)).some(isOpen => isOpen)\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n// This has to be there, so chevrons are clickable inside the button\n.pointer-none {\n  pointer-events: none;\n}\n\n.svg-inline--fa {\n  width: 30px;\n}\n\n.nav-item > span > {\n  .title {\n    font-family: 'Poppins-Regular'\n  }\n}\n\n.nav-active > span > {\n  .icon {\n    color: #4D7281;\n  }\n\n  .title {\n    font-family: 'Poppins-SemiBold'\n  }\n}\n</style>\n",".pointer-none {\n  pointer-events: none;\n}\n\n.svg-inline--fa {\n  width: 30px;\n}\n\n.nav-item > span > .title {\n  font-family: \"Poppins-Regular\";\n}\n\n.nav-active > span > .icon {\n  color: #4D7281;\n}\n.nav-active > span > .title {\n  font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$F = "data-v-3ce3680e";
+  const __vue_scope_id__$F = "data-v-48e0e128";
   /* module identifier */
   const __vue_module_identifier__$F = undefined;
   /* functional template */
@@ -83761,7 +83788,7 @@ __vue_render__$A._withStripped = true;
   /* style */
   const __vue_inject_styles__$G = function (inject) {
     if (!inject) return
-    inject("data-v-37b59a00_0", { source: ".v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n.v-step__arrow {\n  visibility: hidden;\n}\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n  bottom: -5px;\n}\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n  top: -5px;\n}\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n  left: -5px;\n}\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n  right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/Tour/Tour.vue","Tour.vue"],"names":[],"mappings":"AA8IA;EACA,mBAAA;EACA,gBAAA;EACA,cAAA;EACA,qBAAA;AC7IA;AD+IA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,wCAAA;EACA,gCAAA;AC5IA;AD8IA;EACA,aAAA;AC3IA;AD6IA;;EAEA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;AC1IA;AD4IA;EACA,kBAAA;ACzIA;AD2IA;EACA,mBAAA;ACxIA;AD0IA;EACA,mBAAA;EACA,WAAA;EACA,gCAAA;EACA,wBAAA;EACA,iBAAA;ACvIA;ADyIA;EACA,YAAA;ACtIA;ADwIA;EACA,SAAA;ACrIA;ADuIA;EACA,UAAA;ACpIA;ADsIA;EACA,WAAA;ACnIA;;AAEA,mCAAmC","file":"Tour.vue","sourcesContent":["<template>\n  <v-tour\n    v-if=\"tour !== null\"\n    :name=\"tour.name\"\n    :steps=\"tour.steps\"\n    :options=\"tour\"\n    :callbacks=\"this.callbacks\"\n    @onStop=\"onStop\"\n  >\n    <template slot-scope=\"tour\">\n      <transition name=\"fade\">\n        <template v-for=\"(step, index) of tour.steps\">\n          <v-step\n            v-if=\"tour.currentStep === index\"\n            :key=\"index\"\n            class=\"shadow p-3 text-light text-center\"\n            :step=\"step\"\n            :previous-step=\"tour.previousStep\"\n            :next-step=\"tour.nextStep\"\n            :stop=\"tour.stop\"\n            :is-first=\"tour.isFirst\"\n            :is-last=\"tour.isLast\"\n            :labels=\"tour.labels\"\n            @onStop=\"onStop\"\n          >\n            <div slot=\"header\">\n              <h5\n                v-if=\"(step.header || {}).title\"\n                v-html=\"$t(step.header.title)\"\n              />\n            </div>\n\n            <div slot=\"content\">\n              <div class=\"p-1 mb-2\">\n                <div v-html=\"$t(step.content)\" />\n              </div>\n            </div>\n\n            <div\n              slot=\"actions\"\n            >\n              <b-button\n                variant=\"primary\"\n                @click=\"onStop\"\n              >\n                <template v-if=\"tour.isLast && !(callbacks || {}).onNextRedirect\">\n                  {{ $t('buttons.end') }}\n                </template>\n                <template v-else>\n                  {{ $t('buttons.skip') }}\n                </template>\n              </b-button>\n              <b-button\n                v-if=\"tour.isFirst && (callbacks || {}).onPrevRedirect\"\n                variant=\"primary\"\n                :href=\"callbacks.onPrevRedirect\"\n              >\n                {{ $t('buttons.previous') }}\n              </b-button>\n              <b-button\n                v-else-if=\"!tour.isFirst\"\n                variant=\"primary\"\n                @click=\"tour.previousStep\"\n              >\n                {{ $t('buttons.previous') }}\n              </b-button>\n              <b-button\n                v-if=\"tour.isLast && (callbacks || {}).onNextRedirect\"\n                variant=\"primary\"\n                :href=\"callbacks.onNextRedirect\"\n              >\n                {{ $t('buttons.next') }}\n              </b-button>\n              <b-button\n                v-else-if=\"!tour.isLast\"\n                variant=\"primary\"\n                @click=\"tour.nextStep\"\n              >\n                {{ $t('buttons.next') }}\n              </b-button>\n            </div>\n          </v-step>\n        </template>\n      </transition>\n    </template>\n  </v-tour>\n</template>\n<script>\nexport default {\n  name: 'TourComponent',\n  i18nOptions: {\n    namespaces: 'onboarding-tour',\n  },\n  props: {\n    name: String,\n    callbacks: {\n      type: Object,\n    },\n    steps: {\n      default: () => [],\n      type: Array,\n    },\n  },\n  computed: {\n    labels () {\n      return this.tour.labels\n    },\n    tour () {\n      return  {\n        name: this.name,\n        steps: this.steps.map(step => {\n          return {\n            name: step,\n            target: `[data-v-onboarding=\"${step}\"]`,\n            header: {\n              title: this.$t(`steps.${step}.title`),\n            },\n            content: this.$t(`steps.${step}.content`),\n          }\n        }),\n      }\n    },\n  },\n  methods: {\n    onStart () {\n      if (JSON.parse(localStorage.getItem('corteza.tour')) && this.tour.steps.length) {\n        this.$tours[this.tour.name].start()\n      }\n    },\n    onStop () {\n      localStorage.setItem('corteza.tour', JSON.stringify(false))\n      this.$tours[this.tour.name].stop()\n    },\n    onStartClick () {\n      localStorage.setItem('corteza.tour', JSON.stringify(true))\n      this.onStart()\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n.v-step__arrow {\n  visibility: hidden;\n}\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n.v-step[data-popper-placement^=\"top\"] > .v-step__arrow {\n  bottom: -5px;\n}\n.v-step[data-popper-placement^=\"bottom\"] > .v-step__arrow {\n  top: -5px;\n}\n.v-step[data-popper-placement^=\"right\"] > .v-step__arrow {\n  left: -5px;\n}\n.v-step[data-popper-placement^=\"left\"] > .v-step__arrow {\n  right: -5px;\n}\n</style>",".v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n\n.v-step__arrow {\n  visibility: hidden;\n}\n\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n  bottom: -5px;\n}\n\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n  top: -5px;\n}\n\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n  left: -5px;\n}\n\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n  right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */"]}, media: undefined });
+    inject("data-v-0353b5b3_0", { source: ".v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n.v-step__arrow {\n  visibility: hidden;\n}\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n  bottom: -5px;\n}\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n  top: -5px;\n}\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n  left: -5px;\n}\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n  right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/Tour/Tour.vue","Tour.vue"],"names":[],"mappings":"AA8IA;EACA,mBAAA;EACA,gBAAA;EACA,cAAA;EACA,qBAAA;AC7IA;AD+IA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,wCAAA;EACA,gCAAA;AC5IA;AD8IA;EACA,aAAA;AC3IA;AD6IA;;EAEA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;AC1IA;AD4IA;EACA,kBAAA;ACzIA;AD2IA;EACA,mBAAA;ACxIA;AD0IA;EACA,mBAAA;EACA,WAAA;EACA,gCAAA;EACA,wBAAA;EACA,iBAAA;ACvIA;ADyIA;EACA,YAAA;ACtIA;ADwIA;EACA,SAAA;ACrIA;ADuIA;EACA,UAAA;ACpIA;ADsIA;EACA,WAAA;ACnIA;;AAEA,mCAAmC","file":"Tour.vue","sourcesContent":["<template>\n  <v-tour\n    v-if=\"tour !== null\"\n    :name=\"tour.name\"\n    :steps=\"tour.steps\"\n    :options=\"tour\"\n    :callbacks=\"this.callbacks\"\n    @onStop=\"onStop\"\n  >\n    <template slot-scope=\"tour\">\n      <transition name=\"fade\">\n        <template v-for=\"(step, index) of tour.steps\">\n          <v-step\n            v-if=\"tour.currentStep === index\"\n            :key=\"index\"\n            class=\"shadow p-3 text-light text-center\"\n            :step=\"step\"\n            :previous-step=\"tour.previousStep\"\n            :next-step=\"tour.nextStep\"\n            :stop=\"tour.stop\"\n            :is-first=\"tour.isFirst\"\n            :is-last=\"tour.isLast\"\n            :labels=\"tour.labels\"\n            @onStop=\"onStop\"\n          >\n            <div slot=\"header\">\n              <h5\n                v-if=\"(step.header || {}).title\"\n                v-html=\"$t(step.header.title)\"\n              />\n            </div>\n\n            <div slot=\"content\">\n              <div class=\"p-1 mb-2\">\n                <div v-html=\"$t(step.content)\" />\n              </div>\n            </div>\n\n            <div\n              slot=\"actions\"\n            >\n              <b-button\n                variant=\"primary\"\n                @click=\"onStop\"\n              >\n                <template v-if=\"tour.isLast && !(callbacks || {}).onNextRedirect\">\n                  {{ $t('buttons.end') }}\n                </template>\n                <template v-else>\n                  {{ $t('buttons.skip') }}\n                </template>\n              </b-button>\n              <b-button\n                v-if=\"tour.isFirst && (callbacks || {}).onPrevRedirect\"\n                variant=\"primary\"\n                :href=\"callbacks.onPrevRedirect\"\n              >\n                {{ $t('buttons.previous') }}\n              </b-button>\n              <b-button\n                v-else-if=\"!tour.isFirst\"\n                variant=\"primary\"\n                @click=\"tour.previousStep\"\n              >\n                {{ $t('buttons.previous') }}\n              </b-button>\n              <b-button\n                v-if=\"tour.isLast && (callbacks || {}).onNextRedirect\"\n                variant=\"primary\"\n                :href=\"callbacks.onNextRedirect\"\n              >\n                {{ $t('buttons.next') }}\n              </b-button>\n              <b-button\n                v-else-if=\"!tour.isLast\"\n                variant=\"primary\"\n                @click=\"tour.nextStep\"\n              >\n                {{ $t('buttons.next') }}\n              </b-button>\n            </div>\n          </v-step>\n        </template>\n      </transition>\n    </template>\n  </v-tour>\n</template>\n<script>\nexport default {\n  name: 'TourComponent',\n  i18nOptions: {\n    namespaces: 'onboarding-tour',\n  },\n  props: {\n    name: String,\n    callbacks: {\n      type: Object,\n    },\n    steps: {\n      default: () => [],\n      type: Array,\n    },\n  },\n  computed: {\n    labels () {\n      return this.tour.labels\n    },\n    tour () {\n      return  {\n        name: this.name,\n        steps: this.steps.map(step => {\n          return {\n            name: step,\n            target: `[data-v-onboarding=\"${step}\"]`,\n            header: {\n              title: this.$t(`steps.${step}.title`),\n            },\n            content: this.$t(`steps.${step}.content`),\n          }\n        }),\n      }\n    },\n  },\n  methods: {\n    onStart () {\n      if (JSON.parse(localStorage.getItem('corteza.tour')) && this.tour.steps.length) {\n        this.$tours[this.tour.name].start()\n      }\n    },\n    onStop () {\n      localStorage.setItem('corteza.tour', JSON.stringify(false))\n      this.$tours[this.tour.name].stop()\n    },\n    onStartClick () {\n      localStorage.setItem('corteza.tour', JSON.stringify(true))\n      this.onStart()\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n.v-step__arrow {\n  visibility: hidden;\n}\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n.v-step[data-popper-placement^=\"top\"] > .v-step__arrow {\n  bottom: -5px;\n}\n.v-step[data-popper-placement^=\"bottom\"] > .v-step__arrow {\n  top: -5px;\n}\n.v-step[data-popper-placement^=\"right\"] > .v-step__arrow {\n  left: -5px;\n}\n.v-step[data-popper-placement^=\"left\"] > .v-step__arrow {\n  right: -5px;\n}\n</style>",".v-step {\n  background: #5C5C5C;\n  max-width: 320px;\n  z-index: 10000;\n  border-radius: 1.1rem;\n}\n\n.v-step--sticky {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n\n.v-step--sticky .v-step__arrow {\n  display: none;\n}\n\n.v-step__arrow,\n.v-step__arrow:before {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: inherit;\n}\n\n.v-step__arrow {\n  visibility: hidden;\n}\n\n.v-step__arrow--dark:before {\n  background: #5C5C5C;\n}\n\n.v-step__arrow:before {\n  visibility: visible;\n  content: \"\";\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  margin-left: -5px;\n}\n\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n  bottom: -5px;\n}\n\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n  top: -5px;\n}\n\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n  left: -5px;\n}\n\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n  right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -84437,7 +84464,7 @@ __vue_render__$G._withStripped = true;
   /* style */
   const __vue_inject_styles__$N = function (inject) {
     if (!inject) return
-    inject("data-v-6e108672_0", { source: ".toast.overflow-unset {\n  overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/toaster/CToaster.vue","CToaster.vue"],"names":[],"mappings":"AA6EA;EACA,0BAAA;AC5EA;;AAEA,uCAAuC","file":"CToaster.vue","sourcesContent":["<template>\n  <div>\n    <b-toast\n      v-for=\"t in toasts\"\n      :key=\"t.id\"\n      visible\n      v-bind=\"t.options || {}\"\n      :title=\"t.payload.title\"\n      :no-close-button=\"!t.actions.hide\"\n      toast-class=\"overflow-unset\"\n      @hide=\"t.actions.hide ? t.actions.hide.cb(t) : evtSink\"\n    >\n      <b-card\n        header-bg-variant=\"transparent\"\n        bg-variant=\"transparent\"\n        body-class=\"p-0\"\n        class=\"border-0\"\n      >\n        <b-card-text>\n          {{ t.payload.notes }}\n        </b-card-text>\n\n        <b-card-text v-if=\"t.payload.link\">\n          <c-toaster-link :toast=\"t\" />\n        </b-card-text>\n\n        <component\n          :is=\"actComponent(act)\"\n          v-for=\"([name, act]) in extraActions(t)\"\n          :key=\"name\"\n          class=\"mr-1\"\n          v-bind=\"act\"\n          @action=\"act.cb ? act.cb(t, $event) : evtSink\"\n        />\n      </b-card>\n    </b-toast>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport * as actions from './actions'\nimport CToasterLink from './CToasterLink.vue'\n\nexport default {\n  components: {\n    CToasterLink,\n  },\n\n  props: {\n    toasts: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n\n  methods: {\n    extraActions ({ actions = {} }) {\n      const { hide, ...act } = actions\n      return Object.entries(act)\n    },\n\n    actComponent ({ kind }) {\n      const act = actions[kind]\n      if (!act) {\n        throw new Error('toast.actionKind.unknown')\n      }\n      return act\n    },\n\n    evtSink () {},\n  },\n}\n</script>\n\n<style lang=\"scss\">\n// BS only provides overflow-[auto, hidden]\n.toast.overflow-unset {\n  overflow: unset!important;\n}\n</style>\n",".toast.overflow-unset {\n  overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */"]}, media: undefined });
+    inject("data-v-48660d74_0", { source: ".toast.overflow-unset {\n  overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/toaster/CToaster.vue","CToaster.vue"],"names":[],"mappings":"AA6EA;EACA,0BAAA;AC5EA;;AAEA,uCAAuC","file":"CToaster.vue","sourcesContent":["<template>\n  <div>\n    <b-toast\n      v-for=\"t in toasts\"\n      :key=\"t.id\"\n      visible\n      v-bind=\"t.options || {}\"\n      :title=\"t.payload.title\"\n      :no-close-button=\"!t.actions.hide\"\n      toast-class=\"overflow-unset\"\n      @hide=\"t.actions.hide ? t.actions.hide.cb(t) : evtSink\"\n    >\n      <b-card\n        header-bg-variant=\"transparent\"\n        bg-variant=\"transparent\"\n        body-class=\"p-0\"\n        class=\"border-0\"\n      >\n        <b-card-text>\n          {{ t.payload.notes }}\n        </b-card-text>\n\n        <b-card-text v-if=\"t.payload.link\">\n          <c-toaster-link :toast=\"t\" />\n        </b-card-text>\n\n        <component\n          :is=\"actComponent(act)\"\n          v-for=\"([name, act]) in extraActions(t)\"\n          :key=\"name\"\n          class=\"mr-1\"\n          v-bind=\"act\"\n          @action=\"act.cb ? act.cb(t, $event) : evtSink\"\n        />\n      </b-card>\n    </b-toast>\n  </div>\n</template>\n\n<script lang=\"js\">\nimport * as actions from './actions'\nimport CToasterLink from './CToasterLink.vue'\n\nexport default {\n  components: {\n    CToasterLink,\n  },\n\n  props: {\n    toasts: {\n      type: Array,\n      required: false,\n      default: () => [],\n    },\n  },\n\n  methods: {\n    extraActions ({ actions = {} }) {\n      const { hide, ...act } = actions\n      return Object.entries(act)\n    },\n\n    actComponent ({ kind }) {\n      const act = actions[kind]\n      if (!act) {\n        throw new Error('toast.actionKind.unknown')\n      }\n      return act\n    },\n\n    evtSink () {},\n  },\n}\n</script>\n\n<style lang=\"scss\">\n// BS only provides overflow-[auto, hidden]\n.toast.overflow-unset {\n  overflow: unset!important;\n}\n</style>\n",".toast.overflow-unset {\n  overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -84571,7 +84598,7 @@ __vue_render__$H._withStripped = true;
   /* style */
   const __vue_inject_styles__$O = function (inject) {
     if (!inject) return
-    inject("data-v-072f061a_0", { source: ".reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/reminders/CReminderSidebar.vue","CReminderSidebar.vue"],"names":[],"mappings":"AAsEA;EACA,YAAA;EACA,yBAAA;ACrEA;;AAEA,+CAA+C","file":"CReminderSidebar.vue","sourcesContent":["<template>\n  <b-sidebar\n    v-model=\"isVisible\"\n    header-class=\"d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom\"\n    body-class=\"bg-white px-2\"\n    :title=\"title\"\n    :backdrop=\"isMobile\"\n    no-footer\n    right\n    shadow\n    no-close-on-route-change\n    no-close-on-esc\n  >\n    <template #header>\n      <h4\n        class=\"text-primary mb-0\"\n      >\n        <b>{{ title }}</b>\n      </h4>\n\n      <b-button\n        variant=\"outline-light border-0\"\n        class=\"d-flex align-items-center justify-content-center p-2\"\n        @click=\"isVisible = false\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'times']\"\n          class=\"h6 mb-0 text-dark\"\n        />\n      </b-button>\n    </template>\n\n    <slot />\n  </b-sidebar>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n\n    visible: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n\n  computed: {\n    isVisible: {\n      get () {\n        return this.visible\n      },\n\n      set (visible) {\n        this.$emit('update:visible', visible)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n</style>\n",".reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */"]}, media: undefined });
+    inject("data-v-2125ea60_0", { source: ".reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/reminders/CReminderSidebar.vue","CReminderSidebar.vue"],"names":[],"mappings":"AAsEA;EACA,YAAA;EACA,yBAAA;ACrEA;;AAEA,+CAA+C","file":"CReminderSidebar.vue","sourcesContent":["<template>\n  <b-sidebar\n    v-model=\"isVisible\"\n    header-class=\"d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom\"\n    body-class=\"bg-white px-2\"\n    :title=\"title\"\n    :backdrop=\"isMobile\"\n    no-footer\n    right\n    shadow\n    no-close-on-route-change\n    no-close-on-esc\n  >\n    <template #header>\n      <h4\n        class=\"text-primary mb-0\"\n      >\n        <b>{{ title }}</b>\n      </h4>\n\n      <b-button\n        variant=\"outline-light border-0\"\n        class=\"d-flex align-items-center justify-content-center p-2\"\n        @click=\"isVisible = false\"\n      >\n        <font-awesome-icon\n          :icon=\"['fas', 'times']\"\n          class=\"h6 mb-0 text-dark\"\n        />\n      </b-button>\n    </template>\n\n    <slot />\n  </b-sidebar>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n\n    visible: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n\n  computed: {\n    isVisible: {\n      get () {\n        return this.visible\n      },\n\n      set (visible) {\n        this.$emit('update:visible', visible)\n      },\n    },\n\n    isMobile () {\n      return window.innerWidth < 576\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n</style>\n",".reminder-sidebar-header {\n  height: 64px;\n  background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -84599,77 +84626,63 @@ __vue_render__$H._withStripped = true;
     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$O = {
-  name: 'ComponentList',
+  name: "FieldItem",
   props: {
-    catalogue: {
-      required: true,
-      type: Object
+    field: {
+      type: Object,
+      required: true
     },
-    path: {
+    isSelected: {
+      type: Boolean,
+      required: true
+    },
+    selectedFields: {
       type: Array,
-      default: () => []
+      required: true
+    },
+    systemFieldLabel: {
+      type: String,
+      required: true
     }
   },
   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];
-    },
+    fieldLabel() {
+      let fieldLabel = this.field.name || "";
 
-    // returns all groups at this level
-    subgroups() {
-      return ExtractSubgroups(this.catalogue, ...this.path);
-    },
+      if (this.field.label) {
+        fieldLabel = `${this.field.label} (${this.field.name})`;
+      }
 
-    components() {
-      // return ExtractComponents(this.catalogue, ...this.path)
-      return ExtractComponents(this.catalogue, ...this.path);
+      fieldLabel += this.field.isRequired ? " *" : "";
+      return fieldLabel;
     }
 
   }
@@ -84683,70 +84696,47 @@ var __vue_render__$I = 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()
-  ])
+  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 = [];
 __vue_render__$I._withStripped = true;
@@ -84754,11 +84744,11 @@ __vue_render__$I._withStripped = true;
   /* style */
   const __vue_inject_styles__$P = function (inject) {
     if (!inject) return
-    inject("data-v-03e1564e_0", { source: ".component[data-v-03e1564e] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/c3/ComponentList.vue","ComponentList.vue"],"names":[],"mappings":"AA+EA;EACA,eAAA;AC9EA;;AAEA,4CAA4C","file":"ComponentList.vue","sourcesContent":["<template>\n  <div>\n    <h5\n      v-if=\"!root\"\n      class=\"mb-0\"\n    >\n      {{  group  }}\n    </h5>\n\n    <div\n      v-if=\"subgroups.length > 0 || components.length > 0\"\n    >\n      <div\n        v-for=\"(cmp, i) in components\"\n        :key=\"i\"\n        @click=\"$emit('select', cmp)\"\n        class=\"component ml-2\"\n      >\n        {{ cmp.name || cmp.component.name || 'Untitled' }}\n        <b-badge\n          v-if=\"cmp.wip\"\n          variant=\"warning\"\n          class=\"float-right\"\n        >\n          wip\n        </b-badge>\n      </div>\n      <component-list\n        v-for=\"(group) in subgroups\"\n        :key=\"group\"\n        :catalogue=\"catalogue\"\n        :path=\"[...path, group]\"\n        @select=\"$emit('select', $event)\"\n        class=\"my-3\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport {ExtractComponents, ExtractSubgroups} from './helpers.ts'\n\nexport default {\n  name: 'ComponentList',\n  props: {\n    catalogue: {\n      required: true,\n      type: Object,\n    },\n\n    path: {\n      type: Array,\n      default: () => []\n    },\n  },\n\n  computed: {\n    // name of the current group\n    root () {\n      return this.path.length === 0\n    },\n\n    // name of the current group\n    group () {\n      return this.root ? undefined : this.path[this.path.length - 1]\n    },\n\n    // returns all groups at this level\n    subgroups () {\n      return ExtractSubgroups(this.catalogue, ...this.path)\n    },\n\n    components () {\n      // return ExtractComponents(this.catalogue, ...this.path)\n      return ExtractComponents(this.catalogue, ...this.path)\n    }\n  }\n}\n</script>\n<style lang=\"scss\" scoped>\n.component {\n  cursor: pointer;\n}\n</style>\n",".component {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */"]}, media: undefined });
+    inject("data-v-751c31b8_0", { source: "\n.handle[data-v-751c31b8] {\n  cursor: grab;\n}\n.cursor-default[data-v-751c31b8] {\n  cursor: default;\n}\n", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/field/FieldItem.vue"],"names":[],"mappings":";AAoEA;EACA,YAAA;AACA;AAEA;EACA,eAAA;AACA","file":"FieldItem.vue","sourcesContent":["<template>\n  <div class=\"d-flex align-items-center\">\n    <font-awesome-icon\n      :icon=\"['fas', 'grip-vertical']\"\n      class=\"handle align-baseline mr-3 text-primary\"\n    />\n    <b class=\"cursor-default text-dark text-truncate\">\n      {{ fieldLabel }}\n    </b>\n    <small v-if=\"field.isSystem\" class=\"cursor-default ml-1 text-truncate\">\n      {{ systemFieldLabel }}\n    </small>\n    <font-awesome-icon\n      v-if=\"isSelected\"\n      :icon=\"['far', 'eye']\"\n      class=\"align-baseline ml-auto text-muted pointer\"\n      @click=\"$emit('unselect-field', field)\"\n    />\n    <font-awesome-icon\n      v-else\n      :icon=\"['fas', 'eye-slash']\"\n      class=\"align-baseline ml-auto text-muted pointer\"\n      @click=\"$emit('select-field', field)\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"FieldItem\",\n\n  props: {\n    field: {\n      type: Object,\n      required: true,\n    },\n\n    isSelected: {\n      type: Boolean,\n      required: true,\n    },\n\n    selectedFields: {\n      type: Array,\n      required: true,\n    },\n\n    systemFieldLabel: {\n      type: String,\n      required: true,\n    }\n  },\n\n  computed: {\n    fieldLabel() {\n      let fieldLabel = this.field.name || \"\";\n\n      if (this.field.label) {\n        fieldLabel = `${this.field.label} (${this.field.name})`;\n      }\n\n      fieldLabel += this.field.isRequired ? \" *\" : \"\";\n      return fieldLabel;\n    },\n  },\n};\n</script>\n<style scoped>\n.handle {\n  cursor: grab;\n}\n\n.cursor-default {\n  cursor: default;\n}\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$P = "data-v-03e1564e";
+  const __vue_scope_id__$P = "data-v-751c31b8";
   /* module identifier */
   const __vue_module_identifier__$P = undefined;
   /* functional template */
@@ -84784,9 +84774,639 @@ __vue_render__$I._withStripped = true;
 
 //
 var script$P = {
+  components: {
+    draggable,
+    FieldItem: __vue_component__$P
+  },
+  props: {
+    module: {
+      type: Object,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledTypes: {
+      type: Array,
+      default: () => []
+    },
+    disableSystemFields: {
+      type: Boolean,
+      default: false
+    },
+    systemFields: {
+      type: Array,
+      default: null
+    },
+    fieldSubset: {
+      type: Array,
+      default: null
+    },
+    group: {
+      type: String,
+      default: 'fields'
+    },
+    maxHeight: {
+      type: String,
+      default: 'max-height: 65vh;'
+    },
+    labels: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      modules: [],
+      query: ''
+    };
+  },
+
+  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);
+
+          if (field) {
+            fields.push(field);
+          }
+
+          return fields;
+        }, []);
+      },
+
+      set(f) {
+        this.$emit('update:fields', f);
+      }
+
+    },
+
+    allFields() {
+      let mFields = [];
+
+      if (this.fieldSubset) {
+        mFields = this.module.filterFields(this.fieldSubset);
+      } else {
+        mFields = this.module.fields;
+      }
+
+      if (this.disabledTypes.length > 0) {
+        mFields = mFields.filter(({
+          kind
+        }) => !this.disabledTypes.find(t => t === kind));
+      }
+
+      let sysFields = [];
+
+      if (!this.disableSystemFields) {
+        sysFields = this.module.systemFields();
+
+        if (this.systemFields) {
+          sysFields = sysFields.filter(({
+            name
+          }) => this.systemFields.find(sf => sf === name));
+        }
+      } else {
+        mFields = mFields.filter(({
+          isSystem
+        }) => !isSystem);
+      }
+
+      return [...[...mFields].sort((a, b) => a.label.localeCompare(b.label)), ...sysFields];
+    },
+
+    allSelected() {
+      return this.availableFields.length > 0;
+    },
+
+    allUnselected() {
+      return this.selectedFields.length > 0;
+    },
+
+    availableFields() {
+      // Remove selected fields
+      return this.allFields.filter(a => !this.fields.some(f => a.name === f.name));
+    },
+
+    filteredAvailableFields() {
+      return this.filterFields(this.availableFields);
+    },
+
+    filteredSelectedFields() {
+      return this.filterFields(this.selectedFields);
+    }
+
+  },
+  watch: {
+    'moduleID'(o, n) {
+      if (o !== n) {
+        this.selectedFields = [];
+      }
+    }
+
+  },
+  methods: {
+    filterFields(fields) {
+      return fields.filter(f => f.name.toLowerCase().indexOf(this.query.toLowerCase()) > -1 || f.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1);
+    },
+
+    selectField(field) {
+      if (this.selectedFields.some(selectedField => selectedField.label === field.label)) return;
+      this.selectedFields = [...this.selectedFields, field];
+    },
+
+    unselectField(field) {
+      this.selectedFields = this.selectedFields.filter(({
+        name
+      }) => field.name !== name);
+    }
+
+  }
+};
+
+/* script */
+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.availableFieldsLabel) +
+                        "\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.selectAllFieldsLabel) +
+                          "\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.systemFieldLabel
+                            },
+                            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.selectedFieldsLabel) +
+                        "\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.unselectAllFieldsLabel) +
+                          "\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.systemFieldLabel
+                            },
+                            on: { "unselect-field": _vm.unselectField }
+                          })
+                        ],
+                        1
+                      )
+                    }),
+                    1
+                  )
+                ],
+                1
+              )
+            ],
+            1
+          )
+        ],
+        1
+      )
+    ],
+    1
+  )
+};
+var __vue_staticRenderFns__$J = [];
+__vue_render__$J._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$Q = function (inject) {
+    if (!inject) return
+    inject("data-v-d614af34_0", { source: ".handle[data-v-d614af34] {\n  cursor: grab;\n}\n\n/*# sourceMappingURL=FieldPicker.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/field/FieldPicker.vue","FieldPicker.vue"],"names":[],"mappings":"AA2RA;EACA,YAAA;AC1RA;;AAEA,0CAA0C","file":"FieldPicker.vue","sourcesContent":["<template>\n  <div\n    class=\"overflow-hidden\"\n  >\n    <b-input-group>\n      <b-input\n        v-model.trim=\"query\"\n        type=\"search\"\n        :placeholder=\"labels.searchPlaceholder\"\n        class=\"text-truncate\"\n      />\n      <b-input-group-append>\n        <b-input-group-text class=\"text-primary bg-white border-left-0\">\n          <font-awesome-icon\n            :icon=\"['fas', 'search']\"\n          />\n        </b-input-group-text>\n      </b-input-group-append>\n    </b-input-group>\n\n    <b-row\n      class=\"mt-2 h-100\"\n    >\n      <b-col\n        cols=\"12\"\n        sm=\"6\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <label\n            class=\"text-primary mb-0\"\n          >\n            {{ labels.availableFieldsLabel }}\n          </label>\n          <b-button\n            variant=\"link\"\n            :class=\"[allSelected ? 'visible' : 'invisible']\"\n            class=\"ml-auto px-0 text-muted\"\n            @click.prevent=\"selectedFields = [...allFields]\"\n          >\n            {{ labels.selectAllFieldsLabel }}\n          </b-button>\n        </div>\n        <b-list-group\n          vertical\n        >\n          <draggable\n            :key=\"filteredAvailableFields.length\"\n            handle=\".handle\"\n            :disabled=\"disabled\"\n            :group=\"group\"\n            :value=\"filteredAvailableFields\"\n            class=\"overflow-auto\"\n            :style=\"`${maxHeight}`\"\n          >\n            <b-list-group-item\n              v-for=\"field in filteredAvailableFields\"\n              :key=\"field.name\"\n              class=\"mb-3 border rounded\"\n              @dblclick=\"selectField(field)\"\n            >\n              <field-item\n                :field=\"field\"\n                :selected-fields=\"selectedFields\"\n                :is-selected=\"false\"\n                :system-field-label=\"labels.systemFieldLabel\"\n                @select-field=\"selectField\"\n              />\n            </b-list-group-item>\n          </draggable>\n        </b-list-group>\n      </b-col>\n      <b-col\n        cols=\"12\"\n        sm=\"6\"\n        class=\"pl-sm-0\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <label\n            class=\"mb-0 text-primary\"\n          >\n            {{ labels.selectedFieldsLabel }}\n          </label>\n          <b-button\n            variant=\"link\"\n            :class=\"[allUnselected ? 'visible' : 'invisible']\"\n            class=\"ml-auto px-0 text-muted\"\n            @click.prevent=\"selectedFields = []\"\n          >\n            {{ labels.unselectAllFieldsLabel }}\n          </b-button>\n        </div>\n        <b-list-group\n          vertical\n        >\n          <draggable\n            v-model=\"selectedFields\"\n            handle=\".handle\"\n            :disabled=\"disabled\"\n            :group=\"group\"\n            class=\"overflow-auto\"\n            :style=\"`${maxHeight}`\"\n          >\n            <b-list-group-item\n              v-for=\"field in filteredSelectedFields\"\n              :key=\"field.name\"\n              class=\"mb-3 border rounded\"\n              @dblclick=\"unselectField(field)\"\n            >\n              <field-item\n                :field=\"field\"\n                :selected-fields=\"selectedFields\"\n                :is-selected=\"true\"\n                :system-field-label=\"labels.systemFieldLabel\"\n                @unselect-field=\"unselectField\"\n              />\n            </b-list-group-item>\n          </draggable>\n        </b-list-group>\n      </b-col>\n    </b-row>\n  </div>\n</template>\n<script>\nimport draggable from 'vuedraggable'\nimport FieldItem from './FieldItem.vue'\n\nexport default {\n  components: {\n    draggable,\n    FieldItem,\n  },\n\n  props: {\n    module: {\n      type: Object,\n      required: true,\n    },\n\n    fields: {\n      type: Array,\n      required: true,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabledTypes: {\n      type: Array,\n      default: () => [],\n    },\n\n    disableSystemFields: {\n      type: Boolean,\n      default: false,\n    },\n\n    systemFields: {\n      type: Array,\n      default: null,\n    },\n\n    fieldSubset: {\n      type: Array,\n      default: null,\n    },\n\n    group: {\n      type: String,\n      default: 'fields',\n    },\n\n    maxHeight: {\n      type: String,\n      default: 'max-height: 65vh;',\n    },\n\n    labels: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      modules: [],\n      query: '',\n    }\n  },\n\n  computed: {\n    selectedFields: {\n      get () {\n        // Needs to be done this way so it retains order of fields\n        return this.fields.reduce((fields, field) => {\n          field = this.allFields.find(({ name }) => name === field.name)\n          if (field) {\n            fields.push(field)\n          }\n          return fields\n        }, [])\n      },\n\n      set (f) {\n        this.$emit('update:fields', f)\n      },\n    },\n\n    allFields () {\n      let mFields = []\n      if (this.fieldSubset) {\n        mFields = this.module.filterFields(this.fieldSubset)\n      } else {\n        mFields = this.module.fields\n      }\n\n      if (this.disabledTypes.length > 0) {\n        mFields = mFields.filter(({ kind }) => !this.disabledTypes.find(t => t === kind))\n      }\n\n      let sysFields = []\n      if (!this.disableSystemFields) {\n        sysFields = this.module.systemFields()\n        if (this.systemFields) {\n          sysFields = sysFields.filter(({ name }) => this.systemFields.find(sf => sf === name))\n        }\n      } else {\n        mFields = mFields.filter(({ isSystem }) => !isSystem)\n      }\n\n      return [\n        ...[...mFields].sort((a, b) => a.label.localeCompare(b.label)),\n        ...sysFields,\n      ]\n    },\n\n    allSelected () {\n      return this.availableFields.length > 0\n    },\n\n    allUnselected () {\n      return this.selectedFields.length > 0\n    },\n\n    availableFields () {\n      // Remove selected fields\n      return this.allFields.filter(a => !this.fields.some(f => a.name === f.name))\n    },\n\n    filteredAvailableFields () {\n      return this.filterFields(this.availableFields)\n    },\n\n    filteredSelectedFields () {\n      return this.filterFields(this.selectedFields)\n    },\n  },\n\n  watch: {\n    'moduleID' (o, n) {\n      if (o !== n) {\n        this.selectedFields = []\n      }\n    },\n  },\n\n  methods: {\n    filterFields (fields) {\n      return fields\n        .filter(f => f.name.toLowerCase().indexOf(this.query.toLowerCase()) > -1 || f.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1)\n    },\n    selectField (field) {\n      if (this.selectedFields.some(selectedField => selectedField.label === field.label)) return\n      this.selectedFields = [...this.selectedFields, field]\n    },\n    unselectField (field) {\n      this.selectedFields = this.selectedFields.filter(({ name }) => field.name !== name)\n    },\n  },\n}\n</script>\n<style lang=\"scss\" scoped>\n.handle {\n  cursor: grab;\n}\n</style>\n",".handle {\n  cursor: grab;\n}\n\n/*# sourceMappingURL=FieldPicker.vue.map */"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$Q = "data-v-d614af34";
+  /* module identifier */
+  const __vue_module_identifier__$Q = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$Q = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$Q = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$J, staticRenderFns: __vue_staticRenderFns__$J },
+    __vue_inject_styles__$Q,
+    __vue_script__$P,
+    __vue_scope_id__$Q,
+    __vue_is_functional_template__$Q,
+    __vue_module_identifier__$Q,
+    false,
+    createInjector,
+    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
+    },
+    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__$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 = [];
+__vue_render__$K._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$R = function (inject) {
+    if (!inject) return
+    inject("data-v-f45e268a_0", { source: ".component[data-v-f45e268a] {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/c3/ComponentList.vue","ComponentList.vue"],"names":[],"mappings":"AA+EA;EACA,eAAA;AC9EA;;AAEA,4CAA4C","file":"ComponentList.vue","sourcesContent":["<template>\n  <div>\n    <h5\n      v-if=\"!root\"\n      class=\"mb-0\"\n    >\n      {{  group  }}\n    </h5>\n\n    <div\n      v-if=\"subgroups.length > 0 || components.length > 0\"\n    >\n      <div\n        v-for=\"(cmp, i) in components\"\n        :key=\"i\"\n        @click=\"$emit('select', cmp)\"\n        class=\"component ml-2\"\n      >\n        {{ cmp.name || cmp.component.name || 'Untitled' }}\n        <b-badge\n          v-if=\"cmp.wip\"\n          variant=\"warning\"\n          class=\"float-right\"\n        >\n          wip\n        </b-badge>\n      </div>\n      <component-list\n        v-for=\"(group) in subgroups\"\n        :key=\"group\"\n        :catalogue=\"catalogue\"\n        :path=\"[...path, group]\"\n        @select=\"$emit('select', $event)\"\n        class=\"my-3\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport {ExtractComponents, ExtractSubgroups} from './helpers.ts'\n\nexport default {\n  name: 'ComponentList',\n  props: {\n    catalogue: {\n      required: true,\n      type: Object,\n    },\n\n    path: {\n      type: Array,\n      default: () => []\n    },\n  },\n\n  computed: {\n    // name of the current group\n    root () {\n      return this.path.length === 0\n    },\n\n    // name of the current group\n    group () {\n      return this.root ? undefined : this.path[this.path.length - 1]\n    },\n\n    // returns all groups at this level\n    subgroups () {\n      return ExtractSubgroups(this.catalogue, ...this.path)\n    },\n\n    components () {\n      // return ExtractComponents(this.catalogue, ...this.path)\n      return ExtractComponents(this.catalogue, ...this.path)\n    }\n  }\n}\n</script>\n<style lang=\"scss\" scoped>\n.component {\n  cursor: pointer;\n}\n</style>\n",".component {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$R = "data-v-f45e268a";
+  /* module identifier */
+  const __vue_module_identifier__$R = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$R = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  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
+  );
+
+//
+var script$R = {
   name: 'C3',
   components: {
-    ComponentList: __vue_component__$P
+    ComponentList: __vue_component__$R
   },
   props: {
     catalogue: {
@@ -84847,10 +85467,10 @@ var script$P = {
 };
 
 /* script */
-const __vue_script__$P = script$P;
+const __vue_script__$R = script$R;
 
 /* template */
-var __vue_render__$J = function() {
+var __vue_render__$L = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -84974,34 +85594,34 @@ var __vue_render__$J = function() {
       : _vm._e()
   ])
 };
-var __vue_staticRenderFns__$J = [];
-__vue_render__$J._withStripped = true;
+var __vue_staticRenderFns__$L = [];
+__vue_render__$L._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$Q = function (inject) {
+  const __vue_inject_styles__$S = function (inject) {
     if (!inject) return
-    inject("data-v-091aab11_0", { source: ".layout {\n  height: 100vh;\n  width: 100vw;\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n  grid-area: side;\n  overflow: auto;\n}\n.layout main {\n  grid-area: main;\n  background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n  background-size: 35px 35px;\n  overflow: auto;\n}\n.layout .controls {\n  grid-area: controls;\n  overflow: auto;\n}\n.layout .controls .control-group {\n  float: left;\n}\n.layout .scenario {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/c3/C3.vue","C3.vue"],"names":[],"mappings":"AAwIA;EACA,aAAA;EACA,YAAA;EAEA,aAAA;EACA,8BAAA;EACA,iCAAA;EACA,sBAAA;EACA,gDACA;ACzIA;AD6IA;EACA,eAAA;EACA,cAAA;AC3IA;AD8IA;EACA,eAAA;EACA,iJAAA;EAUA,0BAAA;EACA,cAAA;ACrJA;ADwJA;EACA,mBAAA;EACA,cAAA;ACtJA;ADwJA;EACA,WAAA;ACtJA;AD0JA;EACA,eAAA;ACxJA;;AAEA,iCAAiC","file":"C3.vue","sourcesContent":["<template>\n  <div class=\"layout\">\n    <aside class=\"sidebar p-2\">\n      <h5\n        class=\"border-bottom\">\n        C3: Component Catalogue\n      </h5>\n      <component-list\n        :catalogue=\"catalogue\"\n        @select=\"setCurrent($event)\"\n      />\n    </aside>\n\n    <main\n      class=\"p-5\"\n    >\n      <component\n        :is=\"current.component\"\n        v-if=\"current\"\n        v-bind=\"current.props\"\n      />\n      <p\n        v-else\n        class=\"text-center\"\n      >\n        Select a component from the C3 Catalogue and start hacking :)\n      </p>\n    </main>\n\n    <div\n      class=\"controls px-5 py-2 mt-2\"\n      v-if=\"current\"\n    >\n      <div\n        class=\"control-group mr-2\"\n        v-for=\"(cg, g) in controlGroups\"\n        :key=\"`control-group-${g}`\"\n      >\n        <h3>\n          Controls\n        </h3>\n        <component\n          :is=\"c.component\"\n          v-for=\"(c, i) in cg\"\n          :key=\"i\"\n          :value=\"c.value(current.props)\"\n          v-bind=\"c.props\"\n          @update=\"c.update(current.props, $event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"current.scenarios\"\n        class=\"control-group float-right\"\n      >\n        <h3>\n          Pre-set controls\n        </h3>\n        <ul\n          class=\"pl-0\"\n        >\n          <li\n            v-for=\"(s, i) in current.scenarios\"\n            :key=\"i\"\n            class=\"list-unstyled scenario\"\n            @click=\"setScenario(s)\"\n          >\n            {{ s.label }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport ComponentList from './ComponentList.vue'\n\nexport default {\n  name: 'C3',\n\n  components: {\n    ComponentList,\n  },\n\n  props: {\n    catalogue: {\n      required: true,\n      type: Object,\n    },\n  },\n\n  computed: {\n    controlGroups () {\n      if (this.current.controls.length === 0) {\n        return []\n      }\n\n      if (Array.isArray(this.current.controls[0])) {\n        // already grouped\n        return this.current.controls\n      }\n\n      // make one virtual group holding all controls\n      return [this.current.controls]\n    },\n  },\n\n  data () {\n    return {\n      current: undefined,\n    }\n  },\n\n  methods: {\n    setCurrent (component) {\n      this.current = { props: {}, ...component }\n      this.setScenario(this.current)\n    },\n\n    setScenario ({ props = {}, controls = [] }) {\n      // create missing props from controls\n      const apply = (c, props) => c.update(props, c.value(props) || null)\n      controls.forEach(c => {\n        if (Array.isArray(c)) {\n          c.forEach(c => apply(c, props))\n        } else {\n          apply(c, props)\n        }\n      })\n\n      this.current.props = props\n    },\n  },\n}\n</script>\n<style lang=\"scss\">\n.layout {\n  height: 100vh;\n  width: 100vw;\n\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas:\n    \"side main\"\n    \"side controls\"\n  ;\n\n  aside {\n    grid-area: side;\n    overflow: auto;\n  }\n\n  main {\n    grid-area: main;\n    background-image: linear-gradient(\n      135deg,\n      #f3f3f5 21.43%,\n      #ffffff 21.43%,\n      #ffffff 50%,\n      #f3f3f5 50%,\n      #f3f3f5 71.43%,\n      #ffffff 71.43%,\n      #ffffff 100%\n    );\n    background-size: 35.00px 35.00px;\n    overflow: auto;\n  }\n\n  .controls {\n    grid-area: controls;\n    overflow: auto;\n\n    .control-group {\n      float: left;\n    }\n  }\n\n  .scenario {\n    cursor: pointer;\n  }\n}\n</style>\n",".layout {\n  height: 100vh;\n  width: 100vw;\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n  grid-area: side;\n  overflow: auto;\n}\n.layout main {\n  grid-area: main;\n  background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n  background-size: 35px 35px;\n  overflow: auto;\n}\n.layout .controls {\n  grid-area: controls;\n  overflow: auto;\n}\n.layout .controls .control-group {\n  float: left;\n}\n.layout .scenario {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */"]}, media: undefined });
+    inject("data-v-99d21784_0", { source: ".layout {\n  height: 100vh;\n  width: 100vw;\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n  grid-area: side;\n  overflow: auto;\n}\n.layout main {\n  grid-area: main;\n  background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n  background-size: 35px 35px;\n  overflow: auto;\n}\n.layout .controls {\n  grid-area: controls;\n  overflow: auto;\n}\n.layout .controls .control-group {\n  float: left;\n}\n.layout .scenario {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/c3/C3.vue","C3.vue"],"names":[],"mappings":"AAwIA;EACA,aAAA;EACA,YAAA;EAEA,aAAA;EACA,8BAAA;EACA,iCAAA;EACA,sBAAA;EACA,gDACA;ACzIA;AD6IA;EACA,eAAA;EACA,cAAA;AC3IA;AD8IA;EACA,eAAA;EACA,iJAAA;EAUA,0BAAA;EACA,cAAA;ACrJA;ADwJA;EACA,mBAAA;EACA,cAAA;ACtJA;ADwJA;EACA,WAAA;ACtJA;AD0JA;EACA,eAAA;ACxJA;;AAEA,iCAAiC","file":"C3.vue","sourcesContent":["<template>\n  <div class=\"layout\">\n    <aside class=\"sidebar p-2\">\n      <h5\n        class=\"border-bottom\">\n        C3: Component Catalogue\n      </h5>\n      <component-list\n        :catalogue=\"catalogue\"\n        @select=\"setCurrent($event)\"\n      />\n    </aside>\n\n    <main\n      class=\"p-5\"\n    >\n      <component\n        :is=\"current.component\"\n        v-if=\"current\"\n        v-bind=\"current.props\"\n      />\n      <p\n        v-else\n        class=\"text-center\"\n      >\n        Select a component from the C3 Catalogue and start hacking :)\n      </p>\n    </main>\n\n    <div\n      class=\"controls px-5 py-2 mt-2\"\n      v-if=\"current\"\n    >\n      <div\n        class=\"control-group mr-2\"\n        v-for=\"(cg, g) in controlGroups\"\n        :key=\"`control-group-${g}`\"\n      >\n        <h3>\n          Controls\n        </h3>\n        <component\n          :is=\"c.component\"\n          v-for=\"(c, i) in cg\"\n          :key=\"i\"\n          :value=\"c.value(current.props)\"\n          v-bind=\"c.props\"\n          @update=\"c.update(current.props, $event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"current.scenarios\"\n        class=\"control-group float-right\"\n      >\n        <h3>\n          Pre-set controls\n        </h3>\n        <ul\n          class=\"pl-0\"\n        >\n          <li\n            v-for=\"(s, i) in current.scenarios\"\n            :key=\"i\"\n            class=\"list-unstyled scenario\"\n            @click=\"setScenario(s)\"\n          >\n            {{ s.label }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport ComponentList from './ComponentList.vue'\n\nexport default {\n  name: 'C3',\n\n  components: {\n    ComponentList,\n  },\n\n  props: {\n    catalogue: {\n      required: true,\n      type: Object,\n    },\n  },\n\n  computed: {\n    controlGroups () {\n      if (this.current.controls.length === 0) {\n        return []\n      }\n\n      if (Array.isArray(this.current.controls[0])) {\n        // already grouped\n        return this.current.controls\n      }\n\n      // make one virtual group holding all controls\n      return [this.current.controls]\n    },\n  },\n\n  data () {\n    return {\n      current: undefined,\n    }\n  },\n\n  methods: {\n    setCurrent (component) {\n      this.current = { props: {}, ...component }\n      this.setScenario(this.current)\n    },\n\n    setScenario ({ props = {}, controls = [] }) {\n      // create missing props from controls\n      const apply = (c, props) => c.update(props, c.value(props) || null)\n      controls.forEach(c => {\n        if (Array.isArray(c)) {\n          c.forEach(c => apply(c, props))\n        } else {\n          apply(c, props)\n        }\n      })\n\n      this.current.props = props\n    },\n  },\n}\n</script>\n<style lang=\"scss\">\n.layout {\n  height: 100vh;\n  width: 100vw;\n\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas:\n    \"side main\"\n    \"side controls\"\n  ;\n\n  aside {\n    grid-area: side;\n    overflow: auto;\n  }\n\n  main {\n    grid-area: main;\n    background-image: linear-gradient(\n      135deg,\n      #f3f3f5 21.43%,\n      #ffffff 21.43%,\n      #ffffff 50%,\n      #f3f3f5 50%,\n      #f3f3f5 71.43%,\n      #ffffff 71.43%,\n      #ffffff 100%\n    );\n    background-size: 35.00px 35.00px;\n    overflow: auto;\n  }\n\n  .controls {\n    grid-area: controls;\n    overflow: auto;\n\n    .control-group {\n      float: left;\n    }\n  }\n\n  .scenario {\n    cursor: pointer;\n  }\n}\n</style>\n",".layout {\n  height: 100vh;\n  width: 100vw;\n  display: grid;\n  grid-template-rows: auto 400px;\n  grid-template-columns: 300px auto;\n  align-content: stretch;\n  grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n  grid-area: side;\n  overflow: auto;\n}\n.layout main {\n  grid-area: main;\n  background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n  background-size: 35px 35px;\n  overflow: auto;\n}\n.layout .controls {\n  grid-area: controls;\n  overflow: auto;\n}\n.layout .controls .control-group {\n  float: left;\n}\n.layout .scenario {\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$Q = undefined;
+  const __vue_scope_id__$S = undefined;
   /* module identifier */
-  const __vue_module_identifier__$Q = undefined;
+  const __vue_module_identifier__$S = undefined;
   /* functional template */
-  const __vue_is_functional_template__$Q = false;
+  const __vue_is_functional_template__$S = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$Q = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$J, staticRenderFns: __vue_staticRenderFns__$J },
-    __vue_inject_styles__$Q,
-    __vue_script__$P,
-    __vue_scope_id__$Q,
-    __vue_is_functional_template__$Q,
-    __vue_module_identifier__$Q,
+  const __vue_component__$S = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$L, staticRenderFns: __vue_staticRenderFns__$L },
+    __vue_inject_styles__$S,
+    __vue_script__$R,
+    __vue_scope_id__$S,
+    __vue_is_functional_template__$S,
+    __vue_module_identifier__$S,
     false,
     createInjector,
     undefined,
@@ -85019,7 +85639,7 @@ __vue_render__$J._withStripped = true;
 //
 //
 //
-var script$Q = {
+var script$S = {
   props: {
     label: {
       required: true,
@@ -85033,10 +85653,10 @@ var script$Q = {
 };
 
 /* script */
-const __vue_script__$Q = script$Q;
+const __vue_script__$S = script$S;
 
 /* template */
-var __vue_render__$K = function() {
+var __vue_render__$M = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -85056,17 +85676,17 @@ var __vue_render__$K = function() {
     1
   )
 };
-var __vue_staticRenderFns__$K = [];
-__vue_render__$K._withStripped = true;
+var __vue_staticRenderFns__$M = [];
+__vue_render__$M._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$R = undefined;
+  const __vue_inject_styles__$T = undefined;
   /* scoped */
-  const __vue_scope_id__$R = undefined;
+  const __vue_scope_id__$T = undefined;
   /* module identifier */
-  const __vue_module_identifier__$R = undefined;
+  const __vue_module_identifier__$T = undefined;
   /* functional template */
-  const __vue_is_functional_template__$R = false;
+  const __vue_is_functional_template__$T = false;
   /* style inject */
   
   /* style inject SSR */
@@ -85075,13 +85695,13 @@ __vue_render__$K._withStripped = true;
   
 
   
-  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,
+  const __vue_component__$T = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$M, staticRenderFns: __vue_staticRenderFns__$M },
+    __vue_inject_styles__$T,
+    __vue_script__$S,
+    __vue_scope_id__$T,
+    __vue_is_functional_template__$T,
+    __vue_module_identifier__$T,
     false,
     undefined,
     undefined,
@@ -85099,7 +85719,7 @@ __vue_render__$K._withStripped = true;
 //
 //
 //
-var script$R = {
+var script$T = {
   props: {
     label: {
       required: true,
@@ -85113,10 +85733,10 @@ var script$R = {
 };
 
 /* script */
-const __vue_script__$R = script$R;
+const __vue_script__$T = script$T;
 
 /* template */
-var __vue_render__$L = function() {
+var __vue_render__$N = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -85136,17 +85756,17 @@ var __vue_render__$L = function() {
     1
   )
 };
-var __vue_staticRenderFns__$L = [];
-__vue_render__$L._withStripped = true;
+var __vue_staticRenderFns__$N = [];
+__vue_render__$N._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$S = undefined;
+  const __vue_inject_styles__$U = undefined;
   /* scoped */
-  const __vue_scope_id__$S = undefined;
+  const __vue_scope_id__$U = undefined;
   /* module identifier */
-  const __vue_module_identifier__$S = undefined;
+  const __vue_module_identifier__$U = undefined;
   /* functional template */
-  const __vue_is_functional_template__$S = false;
+  const __vue_is_functional_template__$U = false;
   /* style inject */
   
   /* style inject SSR */
@@ -85155,13 +85775,13 @@ __vue_render__$L._withStripped = true;
   
 
   
-  const __vue_component__$S = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$L, staticRenderFns: __vue_staticRenderFns__$L },
-    __vue_inject_styles__$S,
-    __vue_script__$R,
-    __vue_scope_id__$S,
-    __vue_is_functional_template__$S,
-    __vue_module_identifier__$S,
+  const __vue_component__$U = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$N, staticRenderFns: __vue_staticRenderFns__$N },
+    __vue_inject_styles__$U,
+    __vue_script__$T,
+    __vue_scope_id__$U,
+    __vue_is_functional_template__$U,
+    __vue_module_identifier__$U,
     false,
     undefined,
     undefined,
@@ -85178,7 +85798,7 @@ __vue_render__$L._withStripped = true;
 //
 //
 //
-var script$S = {
+var script$U = {
   props: {
     label: {
       required: true,
@@ -85192,10 +85812,10 @@ var script$S = {
 };
 
 /* script */
-const __vue_script__$S = script$S;
+const __vue_script__$U = script$U;
 
 /* template */
-var __vue_render__$M = function() {
+var __vue_render__$O = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -85218,17 +85838,17 @@ var __vue_render__$M = function() {
     1
   )
 };
-var __vue_staticRenderFns__$M = [];
-__vue_render__$M._withStripped = true;
+var __vue_staticRenderFns__$O = [];
+__vue_render__$O._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$T = undefined;
+  const __vue_inject_styles__$V = undefined;
   /* scoped */
-  const __vue_scope_id__$T = undefined;
+  const __vue_scope_id__$V = undefined;
   /* module identifier */
-  const __vue_module_identifier__$T = undefined;
+  const __vue_module_identifier__$V = undefined;
   /* functional template */
-  const __vue_is_functional_template__$T = false;
+  const __vue_is_functional_template__$V = false;
   /* style inject */
   
   /* style inject SSR */
@@ -85237,13 +85857,13 @@ __vue_render__$M._withStripped = true;
   
 
   
-  const __vue_component__$T = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$M, staticRenderFns: __vue_staticRenderFns__$M },
-    __vue_inject_styles__$T,
-    __vue_script__$S,
-    __vue_scope_id__$T,
-    __vue_is_functional_template__$T,
-    __vue_module_identifier__$T,
+  const __vue_component__$V = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$O, staticRenderFns: __vue_staticRenderFns__$O },
+    __vue_inject_styles__$V,
+    __vue_script__$U,
+    __vue_scope_id__$V,
+    __vue_is_functional_template__$V,
+    __vue_module_identifier__$V,
     false,
     undefined,
     undefined,
@@ -85262,7 +85882,7 @@ __vue_render__$M._withStripped = true;
 //
 //
 //
-var script$T = {
+var script$V = {
   props: {
     label: {
       required: true,
@@ -85280,10 +85900,10 @@ var script$T = {
 };
 
 /* script */
-const __vue_script__$T = script$T;
+const __vue_script__$V = script$V;
 
 /* template */
-var __vue_render__$N = function() {
+var __vue_render__$P = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -85303,17 +85923,17 @@ var __vue_render__$N = function() {
     1
   )
 };
-var __vue_staticRenderFns__$N = [];
-__vue_render__$N._withStripped = true;
+var __vue_staticRenderFns__$P = [];
+__vue_render__$P._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$U = undefined;
+  const __vue_inject_styles__$W = undefined;
   /* scoped */
-  const __vue_scope_id__$U = undefined;
+  const __vue_scope_id__$W = undefined;
   /* module identifier */
-  const __vue_module_identifier__$U = undefined;
+  const __vue_module_identifier__$W = undefined;
   /* functional template */
-  const __vue_is_functional_template__$U = false;
+  const __vue_is_functional_template__$W = false;
   /* style inject */
   
   /* style inject SSR */
@@ -85322,13 +85942,13 @@ __vue_render__$N._withStripped = true;
   
 
   
-  const __vue_component__$U = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$N, staticRenderFns: __vue_staticRenderFns__$N },
-    __vue_inject_styles__$U,
-    __vue_script__$T,
-    __vue_scope_id__$U,
-    __vue_is_functional_template__$U,
-    __vue_module_identifier__$U,
+  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,
     undefined,
     undefined,
@@ -102540,16 +103160,16 @@ function generic(component, { handler, props }) {
         props }, handler);
 }
 function input(label, handler) {
-    return generic(__vue_component__$R, { handler, props: { label } });
+    return generic(__vue_component__$T, { handler, props: { label } });
 }
 function textarea(label, handler) {
-    return generic(__vue_component__$S, { handler, props: { label } });
+    return generic(__vue_component__$U, { handler, props: { label } });
 }
 function checkbox(label, handler) {
-    return generic(__vue_component__$T, { handler, props: { label } });
+    return generic(__vue_component__$V, { handler, props: { label } });
 }
 function select(label, handler, options) {
-    return generic(__vue_component__$U, {
+    return generic(__vue_component__$W, {
         handler,
         props: {
             label,
@@ -102568,7 +103188,7 @@ var controls = /*#__PURE__*/Object.freeze({
 });
 
 var index$2 = {
-    View: __vue_component__$Q,
+    View: __vue_component__$S,
     controls,
 };
 
@@ -102598,6 +103218,8 @@ 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,
   C3: index$2,
   CPrompts: __vue_component__$B,
   CPromptModal: __vue_component__$A,