{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitDialog.vue?vue&type=script&lang=js&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitDialog.vue","mtime":1702265337630},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/thread-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/babel-loader/lib/index.js","mtime":456789000000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci8qIGVzbGludC1kaXNhYmxlIG5vLWFsZXJ0LCBuby1jb25zb2xlICovCmltcG9ydCBDb250ZW50VnVlciBmcm9tICIuL0NvbnRlbnRWdWVyIjsKaW1wb3J0IEN1c3RvbVNwbGl0dGVyIGZyb20gIi4vQ3VzdG9tU3BsaXR0ZXIiOwppbXBvcnQgRXZlbnRCdXMgZnJvbSAnLi9FdmVudEJ1cyc7Ci8vaW1wb3J0IFNwbGl0cGFuZXNCYXIgZnJvbSAiLi9TcGxpdHBhbmVzQmFyIjsKaW1wb3J0IHN0b3JlIGZyb20gIi4uL3N0b3JlIjsKaW1wb3J0IFZ1ZSBmcm9tICJ2dWUiOwppbXBvcnQgewogIElucHV0LAogIE9wdGlvbiwKICBQb3BvdmVyLAogIFNlbGVjdAp9IGZyb20gImVsZW1lbnQtdWkiOwpWdWUudXNlKElucHV0KTsKVnVlLnVzZShPcHRpb24pOwpWdWUudXNlKFBvcG92ZXIpOwpWdWUudXNlKFNlbGVjdCk7CgpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogIlNwbGl0RGlhbG9nIiwKICBjb21wb25lbnRzOiB7CiAgICBDb250ZW50VnVlciwKICAgIEN1c3RvbVNwbGl0dGVyLAogIH0sCiAgcHJvcHM6IHsKICAgIGVudHJpZXM6IHsKICAgICAgdHlwZTogQXJyYXksCiAgICAgIGRlZmF1bHQ6IGZ1bmN0aW9uKCkgewogICAgICAgIHJldHVybiBbXTsKICAgICAgfQogICAgfQogIH0sCiAgZGF0YTogZnVuY3Rpb24oKSB7CiAgICByZXR1cm4gewogICAgICBzdHlsZXM6IHsgfQogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgLyoqCiAgICAgKiBDYWxsYmFjayB3aGVuIHRoZSB2dWVycyBlbWl0IGEgc2VsZWN0ZWQgZXZlbnQuCiAgICAgKi8KICAgIHJlc291cmNlU2VsZWN0ZWQ6IGZ1bmN0aW9uKHJlc3VsdCkgewogICAgICB0aGlzLiRlbWl0KCJyZXNvdXJjZS1zZWxlY3RlZCIsIHJlc3VsdCk7CiAgICB9LAogICAgZ2V0Q2xhc3M6IGZ1bmN0aW9uKGlkKSB7CiAgICAgIGlmICh0aGlzLmlzSWRWaXNpYmxlKGlkKSkgewogICAgICAgIHJldHVybiB0aGlzLmdldFJlZnNOYW1lKGlkKTsKICAgICAgfSBlbHNlIHsKICAgICAgICByZXR1cm4gImluYWN0aXZlIjsKICAgICAgfQogICAgfSwKICAgIGdldFJlZnNOYW1lOiBmdW5jdGlvbihpZCkgewogICAgICBjb25zdCByZWZOYW1lID0gc3RvcmUuZ2V0dGVyc1sic3BsaXRGbG93L2dldFBhbmVOYW1lQnlJZCJdKGlkKTsKICAgICAgaWYgKHJlZk5hbWUpIHsKICAgICAgICBpZiAoIShyZWZOYW1lIGluIHRoaXMuc3R5bGVzKSkgewogICAgICAgICAgVnVlLnNldCh0aGlzLnN0eWxlcywgcmVmTmFtZSwge30pOwogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gcmVmTmFtZTsKICAgIH0sCiAgICBnZXRTdHlsZTogZnVuY3Rpb24oaWQpIHsKICAgICAgLyogCiAgICAgICAgU2V0IHRoZSBzdHlsZSBiYXNlZCBvbiB0aGUgcG9zaXRpb24gb2YgdGhlIHNwbHR0ZXJzIAogICAgICAgIEhlYWRlciBpcyAzMHB4IGluIGhlaWdodCBhbmQgdGhlIHNwbGl0dGVyIGlzIDFweCBpbgogICAgICAgIGhlaWdodC93aWR0aC4gVGhlIHdpZHRoLCBoZWlnaHQgYW5kIHBvc2l0b24gb2YgdGhlIAogICAgICAgIHZpZXdlciBzaG91bGQgdGFrZSB0aGF0IGludG8gYWNjb3VudC4KICAgICAgKi8KICAgICAgY29uc3QgcmVmTmFtZSA9IHRoaXMuZ2V0UmVmc05hbWUoaWQpOwogICAgICBpZiAocmVmTmFtZSAmJiByZWZOYW1lIGluIHRoaXMuc3R5bGVzICYmIHRoaXMuc3R5bGVzW3JlZk5hbWVdKSB7CiAgICAgICAgcmV0dXJuIHRoaXMuc3R5bGVzW3JlZk5hbWVdOwogICAgICB9CiAgICAgIHJldHVybiB7fTsKICAgIH0sCiAgICBnZXRBY3RpdmVDb250ZW50czogZnVuY3Rpb24oKSB7CiAgICAgIGNvbnN0IGFjdGl2ZUNvbnRlbnRzID0gW107CiAgICAgIGNvbnN0IHZ1ZXJzID0gdGhpcy4kcmVmc1snY29udGVudCddOwogICAgICBpZiAodnVlcnMpIHsKICAgICAgICB2dWVycy5mb3JFYWNoKHZ1ZXIgPT4gewogICAgICAgICAgaWYgKHZ1ZXIuaXNWaXNpYmxlKCkpCiAgICAgICAgICAgIGFjdGl2ZUNvbnRlbnRzLnB1c2godnVlcik7CiAgICAgICAgfSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGFjdGl2ZUNvbnRlbnRzOwogICAgfSwKICAgIGlzSWRWaXNpYmxlOiBmdW5jdGlvbihpZCkgewogICAgICBjb25zdCByZWZOYW1lID0gc3RvcmUuZ2V0dGVyc1sic3BsaXRGbG93L2dldFBhbmVOYW1lQnlJZCJdKGlkKTsKICAgICAgcmV0dXJuIHJlZk5hbWUgIT09IHVuZGVmaW5lZDsKICAgIH0sCiAgICBzZW5kU3luY2hyb25pc2VkRXZlbnQ6IGZ1bmN0aW9uKHJlc291cmNlKSB7CiAgICAgIGNvbnN0IGFjdGl2ZUNvbnRlbnRzID0gdGhpcy5nZXRBY3RpdmVDb250ZW50cygpOwogICAgICBhY3RpdmVDb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gewogICAgICAgIGNvbnRlbnQucmVjZWl2ZVN5bmNocm9uaXNlZEV2ZW50KHJlc291cmNlKTsKICAgICAgfSk7CiAgICB9LAogICAgZ2V0Q29udGVudHNXaXRoSWQ6IGZ1bmN0aW9uKGlkKSB7CiAgICAgIGxldCBjb250ZW50cyA9IHRoaXMuJHJlZnNbImNvbnRlbnQiXTsKICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBjb250ZW50cy5sZW5ndGg7IGkrKykgewogICAgICAgIGlmIChjb250ZW50c1tpXS5nZXRJZCgpID09IGlkKSB7CiAgICAgICAgICByZXR1cm4gY29udGVudHNbaV07CiAgICAgICAgfQogICAgICB9CiAgICAgIHJldHVybiB1bmRlZmluZWQ7CiAgICB9LAogICAgZ2V0Q29udGVudHNTdGF0ZTogZnVuY3Rpb24oKSB7CiAgICAgIGxldCBzdGF0ZXMgPSBbXTsKICAgICAgbGV0IGNvbnRlbnRzID0gdGhpcy4kcmVmc1siY29udGVudCJdOwogICAgICBmb3IgKGxldCBpID0gMDsgaSA8IGNvbnRlbnRzLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgc3RhdGVzLnB1c2goY29udGVudHNbaV0uZ2V0U3RhdGUoKSk7CiAgICAgIH0KICAgICAgcmV0dXJuIHN0YXRlczsKICAgIH0sCiAgICBjYWxjdWxhdGVTdHlsZXM6IGZ1bmN0aW9uKGluZGV4KSB7CiAgICAgIGlmICh0aGlzLiRyZWZzKSB7CiAgICAgICAgY29uc3QgcmVmTmFtZSA9IGBwYW5lLSR7aW5kZXh9YDsKICAgICAgICBpZiAocmVmTmFtZSBpbiB0aGlzLiRyZWZzICYmIHRoaXMuJHJlZnNbcmVmTmFtZV0gJiYgdGhpcy4kcmVmc1tyZWZOYW1lXS4kZWwpIHsKICAgICAgICAgIGNvbnN0IGVsID0gdGhpcy4kcmVmc1tyZWZOYW1lXS4kZWw7CiAgICAgICAgICBjb25zdCByZWN0ID0gZWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7CiAgICAgICAgICB0aGlzLnNldFN0eWxlcyhyZWZOYW1lLCByZWN0KTsKICAgICAgICB9CiAgICAgIH0KICAgIH0sCiAgICBzZXRTdHlsZXM6IGZ1bmN0aW9uKHJlZk5hbWUsIHJlY3QpIHsKICAgICAgaWYgKHRoaXMuJHJlZnMgJiYgKCd0YWJDb250YWluZXInIGluIHRoaXMuJHJlZnMpKSB7CiAgICAgICAgY29uc3QgYm91bmQgPSB0aGlzLiRyZWZzWyd0YWJDb250YWluZXInXS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTsKICAgICAgICBjb25zdCBzdHlsZSA9IHt9OwogICAgICAgIHN0eWxlWyJ3aWR0aCJdID0gYCR7cmVjdC53aWR0aH1weGA7CiAgICAgICAgc3R5bGVbImxlZnQiXSA9IGAke3JlY3QubGVmdCAtIGJvdW5kLmxlZnR9cHhgOwogICAgICAgIHN0eWxlWyJoZWlnaHQiXSA9IGAke3JlY3QuaGVpZ2h0fXB4YDsKICAgICAgICBzdHlsZVsidG9wIl0gPSBgJHtyZWN0LnRvcCAtIGJvdW5kLnRvcH1weGA7CiAgICAgICAgY29uc29sZS5sb2cocmVmTmFtZSwgSlNPTi5zdHJpbmdpZnkoc3R5bGUpKTsKICAgICAgICBWdWUuc2V0KHRoaXMuc3R5bGVzLCByZWZOYW1lLCBzdHlsZSk7CiAgICAgIH0KICAgIH0sCiAgICByZXNpemU6IGZ1bmN0aW9uKCkgewogICAgICB0aGlzLl9fdXNlclJlc2l6ZV9fID0gdHJ1ZTsKICAgIH0sCiAgICByZXNpemVkOiBmdW5jdGlvbihzcGxpdHRlck5hbWUsIGV2ZW50KSB7CiAgICAgIGlmICh0aGlzLl9fdXNlclJlc2l6ZV9fKSB7CiAgICAgICAgc3RvcmUuY29tbWl0KCJzcGxpdEZsb3cvc2V0U3BsaXR0ZXIiLCB7CiAgICAgICAgICBuYW1lOiBzcGxpdHRlck5hbWUsCiAgICAgICAgICB2YWx1ZTogZXZlbnRbMF0uc2l6ZQogICAgICAgIH0pOwogICAgICB9CiAgICAgIHRoaXMuX191c2VyUmVzaXplX18gPSBmYWxzZTsKICAgIH0KICB9LAogIGNvbXB1dGVkOiB7CiAgICBhY3RpdmVWaWV3OiBmdW5jdGlvbigpIHsKICAgICAgcmV0dXJuIHN0b3JlLnN0YXRlLnNwbGl0Rmxvdy5hY3RpdmVWaWV3OwogICAgfSwKICAgIGhvcml6b250YWwoKSB7CiAgICAgIGlmIChzdG9yZS5zdGF0ZS5zcGxpdEZsb3cuYWN0aXZlVmlldyA9PT0gIjJob3JwYW5lbCIpIHsKICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfQogICAgICByZXR1cm4gZmFsc2U7CiAgICB9LAogICAgc3BsaXR0ZXJzKCkgewogICAgICByZXR1cm4gc3RvcmUuc3RhdGUuc3BsaXRGbG93LnNwbGl0dGVyczsKICAgIH0sCiAgICBnbG9iYWxDYWxsYmFjaygpIHsKICAgICAgcmV0dXJuIHN0b3JlLnN0YXRlLnNwbGl0Rmxvdy5nbG9iYWxDYWxsYmFjazsKICAgIH0sCiAgfSwKICB3YXRjaDogewogICAgZ2xvYmFsQ2FsbGJhY2s6IHsKICAgICAgaGFuZGxlcjogZnVuY3Rpb24odmFsKSB7CiAgICAgICAgLy9Pbmx5IGFjdGl2YXRlIGZvciBhY3RpdmUKICAgICAgICBpZiAodmFsKSB7CiAgICAgICAgICBjb25zdCBjb250ZW50cyA9IHRoaXMuZ2V0QWN0aXZlQ29udGVudHMoKTsKICAgICAgICAgIGlmIChjb250ZW50cykgewogICAgICAgICAgICBjb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gewogICAgICAgICAgICAgIGNvbnRlbnQucmVxdWVzdFN5bmNocm9uaXNlZEV2ZW50KHZhbCk7CiAgICAgICAgICAgIH0pOwogICAgICAgICAgfQogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAvL1R1cm4gc3luYyBvZmYsIHRoaXMgY2FuIGJlIHJlcXVlc3RlZCBmb3IgYWxsIGNvbnRlbnRzCiAgICAgICAgICBjb25zdCBjb250ZW50cyA9IHRoaXMuJHJlZnNbJ2NvbnRlbnQnXTsKICAgICAgICAgIGlmIChjb250ZW50cykgewogICAgICAgICAgICBjb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gewogICAgICAgICAgICAgIGNvbnRlbnQucmVxdWVzdFN5bmNocm9uaXNlZEV2ZW50KGZhbHNlKTsKICAgICAgICAgICAgfSk7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9LAogICAgICBpbW1lZGlhdGU6IHRydWUsCiAgICAgIGRlZXA6IHRydWUKICAgIH0sCiAgfSwKICBtb3VudGVkOiBmdW5jdGlvbiAoKSB7CiAgICBFdmVudEJ1cy4kb24oIlBhbmVSZXNpemUiLCBwYXlsb2FkID0+IHsKICAgICAgdGhpcy5zZXRTdHlsZXMocGF5bG9hZC5yZWZOYW1lLCBwYXlsb2FkLnJlY3QpOwogICAgfSk7CiAgfSwKfTsK"},{"version":3,"sources":["SplitDialog.vue"],"names":[],"mappings":";AAyBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"SplitDialog.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div class=\"tab-container\" ref=\"tabContainer\">\n    <custom-splitter\n      index=\"split-1\"\n      key=\"split-1\"\n    />\n    <div\n      v-for=\"entry in entries\"\n      :key=\"entry.id\"\n      :style=\"getStyle(entry.id)\"\n      :class=\"[getClass(entry.id), 'contentvuer']\"\n    >\n      <ContentVuer\n        :key=\"entry.id\"\n        :entry=\"entry\"\n        ref=\"content\"\n        @resource-selected=\"resourceSelected\"\n        :visible=\"isIdVisible(entry.id)\"\n      />\n    </div>\n  </div>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport ContentVuer from \"./ContentVuer\";\nimport CustomSplitter from \"./CustomSplitter\";\nimport EventBus from './EventBus';\n//import SplitpanesBar from \"./SplitpanesBar\";\nimport store from \"../store\";\nimport Vue from \"vue\";\nimport {\n  Input,\n  Option,\n  Popover,\n  Select\n} from \"element-ui\";\nVue.use(Input);\nVue.use(Option);\nVue.use(Popover);\nVue.use(Select);\n\nexport default {\n  name: \"SplitDialog\",\n  components: {\n    ContentVuer,\n    CustomSplitter,\n  },\n  props: {\n    entries: {\n      type: Array,\n      default: function() {\n        return [];\n      }\n    }\n  },\n  data: function() {\n    return {\n      styles: { }\n    }\n  },\n  methods: {\n    /**\n     * Callback when the vuers emit a selected event.\n     */\n    resourceSelected: function(result) {\n      this.$emit(\"resource-selected\", result);\n    },\n    getClass: function(id) {\n      if (this.isIdVisible(id)) {\n        return this.getRefsName(id);\n      } else {\n        return \"inactive\";\n      }\n    },\n    getRefsName: function(id) {\n      const refName = store.getters[\"splitFlow/getPaneNameById\"](id);\n      if (refName) {\n        if (!(refName in this.styles)) {\n          Vue.set(this.styles, refName, {});\n        }\n      }\n      return refName;\n    },\n    getStyle: function(id) {\n      /* \n        Set the style based on the position of the spltters \n        Header is 30px in height and the splitter is 1px in\n        height/width. The width, height and positon of the \n        viewer should take that into account.\n      */\n      const refName = this.getRefsName(id);\n      if (refName && refName in this.styles && this.styles[refName]) {\n        return this.styles[refName];\n      }\n      return {};\n    },\n    getActiveContents: function() {\n      const activeContents = [];\n      const vuers = this.$refs['content'];\n      if (vuers) {\n        vuers.forEach(vuer => {\n          if (vuer.isVisible())\n            activeContents.push(vuer);\n        });\n      }\n      return activeContents;\n    },\n    isIdVisible: function(id) {\n      const refName = store.getters[\"splitFlow/getPaneNameById\"](id);\n      return refName !== undefined;\n    },\n    sendSynchronisedEvent: function(resource) {\n      const activeContents = this.getActiveContents();\n      activeContents.forEach(content => {\n        content.receiveSynchronisedEvent(resource);\n      });\n    },\n    getContentsWithId: function(id) {\n      let contents = this.$refs[\"content\"];\n      for (let i = 0; i < contents.length; i++) {\n        if (contents[i].getId() == id) {\n          return contents[i];\n        }\n      }\n      return undefined;\n    },\n    getContentsState: function() {\n      let states = [];\n      let contents = this.$refs[\"content\"];\n      for (let i = 0; i < contents.length; i++) {\n        states.push(contents[i].getState());\n      }\n      return states;\n    },\n    calculateStyles: function(index) {\n      if (this.$refs) {\n        const refName = `pane-${index}`;\n        if (refName in this.$refs && this.$refs[refName] && this.$refs[refName].$el) {\n          const el = this.$refs[refName].$el;\n          const rect = el.getBoundingClientRect();\n          this.setStyles(refName, rect);\n        }\n      }\n    },\n    setStyles: function(refName, rect) {\n      if (this.$refs && ('tabContainer' in this.$refs)) {\n        const bound = this.$refs['tabContainer'].getBoundingClientRect();\n        const style = {};\n        style[\"width\"] = `${rect.width}px`;\n        style[\"left\"] = `${rect.left - bound.left}px`;\n        style[\"height\"] = `${rect.height}px`;\n        style[\"top\"] = `${rect.top - bound.top}px`;\n        console.log(refName, JSON.stringify(style));\n        Vue.set(this.styles, refName, style);\n      }\n    },\n    resize: function() {\n      this.__userResize__ = true;\n    },\n    resized: function(splitterName, event) {\n      if (this.__userResize__) {\n        store.commit(\"splitFlow/setSplitter\", {\n          name: splitterName,\n          value: event[0].size\n        });\n      }\n      this.__userResize__ = false;\n    }\n  },\n  computed: {\n    activeView: function() {\n      return store.state.splitFlow.activeView;\n    },\n    horizontal() {\n      if (store.state.splitFlow.activeView === \"2horpanel\") {\n        return true;\n      }\n      return false;\n    },\n    splitters() {\n      return store.state.splitFlow.splitters;\n    },\n    globalCallback() {\n      return store.state.splitFlow.globalCallback;\n    },\n  },\n  watch: {\n    globalCallback: {\n      handler: function(val) {\n        //Only activate for active\n        if (val) {\n          const contents = this.getActiveContents();\n          if (contents) {\n            contents.forEach(content => {\n              content.requestSynchronisedEvent(val);\n            });\n          }\n        } else {\n          //Turn sync off, this can be requested for all contents\n          const contents = this.$refs['content'];\n          if (contents) {\n            contents.forEach(content => {\n              content.requestSynchronisedEvent(false);\n            });\n          }\n        }\n      },\n      immediate: true,\n      deep: true\n    },\n  },\n  mounted: function () {\n    EventBus.$on(\"PaneResize\", payload => {\n      this.setStyles(payload.refName, payload.rect);\n    });\n  },\n};\n</script>\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/option\";\n@import \"~element-ui/packages/theme-chalk/src/popover\";\n@import \"~element-ui/packages/theme-chalk/src/select\";\n\n::v-deep .splitpanes.default-theme .splitpanes__pane {\n  background-color: #ccc !important;\n  position: relative;\n}\n\n::v-deep .splitpanes__splitter {\n  margin: 0px 0px 0px 0px !important;\n  z-index: 6 !important;\n  &::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    transition: opacity 0.4s;\n    background-color: rgba(131, 0, 191, 0.3) !important;\n    opacity: 0;\n    z-index: 7 !important;\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n::v-deep .splitpanes--horizontal > .splitpanes__splitter,\n::v-deep .splitpanes--vertical > .splitpanes__splitter {\n  background-color: #ccc !important;\n  border-left: unset;\n}\n\n::v-deep .splitpanes--horizontal > .splitpanes__splitter {\n  height: 1px;\n  &::before {\n    top: -2px;\n    height: 10px;\n    width: 100%;\n  }\n}\n\n::v-deep .splitpanes--vertical > .splitpanes__splitter {\n  width: 1px;\n  &::before {\n    left: -3px;\n    width: 11px;\n    height: 100%;\n  }\n}\n\n.tab-container {\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  left: 0px !important;\n  top: 0px !important;\n}\n\n.button-group {\n  position: absolute;\n  top: 1%;\n  right: 1%;\n}\n\n.contentvuer {\n  position: absolute;\n  transition: all 1s ease;\n  background: rgba(255, 255, 255, 1);\n\n  &.inactive {\n    display: none;\n    width: 0%;\n    height: 0%;\n    left: 0px;\n    top: 30px;\n  }\n}\n</style>\n"]}]}