{"version":3,"sources":["webpack:///./src/components/ui/AppTogglerControl.vue?df48","webpack:///src/components/ui/AppTogglerControl.vue","webpack:///./src/components/ui/AppTogglerControl.vue?f6aa","webpack:///./src/components/ui/AppTogglerControl.vue","webpack:///./src/components/ui/AppTogglerControl.vue?b26c"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","innerValue","attrs","title","tooltip","isRequired","_e","_b","isDisabled","isReadonly","on","handleFocus","handleBlur","handleChange","$attrs","staticRenderFns","name","components","AppTitleBox","model","prop","event","props","type","Boolean","String","default","value","data","watch","immediate","handler","methods","$emit","component"],"mappings":"mJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,sBAAsBC,MAAM,CAAE,+BAAgCP,EAAIQ,aAAc,CAACJ,EAAG,QAAQ,CAACE,YAAY,6BAA6B,CAAEN,EAAS,MAAEI,EAAG,gBAAgB,CAACE,YAAY,6BAA6BG,MAAM,CAAC,KAAO,QAAQ,MAAQT,EAAIU,MAAM,YAAcV,EAAIW,QAAQ,QAAUX,EAAIW,QAAQ,WAAaX,EAAIY,cAAcZ,EAAIa,KAAKT,EAAG,MAAM,CAACE,YAAY,oCAAoC,CAACF,EAAG,QAAQJ,EAAIc,GAAG,CAACR,YAAY,6BAA6BG,MAAM,CAAC,KAAO,WAAW,SAAWT,EAAIe,WAAW,SAAWf,EAAIgB,YAAYC,GAAG,CAAC,MAAQjB,EAAIkB,YAAY,KAAOlB,EAAImB,WAAW,OAASnB,EAAIoB,eAAe,QAAQpB,EAAIqB,QAAO,IAAQjB,EAAG,MAAM,CAACE,YAAY,mCAAmC,MACzyBgB,EAAkB,GCgCtB,G,UAAA,CACEC,KAAM,oBACNC,WAAY,CACVC,YAAa,WAAjB,yDAEEC,MAAO,CACLC,KAAM,QACNC,MAAO,SAETC,MAAO,CACLjB,WAAY,CACVkB,KAAMC,SAERrB,MAAO,CACLoB,KAAME,OACNC,QAAS,IAEXC,MAAO,CACLJ,KAAMC,SAERpB,QAAS,CACPmB,KAAME,OACNC,QAAS,IAEXlB,WAAY,CACVe,KAAMC,SAERf,WAAY,CACVc,KAAMC,UAGVI,KAAM,SAAR,UACA,qBAEEC,MAAO,CACLF,MAAO,CACLG,WAAW,EACXC,QAFN,SAEA,GACQrC,KAAKO,WAAa0B,KAIxBK,QAAS,CAKPnB,aALJ,WAMWnB,KAAKc,aACRd,KAAKO,YAAcP,KAAKO,WACxBP,KAAKuC,MAAM,QAASvC,KAAKO,cAO7BW,WAfJ,SAeA,GACMlB,KAAKuC,MAAM,OAAQZ,IAMrBV,YAtBJ,SAsBA,GACMjB,KAAKuC,MAAM,QAASZ,OClGgV,I,wBCQtWa,EAAY,eACd,EACA1C,EACAuB,GACA,EACA,KACA,WACA,MAIa,aAAAmB,E,2CCnBf,yBAAmkB,EAAG","file":"js/chunk-0b58db82.5af54342.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"app-toggler-control\",class:{ 'app-toggler-control--checked': _vm.innerValue }},[_c('label',{staticClass:\"app-toggler-control__main\"},[(_vm.title)?_c('app-title-box',{staticClass:\"app-toggler-control__title\",attrs:{\"size\":\"small\",\"title\":_vm.title,\"isTooltip\":!!_vm.tooltip,\"tooltip\":_vm.tooltip,\"isRequired\":_vm.isRequired}}):_vm._e(),_c('div',{staticClass:\"app-toggler-control__toggle-wrap\"},[_c('input',_vm._b({staticClass:\"app-toggler-control__input\",attrs:{\"type\":\"checkbox\",\"disabled\":_vm.isDisabled,\"readonly\":_vm.isReadonly},on:{\"focus\":_vm.handleFocus,\"blur\":_vm.handleBlur,\"change\":_vm.handleChange}},'input',_vm.$attrs,false)),_c('div',{staticClass:\"app-toggler-control__toggle\"})])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    class=\"app-toggler-control\"\n    :class=\"{ 'app-toggler-control--checked': innerValue }\"\n  >\n    <label class=\"app-toggler-control__main\">\n      <app-title-box\n        v-if=\"title\"\n        class=\"app-toggler-control__title\"\n        size=\"small\"\n        :title=\"title\"\n        :isTooltip=\"!!tooltip\"\n        :tooltip=\"tooltip\"\n        :isRequired=\"isRequired\"\n      ></app-title-box>\n      <div class=\"app-toggler-control__toggle-wrap\">\n        <input\n          class=\"app-toggler-control__input\"\n          type=\"checkbox\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @change=\"handleChange\"\n          v-bind=\"$attrs\"\n          :disabled=\"isDisabled\"\n          :readonly=\"isReadonly\"\n        />\n        <div class=\"app-toggler-control__toggle\"></div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AppTogglerControl',\n  components: {\n    AppTitleBox: () => import('@/components/common/AppTitleBox'),\n  },\n  model: {\n    prop: 'value',\n    event: 'input',\n  },\n  props: {\n    isRequired: {\n      type: Boolean,\n    },\n    title: {\n      type: String,\n      default: '',\n    },\n    value: {\n      type: Boolean,\n    },\n    tooltip: {\n      type: String,\n      default: '',\n    },\n    isDisabled: {\n      type: Boolean,\n    },\n    isReadonly: {\n      type: Boolean,\n    },\n  },\n  data: (vm) => ({\n    innerValue: vm.value,\n  }),\n  watch: {\n    value: {\n      immediate: true,\n      handler(value) {\n        this.innerValue = value;\n      },\n    },\n  },\n  methods: {\n    /**\n     * Действие на событие change\n     * @param event\n     */\n    handleChange() {\n      if (!this.isDisabled) {\n        this.innerValue = !this.innerValue;\n        this.$emit('input', this.innerValue);\n      }\n    },\n    /**\n     * Действие на событие blur\n     * @param event\n     */\n    handleBlur(event) {\n      this.$emit('blur', event);\n    },\n    /**\n     * Действие на событие focus\n     * @param event\n     */\n    handleFocus(event) {\n      this.$emit('focus', event);\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.app-toggler-control {\n  $root: &;\n\n  position: relative;\n  width: 100%;\n\n  &__main {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 7px 12px;\n    cursor: pointer;\n    background: $white;\n    border: 1px solid $gray-light;\n    border-radius: 2px;\n    transition: border $A;\n\n    &:hover {\n      border-color: $color-brand-green;\n    }\n  }\n\n  &__title {\n    margin-bottom: 8px;\n  }\n\n  &__toggle-wrap {\n    // -\n  }\n\n  &__toggle {\n    position: relative;\n    height: 20px;\n\n    &::before {\n      position: relative;\n      display: inline-block;\n      width: 38px;\n      height: 20px;\n      content: '';\n      background: #ececec;\n      border-radius: 100px;\n    }\n\n    &::after {\n      position: absolute;\n      top: 1px;\n      left: 1px;\n      display: inline-block;\n      width: 18px;\n      height: 18px;\n      content: '';\n      background: #fff;\n      border-radius: 100px;\n      transition: all 0.15s linear;\n    }\n  }\n\n  &__input {\n    display: none;\n  }\n\n  &--checked {\n    #{$root}__toggle {\n      &::before {\n        content: '';\n        background: #02b55f;\n      }\n\n      &::after {\n        left: 19px;\n        content: '';\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppTogglerControl.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppTogglerControl.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AppTogglerControl.vue?vue&type=template&id=6b350e1f&scoped=true&\"\nimport script from \"./AppTogglerControl.vue?vue&type=script&lang=js&\"\nexport * from \"./AppTogglerControl.vue?vue&type=script&lang=js&\"\nimport style0 from \"./AppTogglerControl.vue?vue&type=style&index=0&id=6b350e1f&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"6b350e1f\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppTogglerControl.vue?vue&type=style&index=0&id=6b350e1f&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppTogglerControl.vue?vue&type=style&index=0&id=6b350e1f&lang=scss&scoped=true&\""],"sourceRoot":""}