{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/flatmapvuer/src/components/TreeControls.vue?vue&type=style&index=0&id=413b54c8&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/flatmapvuer/src/components/TreeControls.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"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:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9jaGVja2JveCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9yb3ciOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvdHJlZSI7CgouY2hlY2tib3gtY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGN1cnNvcjogcG9pbnRlcjsKfQoKLnRyZWUtY29udHJvbHMgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBib3R0b206IDBweDsKICB0cmFuc2l0aW9uOiBhbGwgMXMgZWFzZTsKCiAgJjpmb2N1cyB7CiAgICBvdXRsaW5lOiBub25lOwogIH0KfQoKLmNvbnRhaW5lciB7CiAgdGV4dC1hbGlnbjogbGVmdDsKICBvdmVyZmxvdzogbm9uZTsKICBwYWRkaW5nLXRvcDogN3B4OwogIHBhZGRpbmctYm90dG9tOiAxNnB4OwogIGJhY2tncm91bmQ6ICNmZmZmZmY7Cn0KCi50aXRsZS10ZXh0IHsKICB3aWR0aDogNTlweDsKICBoZWlnaHQ6IDIwcHg7CiAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC13ZWlnaHQ6IG5vcm1hbDsKICBsaW5lLWhlaWdodDogMjBweDsKICBtYXJnaW4tbGVmdDogOHB4Owp9CgouYWxsLWNoZWNrYm94IHsKICBmbG9hdDogcmlnaHQ7Cn0KCi50cmVlLWNvbnRhaW5lciB7CiAgd2lkdGg6IDI2MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIHJnYigxNDQsIDE0NywgMTUzKTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgYmFja2dyb3VuZDogI2ZmZmZmZjsKICBtYXJnaW4tdG9wOiA2cHg7CiAgc2Nyb2xsYmFyLXdpZHRoOiB0aGluOwoKICA6OnYtZGVlcCAuZWwtdHJlZSB7CiAgICBtYXgtaGVpZ2h0OiAyNDBweDsKICAgIG1pbi1oZWlnaHQ6IDEzMHB4OwogICAgb3ZlcmZsb3c6IGF1dG87CiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7CiAgICAgIHdpZHRoOiA0cHg7CiAgICB9CgogICAgJjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIgewogICAgICBib3JkZXItcmFkaXVzOiAxMHB4OwogICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgNnB4ICNjMGM0Y2M7CiAgICB9CiAgfQoKICA6OnYtZGVlcCAuZWwtdHJlZS1ub2RlX19jb250ZW50IHsKICAgIGhlaWdodDogMjJweDsKICB9Cn0KCjo6di1kZWVwIC5lbC1jaGVja2JveF9faW5wdXQgewogICYuaXMtaW5kZXRlcm1pbmF0ZSwKICAmLmlzLWNoZWNrZWQgewogICAgLmVsLWNoZWNrYm94X19pbm5lciB7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICAgICAgYm9yZGVyLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7CiAgICB9CiAgfQp9Cgo6OnYtZGVlcCAuZWwtdHJlZS1ub2RlX19jaGlsZHJlbiAuZWwtdHJlZS1ub2RlX19jaGlsZHJlbiAuZWwtdHJlZS1ub2RlX19jb250ZW50ID4gbGFiZWwuZWwtY2hlY2tib3ggewogIGRpc3BsYXk6IG5vbmU7Cn0KCjo6di1kZWVwIC5lbC1jaGVja2JveF9fbGFiZWwgewogIHBhZGRpbmctbGVmdDogNXB4OwogIGNvbG9yOiAkYXBwLXByaW1hcnktY29sb3IgIWltcG9ydGFudDsKICBmb250LXNpemU6IDEycHg7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBsZXR0ZXItc3BhY2luZzogMHB4OwogIGxpbmUtaGVpZ2h0OiAxNHB4Owp9CgouYWN0aXZlSXRlbSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2JiYiAhaW1wb3J0YW50Owp9CgoucmVnaW9uLXRyZWUtbm9kZSB7CiAgZmxleDogMTsKICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yICFpbXBvcnRhbnQ7CiAgZGlzcGxheTogZmxleDsKICBmb250LXNpemU6IDEycHg7CiAgbGluZS1oZWlnaHQ6IDE0cHg7CiAgcGFkZGluZy1sZWZ0OiAwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICB3aWR0aDogMTAwJTsKCn0KCi5ob3Zlckl0ZW0gewogIGJhY2tncm91bmQtY29sb3I6ICNlZWUgIWltcG9ydGFudDsKfQoK"},{"version":3,"sources":["TreeControls.vue"],"names":[],"mappings":";AAsHA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA","file":"TreeControls.vue","sourceRoot":"node_modules/@abi-software/flatmapvuer/src/components","sourcesContent":["<template>\n  <div class=\"container\">\n    <el-row>\n      <el-col :span=\"12\">\n        <div class=\"title-text\">\n          Systems\n        </div>\n      </el-col>\n    </el-row>\n    <div class=\"tree-container\">\n      <el-tree\n        ref=\"tree\"\n        node-key=\"key\"\n        show-checkbox\n        :check-strictly=\"false\"\n        :data=\"treeData\"\n        :render-after-expand=\"false\"\n        :default-expanded-keys=\"defaultExpandedKeys\"\n        @check=\"checkChanged\"\n      >\n        <span\n          slot-scope=\"{ node, data }\"\n          class=\"region-tree-node\"\n          :class=\"{\n            activeItem: nodeIsActive(data),\n            hoverItem: nodeIsHover(data),\n          }\"\n          @click=\"changeActiveByNode(data)\"\n          @mouseover=\"changeHoverByNode(data)\"\n        >\n          <div :style=\"getBackgroundStyles(data)\">\n            {{ node.label }}\n          </div>\n        </span>\n      </el-tree>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport { Checkbox, CheckboxGroup, ColorPicker, Row, Tree } from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\nlocale.use(lang);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(ColorPicker);\nVue.use(Row);\nVue.use(Tree);\n\n/**\n * A vue component for toggling visibility of various regions.\n */\nexport default {\n  name: \"TreeControls\",\n  props: {\n    treeData: {\n      type: Array,\n      default: function () {\n        return [];\n      }\n    },\n    active: {\n      type: String,\n      default: \"\"\n    },\n    hover: {\n      type: String,\n      default: \"\"\n    }\n  },\n  data: function () {\n    return {\n      defaultExpandedKeys: [\"All\"],\n    };\n  },\n  destroyed: function () {\n    this.sortedPrimitiveGroups = undefined;\n  },\n  methods: {\n    nodeIsActive: function(data) {\n      return this.active === data.models;\n    },\n    nodeIsHover: function(data) {\n      return this.hover === data.models;\n    },\n    changeActiveByNode: function(data) {\n      if (data.models) {\n        this.$emit(\"change-active\", data.models);\n      }\n    },\n    changeHoverByNode: function() {\n      //if (data.models) {\n      //  this.$emit(\"change-active\", data.models);\n      //}\n    },\n    checkChanged: function (node, data) {\n      const isChecked = data.checkedKeys.includes(node.key);\n      if (node.key === \"All\") {\n        this.$emit(\"checkAll\", isChecked);\n      } else {\n        this.$emit(\"changed\", {key: node.key, value: isChecked});\n      }\n    },\n    getBackgroundStyles: function(node) {\n      if ('colour' in node) {\n        return { background: node.colour };\n      }\n      return {};\n    },\n  },\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/checkbox\";\n@import \"~element-ui/packages/theme-chalk/src/row\";\n@import \"~element-ui/packages/theme-chalk/src/tree\";\n\n.checkbox-container {\n  display: flex;\n  cursor: pointer;\n}\n\n.tree-controls {\n  position: absolute;\n  bottom: 0px;\n  transition: all 1s ease;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.container {\n  text-align: left;\n  overflow: none;\n  padding-top: 7px;\n  padding-bottom: 16px;\n  background: #ffffff;\n}\n\n.title-text {\n  width: 59px;\n  height: 20px;\n  color: rgb(48, 49, 51);\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  margin-left: 8px;\n}\n\n.all-checkbox {\n  float: right;\n}\n\n.tree-container {\n  width: 260px;\n  border: 1px solid rgb(144, 147, 153);\n  border-radius: 4px;\n  background: #ffffff;\n  margin-top: 6px;\n  scrollbar-width: thin;\n\n  ::v-deep .el-tree {\n    max-height: 240px;\n    min-height: 130px;\n    overflow: auto;\n    &::-webkit-scrollbar {\n      width: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      box-shadow: inset 0 0 6px #c0c4cc;\n    }\n  }\n\n  ::v-deep .el-tree-node__content {\n    height: 22px;\n  }\n}\n\n::v-deep .el-checkbox__input {\n  &.is-indeterminate,\n  &.is-checked {\n    .el-checkbox__inner {\n      background-color: $app-primary-color;\n      border-color: $app-primary-color;\n    }\n  }\n}\n\n::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__content > label.el-checkbox {\n  display: none;\n}\n\n::v-deep .el-checkbox__label {\n  padding-left: 5px;\n  color: $app-primary-color !important;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0px;\n  line-height: 14px;\n}\n\n.activeItem {\n  background-color: #bbb !important;\n}\n\n.region-tree-node {\n  flex: 1;\n  color: $app-primary-color !important;\n  display: flex;\n  font-size: 12px;\n  line-height: 14px;\n  padding-left: 0px;\n  background-color: #fff;\n  width: 100%;\n\n}\n\n.hoverItem {\n  background-color: #eee !important;\n}\n\n</style>\n\n"]}]}