{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/DialogToolbarContent.vue?vue&type=script&lang=js&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/DialogToolbarContent.vue","mtime":1691447163859},{"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:Ci8qIGVzbGludC1kaXNhYmxlIG5vLWFsZXJ0LCBuby1jb25zb2xlICovCmltcG9ydCBWdWUgZnJvbSAidnVlIjsKaW1wb3J0IEV2ZW50QnVzIGZyb20gJy4vRXZlbnRCdXMnOwppbXBvcnQgc3RvcmUgZnJvbSAnLi4vc3RvcmUnOwppbXBvcnQge01hcFN2Z0ljb259IGZyb20gJ0BhYmktc29mdHdhcmUvc3ZnLXNwcml0ZSc7CmltcG9ydCBTZWFyY2hDb250cm9scyBmcm9tICcuL1NlYXJjaENvbnRyb2xzJzsKCmltcG9ydCB7CiAgQnV0dG9uLAogIENvbCwKICBJY29uLAogIElucHV0LAogIFBvcG92ZXIsCiAgUmFkaW8sCiAgUm93LAogIFN3aXRjaAp9IGZyb20gImVsZW1lbnQtdWkiOwoKVnVlLnVzZShCdXR0b24pOwpWdWUudXNlKENvbCk7ClZ1ZS51c2UoSWNvbik7ClZ1ZS51c2UoSW5wdXQpOwpWdWUudXNlKFBvcG92ZXIpOwpWdWUudXNlKFJhZGlvKTsKVnVlLnVzZShSb3cpOwpWdWUudXNlKFN3aXRjaCk7Ci8qKgogKiBDbXBvbmVudCBmb3IgdGhlIGhlYWRlciBvZiBkaWZmZXJudCB2dWVycy4KICovCmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAiRGlhbG9nVG9vbGJhckNvbnRlbnQiLAogIGNvbXBvbmVudHM6IHsKICAgIE1hcFN2Z0ljb24sCiAgICBTZWFyY2hDb250cm9scywKICB9LAogIHByb3BzOiB7CiAgICAvKioKICAgICAqIEFycmF5IG9mIHRpdGxlcy4KICAgICAqLwogICAgbnVtYmVyT2ZFbnRyaWVzOiB7CiAgICAgIHR5cGU6IE51bWJlciwKICAgICAgZGVmYXVsdDogMAogICAgfSwKICAgIC8qKgogICAgICogRGlzcGxheSBpY29ucyBmb3IgZG9ja2luZywgdW5kb2NraW5nIGFuZCBldGMuCiAgICAgKi8KICAgIHNob3dJY29uczogewogICAgICB0eXBlOiBCb29sZWFuLAogICAgICBkZWZhdWx0OiB0cnVlCgogICAgfSwKICAgIC8qKgogICAgICogVGhlIGN1cnJlbnQgYWN0aXZlIHRpdGxlLgogICAgICovCiAgICBhY3RpdmVJZDogewogICAgICB0eXBlOiBOdW1iZXIsCiAgICAgIGRlZmF1bHQ6IC0xCiAgICB9LAogICAgc2hvd0hlbHBJY29uOiB7CiAgICAgIHR5cGU6IEJvb2xlYW4sCiAgICAgIGRlZmF1bHQ6IHRydWUKICAgIH0sCiAgfSwKICBjb21wdXRlZDogewogICAgYWN0aXZlVmlldygpIHsKICAgICAgcmV0dXJuIHN0b3JlLnN0YXRlLnNwbGl0Rmxvdy5hY3RpdmVWaWV3OwogICAgfSwKICAgIGhlbHBEZWxheSgpIHsKICAgICAgcmV0dXJuIHN0b3JlLnN0YXRlLnNldHRpbmdzLmhlbHBEZWxheTsKICAgIH0sCiAgICBzaGFyZUxpbmsoKSB7CiAgICAgIHJldHVybiBzdG9yZS5zdGF0ZS5zZXR0aW5ncy5zaGFyZUxpbms7CiAgICB9LAogICAgc3luY01vZGUoKSB7CiAgICAgIHJldHVybiBzdG9yZS5zdGF0ZS5zcGxpdEZsb3cuc3luY01vZGU7CiAgICB9LAogICAgdmlld0ljb25zKCkgewogICAgICByZXR1cm4gc3RvcmUuc3RhdGUuc3BsaXRGbG93LnZpZXdJY29uczsKICAgIH0sCiAgICBnbG9iYWxDYWxsYmFjaygpIHsKICAgICAgcmV0dXJuIHN0b3JlLnN0YXRlLnNwbGl0Rmxvdy5nbG9iYWxDYWxsYmFjazsKICAgIH0KICB9LAogIHdhdGNoOiB7CiAgICBzaGFyZUxpbms6IGZ1bmN0aW9uKCkgewogICAgICB0aGlzLmxvYWRpbmdMaW5rID0gZmFsc2U7CiAgICB9LAogICAgaW5kZXBlbmRlbnQ6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgIGxldCBmbGFnID0gISh2YWx1ZSA9PT0gdHJ1ZSk7CiAgICAgIGlmICh0aGlzLmdsb2JhbENhbGxiYWNrICE9PSBmbGFnKQogICAgICAgIHN0b3JlLmNvbW1pdCgic3BsaXRGbG93L3RvZ2dsZUdsb2JhbENhbGxiYWNrIiwgZmxhZyk7CiAgICB9LAogICAgZ2xvYmFsQ2FsbGJhY2s6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgIGxldCBmbGFnID0gISh2YWx1ZSA9PT0gdHJ1ZSk7CiAgICAgIGlmIChmbGFnICE9PSB0aGlzLmluZGVwZW5kZW50KQogICAgICAgIHRoaXMuaW5kZXBlbmRlbnQgPSBmbGFnOwogICAgfQogIH0sCiAgZGF0YTogZnVuY3Rpb24oKSB7CiAgICByZXR1cm4gewogICAgICBpc0Z1bGxzY3JlZW46IGZhbHNlLAogICAgICBsb2FkaW5nTGluazogdHJ1ZSwKICAgICAgc2hhcmVMaW5rRGlzcGxheTogZmFsc2UsCiAgICAgIGluZGVwZW5kZW50OiB0cnVlLAogICAgICBmYWlsZWRTZWFyY2g6IHVuZGVmaW5lZCwKICAgIH0KICB9LAogIG1ldGhvZHM6IHsKICAgIHRpdGxlQ2xpY2tlZDogZnVuY3Rpb24oaWQpIHsKICAgICAgdGhpcy4kZW1pdCgidGl0bGVDbGlja2VkIiwgaWQpOwogICAgfSwKICAgIHN0YXJ0SGVscDogZnVuY3Rpb24oKXsKICAgICAgRXZlbnRCdXMuJGVtaXQoInN0YXJ0SGVscCIpOwogICAgfSwKICAgIG9uRnVsbHNjcmVlbjogZnVuY3Rpb24oKSB7CiAgICAgIHRoaXMuJGVtaXQoIm9uRnVsbHNjcmVlbiIpOwogICAgICB0aGlzLmlzRnVsbHNjcmVlbiA9ICF0aGlzLmlzRnVsbHNjcmVlbjsKICAgIH0sCiAgICBjbG9zZTogZnVuY3Rpb24oKSB7CiAgICAgIHRoaXMuJGVtaXQoImNsb3NlIik7CiAgICB9LAogICAgY29weVNoYXJlTGluazogZnVuY3Rpb24oKSB7CiAgICAgIGlmIChkb2N1bWVudCkgewogICAgICAgIHRoaXMuJHJlZnMubGlua0lucHV0LiRlbC5xdWVyeVNlbGVjdG9yKCJpbnB1dCIpLnNlbGVjdCgpOwogICAgICAgIGRvY3VtZW50LmV4ZWNDb21tYW5kKCdjb3B5Jyk7CiAgICAgIH0KICAgIH0sCiAgICBzZXRGYWlsZWRTZWFyY2g6IGZ1bmN0aW9uKHJlc3VsdCkgewogICAgICB0aGlzLmZhaWxlZFNlYXJjaCA9IHJlc3VsdDsKICAgIH0sCiAgICBnZXRTaGFyZUxpbms6IGZ1bmN0aW9uKCkgewogICAgICB0aGlzLmxvYWRpbmdMaW5rID0gdHJ1ZTsKICAgICAgdGhpcy5zaGFyZUxpbmtEaXNwbGF5ID0gdHJ1ZTsKICAgICAgRXZlbnRCdXMuJGVtaXQoInVwZGF0ZVNoYXJlTGlua1JlcXVlc3RlZCIpOwogICAgfSwKICAgIHZpZXdDbGlja2VkOiBmdW5jdGlvbih2aWV3KSB7CiAgICAgIHN0b3JlLmNvbW1pdCgic3BsaXRGbG93L3VwZGF0ZUFjdGl2ZVZpZXciLCB2aWV3KTsKICAgIH0KICB9LAp9Owo="},{"version":3,"sources":["DialogToolbarContent.vue"],"names":[],"mappings":";AAsIA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;;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","file":"DialogToolbarContent.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div class=\"header\">\n    <search-controls\n      @search=\"$emit('local-search', {term: $event});\"\n      @fetch-suggestions=\"$emit('fetch-suggestions', {data: $event});\"\n      :failedSearch=\"failedSearch\"\n    />\n    <div class=\"switch-control\">\n      <el-switch\n        v-if=\"syncMode\"\n        class=\"switch\"\n        v-model=\"independent\"\n        active-text=\"Independent\"\n        :width=30\n        inactive-text=\"Linked\">\n      </el-switch>\n      <el-popover v-if=\"syncMode\" class=\"tooltip\"\n        placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\">\n        <div>\n            When in Linked mode the two maps will interact \n            <br>\n            together. Select an organ in one and it will\n            <br>\n            be automatically selected in the other.\n            <br>\n            In Independent mode the maps will work separately.\"\n          </div>\n        <map-svg-icon icon=\"help\"  slot=\"reference\" class=\"sync-help header-icon\"/>\n      </el-popover>\n    </div>\n    <el-row class=\"icon-group\">\n      <el-popover\n        ref=\"viewPopover\"\n        placement=\"bottom\"\n        width=\"133\"\n        :appendToBody=false\n        trigger=\"click\"\n        popper-class=\"view-icon-popover\">\n        <el-row :gutter=\"20\"\n          v-for=\"item in viewIcons\"\n          :key=\"item.name\"\n          :class=\"[{ 'active': item.icon ==  activeView},\n            {'disabled': item.min > numberOfEntries},\n            'view-icon-row']\"\n          @click.native=\"viewClicked(item.icon)\"\n        >\n          <el-col :span=\"4\">\n            <map-svg-icon :icon=\"item.icon\"\n              class=\"view-icon\"/>\n          </el-col>\n          <el-col :offset=\"2\" :span=\"18\" class=\"view-text\">\n            {{item.name}}\n          </el-col>\n        </el-row>\n      </el-popover>\n      <el-popover class=\"tooltip\"  content=\"Split screen\" placement=\"bottom-end\"\n        :open-delay=\"helpDelay\" :appendToBody=false trigger=\"hover\"\n        popper-class=\"header-popper\"\n      >\n        <map-svg-icon :icon=\"activeView\"\n          v-popover:viewPopover\n          :class=\"[{'disabled': (1 >= numberOfEntries)},\n            'header-icon']\"\n          slot=\"reference\"/>\n      </el-popover>\n      <el-popover class=\"tooltip\" content=\"Help\" placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\" v-show=\"showHelpIcon\" >\n        <map-svg-icon icon=\"tooltips\" slot=\"reference\" class=\"header-icon\" @click.native=\"startHelp()\"/>\n      </el-popover>\n      <el-popover v-show=\"!isFullscreen\" class=\"tooltip\"\n        content=\"Fullscreen\" placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\">\n          <map-svg-icon icon=\"fullScreen\"  slot=\"reference\" class=\"header-icon\" @click.native=\"onFullscreen\"/>\n      </el-popover>\n      <el-popover v-show=\"isFullscreen\" class=\"tooltip\"\n        content=\"Exit fullscreen\" placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\">\n          <map-svg-icon icon=\"closeFullScreen\" slot=\"reference\" class=\"header-icon\"\n            @click.native=\"onFullscreen\"/>\n      </el-popover>\n      <el-popover\n        ref=\"linkPopover\"\n        placement=\"bottom-end\"\n        width=\"400\"\n        :appendToBody=false\n        trigger=\"click\"\n        popper-class=\"link-popover\"\n      >\n        <el-row :gutter=\"20\"\n          v-loading=\"loadingLink\"\n          element-loading-text=\"Creating link...\"\n          element-loading-spinner=\"el-icon-loading\">\n          <el-col :span=\"20\">\n            <el-input\n              class=\"link-input\"\n              size=\"mini\"\n              placeholder=\"Permanant Link Here\"\n              :readonly=true\n              v-model=\"shareLink\"\n              ref=\"linkInput\">\n            </el-input>\n          </el-col>\n          <el-col :span=\"4\">\n            <el-popover class=\"tooltip\" content=\"Copy link\" placement=\"bottom-end\"\n              :open-delay=\"helpDelay\" :appendToBody=false trigger=\"hover\"\n              popper-class=\"header-popper\">\n            <el-button slot=\"reference\" class=\"copy-button\"\n              icon=\"el-icon-document-copy\" size=\"mini\"\n              @click=\"copyShareLink\"></el-button>\n            </el-popover>\n          </el-col>\n        </el-row>\n      </el-popover>\n      <el-popover class=\"tooltip\"  content=\"Get permalink\" placement=\"bottom-end\"\n        :open-delay=\"helpDelay\" :appendToBody=false trigger=\"hover\"\n        popper-class=\"header-popper\"\n        v-show=\"shareLink\">\n        <map-svg-icon icon=\"permalink\"\n          v-popover:linkPopover\n          class=\"header-icon\"\n          @click.native=\"getShareLink\"\n          slot=\"reference\"/>\n      </el-popover>\n      <el-popover class=\"tooltip\" content=\"Close\" placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\" v-show=\"showIcons\">\n        <map-svg-icon icon=\"close\" slot=\"reference\" class=\"header-icon\" @click.native=\"close\"/>\n      </el-popover>\n    </el-row>\n  </div>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport EventBus from './EventBus';\nimport store from '../store';\nimport {MapSvgIcon} from '@abi-software/svg-sprite';\nimport SearchControls from './SearchControls';\n\nimport {\n  Button,\n  Col,\n  Icon,\n  Input,\n  Popover,\n  Radio,\n  Row,\n  Switch\n} from \"element-ui\";\n\nVue.use(Button);\nVue.use(Col);\nVue.use(Icon);\nVue.use(Input);\nVue.use(Popover);\nVue.use(Radio);\nVue.use(Row);\nVue.use(Switch);\n/**\n * Cmponent for the header of differnt vuers.\n */\nexport default {\n  name: \"DialogToolbarContent\",\n  components: {\n    MapSvgIcon,\n    SearchControls,\n  },\n  props: {\n    /**\n     * Array of titles.\n     */\n    numberOfEntries: {\n      type: Number,\n      default: 0\n    },\n    /**\n     * Display icons for docking, undocking and etc.\n     */\n    showIcons: {\n      type: Boolean,\n      default: true\n\n    },\n    /**\n     * The current active title.\n     */\n    activeId: {\n      type: Number,\n      default: -1\n    },\n    showHelpIcon: {\n      type: Boolean,\n      default: true\n    },\n  },\n  computed: {\n    activeView() {\n      return store.state.splitFlow.activeView;\n    },\n    helpDelay() {\n      return store.state.settings.helpDelay;\n    },\n    shareLink() {\n      return store.state.settings.shareLink;\n    },\n    syncMode() {\n      return store.state.splitFlow.syncMode;\n    },\n    viewIcons() {\n      return store.state.splitFlow.viewIcons;\n    },\n    globalCallback() {\n      return store.state.splitFlow.globalCallback;\n    }\n  },\n  watch: {\n    shareLink: function() {\n      this.loadingLink = false;\n    },\n    independent: function(value) {\n      let flag = !(value === true);\n      if (this.globalCallback !== flag)\n        store.commit(\"splitFlow/toggleGlobalCallback\", flag);\n    },\n    globalCallback: function(value) {\n      let flag = !(value === true);\n      if (flag !== this.independent)\n        this.independent = flag;\n    }\n  },\n  data: function() {\n    return {\n      isFullscreen: false,\n      loadingLink: true,\n      shareLinkDisplay: false,\n      independent: true,\n      failedSearch: undefined,\n    }\n  },\n  methods: {\n    titleClicked: function(id) {\n      this.$emit(\"titleClicked\", id);\n    },\n    startHelp: function(){\n      EventBus.$emit(\"startHelp\");\n    },\n    onFullscreen: function() {\n      this.$emit(\"onFullscreen\");\n      this.isFullscreen = !this.isFullscreen;\n    },\n    close: function() {\n      this.$emit(\"close\");\n    },\n    copyShareLink: function() {\n      if (document) {\n        this.$refs.linkInput.$el.querySelector(\"input\").select();\n        document.execCommand('copy');\n      }\n    },\n    setFailedSearch: function(result) {\n      this.failedSearch = result;\n    },\n    getShareLink: function() {\n      this.loadingLink = true;\n      this.shareLinkDisplay = true;\n      EventBus.$emit(\"updateShareLinkRequested\");\n    },\n    viewClicked: function(view) {\n      store.commit(\"splitFlow/updateActiveView\", view);\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/button\";\n@import \"~element-ui/packages/theme-chalk/src/loading\";\n@import \"~element-ui/packages/theme-chalk/src/icon\";\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/popover\";\n@import \"~element-ui/packages/theme-chalk/src/radio\";\n@import \"~element-ui/packages/theme-chalk/src/row\";\n@import \"~element-ui/packages/theme-chalk/src/switch\";\n@import \"../assets/header-icon.scss\";\n\n.content {\n  width:calc(100% - 120px);\n  height:32px;\n}\n\n.radio-control {\n  position:absolute;\n  justify-content: center;\n  top: 4px;\n  right:12px;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.icon-group {\n  ::v-deep .el-button--text {\n    color:#606266;\n    font-size: 1.5em;\n    &:hover {\n      color: $app-primary-color;\n    }\n  }\n}\n\n.icon-transform {\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n  -ms-transform: rotate(90deg);\n  transform: rotate(90deg);\n  padding:10px;\n}\n\n.header {\n  height:32px;\n}\n\n::v-deep .header-popper {\n  padding: 6px 4px;\n  font-size:12px;\n  color: rgb(48, 49, 51);\n  background-color: #f3ecf6;\n  border: 1px solid $app-primary-color;\n  white-space: nowrap;\n  min-width: unset;\n  &.el-popper[x-placement^=bottom] {\n    .popper__arrow {\n      border-bottom-color: $app-primary-color !important;\n      &:after {\n        border-bottom-color: #f3ecf6 !important;\n      }\n    }\n  }\n}\n\n::v-deep .link-popover {\n  border: 1px solid $app-primary-color;\n}\n\n::v-deep .el-loading-spinner {\n  i, .el-loading-text {\n    color: $app-primary-color;\n  }\n}\n\n.copy-button {\n  color:#FFFFFF;\n  background-color:$app-primary-color;\n  &:hover, &:focus {\n    color:#FFFFFF;\n    background-color:$app-primary-color;\n    box-shadow: -3px 2px 4px #000000; \n  }\n}\n\n.link-input {\n  ::v-deep .el-input__inner {\n    color:#303133;\n    &:focus {\n      border-color:$app-primary-color;\n    }\n  }\n}\n\n.view-icon-row {\n  height: 32px;\n  width: 133px;\n  border-radius: 4px;\n  border: 1px solid rgb(151, 151, 151);\n  font-size: 14px;\n  margin:8px 0px 0px 0px!important;\n  cursor: pointer;\n\n  &.active {\n    border: 1px solid $app-primary-color;\n    background: rgba(131, 0, 191, 0.1);\n  }\n}\n\n.view-icon {\n  font-size: 1.7em;\n  color: $app-primary-color;\n  padding-top:3px;\n}\n\n.view-text {\n  letter-spacing:0px;\n  font-size:11px;\n  line-height:14px;\n  font-family:'Asap', 'Avenir',  Arial, sans-serif;\n  font-weight:550;\n  padding-top:7px;\n}\n\n::v-deep .view-icon-popover {\n  border: 1px solid $app-primary-color;\n  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);\n  padding: 4px 8px 12px 8px;\n  min-width:unset!important;\n  cursor:default;\n  &.el-popper[x-placement^=bottom] {\n    .popper__arrow {\n      border-bottom-color: $app-primary-color !important;\n      &:after {\n        border-bottom-color: #fff !important;\n      }\n    }\n  }\n}\n\n.switch-control {\n  width:250px;\n  top:2px;\n  left: calc(50% - 60px);\n  position: absolute;\n  .sync-help {\n    left:5px;\n  }\n}\n\n.switch {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n  border-radius: 4px;\n  border: 1px solid rgb(220, 223, 230);\n  vertical-align: baseline;\n  ::v-deep .el-switch__label.is-active {\n    color: $purple;\n  }\n  ::v-deep .el-switch__core {\n    background: $app-primary-color;\n    border: 1px solid $lightGrey;\n    height: 14px;\n    &::before {\n      content: \"\";\n      position:absolute;\n      top: -3px;\n      left: -1px;\n      border-radius: 100%;\n      -webkit-transition: all .3s;\n      transition: all .3s;\n      width: 19px;\n      height: 19px;\n      background-color: $app-primary-color;\n    }\n    &::after {\n      top: -2px;\n      left: 0px;\n      width: 17px;\n      height: 17px;\n      background-color: $cochlear;\n    }\n  }\n  ::v-deep &.is-checked {\n    .el-switch__core {\n      border: 1px solid $lightGrey;\n      background: $cochlear;\n      &::before {\n        left: 100%;\n        margin-left:-17px;\n      }    \n      &::after {\n        left: 100%;\n        margin-left: -16px;\n      }\n    }\n  }\n}\n\n.sync-help {\n  margin-left: 5px;\n}\n\n</style>\n"]}]}